Flutter Facebook OAuth登录插件firebase_ui_oauth_facebook的使用

Flutter Facebook OAuth 登录插件 firebase_ui_oauth_facebook 的使用

1. 简介

firebase_ui_oauth_facebook 是 Firebase UI for Flutter 提供的一个插件，用于通过 Facebook 进行 OAuth 登录。它简化了集成 Facebook 登录的过程，并与 Firebase Authentication 无缝对接。

2. 开始使用

2.1 配置 Firebase 项目

在使用 firebase_ui_oauth_facebook 之前，你需要确保已经完成了以下步骤：

• 创建一个 Firebase 项目并将其与你的 Flutter 应用关联。
• 在 Firebase 控制台中启用 Facebook 登录提供程序。
• 在 Facebook Developer Console 中创建一个应用，并将 Firebase 项目的 OAuth 重定向 URI 添加到 Facebook 应用的设置中。

2.2 添加依赖项

在 pubspec.yaml 文件中添加 firebase_ui_oauth_facebook 依赖项：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.4.0
  firebase_auth: ^4.2.0
  firebase_ui_auth: ^1.1.0
  firebase_ui_oauth_facebook: ^1.0.0

运行 flutter pub get 以安装依赖项。

2.3 配置 iOS 和 Android 平台

2.3.1 iOS 配置

在 ios/Runner/Info.plist 文件中添加以下内容：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fb{your-facebook-app-id}</string>
    </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>{your-facebook-app-id}</string>
<key>FacebookDisplayName</key>
<string>{your-facebook-app-display-name}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>

将 {your-facebook-app-id} 和 {your-facebook-app-display-name} 替换为你的 Facebook 应用 ID 和显示名称。

2.3.2 Android 配置

在 android/app/build.gradle 文件中添加以下内容：

dependencies {
    implementation 'com.facebook.android:facebook-android-sdk:[5,6)'
}

在 android/app/src/main/AndroidManifest.xml 文件中添加以下内容：

<application>
    ...
    <meta-data
        android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/facebook_app_id" />
    <activity
        android:name="com.facebook.FacebookActivity"
        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />
    <activity
        android:name="com.facebook.CustomTabActivity"
        android:exported="true">
        <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="@string/fb_login_protocol_scheme" />
        </intent-filter>
    </activity>
</application>

在 android/app/src/main/res/values/strings.xml 文件中添加以下内容：

<resources>
    <string name="facebook_app_id">{your-facebook-app-id}</string>
    <string name="fb_login_protocol_scheme">fb{your-facebook-app-id}</string>
</resources>

将 {your-facebook-app-id} 替换为你的 Facebook 应用 ID。

3. 使用示例代码

以下是一个完整的示例代码，展示了如何使用 firebase_ui_oauth_facebook 插件进行 Facebook 登录。

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:firebase_ui_oauth_facebook/firebase_ui_oauth_facebook.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // 注册 Facebook 提供商
  FirebaseUIAuth.configureProviders([
    FacebookProvider(
      clientId: 'your-facebook-app-id', // 替换为你的 Facebook 应用 ID
    ),
  ]);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SignInScreen(
        providers: [
          FacebookProvider(
            clientId: 'your-facebook-app-id', // 替换为你的 Facebook 应用 ID
          ),
        ],
        actions: [
          AuthStateChangeAction<SignedIn>((context, state) {
            // 用户成功登录后的处理逻辑
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => HomeScreen()),
            );
          }),
        ],
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome!'),
            ElevatedButton(
              onPressed: () async {
                // 注销用户
                await FirebaseAuth.instance.signOut();
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => MyApp()),
                );
              },
              child: Text('Sign Out'),
            ),
          ],
        ),
      ),
    );
  }
}