# 接入 Web 端社会化登录

接入 Web 端社会化登录

在线体验地址：https://sample-sso.authing.cn/ (opens new window)

Authing 社会化登录支持三种模式：SDK 调用、 托管模式和手动模式，以下是两种模式的对比：

使用 JavaScrit SDK（推荐）：使用 Authing 提供的 JavaScript SDK，几行代码即可接入。
使用 Guard for Web 登录表单组件（推荐）: 使用 Authing 提供的 Guard for Web 登录表单组件，该组件内置集成了社会化登录功能。
托管模式（推荐）：使用 Authing 提供的内置登录表单，无需手写一行代码，适合大多数通用场景。
手动模式：手动引导进入社会化登录授权页面，最后手动解析用户数据，适合你有自定义登录页面的场景。

社会化登录方式	唯一标志符
微信 PC 扫码 (opens new window)	`wechat:pc`
微信网页授权 (opens new window)	`wechat:webpage-authorization`
企业微信内部应用扫码登录 (opens new window)	`wechatwork:corp:qrconnect`
企业微信第三方应用扫码登录 (opens new window)	`wechatwork:service-provider:qrconnect`
GitHub (opens new window)	`github`
钉钉 (opens new window)	`dingtalk`
新浪微博 (opens new window)	`weibo`
QQ (opens new window)	`qq`
Google (opens new window)	`google`

# 使用 JavaScript SDK

此方式适用于自己实现登录界面的场景。

比如要使用 GitHub 社会化登录，只需要以下几行代码：

通过应用 ID 初始化 AuthenticationClient，你可以通过以下方式获取到应用 ID:

调用 authenticationClient.social.authorize 方法，第一次参数传入 github, 第二个参数指定 onSuccess 和 onError 回调函数。

import { AuthenticationClient } from "authing-js-sdk"

const authenticationClient = new AuthenticationClient({
   appId: "YOUR_APP_ID",
})

// 使用 GitHub 登录
await authenticationClient.social.authorize("github", {
   onSuccess: (user) => { console.log(user) },
   onError: (code, message) => {  },
})

# 以托管模式接入

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

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

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

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

# 以手动模式接入

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

接入 Web 端社会化登录

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

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

此操作应该在浏览器完成。你可以在 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。