Authing Guard 文档Web Guard
指南
在线体验
社区
博客
更新日志
关于
Github
  • 使用指南

    • 介绍
    • 安装
    • 快速开始
    • 初始配置
    • 类型定义
  • 基础

    • 创建一个 Authing 应用 (opens new window)
    • 了解 Guard 使用模式
    • 控制台配置与本地配置
  • API

    • 登录
    • 登出
    • 获取用户信息
    • 切换视图
    • 事件
    • 切换语言
    • 自定义样式
    • 刷新 Token
    • 操作登录注册协议
  • 高级功能

    • 使用 JS SDK
    • SSO 单点登录
    • 第三方身份源登录
    • MFA 多因素认证
    • 配置安全域
    • 私有化部署

¶ 安装

你可以选择 CDN 或 NPM 方式安装并使用 Guard,无论使用哪一种安装方式,你都需要用到 Authing 应用的 APP ID,请先前往 Authing 控制台 创建一个应用 并获取 APP ID。关于 APP ID 所在位置,请参阅 应用配置。

¶ CDN 引入

通过 Authing CDN 可以看到 Guard 最新版本的资源,在页面上引入 js 和 css 文件即可开始使用:

<script type="text/javascript" src="https://cdn.authing.co/packages/guard/latest/guard.min.js"></script>
<link rel="stylesheet" href="https://cdn.authing.co/packages/guard/latest/guard.min.css" />

也可以切换版本选择需要的资源,如:

<script type="text/javascript" src="https://cdn.authing.co/packages/guard/6.0.0/guard.min.js"></script>
<link rel="stylesheet" href="https://cdn.authing.co/packages/guard/6.0.0/guard.min.css" />

¶ 示例

通过 CDN 可以快速使用 Guard 写出一个示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Authing Guard</title>
  <script type="text/javascript" src="https://cdn.authing.co/packages/guard/latest/guard.min.js"></script>
  <link rel="stylesheet" href="https://cdn.authing.co/packages/guard/latest/guard.min.css" />
</head>

<body>
  <div id="authing-guard-container"></div>

  <script>
    const guard = new GuardFactory.Guard({
      appId: 'AUTHING_APP_ID'
    })

    guard.start('#authing-guard-container').then(userInfo => {
      console.log('userInfo in start: ', userInfo)
    })
  </script>
</body>
</html>

¶ NPM 安装

推荐使用 npm 来安装,享受生态圈和工具带来的便利,更好地和 webpack 配合使用,当然,我们也推荐使用 ES2015。

# 兼容 React 16 / 17
npm install --save @authing/guard-react
# OR
yarn add @authing/guard-react

# 兼容 React 18
npm install --save @authing/guard-react18
# OR
yarn add @authing/guard-react18
# 兼容 Vue 2
npm install --save @authing/guard-vue2

# OR

yarn add @authing/guard-vue2
# 兼容 Vue 3
npm install --save @authing/guard-vue3

# OR

yarn add @authing/guard-vue3
# 兼容 Angular 14
npm install --save @authing/guard-angular

# OR

yarn add @authing/guard-angular

如果你使用了 NPM 安装,并使用 webpack 作为构建工具,请继续阅读 快速开始 章节。

上一篇: 介绍 下一篇: 快速开始
  • CDN 引入
  • 示例
  • NPM 安装

用户身份管理

集成第三方登录
手机号闪验
通用登录表单组件
自定义认证流程

企业内部管理

单点登录
多因素认证
权限管理

开发者

开发文档
框架集成
博客
GitHub
社区用户中心

公司

400 888 2106
sales@authing.cn
北京市朝阳区北辰世纪中心 B 座 16 层(总)
成都市高新区天府五街 200 号 1 号楼 B 区 4 楼 406 室(分)

京ICP备19051205号

beian京公网安备 11010802035968号

© 北京蒸汽记忆科技有限公司