1. Development Integration
  2. /
  3. Single Page Web Application
  4. /
  5. Javascript

原生 JavaScript 登录组件

Update time: 2025-07-23 07:34:21
Edit

GenAuth 登录组件（Guard）是一种可嵌入的登录表单，可根据你的需求进行配置，建议用于单页面应用程序。它使你可以轻松添加各种社会化登录方式，以便你的用户可以无缝登录，并且在不同平台拥有一致的登录体验。Guard 为开发者屏蔽了很多底层认证的实现细节，同时也包括繁琐的 UI 开发。

Guard 可以通过组件化的形式集成到你的原生 JavaScript 项目中，你可以借助此组件快速实现登录认证流程。

查看旧版 原生 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 快速修复支持。

示例

首先你要在 GenAuth 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("GEN_AUTH_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("GEN_AUTH_APP_ID");

完整体验

这是一个最简单的 Guard 组件的在线 codepen (opens new window) 演示。可以将 AppId 修改为你自己的 ID 直接在这里展示。

监听登录事件

你可以通过 guard.on("login", callback) 监听登录事件：

guard.on("login", (user) => {
  console.log(user);
});
了解获取用户信息之后该怎么做？

After obtaining the user information, you can get the user's identity credentials (the token field of the user information). You can carry this token in the subsequent request sent by the client to the backend server. Take axios as an example:

const axios = require("axios");
axios
  .get({
    url: "https://yourdomain.com/api/v1/your/resources",
    headers: {
      Authorization: "Bearer ID_TOKEN",
    },
  })
  .then((res) => {
    // custom codes
  });

In the backend interface, you need to check the legitimacy of this token to verify the user's identity. For details on the verification method, please see Verify User Identity Credentials (token). After identifying the user, you may also need to manage permissions for the user to determine whether the user has permission to operate the API.

添加社会化登录

在初始化参数 config 中传入 socialConnections 列表指定需要显示的社会化登录（默认显示该应用配置的所有社会化登录）。

<script>
  var guard = new AuthingNativeJsUIComponents.Guard("GEN_AUTH_APP_ID", {
    socialConnections: ["github"],
  });
</script>
查看支持的社会化登录列表及接入流程

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

Social Login MethodUsage ScenarioDocumentation
PC WeChat QR CodePC WebsiteDocumentation
WeChat MobileMobile APPDocumentation
WeChat Web AuthorizationWeChat Web PageDocumentation
WeChat Official Account ScanningPC WebsiteDocumentation
WeChat Mini ProgramWeChat Mini ProgramDocumentation (opens new window)
WeChat PC Mini Program QR CodePC WebsiteDocumentation
WeChat Mini Program App LaunchMobile APPDocumentation
Tencent QQPC WebsiteDocumentation
Tencent QQ MobileMobile APPDocumentation
Sina WeiboPC WebsiteDocumentation
Sina Weibo MobileMobile APPDocumentation
GitHubPC WebsiteDocumentation
GitHub MobileMobile APPDocumentation
FacebookPC WebsiteDocumentation
Facebook MobileMobile APPDocumentation
TwitterPC WebsiteDocumentation
Twitter MobileMobile APPDocumentation
Google WebPC WebsiteDocumentation
Google MobileMobile APPDocumentation
Apple WebPC WebsiteDocumentation
Apple MobileMobile APPDocumentation
Alipay WebPC WebsiteDocumentation
Alipay MobileMobile APPDocumentation
SlackPC WebsiteDocumentation
Slack MobileMobile APPDocumentation
GiteePC WebsiteDocumentation
GitLabPC WebsiteDocumentation
GitLab MobileMobile APPDocumentation
BaiduPC WebsiteDocumentation
Baidu MobileMobile APPDocumentation
LinkedInPC WebsiteDocumentation
LinkedIn MobileMobile APPDocumentation
NetEase Yidun (One-click Login)Mobile APPDocumentation
QingCloudPC WebsiteDocumentation
InstagramPC WebsiteDocumentation
Douyin MobileMobile APPDocumentation
Douyin Mini ProgramMobile APPDocumentation (opens new window)
Kuaishou MobileMobile APPDocumentation
Xiaomi MobileMobile APPDocumentation
Line MobileMobile APPDocumentation

实现单点登录

使用 Guard 进行单点登录只需要初始化的时候设置 isSSO 为 true 即可：

<script>
  var guard = new AuthingNativeJsUIComponents.Guard("GEN_AUTH_APP_ID", {
    isSSO: true,
  });
</script>

实例方法

Guard 实例提供了三个方法：

方法名方法参数功能
on

evtName: 事件名，详细请查看事件列表

Handler: 对应事件的处理函数

监听某个事件
show-modal 模式中显示表单
hide-modal 模式中隐藏表单

完整参数

GenAuth 登录组件（Guard）提供了很多高级配置，如自定义 UI，使用特定登录方式等。详细请见完整参数列表。

事件列表

事件名事件说明事件参数事件参数说明
loadGenAuth appId 验证通过，加载完成authClientAuthenticationClient 对象，可直接操作 login， register，详情请查看 SDK 库 (opens new window)
load-errorGenAuth 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错误信息
closemodal 模式中 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 同上

私有化部署

私有化部署场景需要指定你私有化的 GenAuth 服务的 GraphQL 端点（不带协议头和 Path），如果你不清楚可以联系 GenAuth IDaaS 服务管理员。

<script>
  var guard = new AuthingNativeJsUIComponents.Guard("GEN_AUTH_APP_ID", {
    host: "https://core.you-authing-service.com",
  });
</script>

获取帮助

请访问 GenAuth 论坛 (opens new window)。