reactjs-使用Nginx向Spotify授权
作者：互联网
我有一个运行三个服务的docker app：
- client –> react frontend
- web — > flask backend
- nginx ->- a reverse proxy for both
这是(简化的)项目结构：
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
REDIRECT
反过来,客户端服务需要通过Spotify进行身份验证,这需要一个重定向URI(白名单为https://developer.spotify.com).对于我来说,我有几种选择：
这是我的nginx文件,在这里我尝试组织正确的端口：
dev.conf
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;
}
}
最后,我的jsand jsx文件用于：
>通过Spotify进行验证—–> Implicit Grant
>将我的应用重定向回本地主机或“ /”
spotify-auth.js
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.jsx
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;
并渲染,就像这样：
App.jsx
render() {
return (
<div>
<Switch>
<Route exact path='/' render={() => (
<SpotifyAuth/>
)}
/>
</Switch>
</div>
ERROR:
设置并运行所有这些之后,我得到：
INVALID_CLIENT: Invalid redirect URI
LOGS:
在构建之前,我导出此env变量：
$export REACT_APP_WEB_SERVICE_URL=http://localhost
构建服务后,我将获得日志：
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" "-"
注意：
如果我尝试在Spotify.jsx上使用localhost：8888,则该应用程序设法通过Spotify进行身份验证,但是所有位置都从localhost：8888 / auth / login等开始,这是不希望的.
题：
为什么我的客户端localhost：3000不能用作重定向uri？我想念什么？
这是在像这样的Docker项目上通过Spotify进行身份验证的最可靠方法吗？
解决方法:
您的问题：
您的docker-compose.yml的客户端容器配置了端口映射3007：3000.请注意,Docker-compose端口映射为host：container(Compose file reference),这意味着主机的端口3007正在映射到容器的端口3000.
这样,您尝试连接到主机上不可用的容器端口,尽管nginx对此感到满意,因为它与客户端位于同一网络上,因此它可以访问它并重定向请求.
如果是这样的话：
> http：// localhost：3000不起作用,因为它在主机端已关闭.
> http：// localhost：3007将打开您的客户端,因为它将被重定向到您的客户端容器,但是除非您将该URL列入白名单并更改了redirect_uri,否则您将无法在其中使用Spotify身份验证.
> http：// localhost：8888打开您的客户端,因为您将nginx设置为反向代理,并且由于它位于同一网络上,因此它可以访问客户端端口3000.
您的解决方案：
您的解决方案正在更改docker-compose,因此客户端映射到端口3000：3000.然后,由于端口已打开并且URL已正确配置,因此Spotify身份验证应该没问题.
额外：
关于您对设计的意见要求,nginx觉得您的设计没有充分利用.如果您设置了反向代理,则将您重定向到的服务隐藏在无法从外部访问的安全网络中.这样,您可以例如在nginx上配置SSL,而无需在其余服务上使用HTTP.但是,如果可以从其他端口访问此类服务,则进行这种配置是没有用的.
在生产设置中,您想从docker-compose关闭客户端和Web端口(从字面上讲,删除端口映射.Nginx可以访问您的容器,因为它与主机不同,因为它位于同一网络上) nginx暴露于现实世界.
您可能还需要设置一个重写规则,其中客户端和服务器分别挂在http：// localhost / client和http：// localhost / server地址上,但是nginx重写了请求并将其代理到适当的容器中,因此容器实际上看到一个请求到http：// localhost：3000 /.您可以在Stack Exchange – Nginx reverse proxy + URL rewrite看到有关如何配置所有这些的示例.
标签：spotify,nginx,docker,reactjs 来源： https://codeday.me/bug/20191024/1922854.html