Guard

Authing 是一个企业级身份认证提供商，其集成了 OAuth、LDAP、OIDC 等多种身份认证和授权解决方案。

Guard 套件是 Authing 提供的浏览器端单点登录解决方案，开发者可基于此框架在浏览器端实现单点登录的页面及逻辑。

Guard 套件现在可以完全替代 LoginForm 项目，在工程上更易接入，启动速度加快。

Guard 提供的表单拥有以下基本功能：

• 邮箱／密码登录注册
• 忘记密码以及重置密码
• 记住账号功能（加密存储到浏览器本地）
• 社会化登录
• 小程序扫码登录（需先在后台配置）
• 响应式特性
• SSO

安装

通过 CDN 安装

<!-- 施工中-->
<script src="https://cdn.authing.cn/sdk/javascript/authing-guard.js"></script>

通过 NPM 安装

$ npm install @authing/authing-guard --save

接着你可以使用以下方式引入 AuthingGuard：

import AuthingGuard from '@authing/authing-guard';

快速生成登录表单 UI

Guard 套件可以用于快速生成登录表单。这里以 Vue 为例。

App.vue

<template>
  <div id="app">
    <div id="my-form"></div>
  </div>
</template>

<script>
  import Guard from "@authing/authing-guard";
  export default {
    name: "app",
    mounted() {
      // 因为没有涉及到云上 SSO 类应用，所以 appDomain 可以设置为 undefined
      const clientId = "你的用户池 ID";
      const guard = new Guard(clientId, undefined, {
        logo: "https://usercontents.authing.cn/client/logo@2.png",
        title: "Authing",
        // 把表单插入到 id 为 my-app-mount-id 的标签
        mountId: "my-form"
      });
      guard.on("authenticated", data => {
        console.log(data);
      });
      guard.on("register", data => {
        console.log(data);
      });
    }
  }
</script>

API

new AuthingGuard(appId, domain, options)

初始化一个新的 AuthingGuard 实例，需要传入你在 Authing 对应应用中的 appId 和域名信息。

• appId {String}: Authing SSO 类应用的 appId；
• domain {String}: Authing 中配置的 域名. 通常是 <appDomain>.authing.cn；
• options {Object}: 允许你自定义表单的 UI，相关参数请参考 自定义

示例

var appId = "YOUR_AUTHING_OAuth_APPID";
var domain = "example.authing.cn";
var guard = new AuthingGuard(appId, domain, {
  isSSO: true
});

guard.on('login', (userInfo) => {
  console.log('用户登录成功', userInfo);

  // Update DOM

});

guard.on('login-error', (error) => {
  console.log('用户登录失败', error);
  
  // Handle error 

})

如果你想获取其他事件，请参考这里。

authing 对象

如果你想获取 authing 对象以调用用户接口，请使用如下代码：

authenticated 事件是 Authing 对象初始化后的回调事件。

guard.on('authing-load', (authing) => {
  console.log('Authing 实例初始化成功', authing);

  // authing.login
  // authing.register
  // authing.logout
  // authing.checkLoginStaus
  // ...
  // 更多请参考：https://docs.authing.cn/#/user_service/user_service
});

show(mountId)

显示登录表单，同时允许覆盖初始化时的配置。

• mountId {String}: 指定 Authing form 将在何处显示，接受一个 html 元素 id，不含#号。不指定则默认全屏弹出 Modal 登录框。

示例

// 没有 mountId，会全屏挂载
guard.show();

// 将会挂载在 mountId 上
guard.show('mountId');

hide()

隐藏表单

示例

guard.hide();

on(event, callback)

Guard 会在以下生命周期中触发相应事件：

自定义

Guard 提供的表单拥有以下基本功能：

• 邮箱／密码登录注册
• 忘记密码以及重置密码
• 记住账号功能（加密存储到浏览器本地）
• 社会化登录（需先在后台配置）
• 小程序扫码登录（需先在后台配置）
• 响应式特性
• SSO

点击体验 或 在 jsfiddle 上尝试。

UI 定制

以下是完整的参数列表：

浏览器兼容性

兼容 Chrome、Safari、Firefox 和 Edge。

问题报告

如果你遇到问题，请打开 Issue 提出问题。

开发者信息

Authing

License

This project is licensed under the MIT license. See the LICENSE file for more info.