使用社会化登录认证

更新时间: 2021-11-17 04:15:22

社会化登录，是指用户使用社交平台的身份认证信息在第三方应用或网址进行认证登录的流程，比如大家经常使用个人微信、QQ、微博等社交账号登录滴滴、网易云音乐等。社会化登录不仅有助于简化用户在第三方平台的登录体验，同时也为用户在第三方平台创建新账号提供了一种更为简单便捷的方式。不论是对于普通用户来说，还是企业来说，社会化登录都有着无可比拟的优势。

社会化登录列表

Authing 目前一共支持国内外将近 20 余种社会化登录，如微信、GitHub、Sign in with Apple、支付宝等，以下是完整的列表：

社会化登录	使用场景	接入手册
微信 PC 扫码	PC 网站	查看接入文档
微信移动端	移动 APP	查看接入文档
微信网页授权登录	微信内网页	查看接入文档
公众号扫码登录	PC 网站	查看接入文档
微信小程序内登录	微信小程序	查看接入文档
微信小程序扫码登录	PC 网站	查看接入文档
App 拉起小程序登录	移动 APP	查看接入文档
企业微信（内部应用）扫码登录	PC 网站	查看接入文档
企业微信（第三方应用）扫码登录	PC 网站	查看接入文档
企业微信（第三方应用）网页授权登录	企业微信内网页	查看接入文档
GitHub	PC 网站	查看接入文档
Google	PC 网站	查看接入文档
Twitter	PC 网站	查看接入文档
Facebook	PC 网站	查看接入文档
钉钉	PC 网站	查看接入文档
微博	PC 网站	查看接入文档
QQ	PC 网站	查看接入文档
百度	PC 网站	查看接入文档
飞书企业自建应用	PC 网站	查看接入文档
飞书应用商店应用	PC 网站	查看接入文档
GitLab	PC 网站	查看接入文档
支付宝	移动 APP	查看接入文档
支付宝（Web 端）	PC 网站	查看接入文档
Sign in with Apple（Web 端）	PC 网站	查看接入文档
Sign in with Apple（移动端）	移动 APP	查看接入文档
Slack	PC 网站	查看接入文档
LinkedIn	PC 网站	查看接入文档

自定义社会化登录

Authing 提供接入自定义 OAuth2.0 身份提供商的能力，如果你需要连接非 Authing 内置的社会化登录身份源，可以阅读此指引。

微信解决方案

Authing 针对微信生态有一套完整的解决方案，你可以查看产品介绍 (opens new window)以及阅读打通微信账号体系指引。

选择合适的开发接入方式

Authing 社会化登录支持四种接入方式：使用 JavaScript SDK、使用嵌入登录组件、 使用托管登录页 和 手动调用社会化登录接口。每种不同的接入方式各有优劣点，你可以根据自己的业务需求来选择合适的方式。

优劣对比

以下是各种方式的优劣对比：

接入方式	优势	劣势	是否推荐
使用 JavaScript SDK	接入简单，只需要几行代码。可自定义程度最高。		是
使用嵌入登录组件	接入简单，只需要几行代码。可以将该组件集成到你的应用。自定义程度相对较高		是
使用托管登录页	运维简单，由 Authing 负责运维。每个用户池有一个独立的二级域名。	如果需要嵌入到你的应用，需要使用弹窗模式登录，即：点击登录按钮后，会弹出一个窗口，内容是 Authing 托管的登录页面，或者将浏览器重定向到 Authing 托管的登录页。	是
手动调用社会化登录接口		需要手动从 URL 解析用户信息。接入相对较为复杂麻烦。	不推荐

详细接入方法

以下是每种方式详细的接入方法：

选择接入方式

使用 SDK

Loading...

以 GitHub 社会化登录为例，只需要实现以下几行代码：

• 通过应用 ID 初始化 AuthenticationClient，你可以在控制台的应用列表页查看应用 ID。
• 调用 authenticationClient.social.authorize 方法，第一个参数传入 github, 第二个参数指定 onSuccess 和 onError 回调函数。
• 用户成功登录之后，你可以在 onSuccess 回调函数中得到用户信息；如果登录失败，可以在 onError 回调函数中获取到错误码和错误信息。完整的错误码请见: 错误码列表。

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

const authenticationClient = new AuthenticationClient({
  appId: "YOUR_APP_ID",
  appHost: 'https://xxx.authing.cn',
});

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