「开发者投稿」使用 Authing 对 SPA 应用进行身份认证实践

作者段清华，「最懂金融的 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 是否合法，如果不