Попытка поразить 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);

0 ответов

Другие вопросы по тегам