Flutter社交登录集成 Facebook与Google登录

在Flutter中集成Facebook和Google社交登录时遇到了一些问题：

  1. Facebook登录在iOS上正常，但在Android端始终返回错误码，提示"开发者错误"。已经确认包名、哈希密钥和Facebook应用设置都正确，但问题依旧。

  2. Google登录在模拟器上运行正常，但在真机测试时闪退，日志显示"PlatformException(sign_in_failed)"。

  3. 使用flutter_facebook_auth和google_sign_in插件时，能否实现同时获取用户的邮箱和头像信息？现在只能拿到基本资料。

  4. 用户注销后重新登录时，如何彻底清除之前的授权缓存？尝试过调用插件提供的signOut()方法，但再次登录会直接跳转而不弹授权窗口。


更多关于Flutter社交登录集成 Facebook与Google登录的实战教程也可以访问 https://www.itying.com/category-92-b0.html

3 回复

作为一个屌丝程序员，我来分享下 Flutter 集成 Facebook 和 Google 登录的基本流程。

  1. Google登录：

    • 首先在 Google API 控制台创建项目并启用 Google+ API。
    • 在 pubspec.yaml 添加 google_sign_in 包。
    • 使用 GoogleSignIn() 初始化，调用 signIn() 方法弹出登录框。
    • 通过 googleSignIn.currentUser 获取用户信息。

  2. Facebook登录：

    • 去 Facebook 开发者平台创建应用并获取 App ID。
    • 安装 flutter_facebook_auth 包。
    • 调用 FacebookAuth.instance.login() 弹出授权页面。
    • 使用 FacebookAuth.instance.getUserData() 获取用户数据。

  3. 公共步骤：

    • Android需要配置 SHA1证书指纹。
    • iOS需在 Info.plist 中设置 URL Types。
    • 确保网络权限已添加到 AndroidManifest.xml 和 info.plist。

  4. 注意事项：

    • 登录后要处理异常情况，如取消登录或网络错误。
    • 获取到的 token 可用于服务器端验证身份。
    • 测试时确保包名/Bundle ID与后台配置一致。

按照上述步骤，就可以在你的 Flutter 应用中轻松实现社交登录功能了。

更多关于Flutter社交登录集成 Facebook与Google登录的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


作为屌丝程序员，集成Facebook和Google登录其实不难。首先，在各自平台注册开发者账号并创建应用，获取App ID等信息。

对于Flutter，可以使用firebase_auth插件。先安装插件后，在代码中初始化Firebase，然后分别调用signInWithGoogle()和signInWithFacebook()方法。

以Google为例，先配置Android的google-services.json，iOS的GoogleService-Info.plist。运行时弹出授权界面，用户同意后即可获取登录信息。

Facebook需要额外配置AndroidManifest.xml和Info.plist，并设置facebook_login权限。记得在Facebook开发者后台添加你的包名和签名。

成功登录后，插件会返回用户的ID、邮箱等信息。如果失败，检查配置文件是否正确，网络权限是否开启，以及密钥哈希是否匹配。如果还是不行，就去翻官方文档吧。记住，屌丝编程靠的是耐心和Google大法！

在Flutter中集成Facebook和Google社交登录，可以使用第三方插件实现。以下是具体实现方法：

1. 准备工作

先添加依赖到pubspec.yaml：

dependencies:
  flutter_facebook_auth: ^4.4.1
  google_sign_in: ^5.4.0
  firebase_auth: ^4.2.5

2. Facebook登录集成

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

Future<LoginResult> signInWithFacebook() async {
  final result = await FacebookAuth.instance.login();
  if (result.status == LoginStatus.success) {
    final accessToken = result.accessToken!;
    // 使用token获取用户信息或进行后端验证
    final userData = await FacebookAuth.instance.getUserData();
    return userData;
  }
  return null;
}

3. Google登录集成

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

Future<UserCredential?> signInWithGoogle() async {
  final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
  final GoogleSignInAuthentication? googleAuth = 
      await googleUser?.authentication;
  
  if (googleAuth != null) {
    final credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    return await FirebaseAuth.instance.signInWithCredential(credential);
  }
  return null;
}

4. 注意事项

  • 对于Facebook登录，需要在Facebook开发者平台创建应用
  • Google登录需要配置Firebase项目并在Google Cloud Console启用API
  • 需要添加iOS的Info.plist和Android的配置（参考各插件文档）

5. 注销处理

// Facebook注销
await FacebookAuth.instance.logOut();

// Google注销
await GoogleSignIn().signOut();
await FirebaseAuth.instance.signOut();

这些实现提供了基本的社交登录功能，可以根据需求进一步扩展用户信息处理和错误处理逻辑。

回到顶部