React中具有隱式授權的Spotify身份驗證完成后不會重定向

Question

我想在他們的文檔中使用隱式授予方法來完成Spotify身份驗證。 我已經將似乎相關的代碼復制到了React組件中。 我設法登錄到Spotify，但是頁面沒有重定向回到重定向uri。

我已將URI添加到Web控制台中的列表中，但是即使我確實使用了未注冊的URI，也不會顯示錯誤。 它甚至不嘗試重定向。

認證后如何獲得重定向？

該組件是頁面上唯一呈現的內容：

import React from "react";

const stateKey = "spotify_auth_state";

const SpotifyLogin = class extends React.Component {
  ComponentDidMount() {
    localStorage.removeItem(stateKey);
  }

  handleClick = () => {
    const client_id = "e5abbee6e0fd4e4bbd080c6d212ca520";
    const redirect_uri = "http://localhost:3000";
    const scope = "user-read-private user-read-email";
    const state = generateRandomString(16);

    localStorage.setItem(stateKey, state);

    const url = `https://accounts.spotify.com/authorize
                 ?response_type=token
                 &client_id=${encodeURIComponent(client_id)}
                 &scope=${encodeURIComponent(scope)}
                 &redirect_uri=${encodeURIComponent(redirect_uri)}
                 &state=${encodeURIComponent(state)}`;

    window.location = url;
  };

  render() {
    return <button onClick={this.handleClick}>Log in</button>;
  }
};

const generateRandomString = length => {
  let text = "";
  const possible =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  while (text.length <= length) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }

  return text;
};

export default SpotifyLogin;

Answer 1

問題是我使用了多行字符串模板。 這使字符串具有多行，並且沒有將字符串連接成一行。

固定：

let url = "https://accounts.spotify.com/authorize";
url += "?response_type=token";
url += `&client_id=${encodeURIComponent(client_id)}`;
url += `&scope=${encodeURIComponent(scope)}`;
url += `&redirect_uri=${encodeURIComponent(redirect_uri)}`;
url += `&state=${encodeURIComponent(state)}`;