Flutter实现Discord OAuth2登录重定向报错、设备黑屏问题

你遇到的Discord重定向URI报错、授权页黑屏问题，核心是配置不匹配+接口逻辑错误导致的：

• AndroidManifest配置的回调拦截规则、Dart代码里写的重定向地址、Discord开发者后台配置的合法重定向URI三者完全不一致
• 换取access token的接口地址写错，且缺少必填参数
• 没有做异常捕获，授权流程中断时直接触发页面黑屏
• Android 12+版本缺少必要的清单配置属性，导致回调拦截失败

1. 统一三处重定向URI配置 #

先固定重定向URI为com.area://home，三个配置位置必须一字不差，多斜杠、少字符都会触发重定向报错：

• 打开Discord开发者后台，进入对应应用的OAuth2设置页，在重定向地址列表中添加com.area://home后保存配置
• 修改AndroidManifest.xml中CallbackActivity的配置，替换原有错误的scheme、host配置，同时补上Android 12+要求的导出属性，代码如下：

<activity 
    android:name="com.linusu.flutter_web_auth.CallbackActivity"
    android:exported="true">
    <intent-filter android:label="flutter_web_auth">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- scheme对应com.area，host对应home，和com.area://home完全匹配 -->
        <data android:scheme="com.area" android:host="home" />
    </intent-filter>
</activity>

• 确认Dart代码中的callbackUrlScheme固定为com.area，redirectUri固定为com.area://home，不要保留多版本可选值

2. 修复Token换取逻辑 #

原有代码中换取access token的接口地址错误，Discord授权码换Token的接口为/api/oauth2/token，不是授权页用的/api/oauth2/authorize，同时接口需要传client_secret参数、指定表单类型请求头，否则会请求失败。

3. 增加异常捕获避免黑屏 #

在授权流程外层加try-catch逻辑，处理用户取消授权、网络中断、回调失败等异常场景，避免流程卡住导致页面黑屏。

import 'dart:convert';
import 'package:flutter_web_auth/flutter_web_auth.dart';
import 'package:http/http.dart' as http;

void loginWithDiscord() async {
  // 以下三个值必须和Discord后台、Manifest配置完全一致
  const clientId = '替换为你的Discord应用Client ID';
  const clientSecret = '替换为你的Discord应用Client Secret';
  const callbackUrlScheme = 'com.area';
  const redirectUri = 'com.area://home';

  try {
    // 构造授权请求地址
    final authUrl = Uri.https('discord.com', '/api/oauth2/authorize', {
      'response_type': 'code',
      'client_id': clientId,
      'redirect_uri': redirectUri,
      'scope': 'identify',
      'state': '自定义随机校验字符串，生产环境建议传值防CSRF攻击',
    });

    // 拉起授权页
    final callbackResult = await FlutterWebAuth.authenticate(
      url: authUrl.toString(),
      callbackUrlScheme: callbackUrlScheme,
    );

    // 提取授权code
    final authCode = Uri.parse(callbackResult).queryParameters['code'];
    if (authCode == null) {
      print('未获取到有效授权码');
      return;
    }

    // 请求正确接口换取access token
    final tokenResponse = await http.post(
      Uri.parse('https://discord.com/api/oauth2/token'),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: {
        'client_id': clientId,
        'client_secret': clientSecret,
        'redirect_uri': redirectUri,
        'grant_type': 'authorization_code',
        'code': authCode,
      },
    );

    if (tokenResponse.statusCode != 200) {
      print('换取Token失败: ${tokenResponse.body}');
      return;
    }

    final tokenData = jsonDecode(tokenResponse.body);
    final accessToken = tokenData['access_token'] as String;
    print('Discord登录成功，accessToken: $accessToken');
    // 后续可携带accessToken调用Discord用户信息接口完成自有账号体系绑定

  } catch (e) {
    // 捕获所有流程异常，避免页面卡死黑屏
    print('Discord登录流程异常: $e');
  }
}

• 若需要适配iOS端，要在Info.plist中添加对应URL Scheme配置，否则iOS端会出现回调失败问题
• 生产环境建议把换取Token的逻辑放到自有服务端实现，不要把client_secret硬编码在客户端，避免密钥泄露
• Discord后台保存重定向配置后会有1-2分钟的生效延迟，修改配置后不要立刻测试，避免误判

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