Flutter社交登录插件facebook_login的使用

Flutter 插件 facebook_login 可用于实现 Facebook 登录功能。以下是完整的使用说明和示例代码。

依赖安装

在项目的 pubspec.yaml 文件中添加以下依赖：

# pubspec.yaml
dependencies:
  facebook_login:
    git:
      url: https://github.com/rxreader/flutter_facebook.git
      path: facebook_login

或者直接使用已发布的版本：

# pubspec.yaml
dependencies:
  facebook_login: ^${latestVersion}

运行以下命令以安装依赖：

flutter pub get

初始化项目

创建一个简单的 Flutter 应用程序，用于演示 Facebook 登录功能。以下是完整的示例代码：

示例代码

// example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:facebook_login/facebook_login.dart'; // 导入 facebook_login 包

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final FacebookLogin facebookSignIn = FacebookLogin(); // 创建 FacebookLogin 实例
  String _message = '点击按钮以登录'; // 用于显示登录结果

  Future<void> _loginWithFacebook() async {
    final result = await facebookSignIn.logIn(permissions: ['email']); // 调用登录方法

    switch (result.status) {
      case FacebookLoginStatus.loggedIn:
        setState(() {
          _message = '登录成功！'; // 更新 UI
        });
        break;
      case FacebookLoginStatus.cancelledByUser:
        setState(() {
          _message = '用户取消了登录'; // 更新 UI
        });
        break;
      case FacebookLoginStatus.error:
        setState(() {
          _message = '登录失败: ${result.errorMessage}'; // 更新 UI
        });
        break;
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Facebook Login'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: _loginWithFacebook, // 点击时触发登录逻辑
                child: Text('登录 Facebook'),
              ),
              SizedBox(height: 20),
              Text(_message), // 显示登录结果
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter社交登录插件facebook_login的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼作者

更多关于Flutter社交登录插件facebook_login的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中，使用facebook_login插件来实现Facebook社交登录是一个常见的需求。以下是使用facebook_login插件的详细步骤：

1. 添加依赖

首先，在pubspec.yaml文件中添加facebook_login插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  facebook_login: ^3.0.0+1  # 请检查最新版本

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

2. 配置Facebook开发者平台

在Facebook开发者平台上创建一个应用，并获取App ID和App Secret。在应用的设置中，添加Android和iOS平台的配置。

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

<meta-data
    android:name="com.facebook.sdk.ApplicationId"
    android:value="@string/facebook_app_id"/>

在android/app/src/main/res/values/strings.xml中添加：

<string name="facebook_app_id">YOUR_APP_ID</string>

iOS: 在ios/Runner/Info.plist中添加以下代码：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fbYOUR_APP_ID</string>
        </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_APP_ID</string>
<key>FacebookDisplayName</key>
<string>YOUR_APP_NAME</string>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-share-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>

3. 实现Facebook登录

在Flutter代码中，使用facebook_login插件来实现登录功能。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FacebookLoginDemo(),
    );
  }
}

class FacebookLoginDemo extends StatefulWidget {
  [@override](/user/override)
  _FacebookLoginDemoState createState() => _FacebookLoginDemoState();
}

class _FacebookLoginDemoState extends State<FacebookLoginDemo> {
  FacebookLogin facebookLogin = FacebookLogin();
  bool isLoggedIn = false;
  String name = '';
  String email = '';
  String imageUrl = '';

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

    switch (result.status) {
      case FacebookLoginStatus.loggedIn:
        final FacebookAccessToken accessToken = result.accessToken;
        final graphResponse = await http.get(
            'https://graph.facebook.com/v2.12/me?fields=name,first_name,last_name,email,picture.width(400)&access_token=${accessToken.token}');

        final profile = json.decode(graphResponse.body);
        setState(() {
          isLoggedIn = true;
          name = profile['name'];
          email = profile['email'];
          imageUrl = profile['picture']['data']['url'];
        });
        break;
      case FacebookLoginStatus.cancelledByUser:
        // 用户取消了登录
        break;
      case FacebookLoginStatus.error:
        // 登录过程中发生错误
        break;
    }
  }

  Future<void> _logout() async {
    await facebookLogin.logOut();
    setState(() {
      isLoggedIn = false;
      name = '';
      email = '';
      imageUrl = '';
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Facebook Login Demo'),
      ),
      body: Center(
        child: isLoggedIn
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  CircleAvatar(
                    backgroundImage: NetworkImage(imageUrl),
                    radius: 50,
                  ),
                  SizedBox(height: 20),
                  Text('Name: $name'),
                  SizedBox(height: 10),
                  Text('Email: $email'),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: _logout,
                    child: Text('Logout'),
                  ),
                ],
              )
            : ElevatedButton(
                onPressed: _loginWithFacebook,
                child: Text('Login with Facebook'),
              ),
      ),
    );
  }
}