¶ 原生 JavaScript 登录组件
Authing 登录组件（Guard）是一种可嵌入的登录表单，可根据你的需求进行配置，建议用于单页面应用程序。它使你可以轻松添加各种社会化登录方式，以便你的用户可以无缝登录，并且在不同平台拥有一致的登录体验。Guard 为开发者屏蔽了很多底层认证的实现细节，同时也包括繁琐的 UI 开发。
Guard 可以通过组件化的形式集成到你的原生 JavaScript 项目中，你可以借助此组件快速实现登录认证流程。
¶ 版本
稳定版本：
(opens new window)
¶ 安装
¶ 使用 npm 或者 yarn 安装
我们这里推荐使用 npm 或 yarn，它们能更好的和 webpack (opens new window) 打包工具进行配合，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
$ npm install @authing/native-js-ui-components --save
$ yarn add @authing/native-js-ui-components
如果你的网络环境不佳，我们推荐你使用 cnpm (opens new window)。
¶ 浏览器引入
在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 AuthingNativeJsUIComponents。
我们在 npm 发布包内的 @authing/native-js-ui-components/lib 目录下提供了 index.min.css 以及 index.min.js。
你也可以通过 (opens new window) 或者 unpkg.com (opens new window) 进行下载
index.min.css 以及 index.min.js。
强烈不推荐使用已构建文件，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。
¶ 示例
首先你要在 Authing Console (opens new window) 中获取你的 应用 ID。如果你不知道如何获取 应用 ID，可以参考文档
¶ 直接用 <script> 引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- JavaScript 代码 -->
<script src="https://cdn.jsdelivr.net/npm/@authing/native-js-ui-components"></script>
<!-- CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/@authing/native-js-ui-components/lib/index.min.css" rel="stylesheet">
</link>
</head>
<body>
<script>
var guard = new AuthingNativeJsUIComponents.Guard("AUTHING_APP_ID");
// 事件监听
guard.on("load", (authClient) => console.log(authClient));
</script>
</body>
</html>
¶ 在 JavaScript 项目中引入
import { Guard } from "@authing/native-js-ui-components";
// 引入 css 文件
import "@authing/native-js-ui-components/lib/index.min.css";
// 你的 APP ID
const guard = new Guard("AUTHING_APP_ID");
¶ 完整体验
这是一个最简单的 Guard 组件的在线 codepen (opens new window) 演示。可以将 AppId 修改为你自己的 ID 直接在这里展示。
¶ 监听登录事件
你可以通过 guard.on("login", callback) 监听登录事件：
guard.on("login", (user) => {
console.log(user);
});
了解获取用户信息之后该怎么做？
获取到用户信息之后，你可以得到用户的身份凭证（用户信息的 token 字段），你可以在客户端后续发送给后端服务器的请求中携带上此 token, 以 axios 为例：
const axios = require("axios");
axios
.get({
url: "https://yourdomain.com/api/v1/your/resources",
headers: {
Authorization: "Bearer ID_TOKEN",
},
})
.then((res) => {
// custom codes
});
在后端接口中需要检验此 token 的合法性，来验证用户的身份，验证方式详情请见验证用户身份凭证（token）。识别用户身份之后，你可能还需要对该用户进行权限管理，以判断用户是否对此 API 具备操作权限。
¶ 添加社会化登录
在初始化参数 config 中传入 socialConnections 列表指定需要显示的社会化登录（默认显示该应用配置的所有社会化登录）。
<script>
var guard = new AuthingNativeJsUIComponents.Guard("AUTHING_APP_ID", {
socialConnections: ["github"],
});
</script>
查看支持的社会化登录列表及接入流程
Authing 目前一共支持国内外将近 20 余种社会化登录，如微信、GitHub、Sign in with Apple、支付宝等，以下是完整的列表：
| 社会化登录方式 | 使用场景 | 使用文档 |
|---|---|---|
| PC 微信扫码 | PC 网站 | 使用文档 |
| 微信移动端 | 移动 APP | 使用文档 |
| 微信网页授权 | 微信内网页 | 使用文档 |
| 微信公众号关注 | PC 网站 | 使用文档 |
| 微信小程序 | 微信小程序 | 使用文档 (opens new window) |
| 微信 PC 小程序扫码 | PC 网站 | 使用文档 |
| App 拉起小程序 | 移动 APP | 使用文档 |
| 腾讯 QQ | PC 网站 | 使用文档 |
| 腾讯 QQ 移动端 | 移动 APP | 使用文档 |
| 新浪微博 | PC 网站 | 使用文档 |
| 新浪微博移动端 | 移动 APP | 使用文档 |
| GitHub | PC 网站 | 使用文档 |
| GitHub 移动端 | 移动 APP | 使用文档 |
| PC 网站 | 使用文档 | |
| Facebook 移动端 | 移动 APP | 使用文档 |
| PC 网站 | 使用文档 | |
| Twitter 移动端 | 移动 APP | 使用文档 |
| Google Web 端 | PC 网站 | 使用文档 |
| Google 移动端 | 移动 APP | 使用文档 |
| Apple Web 端 | PC 网站 | 使用文档 |
| Apple 移动端 | 移动 APP | 使用文档 |
| 支付宝 Web 端 | PC 网站 | 使用文档 |
| 支付宝移动端 | 移动 APP | 使用文档 |
| Slack | PC 网站 | 使用文档 |
| Slack 移动端 | 移动 APP | 使用文档 |
| Gitee | PC 网站 | 使用文档 |
| GitLab | PC 网站 | 使用文档 |
| GitLab 移动端 | 移动 APP | 使用文档 |
| 百度 | PC 网站 | 使用文档 |
| 百度移动端 | 移动 APP | 使用文档 |
| PC 网站 | 使用文档 | |
| LinkedIn 移动端 | 移动 APP | 使用文档 |
| 网易易盾（手机号一键登录） | 移动 APP | 使用文档 |
| 青云 QingCloud | PC 网站 | 使用文档 |
| PC 网站 | 使用文档 | |
| 抖音移动端 | 移动 APP | 使用文档 |
| 抖音小程序 | 移动 APP | 使用文档 (opens new window) |
| 快手移动端 | 移动 APP | 使用文档 |
| 小米移动端 | 移动 APP | 使用文档 |
| Line 移动端 | 移动 APP | 使用文档 |
¶ 实现单点登录
使用 Guard 进行单点登录只需要初始化的时候设置 isSSO 为 true 即可：
<script>
var guard = new AuthingNativeJsUIComponents.Guard("AUTHING_APP_ID", {
isSSO: true,
});
</script>
¶ 实例方法
Guard 实例提供了三个方法：
| 方法名 | 方法参数 | 功能 |
|---|---|---|
| on | evtName: 事件名，详细请查看事件列表 Handler: 对应事件的处理函数 | 监听某个事件 |
| show | - | modal 模式中显示表单 |
| hide | - | modal 模式中隐藏表单 |
¶ 完整参数
Authing 登录组件（Guard）提供了很多高级配置，如自定义 UI，使用特定登录方式等。详细请见完整参数列表。
¶ 事件列表
| 事件名 | 事件说明 | 事件参数 | 事件参数说明 |
|---|---|---|---|
| load | Authing appId 验证通过，加载完成 | authClient | AuthenticationClient 对象，可直接操作 login， register，详情请查看 SDK 库 (opens new window) |
| load-error | Authing appId 验证失败，加载失败 | error | 错误信息 |
| login | 用户登录成功 | user, authClient | user: 用户信息 authClient 同上 |
| login-error | 用户登录失败 | error | 错误信息，包含字段缺失／非法或服务器错误等信息 |
| register | 用户注册成功 | user, authClient | user: 用户信息 authClient 同上 |
| register-error | 用户注册失败 | error | 错误信息，包含字段缺失／非法或服务器错误等信息 |
| pwd-email-send | 忘记密码邮件发送成功 | - | - |
| pwd-email-send-error | 忘记密码邮件发送失败 | error | 错误信息 |
| pwd-phone-send | 忘记密码手机验证码发送成功 | - | - |
| pwd-phone-send-error | 忘记密码手机验证码发送失败 | error | 错误信息 |
| pwd-reset | 重置密码成功 | - | - |
| pwd-reset-error | 重置密码失败 | error | 错误信息 |
| close | modal 模式中 guard 关闭事件 | - | - |
| login-tab-change | 登录 tab 切换事件 | activeTab | 切换后的 tab |
| register-tab-change | 注册 tab 切换事件 | activeTab | 切换后的 tab |
| register-info-completed | 注册补充成功事件 | user, udfs, authClient | user: 用户信息 udfs: 补充的自定义字段信息 authClient 同上 |
| register-info-completed-error | 注册补充失败事件 | error, udfs, authClient | error: 错误信息 udfs: 补充的自定义字段信息 authClient 同上 |
¶ 私有化部署
私有化部署场景需要指定你私有化的 Authing 服务的 GraphQL 端点（不带协议头和 Path），如果你不清楚可以联系 Authing IDaaS 服务管理员。
<script>
var guard = new AuthingNativeJsUIComponents.Guard("AUTHING_APP_ID", {
host: "https://core.you-authing-service.com",
});
</script>