如何让react-oidc-context适配自定义token参数的OAuth登录流程?
客户的非常规OAuth参数
我需要对接客户自研的OAuth身份提供商,其登录流程要求应用重定向至:
customer-oauth/account/signin?redirect=<redirect_url>&some=custom¶ms=needed
用户完成登录后,会被重定向回应用,地址格式为:
redirect_url?customer_portal_token=<some_token>
这里需要注意自定义参数customer_portal_token。重定向完成后,我需要携带这个短期令牌调用customer-oauth/auth/get-token接口,以此获取有效的access_token。
oidc-client-ts与react-oidc-context配置
在了解客户的非标准规则前,我已经通过react-oidc-context在React项目中完成了oidc-client-ts的常规配置,和之前对接Keycloak时的操作一致:
import { AuthProvider, AuthProviderProps } from "react-oidc-context"; const oidcConfig: AuthProviderProps = { authority: AUTHORITY, redirect_uri: MY_APP_URL, }; const App = () => { return ( <AuthProvider {...oidcConfig}> <AppHere /> </AuthProvider> ) }
import { useAuth } from "react-oidc-context"; const DeeperInTheApp = () => { const { isAuthenticated, signinRedirect, signoutRedirect } = useAuth(); return isAuthenticated ? <button onClick={() => signinRedirect()}>logout</button> : <button onClick={() => signoutRedirect()}>login</button> }
Keycloak的正常流程
对接Keycloak时流程完全顺畅:点击登录按钮后,库会自动调用KEYCLOAK_URL/realms/master/.well-known/openid-configuration获取OIDC元数据,其中包含登录地址和令牌接口地址。用户被重定向到登录页完成登录后,会携带state、code等参数返回应用,库会自动调用令牌接口获取id_token、access_token等,并将应用标记为已认证状态。
适配客户自定义OAuth参数的配置
由于客户的OIDC服务没有提供元数据接口,我手动配置了元数据:
const oidcConfig: AuthProviderProps = { authority: CUSTOMER_OIDC, metadata: { issuer: CUSTOMER_OIDC, authorization_endpoint: `${CUSTOMER_OIDC}/account/signin`, token_endpoint: `${CUSTOMER_OIDC}/get-refresh`, }, };
同时在登录时添加了自定义参数:
const DeeperInTheApp = () => { const { isAuthenticated, signinRedirect, user, signoutRedirect } = useAuth(); return isAuthenticated ? <button onClick={() => signinRedirect( extraQueryParams({ some: 'custom', params: 'needed' }) )}> logout </button> : <button onClick={() => signoutRedirect()}>login</button> }
当前配置可以正常触发重定向到客户的OAuth门户,用户登录后也能返回应用,但oidc-client-ts不会自动携带customer_portal_token调用令牌接口。
核心疑问:有没有办法在不编写自定义认证逻辑的前提下,让oidc-client-ts和react-oidc-context自动完成后续步骤——调用客户的令牌接口并将应用标记为已认证状态?这种方案是否可行?
内容的提问来源于stack exchange,提问作者Seth Lutske

