Typescript 在NextJS中获得Spotify Oauth，但不工作'

405错误表示身份验证无效或发送参数格式错误. 您的getAuthorizationTokenData()的S数据请求格式不正确.

要以axios POST调用的application/x—www—form—urlencoded格式发送数据，您应该使用URLSearchParams类来构造请求主体.

您需要了解Spotify的"授权码流" 更多详细信息请参见here

演示代码实现Spotify登录并获得访问令牌Authorization Code Flow，并获得特定的播放列表和显示歌曲.使用next.js.

File structure

我从Create next.js项目中添加了三个文件 (index. tsx，callbacl. tsx和constant. ts)

npx create-next-app@latest my-spotify-app --typescript

你需要删除./src/app/pages.tsx个文件.

省index.tsx

// pages/index.tsx
import { GetServerSideProps } from 'next';
import { clientId, scope, redirectUri } from './constants';

const Home = ({ spotifyAuthUrl }: { spotifyAuthUrl: string }) => {
    return (
        <div>
            <h1>Spotify Login</h1>
            <a href={spotifyAuthUrl}>Login with Spotify</a>
        </div>
    );
};

export const getServerSideProps: GetServerSideProps = async () => {
    const encodeRedirectUri = encodeURIComponent(redirectUri);
    const spotifyAuthUrl = `https://accounts.spotify.com/authorize?response_type=code&client_id=${clientId}&redirect_uri=${encodeRedirectUri}&scope=${scope}`;
    return { props: { spotifyAuthUrl } };
};

export default Home;

节省callback.tsx

// pages/callback.tsx
import { GetServerSideProps } from 'next';
import axios from 'axios';
import { clientId, clientSecret, redirectUri, myPlaylistId } from './constants';

interface Track {
    track: {
        name: string;
        id: string;
    };
}

const Callback = ({ accessToken, playlistTracks }: { accessToken: string, playlistTracks: Track[] }) => {
    return (
        <div>
            <h1>Spotify Playlist Tracks</h1>
            <p>Access Token: {accessToken}</p>
            <ul>
                {playlistTracks.map((track, index) => (
                    <li key={index}>
                        {track.track.name}
                        <br />
                        <iframe
                            src={`https://open.spotify.com/embed/track/${track.track.id}`}
                            width="300"
                            height="80"
                            allow="encrypted-media"
                        ></iframe>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export const getServerSideProps: GetServerSideProps = async ({ query }) => {
    const code = query.code as string;

    if (!code) {
        return {
            redirect: {
                destination: '/',
                permanent: false,
            },
        };
    }

    try {
        const response = await axios.post(
            'https://accounts.spotify.com/api/token',
            new URLSearchParams({
                grant_type: 'authorization_code',
                code,
                redirect_uri: redirectUri,
                client_id: clientId,
                client_secret: clientSecret,
            }).toString(),
            {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
            }
        );

        const accessToken = response.data.access_token;

        const playlistResponse = await axios.get(
            `https://api.spotify.com/v1/playlists/${myPlaylistId}/tracks`,
            {
                headers: {
                    Authorization: `Bearer ${accessToken}`,
                },
            }
        );

        const playlistTracks: Track[] = playlistResponse.data.items;

        return { props: { accessToken, playlistTracks } };
    } catch (error) {
        console.error('Error:', error);
        return { props: { accessToken: '', playlistTracks: [] } };
    }
};

export default Callback;

节省constans.ts

// constants.ts
export const clientId = '[your client id]';
export const clientSecret = '[your client secret]';
export const redirectUri = 'http://localhost:3000/callback'; // replace your redirect URI
export const myPlaylistId = '[your playlist id]';
export const scope = 'playlist-read-private user-read-private user-read-email user-read-playback-state user-modify-playback-state streaming'; // Add more scopes if needed

Install dependency

npm insatall axios

Run it

npm run dev

Access it

http:/localhost:3000

Result