¶ Angular 登录组件
本文对应 Authing 老版本产品。如需了解最新功能说明,请查看 接入 Authing Guard (opens new window)。
Authing 登录组件(Guard)是一种可嵌入的登录表单,可根据你的需求进行配置,建议用于单页面应用程序。它使你可以轻松添加各种社会化登录方式,以便你的用户可以无缝登录,并且在不同平台拥有一致的登录体验。Guard 为开发者屏蔽了很多底层认证的实现细节,同时也包括繁琐的 UI 开发。
Guard 可以通过组件化的形式集成到你的 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 | 使用文档 |
PC 网站 | 使用文档 | |
Facebook 移动端 | 移动 APP | 使用文档 |
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 | 使用文档 |
PC 网站 | 使用文档 | |
LinkedIn 移动端 | 移动 APP | 使用文档 |
网易易盾(手机号一键登录) | 移动 APP | 使用文档 |
青云 QingCloud | PC 网站 | 使用文档 |
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" };
}