You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让react-oidc-context适配自定义token参数的OAuth登录流程?

适配自定义OAuth提供商的oidc-client-ts配置疑问

客户的非常规OAuth参数

我需要对接客户自研的OAuth身份提供商,其登录流程要求应用重定向至:

customer-oauth/account/signin?redirect=<redirect_url>&some=custom&params=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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.28 12:05:28