¶ Angular 登录组件

更新时间: 2024-10-10 07:28:40

本文对应 Authing 老版本产品。如需了解最新功能说明，请查看接入 Authing Guard (opens new window)。

Authing 登录组件（Guard）是一种可嵌入的登录表单，可根据你的需求进行配置，建议用于单页面应用程序。它使你可以轻松添加各种社会化登录方式，以便你的用户可以无缝登录，并且在不同平台拥有一致的登录体验。Guard 为开发者屏蔽了很多底层认证的实现细节，同时也包括繁琐的 UI 开发。

Guard 可以通过组件化的形式集成到你的 Angular 项目中，你可以借助此组件快速实现登录认证流程。

查看旧版 Angular 文档

¶ 快速开始

¶ 使用 npm

¶ 安装

$ yarn add @authing/ng-ui-components

# OR

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

¶ 初始化

首先需要在项目的 tsconfig.json 里面的 compilerOptions 添加：

"skipLibCheck": true

在 Angular 项目中初始化：

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

import { GuardModule } from "@authing/ng-ui-components";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, GuardModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component } from "@angular/core";
import { CommonMessage, AuthenticationClient } from "ng-ui-components";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  appId = "AUTHING_APP_ID";
  onLoad([e]: [AuthenticationClient]) {
    console.log("onLoad", e);
  }
}

app.component.html

<guard [appId]="appId" (onLoad)="onLoad($event)"></guard>

¶ 使用 CDN

¶ 使用 CDN 引入

<script src="https://cdn.jsdelivr.net/npm/@authing/ng-ui-components"></script>

¶ 在 Script 代码块中初始化

<div ng-app="">
  <guard [appId]="AUTHING_APP_ID"></guard>
</div>

¶ 监听登录事件

guard 组件传入 onLogin 事件回调函数，当用户成功登录时回调用此函数，你可以在此获取当前用户的用户信息。查看完整事件列表。

<guard [appId]="appId" (onLogin)="onLogin($event)"></guard>

import { AuthenticationClient } from "@authing/ng-ui-components";

import { User } from "@authing/native-js-ui-components";

export class AppComponent {
  appId = "AUTHING_APP_ID";
  onLogin([user]: [User, AuthenticationClient]) {
    console.log("userInfo: ", user);
  }
}

了解获取用户信息之后该怎么做？

获取到用户信息之后，你可以得到用户的身份凭证（用户信息的 token 字段），你可以在客户端后续发送给后端服务器的请求中携带上此 token, 以 axios 为例：

const axios = require("axios");
axios
  .get({
    url: "https://yourdomain.com/api/v1/your/resources",
    headers: {
      Authorization: "Bearer ID_TOKEN",
    },
  })
  .then((res) => {
    // custom codes
  });

在后端接口中需要检验此 token 的合法性，来验证用户的身份，验证方式详情请见验证用户身份凭证（token）。识别用户身份之后，你可能还需要对该用户进行权限管理，以判断用户是否对此 API 具备操作权限。

¶ 添加社会化登录

在初始化参数 config 中传入 socialConnections 列表指定需要显示的社会化登录（默认显示该应用配置的所有社会化登录）。

<guard [appId]="appId" [config]="config"></guard>

export class AppComponent {
  appId = "AUTHING_APP_ID";
  config = { socialConnections: ["github"] };
}

查看支持的社会化登录列表及接入流程

Authing 目前一共支持国内外将近 20 余种社会化登录，如微信、GitHub、Sign in with Apple、支付宝等，以下是完整的列表：

社会化登录方式	使用场景	使用文档
PC 微信扫码	PC 网站	使用文档
微信移动端	移动 APP	使用文档
微信网页授权	微信内网页	使用文档
微信公众号关注	PC 网站	使用文档
微信小程序	微信小程序	使用文档 (opens new window)
微信 PC 小程序扫码	PC 网站	使用文档
App 拉起小程序	移动 APP	使用文档
腾讯 QQ	PC 网站	使用文档
腾讯 QQ 移动端	移动 APP	使用文档
新浪微博	PC 网站	使用文档
新浪微博移动端	移动 APP	使用文档
GitHub	PC 网站	使用文档
GitHub 移动端	移动 APP	使用文档
Facebook	PC 网站	使用文档
Facebook 移动端	移动 APP	使用文档
Twitter	PC 网站	使用文档
Twitter 移动端	移动 APP	使用文档
Google Web 端	PC 网站	使用文档
Google 移动端	移动 APP	使用文档
Apple Web 端	PC 网站	使用文档
Apple 移动端	移动 APP	使用文档
支付宝 Web 端	PC 网站	使用文档
支付宝移动端	移动 APP	使用文档
Slack	PC 网站	使用文档
Slack 移动端	移动 APP	使用文档
Gitee	PC 网站	使用文档
GitLab	PC 网站	使用文档
GitLab 移动端	移动 APP	使用文档
百度	PC 网站	使用文档
百度移动端	移动 APP	使用文档
LinkedIn	PC 网站	使用文档
LinkedIn 移动端	移动 APP	使用文档
网易易盾（手机号一键登录）	移动 APP	使用文档
青云 QingCloud	PC 网站	使用文档
Instagram	PC 网站	使用文档
抖音移动端	移动 APP	使用文档
抖音小程序	移动 APP	使用文档 (opens new window)
快手移动端	移动 APP	使用文档
小米移动端	移动 APP	使用文档
Line 移动端	移动 APP	使用文档

¶ 退出登录

在项目入口文件中初始化 AuthenticationClient。

import { initAuthClient } from "@authing/ng-ui-components";

initAuthClient({
  appId: "AUTHING_APP_ID",
});

添加一个退出登录的 button 组件，并绑定点击事件为 getAuthClient().logout()。

<button (click)="logout()">退出登录</button>

import { initAuthClient } from "@authing/react-ui-components";

export class AppComponent {
  logout() {
    getAuthClient().logout();
  }
}

¶ 实现单点登录

使用 Guard 进行单点登录只需要初始化的时候设置 isSSO 为 true 即可：

<guard [appId]="appId" [config]="config"></guard>

export class AppComponent {
  appId = "AUTHING_APP_ID";
  config = { isSSO: true };
}

¶ 导出 `authing-js-sdk`

Guard 组件本身基于 Authing JavaScript SDK 进行封装，当你需要进行一些更高级的操作（如管理用户自定义数据、修改用户资料、退出登录）时：

调用 initAuthClient 初始化 AuthenticationClient，多次调用此函数只会初始化一次。

import { initAuthClient } from "@authing/ng-ui-components";

initAuthClient({
  appId: "AUTHING_APP_ID",
});

之后使用 getAuthClient 获取 AuthenticationClient 实例。

import { getAuthClient } from "@authing/ng-ui-components";

const authClient = getAuthClient();

调用 AuthenticationClient 实例的方法，完整方法列表请见 AuthenticationClient 方法列表。

authClient.getCurrentUser().then((user) => console.log(user));

¶ 完整参数

Authing 登录组件（Guard）提供了很多高级配置，如自定义 UI，使用特定登录方式等。详细请见完整参数列表。

¶ 事件列表

事件名	事件说明	事件参数	事件参数说明
load	Authing appId 验证通过，加载完成	authClient	AuthenticationClient 对象，可直接操作 login， register，详情请查看 authing-js-sdk
load-error	Authing appId 验证失败，加载失败	error	错误信息
login	用户登录成功	user, authClient	user: 用户信息 authClient 同上
login-error	用户登录失败	error	错误信息，包含字段缺失／非法或服务器错误等信息
register	用户注册成功	user, authClient	user: 用户信息 authClient 同上
register-error	用户注册失败	error	错误信息，包含字段缺失／非法或服务器错误等信息
pwd-email-send	忘记密码邮件发送成功	-	-
pwd-email-send-error	忘记密码邮件发送失败	error	错误信息
pwd-phone-send	忘记密码手机验证码发送成功	-	-
pwd-phone-send-error	忘记密码手机验证码发送失败	error	错误信息
pwd-reset	重置密码成功	-	-
pwd-reset-error	重置密码失败	error	错误信息
close	modal 模式中 guard 关闭事件	-	-
login-tab-change	登录 tab 切换事件	activeTab	切换后的 tab
register-tab-change	注册 tab 切换事件	activeTab	切换后的 tab
register-info-completed	注册补充成功事件	user, udfs, authClient	user: 用户信息 udfs: 补充的自定义字段信息 authClient 同上
register-info-completed-error	注册补充失败事件	error, udfs, authClient	error: 错误信息 udfs: 补充的自定义字段信息 authClient 同上

¶ 私有化部署

私有化部署场景需要指定你私有化的 Authing 服务的 GraphQL 端点（不带协议头和 Path），如果你不清楚可以联系 Authing IDaaS 服务管理员。

<guard [appId]="appId" [config]="config"></guard>

export class AppComponent {
  appId = "AUTHING_APP_ID";
  config = { host: "https://core.you-authing-service.com" };
}

¶ 获取帮助

请访问 Authing 论坛 (opens new window)。