Попытка поразить API на Heroku с React
Проблема: я хочу, чтобы пользователь щелкнул ссылку, затем включил логику бэкенда и перенаправил пользователя на страницу авторизации Spotify, где пользователь входит в систему и перенаправляется обратно на мою страницу с токеном доступа. Вместо этого единственное, что происходит, - это обновление страницы, хотя в URL-адресе указано /login.
Что сводит меня с ума, так это то, что все работает нормально, когда я работаю локально и использую localhost: 3000/8080 (Front / Back-end).
LoginButton.js
<a href="/login" className="login">
<i className="fa fa-spotify" />
SIGN IN WITH SPOTIFY
</a>
server.js
const express = require('express');
const request = require('request');
const querystring = require('querystring');
const cookieParser = require('cookie-parser');
const path = require('path');
const client_id = '-------------------------';
const client_secret = '----------------------';
const redirect_uri = 'https://mau-jam.herokuapp.com/callback/';
var PORT = process.env.PORT;
const stateKey = 'spotify_auth_state';
const app = express();
app
.use(express.static(path.resolve(__dirname, '../react-ui/build')))
.use(cookieParser());
// Here is the logic i want to happen when the user clicks the link
app.get('/login', function(req, res) {
var state = generateRandomString(16);
res.cookie(stateKey, state);
var scope = 'user-read-private';
res.redirect(
'https://accounts.spotify.com/authorize?' +
querystring.stringify({
response_type: 'code',
client_id: client_id,
scope: scope,
redirect_uri: redirect_uri,
state: state,
show_dialog: true
})
);
});
//After authorization is finished
app.get('/callback', function(req, res) {
var code = req.query.code || null;
var state = req.query.state || null;
var storedState = req.cookies ? req.cookies[stateKey] : null;
if (state === null || state !== storedState) {
res.redirect(
'/#' +
querystring.stringify({
error: 'state_mismatch'
})
);
} else {
res.clearCookie(stateKey);
var authOptions = {
url: 'https://accounts.spotify.com/api/token',
form: {
code: code,
redirect_uri: redirect_uri,
grant_type: 'authorization_code'
},
headers: {
Authorization:
'Basic ' +
new Buffer(client_id + ':' + client_secret).toString('base64')
},
json: true
};
request.post(authOptions, function(error, response, body) {
if (!error && response.statusCode === 200) {
var access_token = body.access_token,
refresh_token = body.refresh_token;
var options = {
url: 'https://api.spotify.com/v1/me',
headers: { Authorization: 'Bearer ' + access_token },
json: true
};
res.redirect(
'https://mau-jam.herokuapp.com/#' +
querystring.stringify({
access_token: access_token,
refresh_token: refresh_token
})
);
} else {
res.redirect(
'/#' +
querystring.stringify({
error: 'invalid_token'
})
);
}
});
}
});
app.get('/', function(request, response) {
response.sendFile(path.resolve(__dirname, '../react-ui/build',
'index.html'));
});
console.log(`Listening on ${PORT}`);
app.listen(PORT);