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-06 20:20:12
编辑

Authing 托管登录页是最简单,最安全的集成方式。这是因为登录流程由 Authing 维护,并由 Authing 保持安全。对于大多数集成,建议使用 Authing 托管的登录流程。你的业务系统将用户重定向到 Authing,在此用户进行身份验证,然后重定向回在控制台配置的应用回调连接。此设计被认为是安全性最佳实践。在自定义配置方面,托管模式提供了中等程度的登录注册表单自定义配置,可通过控制台配置和 CSS 进行界面自定义。

本文档将会介绍如何使用 Authing 托管的登录页快速实现一个完整的用户认证流程。

¶ 创建一个用户池

用户池是你用户系统的隔离的最小单位,你可以把不同场景的用户划分在不同的用户池。每个用户池下都可以有用户和应用程序,不同用户池之间的权限、应用、组织是完全隔离的。

如果你还没有 Authing 开发者账号,你需要先在控制台 (opens new window)注册一个 Authing 开发者账号。如果你还没有创建一个用户池,可以按照指引创建你的第一个用户池:

选择用户池类型:

创建成功之后,你将自动跳转到用户池详情页。

¶ 创建一个应用

在控制台 - 应用页,你可以查看自己应用列表:

选择其他某个应用,点击右侧的体验登录按钮:

在弹出的新窗口中,你可以看到这个由 Authing 托管的在线登录页,该登录页集成了登录、注册、忘记密码、社交登录、MFA 等功能:

¶ 创建一个用户

点击立即注册,选择邮箱注册,输入邮箱和密码,点击注册按钮:

注册成功之后,你可以在控制台的用户列表页看到该用户。

¶ 体验登录

回到登录页面,输入刚刚创建账号的邮箱和密码,点击登录,登录成功之后,你将跳转到一个回调指引页面(在这个页面你可以查看后续详细的指引流程以及最佳时间,建议完整阅读一遍),你可以看到在 URL 中包含了 code 查询参数,我们下一步会用此 code 换取 token。

¶ 使用 code 换取 token

在实际应用中,你需要将回调地址改为你的实际业务地址,该地址需要为一个后端地址。

获取到 code 之后,你需要使用 code 换取用户信息,Node.js 示例代码如下:

const axios = require("axios");
const qs = require("querystring");
const code2tokenResponse = await axios.post(
  // 修改为你的应用域名
  "https://sample-app.authing.cn/oidc/token",
  qs.stringify({
    code,
    client_id: "APP_ID",
    client_secret: "APP_SECRET",
    grant_type: "authorization_code",
    redirect_uri: "REDIRECT_URI",
  }),
  {
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
  }
);
const { id_token, access_token } = code2tokenResponse.data;

返回的数据中有 id_token 和 access_token,简单来说 id_token 相当于用户的身份凭证,access_token 是允许访问资源的钥匙,你可以在此详细了解他们之前的区别。

{
  "access_token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IldZU3ZYbVhFRnZCaXcyNW1DTi1rMDZKeDk3d08xNVNlZGIwNjFhcWZ2WFEifQ.eyJqdGkiOiJJWWpZMzR3Y1hfX0tOX2NlbVdleHEiLCJzdWIiOiI1ZWU5YzRmYjM3Mjg5MGE4MTUyOTE4NzMiLCJpYXQiOjE2MTQ0MjE4NjMsImV4cCI6MTYxNTYzMTQ2Mywic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCBwaG9uZSIsImlzcyI6Imh0dHBzOi8vc2FtcGxlLWFwcC5hdXRoaW5nLmNuL29pZGMiLCJhdWQiOiI2MDA1M2I3NDE2NDc4ZGUyZTg4ZmFiNDMifQ.XKy6WTE4naogVaz60-u4L3B4O3l_tYBFnOd80089L-6Hm1bCjOaCY14lV4BN11HgZ_JbikrhE4-_SgbaAVIEsK0NC5P22Naz6as_mDv2tAVgH7eVAKKAHIUQQnWGB890KMY0ptRQXOtSI5Ge06LH1Qq3jPvDR-TklwlY8Kg2S1-oxqDQoZuwZxc5b2BC84M3uLYd5mskkVyGdXOtTBtaGhmn2gxUJ_OhqEVAVpsC_QZRi70D3jup1seG_oADXz11ViVP4EtzYx4jy_3CJLkBBZXGoBY6zzrEI02GPT0CXkKzBDQGymcXKK2FEWpeMYmgkKFTT2ZoI_WcsHrLeNJu7Q",
  "expires_in": 1209600,
  "id_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1ZWU5YzRmYjM3Mjg5MGE4MTUyOTE4NzMiLCJiaXJ0aGRhdGUiOiIiLCJmYW1pbHlfbmFtZSI6IiIsImdlbmRlciI6Ik0iLCJnaXZlbl9uYW1lIjoiIiwibG9jYWxlIjoiemhfQ04iLCJtaWRkbGVfbmFtZSI6IiIsIm5hbWUiOiIiLCJuaWNrbmFtZSI6IuW7lumVv-axnyIsInBpY3R1cmUiOiJodHRwczovL3RoaXJkd3gucWxvZ28uY24vbW1vcGVuL3ZpXzMyL0diUUtQMElGdlZOOENmd2UyQ0FPbzFBcW1FWnF1RXVUamhSVEZTRVdIaWJHbkhLaWFjY3RpY3J3VE50OUc4U3hOUG5MUzEwcmJBdFFYRGVKZkJ6VEEwb0p3LzEzMiIsInByZWZlcnJlZF91c2VybmFtZSI6IiIsInByb2ZpbGUiOiIiLCJ1cGRhdGVkX2F0IjoiMjAyMS0wMi0yN1QxMDoyOTo0MC4zNzFaIiwid2Vic2l0ZSI6IiIsInpvbmVpbmZvIjoiIiwiZW1haWwiOm51bGwsImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwicGhvbmVfbnVtYmVyIjpudWxsLCJwaG9uZV9udW1iZXJfdmVyaWZpZWQiOmZhbHNlLCJub25jZSI6IjVEdVdSRFZGRkUiLCJhdF9oYXNoIjoiaEdsRmh1YnZhbkNGSGNXc3RtVEtfQSIsImF1ZCI6IjYwMDUzYjc0MTY0NzhkZTJlODhmYWI0MyIsImV4cCI6MTYxNTYzMTQ2MywiaWF0IjoxNjE0NDIxODYzLCJpc3MiOiJodHRwczovL3NhbXBsZS1hcHAuYXV0aGluZy5jbi9vaWRjIn0.32N4cdIf0p7fiGEM6sPS6PH1JPtIwF3Ee4PUaCt6eXU",
  "scope": "openid profile email phone",
  "token_type": "Bearer"
}

将 id_token 解码 (opens new window) 之后,得到的示例数据如下:

{
  "sub": "5ee9c4fb372890a815291873", // subject 的缩写,为用户 ID
  "birthdate": "",
  "family_name": "",
  "gender": "M",
  "given_name": "",
  "locale": "zh_CN",
  "middle_name": "",
  "name": "",
  "nickname": "Nickname",
  "picture": "https://thirdwx.qlogo.cn/mmopen/vi_32/GbQKP0IFvVN8Cfwe2CAOo1AqmEZquEuTjhRTFSEWHibGnHKiaccticrwTNt9G8SxNPnLS10rbAtQXDeJfBzTA0oJw/132",
  "preferred_username": "",
  "profile": "",
  "updated_at": "2021-02-27T10:29:40.371Z",
  "website": "",
  "zoneinfo": "",
  "email": null,
  "email_verified": false,
  "phone_number": null,
  "phone_number_verified": false
}

你可以使用上一步换到的 access_token 来获取用户的详细信息,示例代码如下:

const axios = require("axios");
const token2UserInfoResponse = await axios.get(
  "https://sample-app.authing.cn/oidc/me?access_token=" + access_token
);
console.log(token2UserInfoResponse.data);

之后你需要将 id_token 传递返回给前端,前端应该保存 id_token,并在每次请求后端接口时携带,后端接口应当先验证前端传来的 id_token 合法性,再处理用户请求。如何验证 Token 合法性请参考文档。

¶ 无后端场景该如何处理?

前面提到的 code 换 token 需要在后端完成,如果你属于无后端场景,可以使用以下两种模式:

¶ 使用 OIDC implicit 模式

在控制台 > 应用 找到你的应用,在 授权模式 开启 implicit 模式 并勾选 id_token token 返回类型,然后让你的用户使用以下地址发起登录:

GET https://sample-app.authing.cn/oidc/auth?client_id=AUTHING_APP_ID&redirect_uri={回调地址}&scope=openid%20profile&response_type=id_token%20token&state={随机字符串}&nonce={随机字符串}

Authing 以 URL hash 的形式直接返回 id_token 和 access_token 到回调地址,例如:

https://example.com/#id_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1Y2QwMjZlZjNlZDlmOTRkODBmZTM2YWUiLCJub25jZSI6IjE4MzEyODkiLCJzaWQiOiI4YzgzN2I5My01OTNlLTQzZjctYWMzNC0yYjRmZDU3ZGFhMTciLCJhdF9oYXNoIjoiVFFtbFlEVTVPZGF1Zjl0U0VKdHY5USIsInNfaGFzaCI6Ind3SDNXclV2b0hiSUp5TWVZVHU4bHciLCJhdWQiOiI1ZDAxZTM4OTk4NWY4MWM2YzFkZDMxZGUiLCJleHAiOjE1NjA0MDkzNjgsImlhdCI6MTU2MDQwNTc2OCwiaXNzIjoiaHR0cHM6Ly9vYXV0aC5hdXRoaW5nLmNuL29hdXRoL29pZGMifQ.T9M0s6rk4Teq6VOOBRIElgHK9KyM3q0ZJj2aS0VD_Fw&access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3OE9XcVJNVXJEUXpMMXpHVzVtUWoiLCJzdWIiOiI1Y2QwMjZlZjNlZDlmOTRkODBmZTM2YWUiLCJpc3MiOiJodHRwczovL29hdXRoLmF1dGhpbmcuY24vb2F1dGgvb2lkYyIsImlhdCI6MTU2MDQwNTc2OCwiZXhwIjoxNTYwNDA5MzY4LCJzY29wZSI6Im9wZW5pZCBwcm9maWxlIiwiYXVkIjoiNWQwMWUzODk5ODVmODFjNmMxZGQzMWRlIn0.mR0MZDwlZWGRMsAZjQ27sDFFqYoDgZ6WHTK4C7JbML4&expires_in=3600&token_type=Bearer&state=jazz&session_state=26ec053be9f47d68dc430f84b97efb1095469fe10169a9e00ef4092718714b8b

你可以从 url hash 中取出 id_token,然后可以通过解码 id_token 获取用户信息,详情请见验证用户身份凭证(token)。

¶ 使用 trackSession

Authing 提供另外一种简单的前端获取用户信息的方式,无需处理回调或进行其他配置。

  1. 安装单点登录 SDK,完成初始化,调用 trackSession 函数获取用户登录状态。

使用 NPM 安装

$ npm install @authing/sso --save

使用 CDN

<script src="https://cdn.authing.co/packages/authing-sso/2.1.17-alpha.5/umd/index.min.js"></script>
  1. 初始化 SDK
const authingSSO = new AuthingSSO.AuthingSSO({
  appId: '应用 ID',
  origin: 'https://{用户池域名}.authing.cn',
  redirectUri: '你的业务软件路由地址',
})
  1. 调用 trackSession 函数获取用户登录状态
const res = await authing.trackSession();
if (res.session) {
  // 已登录
} else {
  // 未登录
}

详细使用方式请查看文档。

¶ 访问个人中心

在 Authing 中创建的每个应用都有一个内置的给终端用户的个人中心页,地址为 {{YOUR_APP_DOMAIN}}/u,如 https://sample-app.authing.cn/u,你可以通过浏览器直接访问该地址:

在此终端用户可以查看和修改自己的个人信息、修改密码、绑定邮箱手机号、绑定 MFA 等。

¶ 使用登录组件

上述流程中,我们使用的是 Authing 运维的托管登录页面。同时我们还提供支持各种主流 Web 框架的登录组件,相比在线的登录页,登录组件更加灵活、自定义能力更强,你可以将其集成到的自己的页面中,详细流程请见使用内嵌登录组件完成认证。

¶ 使用 API & SDK

至此你已经了解了如何借助 Authing 的托管登录页快速实现核心的登录注册流程,如果你想有更强的自定义需要,也可以使用 Authing 提供的 API & SDK ,详细流程请见 使用 API & SDK 完成认证。

上一篇: 认证你的第一个用户 下一篇: 使用内嵌登录组件完成认证
  • 创建一个用户池
  • 创建一个应用
  • 创建一个用户
  • 体验登录
  • 使用 code 换取 token
  • 访问个人中心
  • 使用登录组件
  • 使用 API & SDK

用户身份管理

集成第三方登录
手机号闪验 (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号

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