使用Nginx向Spotify授权

时间：2019-03-23 01:58:53

标签： reactjs docker nginx spotify

我有一个运行三个服务的Docker应用程序：

  
      
  • 客户端->反应前端
    •   
  • 网络 --->烧瓶后端
    •   
  • nginx ->-两者的反向代理
    •   

这是（简化的）项目结构：

docker-compose-dev.yml
services/
        client/
              src/
                 app.jsx
                 components/ 
                           spotify-auth.js
                           Spotify.jsx
         nginx/
              dev.conf
         web/

这是我在构建时定义暴露端口的地方：

  

docker-compose-dev.yml 

  web:
    build:
      context: ./services/web
      dockerfile: Dockerfile-dev
    volumes:
      - './services/web:/usr/src/app'
    ports:
      - 5001:5000 <----------------
    environment:
      - FLASK_ENV=development
      - APP_SETTINGS=project.config.DevelopmentConfig
    depends_on:  
      - web-db

  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
  

重定向

而

Client服务则需要通过Spotify进行身份验证，而Redirect URI需要在https://developer.spotify.com列入白名单的server { listen 80; listen 8888; location / { // frontend at localhost:3000 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; } location /users { // backend at localhost:5000 proxy_pass http://web:5000; 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; } location /auth { # this authentication is for the app, not spotify proxy_pass http://web:5000; 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; } } 。对于我来说，我有几种选择：

enter image description here

这是我的Nginx文件，我尝试在其中组织正确的端口：

  

dev.conf 

js

最后，我的jsx和localhost文件用于：

  1. 通过Spotify进行验证-----> Implicit Grant
  2. 将我的应用重定向回'/'或export const stateKey = 'spotify_auth_state'; export const client_id = 'my_client_id'; // Your client id export const redirect_uri = 'http://localhost:3000'; // my redirect uri //export const redirect_uri = 'http://localhost:8888'; // my second try for uri export const scope ='user-read-private user-read-email user-read-playback-state playlist-modify-public playlist-modify-private';
  

spotify-auth.js 

class SpotifyAuth extends Component {  
  constructor (props) {
    super(props);
    this.state = {
      isAuthenticatedWithSpotify: false
    };
    this.state.handleRedirect = this.handleRedirect.bind(this);
    this.loginSpotifyUser = this.loginSpotifyUser.bind(this);
  };

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

  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('spotifyAuthToken', access_token);
    //localStorage.getItem('spotifyAuthToken');
    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 -- send ajax to backend routes    
  };

  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;
    // post data to backend
    const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/auth/spotify}`;
    axios.post(url, data)
    .then((res) => {
      this.loginSpotifyUser(res.data.auth_token);
    })
    .catch((err) => { console.log(err); });    
  };

  loginSpotifyUser(token) {
    window.localStorage.setItem('spotifyAuthToken', token);
    this.setState({ isAuthenticatedWithSpotify: true });
    this.props.createMessage('Welcome to Spotify', 'success');
  };

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

export default SpotifyAuth;
  

Spotify.jsx 

render() {
  return (
  <div>  
    <Switch>
       <Route exact path='/' render={() => (
          <SpotifyAuth/>
        )} 
       />
    </Switch>
   </div>

然后渲染，就像这样：

  

App.jsx 

INVALID_CLIENT: Invalid redirect URI
  

错误：

所有这些设置并运行之后，我得到：

env
  

日志：

在构建之前，我导出此$ export REACT_APP_WEB_SERVICE_URL=http://localhost 变量：

logs

构建服务后，我得到client_1 | You can now view client in the browser. client_1 | client_1 | Local: http://localhost:3000/ web_1 | * Environment: development web_1 | * Debug mode: on web_1 | * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit) nginx_1 | 172.21.0.1 - - [27/Mar/2019:03:58:56 +0000] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36" "-" nginx_1 | 172.21.0.1 - - [27/Mar/2019:03:58:56 +0000] "GET /static/js/0.chunk.js HTTP/1.1" 304 0 "http://localhost/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36" "-" nginx_1 | 172.21.0.1 - - [27/Mar/2019:03:58:56 +0000] "GET /static/js/bundle.js HTTP/1.1" 304 0 "http://localhost/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36" "-" nginx_1 | 172.21.0.1 - - [27/Mar/2019:03:58:56 +0000] "GET /static/js/main.chunk.js HTTP/1.1" 304 0 "http://localhost/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36" "-" ：

localhost:8888

注意：

如果我尝试在Spotify.jsx上使用Spotify，则应用程序将通过localhost:8888/auth/login进行身份验证，但是所有位置都以localhost:3000开头，依此类推，这并不是希望的。

问题：

我的client redirect uri为什么不以Spotify的身份工作？我想念什么？

这是在像这样的docker项目上通过fileFrame.pack(fill="x") attributeFrame.pack(fill="x") constraintFrame.pack(fill="x") preferenceFrame.pack(fill="x") 进行身份验证的最可靠方法吗？

1 个答案:

答案 0 :(得分：4)

您的问题：

您的docker-compose.yml的{​​{1}}容器配置了端口映射client。请注意，Docker-compose端口映射为3007:3000（Compose file reference），这意味着主机的端口3007正在映射到容器的端口3000。

通过这种方式，尽管host:container对此容器感到满意，因为它与客户端在同一网络上，所以您尝试连接到主机上不可用的容器端口。到达并重定向请求。

如果是这样的话：

  • nginx不起作用，因为它在主机端是封闭的。
  • http://localhost:3000打开了客户端，因为它被重定向到客户端容器，但是除非您将该URL列入白名单并更改了http://localhost:3007，否则您将无法在其中使用Spotify身份验证。
  • redirect_uri将打开客户端，因为您已将http://localhost:8888设置为反向代理，并且由于它位于同一网络中，因此它可以访问客户端端口3000。

您的解决方案：

您的解决方案正在更改nginx，因此客户端被映射到端口docker-compose。然后，由于打开了端口并且正确配置了URL，因此Spotify身份验证应该没问题。

其他：

关于您对设计的意见要求，3000:3000觉得您的设计没有充分利用。如果您设置了反向代理，则将您重定向到的服务隐藏在无法从外部访问的安全网络中。这样，您可以例如在nginx上配置SSL，而无需考虑其余服务上的HTTP。但是，如果可以从其他端口访问此类服务，则进行这种配置是没有用的。

在生产设置中，您需要从docker-compose关闭nginx和client端口（从字面上讲，删除端口映射。Nginx不会访问容器，因为它处于打开状态相同的网络，与您的主机不同），只让web暴露在现实世界中。

您可能还想设置一条nginx规则，其中客户端和服务器分别挂在rewrite，http://localhost/client地址上，但是nginx重写了请求并将其代理到适当的容器中，因此容器实际上看到了一个向http://localhost/server发出的请求。您可以在Stack Exchange - Nginx reverse proxy + URL rewrite上看到有关如何配置所有这些内容的示例。

相关问题
最新问题