Flutter中处理Spotify授权回调的查询参数问题

你的问题核心是当前用localhost作为回调地址，授权后跳转到外部网页无法回到App拿code，以下是两种可行的解决方法：

方法一：使用App自定义Scheme跳转（推荐） #

这种方式让Spotify授权完成后直接跳回你的App，无需离开应用环境。

1. 配置App的自定义Scheme #

• Android：打开android/app/src/main/AndroidManifest.xml，在主Activity的<activity>标签内添加：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 自定义跳转协议，示例为spotifyauth -->
    <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>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>spotifyauth</string>
</array>

2. 修改授权代码 #

把redirectUri改成自定义Scheme，比如spotifyauth://callback，同时更新Spotify开发者后台的允许回调地址，添加这个Scheme：

void openAuthorizationUrl() async {
  final clientId = 'cd3acd...7efbc';
  // 替换为自定义Scheme的回调地址
  final redirectUri = 'spotifyauth://callback';
  final scope = 'user-read-private user-read-email user-top-read';
  final response_type = 'code';

  final authorizationUrl =
      'https://accounts.spotify.com/authorize?response_type=$response_type&client_id=$clientId&scope=$scope&redirect_uri=${Uri.encodeComponent(redirectUri)}';

  if (await canLaunchUrl(Uri.parse(authorizationUrl))) {
    await launchUrl(Uri.parse(authorizationUrl), mode: LaunchMode.externalApplication);
  } else {
    throw 'Could not launch $authorizationUrl';
  }
}

3. 监听App跳转回调获取Code #

使用uni_links插件监听Scheme跳转，在App启动或前台时获取回调的URL：

import 'package:uni_links/uni_links.dart';

// 初始化跳转监听
Future<void> initUniLinks() async {
  // 监听冷启动时的跳转
  final initialUri = await getInitialUri();
  if (initialUri != null) {
    handleRedirectUri(initialUri);
  }

  // 监听App前台时的跳转
  uriLinkStream.listen((Uri? uri) {
    if (uri != null) {
      handleRedirectUri(uri);
    }
  });
}

// 解析回调URL中的code参数
void handleRedirectUri(Uri uri) {
  final code = uri.queryParameters['code'];
  if (code != null) {
    // 获取到code后，即可用于请求Spotify的token
    print('授权code: $code');
  }
}

方法二：在App内嵌入WebView（简单快速） #

直接用WebView在App内部加载授权页面，拦截回调URL提取code，无需跳转到外部浏览器。

1. 添加依赖 #

在pubspec.yaml中添加webview_flutter：

dependencies:
  webview_flutter: ^4.4.0

2. 创建WebView授权页面 #

import 'package:webview_flutter/webview_flutter.dart';

class SpotifyAuthWebView extends StatefulWidget {
  const SpotifyAuthWebView({super.key});

  @override
  State<SpotifyAuthWebView> createState() => _SpotifyAuthWebViewState();
}

class _SpotifyAuthWebViewState extends State<SpotifyAuthWebView> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    final clientId = 'cd3acd...7efbc';
    final redirectUri = 'https://localhost:8888/callback';
    final scope = 'user-read-private user-read-email user-top-read';
    final response_type = 'code';

    final authorizationUrl =
        'https://accounts.spotify.com/authorize?response_type=$response_type&client_id=$clientId&scope=$scope&redirect_uri=${Uri.encodeComponent(redirectUri)}';

    controller = WebViewController()
      ..loadRequest(Uri.parse(authorizationUrl))
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (NavigationRequest request) {
            // 拦截回调URL，提取code
            if (request.url.startsWith(redirectUri)) {
              final uri = Uri.parse(request.url);
              final code = uri.queryParameters['code'];
              if (code != null) {
                print('授权code: $code');
                // 获取到code后关闭WebView页面
                Navigator.pop(context);
              }
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Spotify授权登录')),
      body: WebViewWidget(controller: controller),
    );
  }
}

3. 打开WebView页面替换原launchUrl调用 #

// 替换原openAuthorizationUrl方法
void openAuthorizationUrl() {
  Navigator.push(context, MaterialPageRoute(builder: (context) => const SpotifyAuthWebView()));
}

关键注意事项 #

• 无论用哪种方法，都必须在Spotify开发者后台的应用设置中，将你的redirectUri添加到「Redirect URIs」列表，否则会授权失败。
• 方法一中的自定义Scheme需和后台配置完全一致，比如spotifyauth://callback要完整添加。

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