Authing 文档文档
快速开始
概念
使用指南
开发集成
应用集成
加入 APN
开发集成
多租户(内测版)
快速开始
概念
使用指南
开发集成
应用集成
加入 APN
开发集成
多租户(内测版)
旧版
使用指南
  • 快速开始

    • 认证你的第一个用户

      • 使用托管登录页完成认证
      • 使用内嵌登录组件完成认证
      • 使用 API & SDK 完成认证
      • 验证用户身份凭证(token)
      • 对用户进行权限管理
      • 实现退出登录
      • 接下来你可能需要
    • 不同类型应用的接入方式

      • 在传统 Web App 中集成 Authing
      • 在单页应用(SPA)中集成 Authing
      • 在移动端(iOS、Andriod)中集成 Authing
    • 控制台概览
  • 对用户进行认证

    • 使用账号密码认证
    • 使用短信验证码认证
    • 使用社会化登录认证
    • 使用扫码登录认证

      • 使用自建 App 扫码登录网站

        • 完整接口列表
        • 自定义配置项
      • 使用小程序扫码登录网站
    • 在小程序中进行认证
    • 手机号一键登录
    • 实现单点登录(SSO)
    • 在移动端实现单点登录
    • 多因素认证(MFA)

      • 基于时间戳算法的一次性密码(TOTP)的 MFA
      • 基于短信验证码的 MFA
      • 基于邮件验证码的 MFA
      • 通过 SDK 接入 MFA
    • 对认证流程进行扩展

      • 添加用户自定义字段
      • 添加部门自定义字段
      • IdToken 添加自定义字段
      • 使用自定义数据库对用户进行认证
      • 使用 Pipeline 对认证流程进行扩展
      • 使用 Webhook 监听认证事件
    • 对登录框进行个性化配置
  • 对用户进行权限管理

    • 选择合适的权限模型
    • 集成 RBAC 权限模型到你的应用系统
    • 集成 ABAC 权限模型到你的应用系统
    • 使用权限分组管理权限资源
    • 管理资源权限
  • 授权

    • 用户许可的资源授权
    • 机器间(M2M)授权
  • 管理用户账号

    • 用户字段释义
    • 管理员创建账号
    • 管理用户账号
    • 绑定账号
    • 管理用户的自定义数据
    • 查看用户的登录历史记录
    • 查看用户的地理位置
    • 增强账号的安全性
    • 管理用户的登录态
    • 控制用户能访问哪些应用
    • 用户分组
  • 管理用户目录

    • 用户目录配置项
    • 添加自定义用户字段
    • 搜索用户
    • 使用 LDAP 用户目录
  • 同步中心(BETA)

    • 快速开始
    • 创建同步任务

      • 获取应用配置项和权限

        • 获取飞书配置项和权限
        • 获取企业微信配置项和权限
        • 获取钉钉配置项和权限
        • 获取纷享销客配置项和权限
        • 获取其他应用配置项和权限
      • 自定义字段映射
      • 选择同步方式
    • 执行同步任务
    • 风险操作提示
    • 常见问题
  • 自建应用

    • 创建应用
    • 配置登录注册方式
    • 添加注册协议
    • 自定义登录框样式
    • 成为联邦认证身份源
    • 开启多因素认证
    • 子账号管理
  • 单点登录 SSO

    • 应用面板
    • 飞书工作台 SSO 方案
    • 企业微信 SSO 方案
    • 集成应用 SSO 方案
    • 自建应用 SSO 方案
    • 管理用户登录状态
    • ASA 表单代填
  • 成为联邦认证身份源

    • 成为 OpenID Connect 身份源
    • 成为 OAuth2.0 身份源
    • 成为 SAML2 身份源
    • 成为 CAS 身份源
  • 连接外部身份源(IdP)

    • 社会化身份源

      • 微信 PC 扫码
      • 微信 PC 小程序扫码
      • 微信公众号关注
      • 微信移动端
      • APP 拉起微信小程序
      • 微信网页授权
      • 微信小程序
      • 腾讯 QQ
      • 新浪微博
      • GitHub
      • Facebook
      • Twitter
      • Google
      • Apple 移动端
      • Apple Web 端
      • 支付宝
      • Slack
      • Gitee
      • GitLab
      • 百度
      • 网易易盾(一键登录)
      • 青云 QingCloud
      • Instagram
      • LinkedIn
    • 企业身份源

      • 企业微信自建应用扫码
      • 企业微信自建应用扫码(代开发模式)
      • 企业微信服务商应用扫码
      • 企业微信移动端
      • 钉钉 H5 微应用(企业内部开发)
      • 飞书应用商店应用
      • 飞书企业自建应用
      • Windows AD
      • Azure AD
      • OIDC
      • OAuth 2.0
      • LDAP
      • SAML
      • CAS
      • WeLink
    • 自定义数据库

      • 配置数据库连接和编写脚本
      • 惰性迁移用户到 Authing
      • 完全使用自定义数据库保存用户数据
      • 最佳实践
  • 打通微信生态
  • 迁移用户到 Authing

    • 使用 SDK 导入用户
    • 配置自定义密码函数
    • 从企业微信、钉钉等第三方身份源导入用户
  • 管理组织机构

    • 创建或导入组织机构
    • 管理组织机构
    • 管理成员生命周期
    • 使用 LDAP 协议对外开放组织机构数据
  • 自动化

    • 使用 Webhook 监听用户事件
    • 自定义认证流程(Pipeline)

      • 创建你的第一个 Pipeline 函数
      • Pipeline API Reference
      • Pipeline 的应用场景
      • Pipeline User 对象
      • Pipeline Context 对象
      • 在 Pipeline 中使用环境变量
      • 可用的 Node Modules
      • 如何调试
      • 常见问题
      • 私有化部署
    • 配置自定义密码函数
  • 审计日志

    • 用户行为的审计
    • 管理员行为的审计
  • 配置安全信息

    • 配置 Web 安全域
    • 配置密码强度
    • 配置注册频率限制
    • 配置登录失败次数限制
  • 配置用户池信息

    • 修改用户池基础信息
    • 配置邮件服务和模版
    • 配置短信服务和模版
    • 添加用户池协作管理员
    • 开发者配置
  • 部署方案

    • 基础部署模式
    • Docker 部署模式
    • Kubernetes 部署模式
    • 自定义域名配置方案
  • 常见问题 FAQs

    • 如何获取用户池 ID
    • 如何获取应用 ID
    • 如何验证用户身份凭证(token)
    • 如何识别用户来源
    • 在本地联表 Authing 用户与你的业务数据
    • 禁用第三方 Cookie 对 Authing 的影响
    • 如何部署中转代理服务器
    • 如何获取 Authing 服务器集群 IP
  1. 使用指南
  2. /
  3. 快速开始

  4. /
  5. 认证你的第一个用户
  6. /
  7. 使用内嵌登录组件完成认证

¶ 使用内嵌登录组件完成认证

更新时间: 2022-06-14 11:48:14
编辑

内嵌登录组件(Guard)被认为是灵活性和集成之间的最佳平衡。如果集成需要更深入的自定义级别或一些前后端分离的场景中无法使用托管模式,则建议使用组此模式。内嵌登录组件由 Authing 构建和更新,使用行业最佳实践安全性设计,仅需要几行 JavaScript 代码就可以集成到你开发的项目中。它可以直接从 CDN 或 NPM 加载,也可以从源代码构建。Authing 登录组件同时提供 Javascript 原生、React、Vue 和 Angular 的多种集成模式,在你的任何项目中都可以无缝集成并享有高度自定义灵活性。更加详细的介绍请见 登录组件 (Guard)文档。

你可以点此了解 Authing 托管的登录页(Hosted)和内嵌登录组件(Embedded)的区别。

¶ 内嵌登录组件介绍

Authing 内嵌登录组件中集成了以下功能:

  • 登录:包含账号密码登录(包括手机号 + 密码、邮箱 + 密码、用户名 + 密码)和 手机号验证码登录;
  • 注册:包含手机验证码注册和用户名密码注册;
  • 社会化登录,如 GitHub 登录(需先在后台配置);
  • APP 扫码登录(需先接入 APP 扫码登录);
  • 小程序扫码登录(需先在后台配置);
  • 企业身份源登录(需要配置企业身份源);
  • 忘记密码以及重置密码;
  • MFA 认证。

其具备以下特性:

  • 轻量级:所有资源打包起来只有几百 kb;
  • 响应式:兼容移动端和 PC 端网页;
  • 定制化:可以支持完整的 UI 自定义功能。

Authing Web 端 Guard 3.0 版本已于 2021.12.31 正式上线,关于本次更新主要涉及嵌入式 Guard 组件的 MFA、登录安全策略、自定义 CSS 以及登录注册协议相关功能的实现,同时对嵌入式和托管式 Guard 登录框的 UI 进行了全面翻新。 关于本次更新的详细内容请查看:从 Guard V1 迁移

¶ 不同前端框架的接入流程

选择前端框架
React
Loading...

有两种方式可以供你选择:「安装 Authing library」 或 「直接通过浏览器加载」。

无论使用哪一种安装方式,你都需要用到应用的 appid ,请先前往控制台获取。

¶ 方法一:安装 Authing library

首先,通过 npm/yarn/cnpm 安装 Authing library.

推荐使用 npm (稳定版本 v3.1.10)或 yarn,它们能更好的和 webpack (opens new window) 打包工具进行配合,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。 如果你的网络环境不佳,也可使用 cnpm (opens new window) 。

运行下列命令行安装 Authing React.JS library:

$ yarn add @authing/react-ui-components

# OR

$ npm install @authing/react-ui-components --save

然后,在你的 React 应用中完成配置:

import { Guard } from "@authing/react-ui-components";
import React from "react";
import ReactDOM from "react-dom";
// 引入 css 文件
import "@authing/react-ui-components/lib/index.min.css";

const App = () => {
  // 替换你的 AppId
  const appId = "your_appId_at_authing_console";

  const onLogin = (userInfo) => {
    console.log(userInfo);
  };

  return <Guard appId={appId} onLogin={onLogin} />;
};

ReactDOM.render(<App />, document.getElementById("root"));

¶ 方法二:直接通过浏览器加载

首先,在你的 HTML 文件中使用 script 和 link 标签直接引入文件,并使用全局变量 AuthingReactUIComponents。

Authing npm 发布包内的 @authing/react-ui-components/lib 目录下提供了 index.min.css 以及 index.min.js,你可以直接调用,也可以通过 jsdelivr (opens new window) 或者 unpkg (opens new window) 下载)。

<html lang="en">

<head>
  <meta charset="utf-8" />
  <!-- 引入 babel,支持 jsx -->
  <script src="https://cdn.jsdelivr.net/npm/babel-standalone@6.26.0/babel.min.js"></script>

  <!-- 引入 React -->
  <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js" crossorigin></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js" crossorigin></script>

  <!-- JavaScript 代码 -->
  <script>
    window.react = React
    window['react-dom'] = ReactDOM
  </script>
  <script src="https://cdn.jsdelivr.net/npm/@authing/react-ui-components"></script>

  <!-- CSS 文件 -->
  <link href="https://cdn.jsdelivr.net/npm/@authing/react-ui-components/lib/index.min.css" rel="stylesheet">
  </link>
</head>

<body>
  <div id="root"></div>
  <script>
    var App = () => {
      const appId = "AUTHING_APP_ID";
      const onLogin = userInfo => {
        console.log(userInfo);
      };
      return React.createElement(
        AuthingReactUIComponents.Guard, {
          appId: appId,
          onLogin: onLogin,
        },
      )
    };
    ReactDOM.render(React.createElement(App), document.getElementById("root"));
  </script>
</body>

</html>

无论通过哪一种方式,你都可以完成 Authing Guard 在你项目中的安装和初始化。

¶ 在后端验证用户的 Token 是否有效

用户信息的 token 字段为标准的 OIDC IdToken,你可以在后端使用应用的 ID 和 Secret 验证此 token。

示例的 token 如下:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJiaXJ0aGRhdGUiOiIiLCJmYW1pbHlfbmFtZSI6IiIsImdlbmRlciI6IiIsImdpdmVuX25hbWUiOiIiLCJsb2NhbGUiOiIiLCJtaWRkbGVfbmFtZSI6IiIsIm5hbWUiOiIiLCJuaWNrbmFtZSI6IiIsInBpY3R1cmUiOiJodHRwczovL3VzZXJjb250ZW50cy5hdXRoaW5nLmNuL2F1dGhpbmctYXZhdGFyLnBuZyIsInByZWZlcnJlZF91c2VybmFtZSI6InRlc3RAZXhhbXBsZS5jb20iLCJwcm9maWxlIjoiIiwidXBkYXRlZF9hdCI6IjIwMjEtMDEtMThUMDc6NDg6NTUuNzgxWiIsIndlYnNpdGUiOiIiLCJ6b25laW5mbyI6IiIsImFkZHJlc3MiOnsiY291bnRyeSI6IiIsInBvc3RhbF9jb2RlIjoiIiwicmVnaW9uIjoiIiwiZm9ybWF0dGVkIjoiIn0sInBob25lX251bWJlciI6bnVsbCwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiZW1haWwiOiJ0ZXN0QGV4YW1wbGUuY29tIiwiZW1haWxfdmVyaWZpZWQiOmZhbHNlLCJkYXRhIjp7InR5cGUiOiJ1c2VyIiwidXNlclBvb2xJZCI6IjVhOWZhMjZjZjg2MzVhMDAwMTg1NTI4YyIsImFwcElkIjoiNjAwNTNiNzQxNjQ3OGRlMmU4OGZhYjQzIiwiaWQiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJ1c2VySWQiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJfaWQiOiI1ZjIxNTFiZWFlNWE4YjRjZTZiMGJhZTkiLCJwaG9uZSI6bnVsbCwiZW1haWwiOiJ0ZXN0QGV4YW1wbGUuY29tIiwidXNlcm5hbWUiOiJ0ZXN0QGV4YW1wbGUuY29tIiwidW5pb25pZCI6bnVsbCwib3BlbmlkIjpudWxsLCJjbGllbnRJZCI6IjVhOWZhMjZjZjg2MzVhMDAwMTg1NTI4YyJ9LCJ1c2VycG9vbF9pZCI6IjVhOWZhMjZjZjg2MzVhMDAwMTg1NTI4YyIsImF1ZCI6IjYwMDUzYjc0MTY0NzhkZTJlODhmYWI0MyIsImV4cCI6MTYxMjE2NTg4OCwiaWF0IjoxNjEwOTU2Mjg4LCJpc3MiOiJodHRwczovL3NhbXBsZS1hcHAuYXV0aGluZy5jbi9vaWRjIn0.SNyGBffF-zBqDQFINGxUJZrWSAADHQhbEOsKvnH4SLg

你可以在该网站 (opens new window)(国内用户可以访问此镜像站 (opens new window))中解码此 IdToken :

其中 sub 字段为用户的 ID,aud 字段为应用的 ID,你可以通过此文章 (opens new window)了解 OIDC IdToken 每个字段的详细释义。

基本上所有语言都提供了检验 IdToken 的 Library,以 Node.js 为例,你可以使用 JSON Web Token (opens new window) 来验证 IdToken:

const jwt = require("jsonwebtoken");

try {
  const data = jwt.verify("YOUR_ID_TOKEN", "YOUR_APP_SECRET");
} catch (error) {
  // token might be invalid or expired
  console.error(error);
}

如果验证成功,你可以通过 sub 字段得到该用户的唯一 ID,之后你就可以将用户 ID 与自己的业务结合起来啦!如果你需要给不同的用户授权不同的角色、权限,你可以了解如何给用户授权角色、权限,以进行细粒度的权限控制。

¶ 详细的参数与事件列表

Authing 内嵌登录组件支持高度自定义化,除了自定义标题、Logo 等基础配置外,你还可以控制登录方式的显隐、通过自定义 CSS 完全自定义样式等;除了成功登录事件外,Authing 内嵌登录组件还封装了成功注册、登录失败、登录注册方式切换等事件,详细文档请见 登录组件(Guard)文档。

上一篇: 使用托管登录页完成认证 下一篇: 使用 API & SDK 完成认证
  • 内嵌登录组件介绍
  • 不同前端框架的接入流程
  • 在后端验证用户的 Token 是否有效
  • 详细的参数与事件列表

用户身份管理

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

企业内部管理

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

开发者

开发文档
框架集成
博客 (opens new window)
GitHub (opens new window)
社区用户中心 (opens new window)

公司

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

京ICP备19051205号

beian京公网安备 11010802035968号

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