使用 Flutter 支持 Google、Facebook 登錄

Question

我是 Flutter 的新手，有什么方法可以通過 Flutter 使用GOOGLE/FACEBOOK提供登錄。

謝謝

Answer 1

添加這個遲到的答案，因為現在有一個包flutter_facebook_login代替了flutter_facebook_connect 。 這是一個可以正常工作的main.dart示例。 請記住，您必須遵循存儲庫中描述的所有配置，並且必須配置 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 signin 使用google_sign_in ，這個包實際上非常成熟並且更容易上手。

Answer 2

截至 2017 年 12 月，有一個 Facebook 登錄解決方案，還有 1 個用於 Facebook 登錄與 Firebase 以創建 Facebook FirebaseUser。 可以在@ https://pub.dartlang.org/packages/flutter_facebook_connect找到最初的 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);

Answer 3

我認為 Flutter Dart 中沒有直接實現

但也許通過使用本機實現並與 Java/Swift 代碼進行通信。 您可以構建您的 UI 並從 flutter 觸發本機 OAuth 工作流程。

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

Answer 4

Flutter 可以通過google-sign-in包進行google-sign-in 。 查看Firebase for Flutter 代碼實驗室了解更多信息。

AFAIK，目前還沒有用於 Flutter 的 Facebook 登錄包（盡管 Dart 中有一個用於服務器端）。 編寫這樣的包應該是一個有趣的練習......