如何为身份验证代码流创建 PKCE 代码和验证程序？答案

【问题标题】：How to create PKCE code and verifier for auth code flow?如何为身份验证代码流创建 PKCE 代码和验证程序？
【发布时间】：2022-01-13 14:59:47
【问题描述】：

遵循 Okta 的身份验证代码流程 they say I need to create a PKCE code，其中包含代码验证者和挑战者。

不清楚如何像他们的示例一样创建值：

{
  "code_verifier":"M25iVXpKU3puUjFaYWg3T1NDTDQtcW1ROUY5YXlwalNoc0hhakxifmZHag",
  "code_challenge":"qjrzSW9gMiUgpUvqgEPE4_-8swvyCtfOVvg55o5S_es"
}

我知道我可以像这样在身份验证 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=${codeChallenge}&code_challenge_method=S256

但不清楚我对验证者做了什么。它说：

您的应用会保存 code_verifier 以供以后使用

在哪里保存验证器以及如何创建这些值？

编辑：显示我在 localStorage 中设置 code_verifier 的代码

const Login = () => {

  const codeVerifier = useMemo(async () => {
    const s256 = await sha256(codeChallenge)
    const verifier = btoa(s256);

    window.localStorage.setItem(state, verifier);
    
    return verifier;
  }, [])

  if (!codeVerifier) {
    return <div>Loading...</div>;
  }

  const queryParams = encode({
    client_id: CLIENT_ID,
    redirect_uri: encodeURI(REDIRECT_URI),
    response_type: 'code',
    response_mode: 'query',
    state,
    nonce,
    code_challenge: codeChallenge,
    code_challenge_method: 'S256',
    scope: 'openid email',
    idp: OKTA_IDP
  });

  const socialLoginURI = `${OKTA_AUTH_URI}?${queryParams}`;

  return (
    <Button 
      component="a"
      href={socialLoginURI}
      aria-label="Login Button"
    >
      Facebook Login
    </Button>
  );
};

【问题讨论】：

标签： javascript oauth-2.0 oauth auth0 okta

【解决方案1】：

verifier 在稍后阶段用代码交换令牌期间发送。如何存储它，这取决于你。验证者产生挑战的机制在https://datatracker.ietf.org/doc/html/rfc7636#section-4.2

【讨论】：

好的，我可以执行以下操作。创建 code_verifier 和 savae 到 localStorage，然后从 code_verifier 创建 code_challenge。然后，我使用原始帖子中的 URL 将用户重定向到身份验证流。然后当用户被重定向回我的应用程序时，我从 localStorage 获取 code_verifier？
这正是它应该如何工作的:)
好吧有道理。我已经添加到我的原始帖子中，展示了我现在如何生成 code_verifier 并将其保存到本地存储。重定向到我的 redirect_uri 时，我似乎仍然遇到同样的错误。这可能是因为 Okta 不知道从哪里检索验证器？
我正在使用来自@okta/okta-react 库的LoginCallback 组件，我认为它应该为我处理提取验证程序？
默认情况下，okta 组件应该为您处理这些代码，因此您不需要生成或显式发送它们。尝试使用最小的应用程序重新创建问题，如果它不起作用，您可以将链接添加到 repo，以便人们可以检查。

【解决方案2】：

原来我试图手动生成身份验证字符串。这样做会跳过创建 code_verifier 的步骤（正如@philipp-grigoryev 指出的那样）。

我应该一直使用 Okta sdk 来重定向处理将 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
  });
};

【讨论】：