问Spotify节点web api -登录后立即退出

EN

require('dotenv').config();
const express = require('express');
const cors = require('cors');
const SpotifyWebApi = require('spotify-web-api-node');


const app = express();

app.use(cors()) // to handle the cross-origin requests
app.use(express.json()); // to parse JSON bodies

const port = process.env.PORT || 8000;

const credentials = {
  clientId: process.env.CLIENT_ID,
  clientSecret: process.env.CLIENT_SECRET,
  redirectUri: process.env.REDIRECT_URI || "http://localhost:3000"
};

app.post('/refresh', (req, res) => {
  const refreshToken = req.body.refreshToken;
  // console.log("Hii");
  let spotifyApi = new spotifyWebApi({
    clientId: process.env.CLIENT_ID,
    clientSecret: process.env.CLIENT_SECRET,
    redirectUri: process.env.REDIRECT_URI,
    refreshToken,
  });

  spotifyApi
    .refreshAccessToken()
    .then((data) => {
      // console.log(data.body);
      res.json({
          accessToken: data.body.access_token,
          expiresIn: data.body.expires_in,
      })

    })
    .catch((err) => {
      console.log(err);
      res.sendStatus(400);
    });
});


app.post('/login', (req,res) => {
  // Get the "code" value posted from the client-side and get the user data from the spotify api 
  let spotifyApi = new spotifyWebApi(credentials)
  const code = req.body.code

  spotifyApi.authorizationCodeGrant(code).then((data) => {

      // Returning the User's Data in the json formate  
      res.json({
          accessToken : data.body.access_token,
          refreshToken : data.body.refresh_token,
          expiresIn : data.body.expires_in
      }) 
  })
  .catch((err) => {
      console.log(err);
      res.sendStatus(400)
  })

})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

import React from 'react';
import { useEffect, useState } from 'react';
import axios from "axios"


export default function useAuth(code) {
    const [accessToken, setAccessToken] = useState();
    const [refreshToken, setRefreshToken] = useState();
    const [expiresIn, setExpiresIn] = useState();

    useEffect(() => {
        
        axios
            .post("/login", {code})
            .then((res) => {

                window.history.pushState({}, null, "/");

                console.log(res.data);
                setAccessToken(res.data.accessToken);
                setRefreshToken(res.data.refreshToken);
                setExpiresIn(res.data.expiresIn);
            })
            .catch(() => {
                window.location = "/";
            });

    }, [code]);

    useEffect(() => {
        if (!refreshToken || !expiresIn) {
            return;
        }

        let interval = setInterval(() => {
            axios
                .post("/refresh", {refreshToken})
                .then((res) => {
                    setAccessToken(res.data.accessToken);
                    setExpiresIn(res.data.expiresIn);
                })
                .catch(() => {
                    window.location = "/";
                });
        }, (expiresIn - 60) * 1000);

        return () => clearInterval(interval)
    }, [refreshToken, expiresIn]);

    return accessToken;
}

const authEndpoint = "https://accounts.spotify.com/authorize";
const redirectUri = "http://localhost:3000";
const clientId = "ea28d4ba34f34b44b59c640052c6e098";

const scopes = [
  "streaming",
  "playlist-modify-public",
  "ugc-image-upload",
  "user-read-email",
  "user-read-private",
  "user-read-currently-playing",
  "user-read-recently-played",
  "user-read-playback-state",
  "user-modify-playback-state"
];

export const loginUrl = `${authEndpoint}?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=${scopes.join(
  "%20"
)}&show_dialog=true`;

import './App.css';
import Dashboard from './pages/Dashboard';
import Login from './components/Login';


const code = new URLSearchParams(window.location.search).get('code')
function App() {
  
  return (
    <div>
    {code ? <Dashboard code={code}/> : <Login/>}
    
    </div>
  );
}

export default App;

import React, {useEffect} from 'react';
import useAuth from '../useAuth';
import SpotifyWebApi from "spotify-web-api-node";


const spotifyApi = new SpotifyWebApi({
    clientId: "ea28d4ba34f34b44b59c640052c6e098",
});

export default function Dashboard({code}) {
    const accessToken = useAuth(code);

    useEffect(() => {
        
        if (!accessToken) return;

        spotifyApi.setAccessToken(accessToken);

        spotifyApi.getMe().then(data => {
            console.log(data);
        })
    }, []);

    return (
        <div>
            This is the home page 
        </div>
    )
}

import React from 'react';
import { loginUrl } from '../spotifyConfig';

export default function Login() {
    
    return (
        <div>
            <a href={loginUrl}>
                <button>LOGIN WITH SPOTIFY</button>
            </a>

            <div className="links">
                <p>
                    ⚠ When joining or creating a Queue, open Spotify to be able to queue up tracks
                </p>
            </div>
        </div>
    )
}