控制台
博客/开发者/正文
「开发者投稿」使用 Authing 对 SPA 应用进行身份认证实践
Authing 官方2021-01-12阅读 16
作者段清华,「最懂金融的 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' }

文章作者

avatar

Authing 官方

0

文章总数

关注 Authing 公众号
随时随地发现更多内容
添加 Authing 小助手
加入 Authing 开发者大家庭