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)}`;

React中具有隐式授权的Spotify身份验证完成后不会重定向

1 个答案: