Angular集成Spotify API：access_token获取存储及OIDC配置问题

Hey there! Let's tackle your Spotify Web API + Angular issues one by one—this stuff can get tricky, but we'll sort it out.

Your current method of splitting window.location.href is error-prone and hard to maintain. Angular has built-in tools to handle URL fragments cleanly: use ActivatedRoute to subscribe to the URL fragment, then parse it with URLSearchParams (or the modern URL API) to extract the token.

Here's a clean implementation:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-selection-menu',
  templateUrl: './selection-menu.component.html'
})
export class SelectionMenuComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.fragment.subscribe(fragment => {
      if (fragment) {
        // Parse fragment into key-value pairs
        const params = new URLSearchParams(fragment);
        const accessToken = params.get('access_token');
        const expiresIn = params.get('expires_in');
        const refreshToken = params.get('refresh_token'); // Only available with Authorization Code Flow

        if (accessToken) {
          // Handle storage and expiration logic here
        }
      }
    });
  }
}

localStorage is risky because it's vulnerable to XSS attacks. Here are better options, ordered by security:

Secure Storage Options #

• HttpOnly, Secure Cookies (Best Practice)
  This requires a backend. When using Spotify's Authorization Code Flow, your backend receives an authorization code, exchanges it for tokens, then sets an HttpOnly, Secure cookie. The cookie is automatically sent with every request to your backend, and the frontend never touches the token directly—eliminating XSS risk for token theft.

• Session Storage
  Better than localStorage because it's cleared when the browser tab closes. It still has XSS risk, but exposure is limited to the current session. Use it like this:

  // Store
  sessionStorage.setItem('spotify_access_token', accessToken);
  // Retrieve
  const token = sessionStorage.getItem('spotify_access_token');
  

• In-Memory Storage
  Store the token in a singleton Angular service (e.g., SpotifyAuthService). The token never leaves memory, so it's immune to XSS, but it's lost on page refresh. Pair this with a refresh mechanism (using refresh tokens from Authorization Code Flow) to re-authenticate automatically.

Auto-Refresh Implementation #

Note: Spotify's Implicit Flow (which you're using now with response_type=token) does not return refresh tokens. To enable automatic refresh, you must switch to the Authorization Code Flow (response_type=code):

1. Your backend exchanges the authorization code for an access token and refresh token.
2. When the access token expires, your backend uses the refresh token to request a new access token without user interaction.
3. For pure frontend apps, you can't get refresh tokens, so you'll need to re-authenticate the user when the token expires (use the expires_in value to set a timer).

The Implicit Flow (which uses response_type=token) puts the token in the URL fragment by design—it's part of the OAuth2 spec. To hide the token entirely:
Switch to the Authorization Code Flow. Here's how it works:

1. The user logs in and is redirected to Spotify with response_type=code.
2. Spotify redirects back to your backend with a code parameter (no token in the URL).
3. Your backend exchanges the code for tokens, stores them securely, then redirects the user to your Angular app.
   The frontend never sees the token, so it never appears in the URL.

Your main problem is mismatched OIDC settings for Spotify. Spotify's OIDC implementation is minimal, so let's adjust your config:

Key Fixes: #

1. stsServer: Should be the base URL (https://accounts.spotify.com), not the /authorize path. The library will automatically fetch the OIDC discovery document from https://accounts.spotify.com/.well-known/openid-configuration.
2. response_type: Use code (Authorization Code Flow) instead of token—Implicit Flow isn't fully supported by OIDC tools.
3. silent_renew_url: Must be a blank HTML page in your Angular app (e.g., http://localhost:4200/silent-renew.html), not Spotify's URL. This page is used to silently refresh tokens via an iframe.
4. Add openid scope: Spotify requires this to return an ID token (required by OIDC).

Corrected Configuration: #

{
  "stsServer": "https://accounts.spotify.com",
  "redirect_url": "http://localhost:4200/selectionMenu",
  "client_id": "ec5405hgasfdhasfdashdgdcbd27987aef6",
  "response_type": "code",
  "scope": "openid user-top-read user-read-private playlist-read-private user-library-modify playlist-modify-public user-follow-read user-read-playback-state user-modify-playback-state user-read-recently-played user-read-currently-playing user-follow-modify playlist-modify-private playlist-read-collaborative user-library-read user-read-email",
  "post_logout_redirect_uri": "http://localhost:4200/",
  "start_checksession": true,
  "silent_renew": true,
  "silent_renew_url": "http://localhost:4200/silent-renew.html",
  "post_login_route": "/selectionMenu",
  "forbidden_route": "/forbidden",
  "unauthorized_route": "/unauthorized",
  "log_console_warning_active": true,
  "log_console_debug_active": true,
  "max_id_token_iat_offset_allowed_in_seconds": 10,
  "ignore_nonce_after_authorization": true
}

If you still run into issues, consider using a dedicated Spotify Angular library like @spotify/web-api-angular or implementing the OAuth2 flow manually with Angular's HttpClient and router—it might be more straightforward for Spotify's specific API.

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