在 ReactJS 中的 Spotify API 上为 PKCE 身份验证创建代码验证器和质询

Posted 2023-04-15

【中文标题】在 ReactJS 中的 Spotify API 上为 PKCE 身份验证创建代码验证器和质询

【英文标题】：Creating a code verifier and challenge for PKCE auth on Spotify API in ReactJS

【发布时间】：2020-11-28 05:46:34

【问题描述】：

我正在尝试在the doc from their api 之后将 Spotify 身份验证添加到我的单页响应应用程序中。

到目前为止，这是我根据我在网上找到的解决方案生成代码的方式：

const generateVerifier = () => 
    return crypto.randomBytes(64).toString('hex');


const getChallenge = verifier => 
    return crypto.createHash('sha256')
        .update(verifier)
        .digest('base64')
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=/g, '')

我使用该技术创建的一对代码示例：

验证者：e8c3745e93a9c25ce5c2653ee36f5b4fa010b4f4df8dfbad7055f4d88551dd960fb5b7602cdfa61088951eac36429862946e86d20b15250a8f0159f1ad001605 挑战：CxF5ZvoXa6Cz6IcX3VyRHxMPRXYbv4PADxko3dwPF-I

我创建的一对旧代码的示例：

验证者：1jp6ku6-16xxjfi-1uteidc-9gjfso-1mcc0wn-tju0lh-tr2d8k-1auq4zk 挑战：SRvuz5GW2HhXzHs6b3O_wzJq4sWN0W2ma96QBx_Z77s

然后我收到来自 API 的响应，说“code_verifier 不正确”。我在这里做错了什么？

【问题讨论】：

您是否在应用设置中设置了您的域名/网站？

是的@AshishDuklan，我收到来自 API 的回复说“code_verifier 不正确”。其他一切正常。

【参考方案1】：

尝试关注this guide for generating code for generating code challenge and verifier

以下是重要部分：

生成代码验证器

    // GENERATING CODE VERIFIER
    function dec2hex(dec) 
      return ("0" + dec.toString(16)).substr(-2);
    
    function generateCodeVerifier() 
      var array = new Uint32Array(56 / 2);
      window.crypto.getRandomValues(array);
      return Array.from(array, dec2hex).join("");
    

从代码验证器生成代码质询

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) 
      var str = "";
      var bytes = new Uint8Array(a);
      var len = bytes.byteLength;
      for (var i = 0; i < len; i++) 
        str += String.fromCharCode(bytes[i]);
      
      return btoa(str)
        .replace(/\+/g, "-")
        .replace(/\//g, "_")
        .replace(/=+$/, "");
    

    async function generateCodeChallengeFromVerifier(v) 
      var hashed = await sha256(v);
      var base64encoded = base64urlencode(hashed);
      return base64encoded;
    

这是working example

您还可以检查代码here的有效性

【讨论】：

我最终使用了 Crypto-JS 库，但肯定会尝试这个，谢谢！

【参考方案2】：

我从护照 oauth2 库中获取了这个 sn-p 来生成代码验证器和代码挑战。

const code_verifier = base64url(crypto.pseudoRandomBytes(32));

const code_challenge = crypto
     .createHash("sha256")
     .update(code_verifier)
     .digest();