Flutter社交媒体登录插件flutter_facebook_login的使用

flutter_facebook_login 是一个用于在 Flutter 应用中实现 Facebook 登录的插件。它允许用户通过他们的 Facebook 账户登录到你的应用程序，并获取用户的 Facebook 信息（如姓名、电子邮件等）。

以下是如何在 Flutter 项目中使用 flutter_facebook_login 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_facebook_login 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_facebook_login: ^3.0.0

然后运行 flutter pub get 来安装依赖。

2. 配置 Facebook 开发者平台

在 Facebook 开发者平台 上创建一个新的应用，并配置相关信息：

1. 创建一个新的应用。
2. 在应用仪表板中，找到 “Settings” -> “Basic”，添加你的应用的 包名 和 默认活动类名。
3. 在 “Facebook Login” 设置中，启用 “Facebook Login”。
4. 生成并配置 Facebook App ID 和 Facebook Client Token。

3. 配置 Android 项目

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

<application
    android:label="YourAppName"
    android:icon="@mipmap/ic_launcher">
    
    <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="YourAppName" />
    
    <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">fbYOUR_FACEBOOK_APP_ID</string>
</resources>

4. 配置 iOS 项目

在 ios/Runner/Info.plist 文件中添加以下代码：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fbYOUR_FACEBOOK_APP_ID</string>
        </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>YourAppName</string>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-share-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>

5. 实现 Facebook 登录

在 Flutter 应用中实现 Facebook 登录的逻辑：

import 'package:flutter/material.dart';
import 'package:flutter_facebook_login/flutter_facebook_login.dart';

class FacebookLoginDemo extends StatefulWidget {
  @override
  _FacebookLoginDemoState createState() => _FacebookLoginDemoState();
}

class _FacebookLoginDemoState extends State<FacebookLoginDemo> {
  final FacebookLogin facebookLogin = FacebookLogin();

  String _message = 'Log in with Facebook';

  Future<void> _login() async {
    final FacebookLoginResult result = await facebookLogin.logIn(['email']);

    switch (result.status) {
      case FacebookLoginStatus.loggedIn:
        final FacebookAccessToken accessToken = result.accessToken;
        _showMessage('Logged in successfully!');
        break;
      case FacebookLoginStatus.cancelledByUser:
        _showMessage('Login cancelled by the user.');
        break;
      case FacebookLoginStatus.error:
        _showMessage('Something went wrong with the login process.\n'
            'Here\'s the error Facebook gave us: ${result.errorMessage}');
        break;
    }
  }

  Future<void> _logout() async {
    await facebookLogin.logOut();
    _showMessage('Logged out.');
  }

  void _showMessage(String message) {
    setState(() {
      _message = message;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Facebook Login Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_message),
            ElevatedButton(
              onPressed: _login,
              child: Text('Log in with Facebook'),
            ),
            ElevatedButton(
              onPressed: _logout,
              child: Text('Log out'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: FacebookLoginDemo(),
));

6. 运行应用

现在你可以运行你的 Flutter 应用，并测试 Facebook 登录功能。点击 “Log in with Facebook” 按钮，用户将被引导到 Facebook 登录页面，登录成功后，你可以获取用户的 Facebook 信息。

7. 获取用户信息

登录成功后，你可以通过 Facebook Graph API 获取用户的详细信息。例如：

final graphResponse = await http.get('https://graph.facebook.com/v12.0/me?fields=name,email&access_token=${accessToken.token}');
final profile = json.decode(graphResponse.body);
print(profile);