Facebook-login-and-authentication

Today, Almost Mobile apps have Facebook Login option. In current age Social media login option is necessary in mobile apps. Here, I explain How can we implement Facebook login in Flutter.

You can Download Source Code via Github.

Add the following libs to your pubspec.yaml file:

flutter_facebook_login: ^2.0.1
http: ^0.12.0+2

Building UI

_displayLoginButton() {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlutterLogo(size: 150),
              SizedBox(height: 50),
              RaisedButton(
                child: Text(
                  "Login with Facebook",
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.blue,
                onPressed: () => initiateFacebookLogin(),
              )
            ],
          ),
        ),
      ),
    );
  }

Login with Facebook

void initiateFacebookLogin() async {
    setState(() {
      isLoading = true;
    });
    var facebookLoginResult =
        await facebookLogin.logInWithReadPermissions(['email']);

    switch (facebookLoginResult.status) {
      case FacebookLoginStatus.error:
        onLoginStatusChanged(false);
        break;
      case FacebookLoginStatus.cancelledByUser:
        onLoginStatusChanged(false);
        break;
      case FacebookLoginStatus.loggedIn:
        var graphResponse = await http.get(
            'https://graph.facebook.com/v2.12/me?fields=name,first_name,last_name,email,picture.height(200)&access_token=${facebookLoginResult.accessToken.token}');

        var profile = json.decode(graphResponse.body);
        print(profile.toString());

        onLoginStatusChanged(true, profileData: profile);
        break;
    }
  }

Logout

_logout() async {
    await facebookLogin.logOut();
    onLoginStatusChanged(false);
    print("Logged out");
  }

You can Download Source Code via Github.

Create a Facebook developer account

Go to the Facebook developer page and register yourself as a developer.

Generate Hash key using Code

try {
      PackageInfo info = getPackageManager().getPackageInfo( 
      getPackageName(), PackageManager.GET_SIGNATURES);

      for (Signature signature : info.signatures) {
        MessageDigest md = MessageDigest.getInstance("SHA");
        md.update(signature.toByteArray());
        Log.d("KeyHash:-->>>", Base64.encodeToString(md.digest(), 
        Base64.DEFAULT));
      }
    } catch (PackageManager.NameNotFoundException e) {
      Log.i("-->>>",e.toString());
    } catch (NoSuchAlgorithmException e) {
      Log.i(">>>>",e.toString());
    }

Register Application on Facebook

Go to create new facebook application and fill out all the information