15

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

谢谢

4

4 回答 4

6

添加这个迟到的答案，因为现在有一个包，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 登录使用google_sign_in，这个包实际上非常成熟并且更容易上手。

于 2018-06-06T04:02:40.970 回答
3

截至 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) {
           ...
          }),

谷歌登录更加容易。只需从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);
于 2017-12-30T19:38:49.310 回答
1

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

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

于 2017-06-24T19:19:30.807 回答
1

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

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

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

于 2017-01-09T14:14:37.000 回答