「开发者投稿」使用 Authing 对 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' }