如何使用 Okta 实现身份验证代码流答案

【问题标题】：How to implement Auth Code Flow with Okta如何使用 Okta 实现身份验证代码流
【发布时间】：2022-01-13 12:27:43
【问题描述】：

我们有一个 react 应用程序，我们正在尝试通过 Facebook 的社交登录来实现身份验证代码流。一旦通过身份验证，我们将向后端发出请求，后端将在每次调用时验证 JWT 访问令牌。

当尝试使用 Facebook 登录时，我们会使用我们的身份验证代码成功重定向回 redirect_uri，但在我们能够将身份验证代码交换为访问令牌之前，我们会收到以下错误：

AuthSdkError: Unable to retrieve OAuth redirect params from storage

我们有一个简单的组件来处理回调 URI 和 Okta 配置，如下所示：

const oktaAuth = new OktaAuth({
  clientId: CLIENT_ID,
  issuer: ISSUER,
  redirectUri: REDIRECT_URI,
  scopes: ['openid', 'profile', 'email'],
  pkce: true,
  disableHttpsCheck: OKTA_TESTING_DISABLEHTTPSCHECK,
});

function App() {

  const history = useHistory();

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

  return (
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
      <UserDataProvider>
        <Switch>
          <Route path="/" exact component={isAuthenticated ? Home : Login} />

          <SecureRoute path="/protected" exact component={Home} />
          <Route path="/login/callback" component={LoginCallback} /> // LoginCallback from the Okta SDK (@okta/okta-react)

          <Redirect to="/" />
        </Switch>
      </UserDataProvider>
    </Security>
  );
}

错误似乎来自 Okta SDK 中的 LoginCallback 组件。

我们有一个这样的 URL 来处理我们的登录，并且应该将我们重定向到我们的应用程序： https://${ourOktaDomain}/oauth2/v1/authorize?idp=${idp}&client_id=${clientId}&response_type=code&response_mode=query&scope=openid%20email&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Flogin%2Fcallback&state=${randomString}&code_challenge=${anotherRandomString}&code_challenge_method=S256

为什么会出现此错误？
Okta 试图从存储中检索什么以及它正在谈论哪个存储（本地/会话等）。
在重定向到上述 Okta 登录 URL 之前，我们是否应该在存储中设置一些值？
我们的 OktaAuth 配置对象是否正确？使用 PKCE 是否正确？

【问题讨论】：

idp 值从何而来？
当我们在 Okta 中创建安全身份提供者时，我们从 Okta 获得身份提供者的价值 -> 身份提供者
code_challenge 不是随机字符串，我看到了你的后续问题...

标签： javascript reactjs oauth-2.0 oauth okta

【解决方案1】：

原来我应该使用 Okta 的 SDK 来生成身份验证字符串，而不是自己构建它。 SDK 在幕后处理事情，特别是 PKCE，它需要将 code_verifier 存储在本地存储中，然后在用户成功登录后被重定向到应用程序时提取。

这就是我使用 SDK 处理它的方式：

const onSocialLogin = () => {
  oktaAuth.signInWithRedirect({ 
    originalUri: '/welcome',
    clientId: CLIENT_ID,
    redirectUri: encodeURI(REDIRECT_URI),
    responseType: 'code',
    responseMode: 'query',
    state,
    nonce,
    codeChallenge,
    codeChallengeMethod: 'S256',
    scopes: ['openid', 'email'],
    idp: FACEBOOK_APP_ID
  });
};

【讨论】：