如何设置Spotify认证在新标签页或弹窗中打开？

Great question! I’ve dealt with this exact scenario when building apps that integrate Spotify’s OAuth flow—here are practical, reliable solutions depending on your setup:

1. Pure Frontend JavaScript (No SDK) #

This is the most straightforward approach if you’re constructing the auth URL manually. Instead of redirecting the current window, use window.open() to launch the auth page in a new tab or sized popup.

Example Code: #

// Trigger this inside a user-initiated event (like a button click)
document.getElementById('spotify-login-btn').addEventListener('click', () => {
  const clientId = 'YOUR_CLIENT_ID';
  const redirectUri = 'YOUR_REDIRECT_URI';
  const scopes = 'user-read-private user-read-email'; // Adjust scopes as needed

  const authUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=code&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scopes)}`;

  // Open in a new tab
  window.open(authUrl, '_blank');

  // OR open as a centered popup (adjust dimensions as needed)
  // const width = 600;
  // const height = 800;
  // const left = (window.innerWidth / 2) - (width / 2);
  // const top = (window.innerHeight / 2) - (height / 2);
  // window.open(authUrl, 'spotify-auth', `width=${width},height=${height},left=${left},top=${top}`);
});

Critical Note: #

Always call window.open() inside a user-triggered event (like a button click). Browsers block popups/tabs that aren’t initiated by direct user interaction, so if you run this code on page load, it’ll get blocked.

2. Using Spotify Web API SDK #

If you’re using an official or community SDK (like spotify-web-api-js), most don’t directly support opening auth in a new tab out of the box. Instead, you can bypass the SDK’s built-in login method and use the window.open() approach above, or wrap the SDK’s logic in a popup.

For example, instead of calling spotifyApi.login(), construct the auth URL yourself and open it as shown in the first method. After the user authenticates and your redirect URI loads, you can exchange the authorization code for tokens and initialize the SDK with those tokens.

3. Handling Post-Auth Communication (For Popups) #

If you use a popup instead of a new tab, you’ll want to close the popup once authentication is complete and send the auth data back to your main app window. Here’s how to do that:

1. In your redirect URI page (the one Spotify sends the user to after auth), add this code:

// Send auth code to parent window
window.opener.postMessage({
  type: 'spotify-auth-success',
  code: new URLSearchParams(window.location.search).get('code')
}, window.location.origin);

// Close the popup
window.close();

2. In your main app, listen for the message:

window.addEventListener('message', (event) => {
  if (event.origin !== window.location.origin) return; // Security check
  if (event.data.type === 'spotify-auth-success') {
    const authCode = event.data.code;
    // Exchange code for access token here
  }
});

Key Setup Reminders #

• Make sure your redirect_uri is correctly registered in the Spotify Developer Dashboard under your app’s settings. Mismatched URIs will cause authentication failures.
• If you’re using a new tab instead of a popup, your redirect page can just handle the token exchange and then redirect back to your app’s main page.

内容的提问来源于stack exchange，提问作者teamyates