React 应用程序中的 OktaAuth 授权代码流程

Question

我无法理解如何在 React 应用程序中使用 okta-react 库，使用授权代码（非 pkce）授权类型登录。

我现在的设置非常简单：

//App.tsx
const oktaAuth = new OktaAuth({
  issuer: 'https://xxxxxxxxxx.com/oauth2/default',
  clientId: 'xxxxxxxxxxxxx',
  redirectUri: window.location.origin + '/welcome-back',
  pkce: false,
  responseType: 'code',
  devMode: true
});

function App() {

  const history = useHistory();
  const restoreOriginalUri = async (_oktaAuth: any, originalUri: string) => {
    history.push(toRelativeUrl(originalUri || '/', window.location.origin));
  };

  return (
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
        <NavigationDispatcher/>
    </Security>
  );
}

然后在 NavigationDispatcher 中 2 条简单路线（其中 1 条是安全的）：

        <>
            <Route path="/" component={HomepageView}/>
            <SecureRoute path="/secure-view" component={SecureView}/>
            <Route path='/welcome-back' component={LoginCallback}/>
        </>

所以配置似乎工作正常，因为当我尝试访问 SecureView 时，它会将我重定向到我登录的 okta 授权服务器托管 ui。问题是我在登录后被重定向到 /welcome-back 页面（其中我猜应该是这样？）但我的“authState”

const { authState } = useOktaAuth()

一切都未定义，就好像用户从未登录过一样。

我注意到重定向后的 URL 上有一个“code”参数，然后我可以在邮递员中成功使用该参数来获取授权服务器的

/token

端点上的访问令牌。

但是我认为完整的流程将由 okta-auth-js 库处理。如何实现授权码流程？而且，用户不应该被重定向到他试图访问的原始页面，而不是默认的重定向 uri 吗？

Answer 1

如果您尝试使用身份验证代码流（没有 PKCE），Okta React 库将无法完成 /token 请求以交换授权代码（

code

参数返回到您的redirect_uri/callback 路由） .

作为客户端的 React 库未设计/无法使用 Client ID:Client Secret 身份验证来进行 /token 请求（其设计用于 PKCE 身份验证，并且 自述文件指出，隐式流程和使用 PKCE 的身份验证代码流程是唯一受支持的流），因为它无法保护秘密。您的后端需要处理保护秘密并在 /token 端点处交换令牌的代码。