在Flutter移动端应用中实现基于Firebase的Microsoft认证

核心说明 #

Web端的signInWithPopup无法直接在移动端复用，但可以通过两种方案实现类似的登录流程，其中方案二能提供接近Web版的弹窗式登录体验。

前提准备 #

1. 在Firebase控制台的Authentication > 登录方法中，确保Microsoft登录已启用，并配置对应移动端的应用信息：
   • Android：添加包名、SHA-1签名
   • iOS：添加Bundle ID

方案一：使用Firebase官方的signInWithRedirect #

该方式会唤起系统默认浏览器完成登录，之后跳转回应用，是Firebase官方推荐的移动端OAuth登录方式。

修改你的_loginWithMicrosoft函数，替换else分支代码：

_loginWithMicrosoft() async {
  try {
    final provider = OAuthProvider("microsoft.com");
    provider.setCustomParameters({
      "tenant": "common",
      "prompt": "select_account",
    });

    debugPrint("Trying to start microsoft login");
    UserCredential? cred;
    if (kIsWeb) {
      debugPrint("On the web");
      await FirebaseAuth.instance.signOut();
      cred = await FirebaseAuth.instance.signInWithPopup(provider);
      debugPrint(cred.user?.displayName);
      debugPrint(cred.user?.email);
    } else {
      debugPrint("On mobile");
      try {
        await FirebaseAuth.instance.signOut();
        // 移动端使用signInWithRedirect触发登录
        await FirebaseAuth.instance.signInWithRedirect(provider);
        // 登录完成后获取凭证
        cred = await FirebaseAuth.instance.getRedirectResult();
        if (cred != null) {
          debugPrint(cred.user?.displayName);
          debugPrint(cred.user?.email);
        }
      } on FirebaseAuthException catch (e) {
        errorMessage = "${e.code} - ${e.message}";
        debugPrint(errorMessage);
      }
    }
  } on FirebaseAuthException catch (e) {
    errorMessage = "${e.code} - ${e.message}";
    debugPrint(errorMessage);
  }
}

方案二：使用WebView弹窗实现（接近Web版体验） #

如果想要和Web版一致的弹窗式登录（不离开应用），可以借助flutter_web_auth包实现OAuth授权流程，再将授权码传给Firebase完成认证。

步骤1：添加依赖 #

在pubspec.yaml中添加：

dependencies:
  flutter_web_auth: ^5.0.0

步骤2：修改登录函数 #

import 'package:flutter_web_auth/flutter_web_auth.dart';
import 'package:firebase_auth/firebase_auth.dart';

_loginWithMicrosoft() async {
  try {
    final provider = OAuthProvider("microsoft.com");
    provider.setCustomParameters({
      "tenant": "common",
      "prompt": "select_account",
    });

    debugPrint("Trying to start microsoft login");
    UserCredential? cred;
    if (kIsWeb) {
      debugPrint("On the web");
      await FirebaseAuth.instance.signOut();
      cred = await FirebaseAuth.instance.signInWithPopup(provider);
      debugPrint(cred.user?.displayName);
      debugPrint(cred.user?.email);
    } else {
      debugPrint("On mobile");
      try {
        await FirebaseAuth.instance.signOut();
        
        // 构建Microsoft OAuth授权URL
        final authorizationUrl = provider.getAuthorizationUrl(
          Uri.parse("https://your-app-id.firebaseapp.com/__/auth/handler"), // 替换为你的Firebase回调URL
        );

        // 弹出WebView完成登录
        final result = await FlutterWebAuth.authenticate(
          url: authorizationUrl.toString(),
          callbackUrlScheme: "your-app-scheme", // 需在移动端配置中注册的Scheme
        );

        // 解析回调中的授权码
        final code = Uri.parse(result).queryParameters["code"];
        if (code == null) throw Exception("Authorization code not found");

        // 用授权码获取Firebase凭证并完成登录
        final credential = provider.credentialFromToken(code);
        cred = await FirebaseAuth.instance.signInWithCredential(credential!);

        debugPrint(cred.user?.displayName);
        debugPrint(cred.user?.email);
      } on FirebaseAuthException catch (e) {
        errorMessage = "${e.code} - ${e.message}";
        debugPrint(errorMessage);
      } catch (e) {
        debugPrint("Login error: $e");
      }
    }
  } on FirebaseAuthException catch (e) {
    errorMessage = "${e.code} - ${e.message}";
    debugPrint(errorMessage);
  }
}

步骤3：配置移动端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="your-app-scheme" />
  </intent-filter>
  

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

  <key>CFBundleURLTypes</key>
  <array>
      <dict>
          <key>CFBundleURLSchemes</key>
          <array>
              <string>your-app-scheme</string>
          </array>
      </dict>
  </array>
  

关于邮箱密码输入框的说明 #

不建议直接通过输入框收集Microsoft账号密码登录——Microsoft禁止第三方应用直接获取用户密码，这违反OAuth安全规范，也会导致应用无法通过平台审核，优先使用上述两种OAuth方案。

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