时间戳

首页 > 解决方案 > 在 ReactJS 中的 Spotify API 上为 PKCE 身份验证创建代码验证器和质询

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

问题描述

我正在尝试按照他们的 api 中的文档将 Spotify auth 添加到我的单页反应应用程序中。

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

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, '')
}

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

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

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

标签： javascriptreactjsoauthspotifypkce

解决方案

尝试按照本指南生成代码以生成代码质询和验证程序

以下是重要部分：

生成代码验证器

    // 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;
    }

这是一个工作示例

您还可以在此处检查代码的有效性

推荐阅读