Question

我是Flutter的新手，有没有办法可以使用 GOOGLE / FACEBOOK 和Flutter一起登录。

由于

Answer 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.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，此套餐实际上非常成熟，更容易上手。

Answer 2

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

找到

它需要以下webView包重定向到Facebook的SignIn Page @ 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 Button ...

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

通过google-sign-in包存在Flutter的Google登录。查看Firebase for Flutter codelab了解更多信息。

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

Answer 5

针对Google和Facebook颤抖登录的分步说明。

Google登录：Google Login In Flutter
Facebook登录：Facebook Login In Flutter

Google，Facebook使用Flutter登录支持

5 个答案: