# 手动调用接口接入社会化登录
# 配置回调链接
你需要在社会化登录的配置页面设置回调链接(Callback URL),用户完成登录之后将会跳转到该回调地址:
# 引导用户跳转到社会化登录授权页
此方式仅适用于 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。