# 手动调用接口接入社会化登录

# 配置回调链接

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

drawing

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

此方式仅适用于 Web 端的社会化登录,如果你需要在移动 App 内发起社会化登录,请阅读相关社会化登录服务商的文档。

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

以下是每一个 Web 社会化登录对应的授权页面链接,其中 YOUR_APP_ID 为你的应用 ID(注意不是用户池 ID),你可以在应用列表和应用详情页面查看到应用 ID。

社会化登录方式 社会化登录授权链接
GitHub (opens new window) https://core.authing.cn/connection/social/github?app_id=<YOUR_APP_ID>
微信 PC 扫码 (opens new window) https://core.authing.cn/connection/social/wechat:pc?app_id=<YOUR_APP_ID>
微信网页授权 (opens new window) https://core.authing.cn/connection/social/wechat:webpage-authorization?app_id=<YOUR_APP_ID>
企业微信内部应用扫码登录 (opens new window) https://core.authing.cn/connection/social/wechatwork:corp:qrconnect?app_id=<YOUR_APP_ID>
企业微信第三方应用扫码登录 (opens new window) https://core.authing.cn/connection/social/wechatwork:service-provider:qrconnect?app_id=<YOUR_APP_ID>
钉钉 (opens new window) https://core.authing.cn/connection/social/dingtalk?app_id=<YOUR_APP_ID>
新浪微博 (opens new window) https://core.authing.cn/connection/social/weibo?app_id=<YOUR_APP_ID>
QQ (opens new window) https://core.authing.cn/connection/social/qq?app_id=<YOUR_APP_ID>
Google (opens new window) https://core.authing.cn/connection/social/google?app_id=<YOUR_APP_ID>
支付宝 (opens new window) https://core.authing.cn/connection/social/alipay?app_id=<YOUR_APP_ID>
Sign in with Apple (opens new window) https://core.authing.cn/connection/social/apple:web?app_id=<YOUR_APP_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