网页应用获取openid

我的收藏

使用场景

本能力适用于开发者的Web 网页应用页面，在抖音应用内 Webview 容器里打开时的场景，通过拼接好链接，用户访问该链接后允许自动获取 openid。

注意：当前仅面向抖音支付场景邀约开放。

整体流程说明

抖音用户访问链接后，抖音会重定向到第三方网站，并且带上授权临时票据 code 参数。

通过 code，ClientKey 和 ClientSecret 作为参数，调用 API 换取 access_token。

通过 access_token 进行接口调用，获取用户基本数据或帮助用户实现基本操作。

详情请参见授权概述。

前提条件

在使用抖音 OAuth2.0 授权接入之前，您需要成功创建一个网站应用并通过开放平台审核，详细操作流程见创建移动应用和网站应用。

在「抖音开放平台首页」>「右上角控制台」>「我的应用」>「网站应用」>「应用信息」页面获取 ClientKey 和 ClientSecret。

ClientKey 对应的应用必须具备 login_id 这个 scope 的权限，当前仅通过白名单形式面向抖音支付商家应用开放，可提前联系开通相关能力权限。

需前置配置在抖音开放平台-控制台 -应用的开发设置中，配置重定向URL。

操作步骤

步骤一：获取授权code

把链接中的参数 client_key 和 redirect_uri 的值替换后，在抖音端内访问该链接：

https://aweme.snssdk.com/passport/open/silent_auth/?client_key=CLIENT_KEY&response_type=code&scope=login_id&redirect_uri=REDIRECT_URI

参数说明：

参数名称	参数类型	参数描述	是否必填	备注
client_key	string	应用唯一标识	true	必须具备login_id这个scope权限
scope	string	应用授权作用域，填'login_id'即可	true	填login_id
response_type	string	填'code'即可	true	填code
redirect_uri	string	授权成功后跳转的URL，用于处理code换token等过程注意：redirect_uri 中不支持携带自定义 query 参数	true	应用的回调地址注意：回调地址的URL需要配置在`抖音开放平台-控制台 -应用的开发设置` 中
state	string	用于保持请求和回调的状态，可用于CSRF校验或者传递参数	false

请求成功后，会重定向到redirect_uri，并且带上 code。例如：redirect_uri?code=CODE

步骤二：通过授权码 code 获取 open_id

授权临时票据 code 可以在重定向后的页面链接参数上获取，获取的 code 用来调用接口 /oauth/access_token/ 换取用户 open_id 。

结果验证

授权临时票据 code 可以在重定向后的页面链接参数上拿到。

•

如果拿到 code ，并成功换取用户 open_id 说明已成功授权。

•

如果拿到 errCode ，请根据错误码进行排查，详见：状态码

常见问题

重定向后没有 code

请检查回调域名参数是否填写正确，以及 redirect_uri 应与网站应用配置中的“授权回调域”是否一致。

如何在redirect_uri中携带 query 参数？

出于安全考虑，对于新添加的重定向URL，不再支持直接携带参数。

•

错误示例：https://dev.example.com/auth/callback/?id=1

如果需要在redirect_uri里携带参数，可以把参数进行encode后存放在state中，用户完成授权后页面重定向到开发者页面，此时再对 state 参数进行 decode 处理，如

function base64UrlEncode(str) {
  let base64 = btoa(str);
  return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
}

function base64UrlDecode(str) {
  str = str.replace(/-/g, "+").replace(/_/g, "/"); // 将 URL 安全的字符替换为 Base64 字符
  while (str.length % 4) {
    str += "=";
  }
  return atob(str); // 解码 Base64 字符串
}

let state = base64UrlEncode(encodeURIComponent('{"id":1,"b":"测试"}')); // encode后拼接到授权链接上
let url = `https://aweme.snssdk.com/passport/open/silent_auth/?client_key=xxx&state=${state}&response_type=xxx...`;

decodeURIComponent(base64UrlDecode(state)); // 用户授权完成后重定向到开发者页面，decode处理