web-dev-qa-db-ja.com

Google、FacebookサインインFlutterでサポート

Flutterは初めてですが、FlutterでGOOGLE/FACEBOOKを使用してサインインできるようにする方法はありますか？.

ありがとう

facebookdartgoogle-signinflutter
13
Mohammed Rampurawala

パッケージ 、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.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),
      ),
    );
  }
}

右下のボタンをクリックすると、ログイン画面が表示され、デバッグコンソールで印刷された応答を確認します。

enter image description here

これは、パッケージが実際にAndroidおよびiOSでネイティブのFacebookログインSDKを使用するためです。そのため、Firebaseを使用したり、自分でインターフェイスする必要はありません。

Facebookのログインで問題が発生している他のユーザーに役立つことを願っています。クレジットはパッケージ作成者に送られます roughike

グーグルサインインの使用 google_sign_in の場合、このパッケージは実際にはかなり成熟しており、使い始めるのが簡単です。

5
FRECIA

2017年12月の時点で、Facebookログインソリューションと、FirebaseでFacebookログインしてFacebook FirebaseUserを作成するためのソリューションが1つあります。最初のFacebook Connectログインパッケージは@ にありますhttps://pub.dartlang.org/packages/flutter_facebook_connect

Facebookのサインインページ@ にリダイレクトする次のwebViewパッケージが必要です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);

いくつかの追加の手順ですが、全体的にかなり単純な実行です。 FacebookLoginボタンを実装するFirebase_Connectメソッドもあります...

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
Charles Jr

Flutter Dartに直接実装があるとは思わない

しかし、おそらくネイティブ実装を使用して、Java/Swiftコードと通信します。 UIを構築して、フラッターからネイティブのOAuthワークフローをトリガーできます。

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

2
Hadrien Lejard

Googleログインは、google-sign-inパッケージを介してFlutterに存在します。詳細は Firebase for Flutter コードラボをご覧ください。

私の知る限り、FlutterのFacebookサインインパッケージはまだありません（サーバー側のDartには1つあります）。そのようなパッケージを書くことは興味深い練習になるはずです...

1
Yaya