¶ React 登录组件
本文对应 Authing 老版本产品。如需了解最新功能说明,请查看 将 Guard 接入到 React 项目 (opens new window)。
Authing 登录组件(Guard)是一种可嵌入的登录表单,可根据你的需求进行配置,建议用于单页面应用程序。它使你可以轻松添加各种社会化登录方式,以便你的用户可以无缝登录,并且在不同平台拥有一致的登录体验。Guard 为开发者屏蔽了很多底层认证的实现细节,同时也包括繁琐的 UI 开发。
Guard 可以通过组件化的形式集成到你的 React 项目中,你可以借助此组件快速实现登录认证流程。
¶ 对于 React 的支持
我们目前支持 React 16 以及 React 17 版本,对于 React 18 还有一些兼容问题没有解决,我们会尽快完成支持。
¶ 快速开始
¶ 使用 npm
¶ 安装
$ yarn add @authing/react-ui-components
# OR
$ npm install @authing/react-ui-components --save
¶ 初始化
在 React 项目中初始化:
import React from "react";
import ReactDOM from "react-dom";
import { Guard } from "@authing/react-ui-components";
// 引入 css 文件
import "@authing/react-ui-components/lib/index.min.css";
const App = () => {
const appId = "AUTHING_APP_ID";
const onLogin = userInfo => {
console.log(userInfo);
};
return <Guard appId={appId} onLogin={onLogin} />;
};
ReactDOM.render(<App />, document.getElementById("root"));
¶ 使用 CDN
¶ 使用 CDN 引入
<!-- 引入 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>
¶ 在 Script 代码块中初始化
<script>
var App = () => {
const appId = "AUTHING_APP_ID";
const onLogin = userInfo => {
console.log(userInfo);
};
return <AuthingReactUIComponents.Guard appId={appId} />;
};
ReactDOM.render(<App />, document.getElementById("root"));
</script>
¶ 监听登录事件
Guard
组件传入 onLogin
事件回调函数,当用户成功登录时回调用此函数,你可以在此获取当前用户的用户信息。查看完整事件列表。
import { Guard } from "@authing/react-ui-components";
import "@authing/react-ui-components/lib/index.min.css";
function App() {
return (
<div className="App">
<Guard
appId="AUTHING_APP_ID"
onLogin={userinfo => {
console.log(userinfo);
}}
/>
</div>
);
}
了解获取用户信息之后该怎么做?
获取到用户信息之后,你可以得到用户的身份凭证(用户信息的 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
列表指定需要显示的社会化登录(默认显示该应用配置的所有社会化登录)。
import { Guard, SocialConnections } from "@authing/react-ui-components";
function App() {
return (
<div className="App">
<Guard
appId="AUTHING_APP_ID"
onLogin={userinfo => {
console.log(userinfo);
}}
config={{
socialConnections: [SocialConnections.Github]
}}
/>
</div>
);
}
查看支持的社会化登录列表及接入流程
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 | 使用文档 |
¶ 退出登录
使用 Guard
组件,组件加载完成后回触发的 onLoad
事件与登录成功触发的 onLogin
事件都会返回 AuthClient
。获取到 AuthClient
进行手动单例保存,可以在需要调用退出登录的时候使用。
import { Guard, SocialConnections } from "@authing/react-ui-components";
function App() {
let guardAuthClient
return (
<div className="App">
<Guard
appId="AUTHING_APP_ID"
onLogin={(userinfo, authClient) => {
console.log(authClient)
}}
onLoad={(authClient) => {
console.log(authClient)
guardAuthClient = authClient
}}
/>
{guardAuthClient && <button onClick={() => guardAuthClient.logout()}>退出</button>}
</div>
);
}
¶ 实现单点登录
使用 Guard 进行单点登录需要在初始化的时候设置 isSSO
为 true
:
import React from "react";
import ReactDOM from "react-dom";
import { Guard } from "@authing/react-ui-components";
// 引入 css 文件
import "@authing/react-ui-components/lib/index.min.css";
const App = () => {
const appId = "AUTHING_APP_ID";
const onLogin = userInfo => {
console.log(userInfo);
};
return (
<Guard
appId={appId}
onLogin={onLogin}
config={{
isSSO: true
}}
/>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
¶ 导出 authing-js-sdk
Guard 组件本身基于 Authing JavaScript SDK 进行封装,当你需要进行一些更高级的操作(如管理用户自定义数据、修改用户资料、退出登录)时:
- 调用
initAuthClient
初始化 AuthenticationClient,多次调用此函数只会初始化一次。
import { initAuthClient } from "@authing/react-ui-components";
initAuthClient({
appId: "AUTHING_APP_ID"
});
- 之后使用
getAuthClient
获取AuthenticationClient
实例。
import { getAuthClient } from "@authing/react-ui-components";
const authClient = getAuthClient();
- 调用
AuthenticationClient
实例的方法,完整方法列表请见 AuthenticationClient 方法列表。
authClient.getCurrentUser().then(user => console.log(user));
¶ 完整参数
Authing 登录组件(Guard)提供了很多高级配置,如自定义 UI,使用特定登录方式等。详细请见完整参数列表。
¶ 事件列表
注意在 React 中,事件监听应采用小驼峰命名,如:onLogin
, onLoginError
。
事件名 | 事件说明 | 事件参数 | 事件参数说明 |
---|---|---|---|
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 服务管理员。
import React from "react";
import { Guard } from "@authing/react-ui-components";
import "@authing/react-ui-components/lib/index.min.css";
const App = () => {
const appId = "AUTHING_APP_ID";
const config = {
host: "https://core.you-authing-service.com"
};
return <Guard appId={appId} />;
};