下面的此React组件使用Implicit Grant Flow将应用程序连接到Spotify,在获得用户令牌后将应用程序重定向回我的客户端。
import React, { Component } from 'react';
import Credentials from './spotify-auth.js'
import './Spotify.css'
class SpotifyAuth extends Component {
constructor (props) {
super(props);
this.state = {
isAuthenticatedWithSpotify: false,
menu: this.props.userId.menu
};
this.state.handleRedirect = this.handleRedirect.bind(this);
};
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() {
//if (this.props.isAuthenticated) {
const params = this.getHashParams();
const access_token = params.access_token;
const state = params.state;
const storedState = localStorage.getItem(Credentials.stateKey);
localStorage.setItem('spotifyAuthToken', access_token);
localStorage.getItem('spotifyAuthToken');
if (window.localStorage.getItem('authToken')) {
this.setState({ isAuthenticatedWithSpotify: true });
};
if (access_token && (state == null || state !== storedState)) {
alert('Click "ok" to finish authentication with Spotify');
} else {
localStorage.removeItem(Credentials.stateKey);
}
// DO STUFF WITH ACCEES TOKEN HERE
this.props.onConnectWithSpotify(access_token);
};
handleRedirect(event) {
event.preventDefault()
this.props.createMessage('You linked your Spotify account!', 'success');
const params = this.getHashParams();
const access_token = params.access_token;
console.log(access_token);
const state = this.generateRandomString(16);
localStorage.setItem(Credentials.stateKey, state);
let url = 'https://accounts.spotify.com/authorize';
url += '?response_type=token';
url += '&client_id=' + encodeURIComponent(Credentials.client_id);
url += '&scope=' + encodeURIComponent(Credentials.scope);
url += '&redirect_uri=' + encodeURIComponent(Credentials.redirect_uri);
url += '&state=' + encodeURIComponent(state);
window.location = url;
};
render() {
return (
<div className="button_container">
<h1 className="title is-4"><font color="#C86428">Welcome</font></h1>
<div className="Line" /><br/>
<button className="sp_button" onClick={(event) => this.handleRedirect(event)}>
<strong>LINK YOUR SPOTIFY ACCOUNT</strong>
</button>
</div>
)
}
}
export default SpotifyAuth;
但是,在重定向之前,我想用定义的作用域和“同意”按钮描述以下页面或弹出窗口:
根据Implicit Flow的Spotify文档,将用户重定向到https://accounts.spotify.com/authorize?client_id=5fe01282e94241328a84e7c5cc169164&redirect_uri=http:%2F%2Fexample.com%2Fcallback&scope=user-read-private%20user-read-email&response_type=token&state=123
...执行几个操作:
要求用户在范围内授权访问。 Spotify帐户>服务提供了正在寻求访问权限的范围的详细信息。 如果用户未登录,则会提示他们使用其Spotify>用户名和密码进行登录。 用户登录后,将要求他们授权对范围中定义的数据集进行访问。
当我调用https://accounts.spotify.com/authorize?
时,上面的代码都没有发生以上操作,只是得到了令牌。
怎么了?
我找到了这个Codepen示例,其中提示用户登录页面:
Spotify Implicit Grant Auth Popup
如何在上面的组件中添加此功能?
答案 0 :(得分:3)
注意: 使用一个电子邮件ID接受范围后,将不会再显示范围页面。范围仅在开始时被询问一次。如果要再次查看范围页面,则必须授权新的电子邮件ID。
我创建了一个React应用,以了解您的代码如何工作。我运行了以下代码:
import React, { Component } from 'react';
export const authEndpoint = 'https://accounts.spotify.com/authorize';
class SpotifyAuth extends Component {
constructor(props) {
super(props);
this.state = {
isAuthenticatedWithSpotify: false
// menu: this.props.userId.menu
};
this.state.handleRedirect = this.handleRedirect.bind(this);
}
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() {
//if (this.props.isAuthenticated) {
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 (window.localStorage.getItem('authToken')) {
this.setState({ isAuthenticatedWithSpotify: true });
}
if (access_token && (state == null || state !== storedState)) {
alert('Click "ok" to finish authentication with Spotify');
} else {
localStorage.removeItem('stateKey');
}
console.log(access_token);
// DO STUFF WITH ACCEES TOKEN HERE
// this.props.onConnectWithSpotify(access_token);
}
handleRedirect(event) {
event.preventDefault();
console.log('You linked your Spotify account!', 'success');
const params = this.getHashParams();
const access_token = params.access_token;
console.log(access_token);
const state = this.generateRandomString(16);
localStorage.setItem('stateKey', state);
// let url = 'https://accounts.spotify.com/authorize';
// url += '?response_type=token';
// url +=
// '&client_id=' + encodeURIComponent('f09fbf600009433dadce5836c57584c3');
// url += '&scope=' + encodeURIComponent('user-top-read');
// url += '&redirect_uri=' + encodeURIComponent('http://localhost:3000/abc');
// url += '&state=' + encodeURIComponent(state);
// url += '&show_dialog=true';
let url =
'https://accounts.spotify.com/authorize' +
'?response_type=code' +
'&client_id=f09fbf600009433dadce5836c57584c3' +
'&scope=' +
encodeURIComponent('user-read-private%20user-read-email') +
'&redirect_uri=' +
encodeURIComponent('http://localhost:3000/loginsuccess');
window.location = url;
}
render() {
return (
<div className="button_container">
<h1 className="title is-4">
<font color="#C86428">Welcome</font>
</h1>
<div className="Line" />
<br />
<button
className="sp_button"
onClick={(event) => this.handleRedirect(event)}
>
<strong>LINK YOUR SPOTIFY ACCOUNT</strong>
</button>
</div>
);
}
}
export default SpotifyAuth;
我相信,当我对URL进行硬编码而不是从Credential
中获取值时,代码没有问题。我能够看到范围页面
如果您可以验证保存在Credential
中的范围是正确的,那就更好了。
我还注释了this.props.createMessage
方法,该方法对我来说是抽象的,可能会引起一些问题。