作者段清华，「最懂金融的 AI 工程师，微软 AI 领域最有价值专家（MVP），谷歌开发者专家（GDE），希望加速人类的生产力，让智能比电力与宽带更普及。」
为什么需要云身份验证和单点登录
简单来说是为了降低维护用户注册登录系统、权限、统计等各方面的成本。
应用结构简述
通过 Authing 实现身份验证和单点登录，有很多种方法，这篇文章的例子是根据自身软件架构，实现了其中一种相对简单的方法，并不适用所有情况，Authing 本身还提供了多种的登录解决方案，包括直接嵌入到网站上、APP 上的等等。
前端采用纯 React/React-router/Ant.design 开发，没用 Redux/Server Rendering 之类比较复杂的东西，就使用 create-react-app 的最基本方案，没用 TypeScript（因为懒，我有罪）。
后端采用 Python + FastAPI 的简单 API。
登录流程
第一阶段，前端
通过检测本地 localStorage，未发现保存的登录 token 信息时，提示用户需要登录，给出登录链接，用 HTML 的 a 标签直接跳转到 Authing 提供的 SSO 网址上，例如 xxxx.authing.cn ，其中 xxxx 是可以用户自定义的。
第二阶段，Authing SSO 网站
完成登录，可以自由配置，例如注册方式，登录方式比如游记验证码，微信小程序，微信扫码，邮箱密码等。登录成功后，会自动跳转到你配置的回调地址上，回调时可以选择直接提供 token。
例如你配置的回调地址是 xxxx.cn/login ，Authing 可以通过配置，在登录成功后自动跳转到 xxxx.cn/login/#/token=xxxxxxxx 。
第三阶段，通过回调返回前端
这样就可以直接在前端，即 React 部分通过对 window.location 或 document.URL 的解析获取到这个 token。
前端获取到这个 token，就可以通过 Authing 提供的 JavaScript 的 SDK，验证 token，获取用户信息。如果获取用户信息成功，则说明用户登录成功。
如果在第一阶段中，通过 localStorage 检测到了本地的 token，可以直接跳转到这一阶段，通过 Authing 的 SDK 进行 token 验证，这样就跳过了第二阶段。
前端对后端的每个 API 调用都要提交 token，可以通过设置 header 的方式实现。
第四阶段，后端
API 拿到前端的 token 之后，通过 Authing 提供的 python SDK，验证这个 token 和获取用户当前信息，通过后端再次验证这个 token 是否合法，如果不合法可以返回 401 未授权登录，如果合法，可以继续实现 API 本身的功能。
用户的体验流程
-
未登录时：
-
用户打开网站，前端提示未登录，用户点击登录链接（或按钮），跳转到 Authing 的 SSO 网址。
-
用户在 Authing 网站上实现统一的注册/登录，成功后跳转回网站。
-
跳转回的回调地址通过 Token 可以验证用户登录成功，所以这里用户可以直接看到登录成功的提示。
-
用户开始使用应用。
-
登录后时：
-
用户打开网站，因为前端已经检测到了保存的 token，并且通过 SDK 验证了前端 token 的基本有效性（实际有效性是又后端验证的），所以直接跳转到应用部分。
-
用户开始使用应用。
开发的体验
-
前端：
-
使用 Authing-js-SDK 验证 token。
-
使用 Authing-SSO-SDK 实现彻底退出 SSO 登录。
-
后端：
-
使用 Authing-python SDK 验证前端传过来的 token。
-
其他：
-
理论上用户可以通过伪造 token，骗过前端程序，但是因为后端每次 API 调用都会验证 token，后端的 token 合法性验证是对前端透明的，所以无法欺骗后端程序，只要后端验证不通过，就可以不给前端返回机密信息。
-
根据是否允许用户在多个地方登录（如多个电脑、浏览器登录），可以有两种策略，一种是允许用户多个地方登录，那不需要做太多测试；另一种是只允许用户在最后登录的设备中使用，这个时候可以通过对比从 Authing SDK 拿到的 token（最后登录的 token）和用户前端提交的 token 来实现这个能力。
Authing 实现的云身份验证和 SSO 的优点
-
不用实现与维护自己的用户信息系统，包括用户注册、登录、找回密码等。
-
可以快速实现多种登录方式，如邮箱登录、手机验证码登录、微信扫码登录等。
-
可以通过 Authing 直接实现用户权限控制功能，通过用户分组等等方法。
-
用户登录信息保存在 Authing 的单点登录（SSO）上，只要登录信息没过期，就可以让用户继续快速登录，提高用户体验，而这些都可以通过配置实现。
-
直接对接 Authing 的用户统计功能，包括活跃用户，登录日志等等，不需要额外的实现。
代码
代码分为前端和后端两部分。
前端
前端分为四个主要部分：
-
检测登录状态，未登录时跳转到 Authing SSO 的组件。
-
接收 Authing 回调信息的 landing 页面，完成登录 token 验证的组件。
-
退出登录功能。
-
封装浏览器的 AJAX 接口，在提交时携带 token。
跳转到 Authing SSO。
/**
* 本地先检测登录状态，如果没有则提示跳转到authing sso登录
*/
export function checkLogin() {
const userInfo = localStorage.getItem('userInfo')
if (userInfo) {
try {
return JSON.parse(userInfo)
} catch (e) {
console.error(e)
}
}
}
<a
href='https://xxx.authing.cn'
alt='login'
style={{
color: 'black',
}}
>
<Button type="primary" key="console">
请点击这里，在新页面完成登录
</Button>
</a>
登录成功后，Authing 调用设置的回调地址，在跳转过来的 landing 页面中，可以通过 URL 拿到 token。
import { AuthenticationClient } from "authing-js-SDK"
const authenticationClient = new AuthenticationClient({
appId: "XXXXXXXXXXXXXX",
})
// 从URL获取token
const m = window.location.hash.match(/id_token=([^$&]+)[$&]/)
if (m) {
const token = m[1]
// 设置好客户端token之后获取用户信息
authenticationClient.setToken(token)
const userInfo = await authenticationClient.getCurrentUser()
if (!userInfo || !userInfo.id) {
this.setState({
loading: false,
loginSuccess: false,
text: '登录失败'
})
return
}
// 成功
localStorage.setItem('userInfo', JSON.stringify(userInfo))
this.setState({
loading: false,
loginSuccess: true,
text: '登录成功'
})
}
退出登录。
import AuthingSSO from "@authing/sso"
export const authSSO = new AuthingSSO({
appId: "XXXXXXXXXXXXXX",
appType: "oidc",
appDomain: "xxx.authing.cn"
})
<Button
type='link'
onClick={async ()=> {
try {
// 调用接口，从SSO页面也退出登录
console.log(await authSSO.logout())
} catch(e) { }
localStorage.removeItem('userInfo')
message.warn('您已经退出登录')
}}
>
{checkLogin() ? checkLogin().nickname + ' 退出登录' : ''}
</Button>
对 API 提交时，同时携带 token，以便于后端验证用户权限。
/**
* 这个函数是用来代替原生的fetch函数
*/
export async function fetchGet(url) {
const userInfo = checkLogin()
const token = userInfo ? userInfo.token : ''
const res = await fetch(url, {
headers: {
'token': token
}
})
// 后端授权检测失败
if (res.status === 401) {
message.error('您已经退出登录')
localStorage.removeItem('userInfo')
return res
}
return res
}
后端
后端主要是接收前端传过来的 token 并验证，这个组件对于不同框架来说可以是一个 middleware，也可以根据需要设计成一个装饰器。
以下代码针对 FastAPI 设计。
from fastapi import FastAPI
# https://github.com/tiangolo/fastapi/issues/142#issuecomment-688566673
from fastapi import Security
from fastapi.security.api_key import APIKeyHeader
from fastapi import HTTPException
from starlette import status
from authing.v2.authentication import AuthenticationClient, AuthenticationClientOptions
authentication_client = AuthenticationClient(
options=AuthenticationClientOptions(
user_pool_id='XXXXXXXXXXXXXX'
))
def auth_testing(token):
"""
测试authing的结果
"""
user = authentication_client.get_current_user(token)
user_id = user.get('id')
user_token = user.get('token')
if token == user_token:
return True, '成功'
return False, '验证失败'
# 设置FastAPI要获取的header名称
API_KEY_NAME = "token"
api_key_header_auth = APIKeyHeader(name=API_KEY_NAME, auto_error=True)
async def get_api_key(api_key_header: str = Security(api_key_header_auth)):
ret, detail = auth_testing(api_key_header)
if not ret:
raise HTTPException(
status_code=status.HTTP_401_UNAUTHORIZED,
detail=detail,
)
# 用法：
# @app.get('/', dependencies=get_dependencies())
def get_dependencies():
return [Security(get_api_key)]
app = FastAPI()
@app.get('/', dependencies=get_dependencies())
def main():
return { 'ok': 'hello' }