Flutter应用登录Spotify后无法处理API授权问题求助

核心问题1：initUniLinks()未等待授权完成就执行 #

launchUrl启动外部浏览器后不会阻塞等待用户完成授权，所以await launchInBrowser()之后立即调用initUniLinks()时，用户还没走完授权流程，自然拿不到授权码。而且getInitialLink()只能获取APP启动时的初始链接，无法监听授权完成后通过deeplink返回APP的链接。

解决方法： #

使用uni_links的流监听实时接收授权完成后的回调链接，替代单次获取初始链接的逻辑。

核心问题2："无法连接到localhost"错误 #

你用的http://localhost:8000/callback是HTTP类型重定向URI，手机浏览器无法访问电脑的localhost，授权完成后浏览器会尝试加载这个地址，导致连接失败。正确做法是用自定义URL Scheme作为重定向URI，授权完成后会直接跳回你的Flutter应用，而非打开浏览器访问HTTP地址。

解决方法： #

1. 在Spotify开发者控制台把重定向URI改成自定义Scheme，比如spotifyauth://callback
2. 在Flutter项目中配置Scheme：
   • Android：在android/app/src/main/AndroidManifest.xml的<activity>标签内添加：

     <intent-filter>
         <action android:name="android.intent.action.VIEW" />
         <category android:name="android.intent.category.DEFAULT" />
         <category android:name="android.intent.category.BROWSABLE" />
         <data android:scheme="spotifyauth" />
     </intent-filter>
     

   • iOS：在ios/Runner/Info.plist中添加：

     <key>CFBundleURLTypes</key>
     <array>
         <dict>
             <key>CFBundleURLSchemes</key>
             <array>
                 <string>spotifyauth</string>
             </array>
         </dict>
     </array>
     

代码修正要点 #

除上述问题外，代码还有几个细节错误需要修复：

1. ClIENT_SECRET拼写错误，统一改为CLIENT_SECRET
2. Authorization头的base64编码部分多了一个多余的>符号
3. 未处理授权码后的额外参数（如&state=），需用queryParameters正确提取授权码
4. 监听deeplink流时需处理取消订阅，避免内存泄漏

修正后的完整代码 #

import 'dart:convert';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:uni_links/uni_links.dart';

class SpotifyAuth with ChangeNotifier {
  final String CLIENT_ID = "My client ID";
  final String CLIENT_SECRET = "My client secret";
  final String REDIRECT_URI = "spotifyauth://callback"; // 改用自定义Scheme
  final String SCOPE = 'user-read-private user-read-email';
  late String _accessToken;
  late String _refreshToken;
  StreamSubscription? _linkSubscription; // 用于监听deeplink流

  Uri createAuthenticationUri(){
    var query = [
      'response_type=code',
      'client_id=$CLIENT_ID',
      'scope=${Uri.encodeComponent(SCOPE)}',
      'redirect_uri=${Uri.encodeComponent(REDIRECT_URI)}',
    ];

    var queryString = query.join('&');
    var url = 'https://accounts.spotify.com/authorize?' + queryString;
    return Uri.parse(url);
  }

  Future<void> launchInBrowser() async {
    if (!await launchUrl(
      createAuthenticationUri(),
      mode: LaunchMode.externalApplication,
    )){
      throw Exception('Could not launch Url');
    }
  }

  Future<void> launchAuth() async {
    await launchInBrowser();
    _initUniLinksListener(); // 启动deeplink监听，而非立即获取初始链接
  }

  Future<void> getAccessToken(String code) async {
    var body = {
      "grant_type": "authorization_code",
      "code": code,
      "redirect_uri": REDIRECT_URI,
      "client_id": CLIENT_ID,
      "client_secret": CLIENT_SECRET
    };
    var header = {
      "Content-Type": "application/x-www-form-urlencoded",
      // 修复多余的>符号，统一CLIENT_SECRET拼写
      "Authorization": "Basic ${base64Encode(utf8.encode("$CLIENT_ID:$CLIENT_SECRET"))}"
    };

    var response = await http.post(
        Uri.parse("https://accounts.spotify.com/api/token"),
        body: body,
        headers: header);

    if (response.statusCode == 200) {
      var data = json.decode(response.body);
      _accessToken = data["access_token"];
      _refreshToken = data["refresh_token"]; // 保存刷新令牌
      notifyListeners(); // 通知UI更新
    } else {
      print("获取令牌失败：${response.body}");
    }
  }

  void _initUniLinksListener() {
    // 监听deeplink流
    _linkSubscription = uriLinkStream.listen((Uri? uri) {
      if (uri != null && uri.queryParameters.containsKey('code')) {
        String code = uri.queryParameters['code']!;
        getAccessToken(code);
      }
    }, onError: (err) {
      print("deeplink监听错误：$err");
    });
  }

  // 页面销毁时取消订阅，避免内存泄漏
  void disposeListener() {
    _linkSubscription?.cancel();
  }
}

额外建议 #

1. 添加state参数：OAuth流程中建议生成随机state参数防止CSRF攻击，创建授权URI时加入state=随机字符串，回调时验证参数一致性
2. 增强错误处理：获取令牌失败时抛出异常或通知UI显示具体错误信息
3. 令牌持久化：用shared_preferences等库将access_token和refresh_token保存到本地，避免每次启动重新授权

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