React - 使用 Nginx 在 Docker 中处理重定向 URI 到 Spotify

Question

我的 docker 应用中有这个文件夹结构：

nginx/
     dev.conf
client/
      src/
         Spotify.js

这就是我从client 调用redirect uri 的方式：

Spotify.js

  class SpotifyAuth extends Component {

  constructor () {
    super()

  this.handleRedirect = this.handleRedirect.bind(this)
  }

  getHashParams() {
    var hashParams = {};
    var e, r = /([^&;=]+)=?([^&;]*)/g,
        q = window.location.hash.substring(1);
    e = r.exec(q)
    while (e) {
       hashParams[e[1]] = decodeURIComponent(e[2]);
       e = r.exec(q);
    }
    return hashParams;
  }

  handleRedirect = (e) => {
    axios.get("http://localhost:8888" )
    .then(response => response.json())
    .then(data => console.log(data))
    .catch((err) => { console.log(err); });
    //e.preventDefault();
  }

  render () {
    return (
      <div className='button__container'>
        <button className='button' onClick={this.handleRedirect}
        ><strong>CONNECT YOUR SPOTIFY ACCOUNT</strong>
        </button>
      </div>
    )
  }
}
export default SpotifyAuth;

docker-compose-dev.yml

 nginx:
    build:
      context: ./services/nginx
      dockerfile: Dockerfile-dev
    restart: always
    ports:
      - 80:80
      - 8888:8888

    depends_on:
      - web
      - client

  client:
    build:
      context: ./services/client
      dockerfile: Dockerfile-dev
    volumes:
      - './services/client:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - 3007:3000
    environment:
      - NODE_ENV=development
      - REACT_APP_WEB_SERVICE_URL=${REACT_APP_WEB_SERVICE_URL}
    depends_on:
      - web

nginx/dev.conf

server {

  listen 80;

  location / {
    proxy_pass        http://client:3000;
    proxy_redirect    default;
    proxy_set_header  Upgrade $http_upgrade;
    proxy_set_header  Connection "upgrade";
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;
  }
}

如何正确授权并处理来自Spotify.js的令牌？

编辑：

我已经尝试了以下答案提出的解决方案，首先使用 localhost:8888，然后使用 localhost:3000（两者都在 Spotify 开发中作为重定向 URL 有效）

它只适用于 8888，即便如此：

应用程序将token 转储到localStorage，但挂起并在浏览器上显示以下警报：

然后，如果我点击 OK，并且只有 IF，它会重定向。

怎么了？

Answer 1

我认为你应该从localhost 直接重定向到spotify.com，而忽略localhost:8888。

我已将localhost:8888 上的代码移到 React 组件中，以便在您被重定向回来时处理重定向和访问令牌的保存。

const stateKey = 'spotify_auth_state';
const client_id = 'myid'; // Your client id
const redirect_uri = 'http://localhost:3000'; // Your redirect uri
const scope =
  'user-read-private user-read-email user-read-playback-state playlist-modify-public playlist-modify-private';

function generateRandomString(length) {
  let text = '';
  const possible =
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

  for (let i = 0; i < length; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }

  return text;
}

class SpotifyAuth extends React.Component {
  getHashParams() {
    const hashParams = {};
    const r = /([^&;=]+)=?([^&;]*)/g;
    const q = window.location.hash.substring(1);
    let e = r.exec(q);
    while (e) {
      hashParams[e[1]] = decodeURIComponent(e[2]);
      e = r.exec(q);
    }
    return hashParams;
  }

  componentDidMount() {
    const params = this.getHashParams();

    const access_token = params.access_token;
    const state = params.state;
    const storedState = localStorage.getItem(stateKey);
    localStorage.setItem('spotify_access_token', access_token);
    localStorage.getItem('spotify_access_token');

    if (access_token && (state == null || state !== storedState)) {
      alert('There was an error during the authentication');
    } else {
      localStorage.removeItem(stateKey);
    }

    // DO STUFF WITH ACCESS TOKEN HERE
  }

  handleRedirect() {
    const state = generateRandomString(16);
    localStorage.setItem(stateKey, state);

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

    window.location = url;
  }

  render() {
    return (
      <div className="button__container">
        <button className="button" onClick={this.handleRedirect}>
          <strong>CONNECT YOUR SPOTIFY ACCOUNT</strong>
        </button>
      </div>
    );
  }
}

componentDidMount 函数将在组件加载时运行：see more here。

您还可以在OAuth2 here 上阅读更多信息，您正在使用隐式流程。