谷歌、Facebook 使用 Flutter 登录支持

Posted 2023-02-23

【中文标题】谷歌、Facebook 使用 Flutter 登录支持

【英文标题】：Google, Facebook Sign in support with Flutter

【发布时间】：2017-05-23 07:57:01

【问题描述】：

我是 Flutter 的新手，有什么方法可以让我通过 Flutter 使用 GOOGLE/FACEBOOK 登录。

谢谢

【问题讨论】：

如果您需要“使用...登录”按钮，我为此编写了一个包：pub.dartlang.org/packages/flutter_auth_buttons。下面的答案描述了如何添加将由按钮触发的逻辑。

【参考方案1】：

添加这个迟到的答案，因为现在有一个 package、flutter_facebook_login 替换 flutter_facebook_connect。这是一个正常运行的main.dart 示例，应该可以。请记住，您必须按照存储库中的说明遵循所有 configuration，并且必须配置 facebook 应用程序：

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

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

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      title: 'Flutter Facebook Login',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Login Facebook'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();


class _MyHomePageState extends State<MyHomePage>     
  login() async 
    final facebookLogin = new FacebookLogin();
    final result = await facebookLogin.logIn(['email']);
   // final result = await facebookLogin.logInWithReadPermissions(['email']); --> Versions bellow 3.0
    switch (result.status) 
      case FacebookLoginStatus.loggedIn:
        print(result.accessToken.token);
        break;
      case FacebookLoginStatus.cancelledByUser:
        print('CANCELED BY USER');
        break;
      case FacebookLoginStatus.error:
        print(result.errorMessage);
        break;
    
  

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: login,
        tooltip: 'Login With Facebook',
        child: new Icon(Icons.add),
      ),
    );
  

单击右下角按钮时应该会看到登录屏幕，并在调试控制台上检查打印的响应：

这是现在要走的路，因为该软件包实际上在 android 和 ios 上使用原生 Facebook 登录 SDK。所以没有借口使用 Firebase 或必须自己接口！

希望它可以帮助其他在 facebook 登录方面遇到问题的人。积分归包创建者roughike

google 登录使用google_sign_in，这个包其实已经相当成熟，也更容易上手。

【讨论】：

从最新版本flutter_facebook_login:^3.0.0 开始，logInWithReadPermissions() 必须替换为final result = await facebookLogin.logIn(['email']);

谢谢@maheshmnj，用你的修复编辑了答案

【参考方案2】：

截至 2017 年 12 月，有一个 Facebook 登录解决方案，还有一个用于 Facebook 登录的 Firebase 以创建一个 Facebook FirebaseUser。初始 Facebook Connect 登录包可以在@https://pub.dartlang.org/packages/flutter_facebook_connect找到

它需要以下 webView 包重定向到 Facebook 的登录页面@https://pub.dartlang.org/packages/flutter_webview_plugin

自定义按钮可以这样实现...

final _facebookConnect = new FacebookConnect(
          appId: '<APP_ID>',
          clientSecret: '<CLIENT_SECRET');

FacebookOAuthToken token = await _facebookConnect.login();

token 然后可以像这样与FirebaseAuth 一起使用...

await FirebaseAuth.instance.signInWithFacebook(accessToken: null);

一些额外的步骤，但总体上非常直接的执行。还有一个 Firebase_Connect 方法来实现 FacebookLogin 按钮...

new FacebookLoginButton(
          appId: '<APP_ID>',
          clientSecret: '<CLIENT_SECRET>',
          scope: [FacebookAuthScope.publicProfile],
          onConnect: (api, token) 
           ...
          ),

Google 登录更加简单。只需添加来自 https://pub.dartlang.org/packages/google_sign_in 的 Google_SignIn 包并将以下代码添加到您的自定义 Flutter 按钮...

GoogleSignInAccount googleUser = await _googleSignIn.signIn();
      GoogleSignInAuthentication googleAuth = await googleUser.authentication;
      await FirebaseAuth.instance.signInWithGoogle(
          idToken: googleAuth.idToken, accessToken: googleAuth.accessToken);

【参考方案3】：

我认为 Flutter Dart 中没有直接实现

但也许通过使用本机实现并与 Java/Swift 代码进行通信。 您可以构建您的 UI 并从 Flutter 触发原生 OAuth 工作流。

https://github.com/flutter/flutter/tree/master/examples/hello_services

【讨论】：

页面返回404

【参考方案4】：

Flutter 可以通过 google-sign-in 包进行 Google 登录。查看Firebase for Flutter 代码实验室了解更多信息。

AFAIK，目前还没有用于 Flutter 的 Facebook 登录包（尽管 Dart 中存在用于服务器端的登录包）。编写这样的包应该是一个有趣的练习......