# 接入 Web 端社会化登录

drawing

Authing 社会化登录支持两种模式:托管模式手动模式,以下是两种模式的对比:

  • 托管模式:使用 Authing 提供的内置登录表单,无需手写一行代码,适合大多数通用场景。
  • 手动模式:手动引导进入社会化登录授权页面,最后手动解析用户数据,适合你有自定义登录页面的场景。

# 以托管模式接入

你可以在控制台应用 - 应用列表 页面查询自己的应用列表:

drawing

点击配置按钮进入其中一个应用的配置页面,每个应用都会有一个登录回调 URL,用户完成登录之后浏览器会跳转到该地址:

drawing

社会化登录这个 Tab 可以配置该应用开启哪些社会化登录方式:

drawing

点击体验按钮可进入登录页面,点击最下方的社会化登录按钮,用户在第三方社会化登录服务商完成登录之后,会提示登录成功,之后会跳转到应用的回调链接。在这个页面你可以进行换取用户信息等操作。

drawing

# 以手动模式接入

手动模式接入流程分为以下几步:

你需要在社会化登录的配置页面设置回调链接(Callback URL),用户完成登录之后将会跳转到该回调地址:

drawing

# 引导用户跳转到社会化登录授权页

此操作应该在浏览器完成。你可以在 Web 页面上放置一个可点击的按钮或 Logo 链接到上面的链接以便用户可以点击登录。

以下是每一个 Web 社会化登录对应的授权页面链接:

社会化登录方式 社会化登录授权链接
GitHub (opens new window) https://core.authing.cn/connection/social/github/<YOUR_USERPOOL_ID>
微信 PC 扫码 (opens new window) https://core.authing.cn/connection/social/wechat:pc/<YOUR_USERPOOL_ID>
微信网页授权 (opens new window) https://core.authing.cn/connection/social/wechat:webpage-authorization/<YOUR_USERPOOL_ID>
企业微信内部应用扫码登录 (opens new window) https://core.authing.cn/connection/social/wechatwork:corp:qrconnect/<YOUR_USERPOOL_ID>
企业微信第三方应用扫码登录 (opens new window) https://core.authing.cn/connection/social/wechatwork:service-provider:qrconnect/<YOUR_USERPOOL_ID>
钉钉 (opens new window) https://core.authing.cn/connection/social/dingtalk/<YOUR_USERPOOL_ID>
新浪微博 (opens new window) https://core.authing.cn/connection/social/weibo/<YOUR_USERPOOL_ID>
QQ (opens new window) https://core.authing.cn/connection/social/qq/<YOUR_USERPOOL_ID>
Google (opens new window) https://core.authing.cn/connection/social/google/<YOUR_USERPOOL_ID>

# 处理 Authing 回调请求

上一步用户同意授权之后,会先跳转到 Authing 服务器,之后 Authing 会携带用户信息跳转到开发者在 Authing 控制台中配置的业务回调链接,并附带以下 Get 请求参数:

参数 说明
code 错误或成功代码,200 为成功,非 200 为失败
message 成功或错误信息
data userInfo,若 code 为非 200 不返回此参数

部分浏览器和 Web Server 在 URL 过长的情况下有可能出现 404,如 ASP.NET,这个时候需要修改一下配置,具体方式请见这个 StackOverflow 回答 (opens new window)

以下是使用 JavaScript 从 URL 参数中获取用户数据的代码:

// 获取 URL 参数
function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}

// 将 Code 转为 Int 类型,方便判断
const code = parseInt(getQueryString("code"));

if (code !== 200) {
  // 出错了
  const errorMsg = getQueryString("message");
  // 展示 errorMsg 给用户或执行其他业务 ...
} else {
  const userInfo = getQueryString("data");

  // 将 token 存储到 localStorage
  // 建议在之后的请求中附带 Token,并由后端验证 Token 合法性
  localStorage.setItem("token", userInfo.token);
}

# 完成接入

获取到用户信息之后,你可以得到登录凭证 token,你可以在后续的 API 请求中携带上此 token, 然后在后端接口中根据此 token 区分不同用户,详情请见验证 token