Flutter：Facebook 和 Google 身份验证答案

【问题标题】：Flutter: Facebook and Google AuthenticationFlutter：Facebook 和 Google 身份验证
【发布时间】：2017-10-28 17:10:12
【问题描述】：

我正在尝试在我使用 Flutter 创建的应用中包含 Facebook 和 Google 身份验证。是否有一个教程可以用来实现，因为对于如何在 Flutter 中包含 html 元素和 Javascript 以启用此类身份验证有点不确定。还是有完全不同的 Flutter 身份验证方式？

【问题讨论】：

在谷歌登录video-link找到了一个不错的视频
在一个应用程序中同时使用 FB 和 Google 登录是否有帮助？如果是这样，请分享相同的信息。
此@Purus 的任何更新

标签： dart flutter

【解决方案1】：

您可以使用 google_sign_in 插件。查看plugins repo 和pub 中的文档。

目前还没有 Facebook 插件，但您可以编写一个。

【讨论】：

【解决方案2】：

我建议使用 Firebase。

这是一个代码实验室：https://codelabs.developers.google.com/codelabs/flutter-firebase/index.html#0

【讨论】：

这仅涵盖谷歌。看看是否已经有一个用于 Facebook 的
不，Facebook 也是一种选择。他们有许多不同的登录提供商
是的，我知道他们有一个 FB。我的意思是这个例子:)。无论如何，我将使用this 一个用于 FB 和你的示例用于 Google。谢谢！

【解决方案3】：

添加这个迟到的答案，因为现在有一个 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.logInWithReadPermissions(['email']);
    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，这个包其实已经相当成熟，也更容易上手。

【讨论】：

未处理的异常：MissingPluginException（在通道 com.roughike/flutter_facebook_login 上找不到方法 loginWithReadPermissions 的实现）
这仍然是个问题。我们可以将flutter_facebook_login_web 用于Web。但两者都不是。那是完全相反的写一次运行任何地方的想法我是对的吗？

【解决方案4】：

像其他提到的谷歌使用 google_sign_in 插件和 Facebook 你可以使用这个。

https://github.com/lejard-h/flutter_facebook_connect

但要连接到 Facebook，您必须通过 Facebook 注册您的应用程序。他们为此提供了文档。

注意：不要忘记重定向到 localhost，就像 github 项目的 README 中解释的那样。

Facebook 插件将打开一个 webview（您也需要安装 webview_plugin），用户可以在其中进行身份验证并接受您的应用所需的权限。

【讨论】：