web-dev-qa-db-fra.com

Google, Facebook Connectez-vous avec Flutter

Je suis nouveau sur Flutter, existe-t-il un moyen de fournir une connexion en utilisant GOOGLE/FACEBOOK avec Flutter.

Merci

facebookdartgoogle-signinflutter
13
Mohammed Rampurawala

Ajout de cette réponse tardive car maintenant il y a un package , flutter_facebook_login qui remplace flutter_facebook_connect. Voici un fonctionnement main.Dart exemple qui devrait fonctionner. Gardez à l'esprit que vous devez avoir suivi tout configuration comme décrit dans le référentiel et devez avoir une application facebook configurée:

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),
      ),
    );
  }
}

Vous devriez voir l'écran de connexion lorsque vous cliquez sur le bouton en bas à droite et vérifier la réponse imprimée sur votre console de débogage:

enter image description here

C'est la voie à suivre dès maintenant, car le package utilise réellement les SDK de connexion Facebook natifs sur Android et iOS. Donc, pas d'excuse pour utiliser Firebase ou devoir vous interfacer!

J'espère que cela aide les autres qui ont des problèmes avec la connexion à Facebook. Et les crédits reviennent au créateur du package roughike

Pour l'utilisation de la connexion Google google_sign_in , ce package est en fait assez mature et plus facile à démarrer.

5
FRECIA

Depuis décembre 2017, il existe une solution de connexion Facebook et également 1 pour la connexion Facebook avec Firebase pour créer un utilisateur Firebase Facebook. Le package de connexion Facebook Connect initial peut être trouvé @ https://pub.dartlang.org/packages/flutter_facebook_connect

Il nécessite le package WebView suivant qui redirige vers la page de connexion de Facebook @ https://pub.dartlang.org/packages/flutter_webview_plugin

Et un bouton personnalisé peut être implémenté comme ça ...

final _facebookConnect = new FacebookConnect(
          appId: '<APP_ID>',
          clientSecret: '<CLIENT_SECRET');

FacebookOAuthToken token = await _facebookConnect.login();

Le token peut alors être utilisé avec FirebaseAuth comme ça ...

await FirebaseAuth.instance.signInWithFacebook(accessToken: null);

Quelques étapes supplémentaires, mais une exécution assez simple dans l'ensemble. Il y a aussi un Firebase_Connect méthode pour implémenter un bouton FacebookLogin ...

new FacebookLoginButton(
          appId: '<APP_ID>',
          clientSecret: '<CLIENT_SECRET>',
          scope: [FacebookAuthScope.publicProfile],
          onConnect: (api, token) {
           ...
          }),

La connexion à Google est encore plus simple. Ajoutez simplement le package Google_SignIn à partir de https://pub.dartlang.org/packages/google_sign_in et ajoutez le code suivant à votre bouton Flutter personnalisé ...

GoogleSignInAccount googleUser = await _googleSignIn.signIn();
      GoogleSignInAuthentication googleAuth = await googleUser.authentication;
      await FirebaseAuth.instance.signInWithGoogle(
          idToken: googleAuth.idToken, accessToken: googleAuth.accessToken);
3
Charles Jr

Je ne pense pas qu'il y ait une implémentation directement dans Flutter Dart

Mais peut-être en utilisant une implémentation native et en communiquant avec du code Java/Swift. Vous pouvez créer votre interface utilisateur et déclencher le flux de travail natif OAuth à partir de flutter).

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

2
Hadrien Lejard

La connexion Google existe pour Flutter via le google-sign-in paquet. Consultez le Firebase for Flutter codelab pour plus d'informations.

AFAIK, il n'y a pas encore de package de connexion Facebook pour Flutter (bien qu'il en existe un dans Dart pour le côté serveur). La rédaction d'un tel package devrait être un exercice intéressant ...

1
Yaya