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

更新时间: 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 迁移

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

选择前端框架

有两种方式可以供你选择：「安装 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 完成认证