Authing 是一家企业级身份认证提供商,集成了 OAuth、LDAP、OIDC 等多种身份认证和授权解决方案,一直致力于给开发者带来最好的身份认证体验。Guard 套件是 Authing 提供的浏览器端单点登录解决方案,开发者可基于此框架在浏览器端实现单点登录的页面及逻辑。使用 Guard,开发者可以在五分钟内实现一个既实用又美观的登录注册表单。
import Guard from "@authing/guard";const clientId = "YOUR_AUTHING_USERPOOL_ID"; const guard = new Guard(clientId, { title: "Authing" });guard.on("authenticated", userInfo => { // 用户登录成功后,你可以直接在这里获取他的用户信息 console.log(userInfo); });
几行代码,就生成了一个集登录、注册、忘记密码、社会化登录、SSO 等特性与一体的 Form 表单,你可以前往 https://sample-sso.authing.cn/ 体验。
而现在,Authing 将 Guard 完整迁移到了移动端!借助我们的 authing-rn-sdk, 开发者同样可以在极短的时间内完成一个 Native 端的认证表单:
import React from 'react';import { SafeAreaView, StatusBar,} from 'react-native';import { Guard } from "@authing/rn"const App = () => { const userPoolId = "5dd77e6efa26f000d18101ca" const options = { title: "Authing Guard SDK", forceLogin: true // 将注册和登录合并,当用户不存在的时候为其自动注册 } const onLogin = (loginMethod, userInfo) => { alert(JSON.stringify(userInfo)) } return ( <> <StatusBar barStyle="dark-content" /> <SafeAreaView style={{ flex: 1 }}> <Guard userPoolId={userPoolId} options={options} onLogin={onLogin} /> </SafeAreaView> </> );};
效果如下:
下面是调用支付宝客户端的登录示例:
开发者只需要传入用户池 ID 和注册的回调函数(比如登录成功回调函数、成功发送忘记密码邮件回调函数等,完整回调函数列表见 authing-rn-sdk)即可。
用户成功登录之后 authing-rn-sdk 会将用户信息 userInfo 回调给传入的 onLogin 函数,用户信息中包含了 Authing 用户 ID、头像、昵称等,还包括登录凭证 token。userInfo 示例如下:
{ "_id": "5dc10bcb6f94c178c6ffffb9", "email": null, "emailVerified": false, "unionid": "oiPbDuG4S7msrKHPKDc8MECSe8jM", "openid": "oiPbDuG4S7msrKHPKDc8MECSe8jM", "oauth": "{\"openid\":\"oiPbDuG4S7msrKHPKDc8MECSe8jM\",\"nickname\":\"廖长江\",\"sex\":1,\"language\":\"zh_CN\",\"city\":\"海淀\",\"province\":\"北京\",\"country\":\"中国\",\"headimgurl\":\"http://thirdwx.qlogo.cn/mmopen/vi_32/GkxYERPDdTMk7bOk3BgBmEEYul8oMcOoLgNHLoibZn5ibe4EulWBp1xo6uN4az59eoSBYBW0QmXB9TrsJEM0EoPw/132\",\"privilege\":[]}", "registerMethod": "oauth:wxmp", "username": "廖长江", "nickname": "廖长江", "company": "", "photo": "https://usercontents.authing.cn/avatar-5dc10bcb6f94c178c6ffffb9-1572932555337", "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InVuaW9uaWQiOiJvaVBiRHVHNFM3bXNyS0hQS0RjOE1FQ1NlOGpNIiwiaWQiOiI1ZGMxMGJjYjZmOTRjMTc4YzZmZmZmYjkiLCJjbGllbnRJZCI6IjVkYTdlZGFiNTAzOTZjMWFkOTYyMzc4YSJ9LCJpYXQiOjE1NzI5NTY0MjUsImV4cCI6MTU3NDI1MjQyNX0.OTgl72WZS8So3R5DbWCJ7I_Bd0LaZa4S0TAVMg9qaYQ", "tokenExpiredAt": "11/20/2019, 8:20:25 PM", "loginsCount": 43, "lastLogin": "11/5/2019, 8:20:25 PM", "lastIP": "127.0.0.1", "signedUp": "11/5/2019, 1:42:35 PM", "blocked": false, "isDeleted": false}
开发者应该妥善保管 token,并且在后续请求业务接口(这里指的是开发者自己的接口)的时候,带上此 token,以此判断用户身份。
如何携带 token
将 Authorization 请求头设置为 "Bearer " + token,例如:
注意 Bearer 和 token 之间的空格
Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InVuaW9uaWQiOiJvaVBiRHVHNFM3bXNyS0hQS0RjOE1FQ1NlOGpNIiwiaWQiOiI1ZGMxMGJjYjZmOTRjMTc4YzZmZmZmYjkiLCJjbGllbnRJZCI6IjVkYTdlZGFiNTAzOTZjMWFkOTYyMzc4YSJ9LCJpYXQiOjE1NzI5NTY0MjUsImV4cCI6MTU3NDI1MjQyNX0.OTgl72WZS8So3R5DbWCJ7I_Bd0LaZa4S0TAVMg9qaYQ"
如果你使用的是 axios,可以这样写:
axios.get('https://mywebsite.com/endpoint/', { headers: { Authorization: `Bearer ${userInfo.token}` }});
如果你使用的是 fetch,可以这样写:
fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { Authorization: `Bearer ${userInfo.token}` }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }),});
如何在后端检验 Token
Authing 提供了几种方法帮助检验 token 的合法性和对应用户的登录状态(具体的方法请看:https://learn.authing.cn/authing/advanced/authentication/verify-jwt-token),开发者可以把这个方法封装成一个函数,比如说 check_authing_token_status(为了方便我使用了 Python ):
开发者不用在后端存储该 token,只需要调用 Authing 提供的接口。
def check_authing_token_status(token: str) -> bool: """ :param token: Authing 返回用户信息中携带的 token :return: 布尔值,表示是否处于登录状态 """ # 调用 Authing 提供的方法,具体实现方法省略,请参见上文提到的文档 pass
然后就可以通过登录状态和自己的业务逻辑对请求进行响应了,比如:
logged_in = check_authing_token_status(token)if not logged_in: # 返回错误提示# 正常继续下面的逻辑
如何通过用户角色控制用户访问
有时候是否登录这一个条件是不足以判断请求方是否有访问资源的权限的,为此 Authing 还提供了用户角色相关的 API。详情请查看用户角色文档(https://learn.authing.cn/authing/advanced/roles)。
-
了解 Authing 相关基础概念:
-
https://learn.authing.cn/authing/quickstart/basic;
-
了解 authing-rn-sdk 支持的更多事件回调函数:
-
https://github.com/Authing/authing-rn-sdk#%E6%94%AF%E6%8C%81%E7%9A%84%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E5%88%97%E8%A1%A8
-
了解如何接入支付宝移动端社会化登录:
-
https://github.com/Authing/authing-rn-sdk/blob/master/docs/alipaymobile-setup.md