如何计算PCKE的code_verifier？

Question

我正在研究Okta's PCKE Flow demo以更好地了解其工作原理，并且在再现从code_challenge生成的相同code_verifier哈希值时遇到了麻烦。这是演示的屏幕截图：

使用Zg6klgrnixQJ629GsawRMV8MjWvwRAr-vyvP1MHnB6X8WKZN作为代码验证者，它们是如何产生的iF_7prUeJ6rr3jMG3LmhW3R1cZ2ecZavFqS0jtb6tzo作为代码挑战？

使用此SHA256 hash calculator和Base64 Encoder，我得到的ODg1ZmZiYTZiNTFlMjdhYWViZGUzMzA2ZGNiOWExNWI3NDc1NzE5ZDllNzE5NmFmMTZhNGI0OGVkNmZhYjczYQ与iF_7prUeJ6rr3jMG3LmhW3R1cZ2ecZavFqS0jtb6tzo的期望值不匹配。我做错了没有得到期望值吗？

此SHA256 base 64 hash calculator from approsto给我的值非常接近期望值。使用此计算器，我得到的iF/7prUeJ6rr3jMG3LmhW3R1cZ2ecZavFqS0jtb6tzo与期望值相差一个字符（注意如何用/代替_）。

我正在做什么导致此差异？如何计算code_verifier的预期iF_7prUeJ6rr3jMG3LmhW3R1cZ2ecZavFqS0jtb6tzo值？谢谢

Answer 1

PKCE代码挑战是验证程序的Base64-URL编码的SHA256哈希。这意味着您需要获取原始字符串，计算它的SHA256哈希，然后对哈希进行Base64-URL编码。这是很多话，所以让我们来看一下。

上面您尝试做的事情有两个问题：

您找到的在线SHA256哈希计算器将哈希输出为十六进制编码的字符串，而不是原始字节。这通常很有帮助，但在这种情况下没有帮助。因此，通过base64编码要做的下一件事是，您正在对base64编码哈希的十六进制表示形式而不是原始字节进行编码。您需要使用散列函数来输出原始字节，然后将原始字节传递到base64-url-encoder中。

下一个问题是您需要base64-url编码，而不是base64编码。 Base64-URL-encoding是Base64编码的一个较小变体，唯一的区别是使用字符-而不是+和_代替/，并从末尾修剪=填充字符。这使它成为URL安全的，因为否则需要在URL中转义+/=字符。

因此，要计算PKCE代码挑战，您需要使用可以为您提供原始字节的SHA256函数，然后使用经过修改的Base64编码函数对这些字节进行编码。

以下是PHP中的某些代码可以做到这一点：

    function pkce_code_challenge($verifier) {
        $hash = hash('sha256', $verifier, true);
        return rtrim(strtr(base64_encode($hash), '+/', '-_'), '=');
    }

也可以在浏览器中的纯JavaScript中使用，但由于WebCrypto API的复杂性，代码会稍长一些：

    function sha256(plain) { 
        // returns promise ArrayBuffer
        const encoder = new TextEncoder();
        const data = encoder.encode(plain);
        return window.crypto.subtle.digest('SHA-256', data);
    }

    function base64urlencode(a) {
        // Convert the ArrayBuffer to string using Uint8 array.
        // btoa takes chars from 0-255 and base64 encodes.
        // Then convert the base64 encoded to base64url encoded.
        // (replace + with -, replace / with _, trim trailing =)
        return btoa(String.fromCharCode.apply(null, new Uint8Array(a)))
            .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
    }

    async function pkce_challenge_from_verifier(v) {
        hashed = await sha256(v);
        base64encoded = base64urlencode(hashed);
        return base64encoded;
    }