Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter Facebook Login in web

I have tried the Flutter Facebook Login package, it works properly in android but in web I am not being redirected to the Facebook for authentication. Can someone who tried this package help?

like image 394
Varsha Prabhakar Avatar asked Jun 19 '20 13:06

Varsha Prabhakar


People also ask

What is Facebook SDK work with flutter?

Facebook Sdk For Flutter facebook_sdk_flutter allows you to fetch deep links , deferred deep links and log facebook app events . This was created using the latest facebook SDK to include support for iOS 14. The plugin currently supports app events and deeps links for iOS and Android.


1 Answers

This plugin does not support web.
But someone has updated the code to support it romulojjunior flutter_facebook_login (link defunct)
If you wish to use it:

  flutter_facebook_login:
    git:
      url: [email protected]:romulojjunior/flutter_facebook_login.git
      ref: v1.3.0-web

Could also try firebase_auth for Facebook auth:

import 'dart:html' as html;

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

final FirebaseAuth _auth = FirebaseAuth.instance;

void main() {
  String token;
  if (html.window.location.href.contains("access_token")) {
    String url = html.window.location.href.replaceFirst("#/", "?"); // workaround for readable redirect url
    Uri uri = Uri.parse(url);
    if (uri.queryParameters.keys.contains("access_token")) token = uri.queryParameters["access_token"];
  }

  runApp(
    MaterialApp(
        title: 'Facebook Sign In',
        home: SignIn(
          token: token,
        )),
  );
}

class SignIn extends StatefulWidget {
  final String token;

  const SignIn({Key key, this.token}) : super(key: key);

  @override
  _SignInState createState() => _SignInState();
}

class _SignInState extends State<SignIn> {
  String _message;
  final String clientId = "FBClientId";
  final String redirectUri = "http://localhost";

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (widget.token != null) _signInWithFacebook(widget.token);
  }

  void _signInWithFacebook(String token) async {
    setState(() {
      _message = "Loading...";
    });
    final AuthCredential credential = FacebookAuthProvider.getCredential(
      accessToken: token,
    );
    final FirebaseUser user = (await _auth.signInWithCredential(credential)).user;
    assert(await user.getIdToken() != null);
    final FirebaseUser currentUser = await _auth.currentUser();
    assert(user.uid == currentUser.uid);
    setState(() {
      if (user != null) {
        _message = 'Successfully signed in with Facebook. ' + user?.displayName.toString();
      } else {
        _message = 'Failed to sign in with Facebook. ';
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Text(_message ?? "Please try to sign in"),
            RaisedButton(
              onPressed: () {
                html.window.open(
                    "https://www.facebook.com/dialog/oauth?response_type=token&scope=email,public_profile,&client_id=${clientId}&redirect_uri=${redirectUri}",
                    "_self");
              },
              child: Text('Facebook login'),
            ),
          ],
        ),
      ),
    );
  }
}

Don't forget to add firebase for web: README.md
Enable facebook login for firebase (1-3 Before you begin steps): firebase-facebook

like image 149
Nuts Avatar answered Oct 18 '22 20:10

Nuts