SPA类前后端完全分类应用使用Authing的云身份验证与单点登录

/**
 * 本地先检测登录状态，如果没有则提示跳转到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>

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>

/**
 * 这个函数是用来代替原生的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
}

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' }