Login has become one of the most important parts of lives for a developer by having a working on-boarding system we can help tend to users need better than ever. hence why it has become a necessity in almost all the apps.
Because of This most companies have brought out a way for users to login seamlessly through their own apps companies like Facebook, Google and Twitter have made it so that u can log in in 1 click, and with flutter, It has become even simpler to implement.
What you will need?
A couple of packages from pub.dev, enable Facebook for developers and Twitter for Developers.
Packages are:
flutter_facebook_login: ^latest version
http: any
What we are going to do?
Before we can just start logging in there are a few steps that are required to do for logging in Facebook.
Facebook :
- So first of all you will have to enable Facebook for developers that is the only way for you to get access to your app ID and app secret, if you have a Facebook profile then it only takes a minute to do it.
- After making an account make an app in Facebook for developers after which you will get access to your app ID and app Secret (to reveal app secret go into settings then basic it should look like this:
3. Now that we have created Facebook for developer’s profiles and have gotten access to our secret key and app ID we can move over to Firebase project to take the necessary steps for log in.
4. Ok once you are at the firebase project you can go to Authentication and then select sign-in methods.
4. Select the Facebook option, it will ask for your App ID and App secret the one you got from Facebook for developers.
5. This will help you in Signing In with Facebook and after that you need to copy that O’auth http link cause it is very important(save it in a text file)
6. Now you will need to go to https://developers.facebook.com/docs/facebook-login/android, to take other actions that will enable you to Sign In through Facebook(Not much left just 3–4 more steps). Don’t worry we are here for full support and will guide you through them as well.
7. Since we are not working with native android we can actually skip many of those steps(GOD I LOVE HOW EASY FLUTTER MAKES EVERYTHING ELSE), we can start at step 1 and choose our project name(the one we just created in Facebook for developers. So go ahead and select it
8. After selecting it we can jump directly to step 5, now there you will need to provide your app’s package name and main activity name there you can find them if you go through your app-level module and opening src t find AndroidManifest.xml (the path is android/app/src/main/AndroidManifest.xml)
9. Now we come to the part that took me the longest and was very troublesome (don’t worry I went through the pain so you guys don’t have to!), so we come to Step 6 where now we need to provide release key for this,
so the things you will need to generate a release are(unless you have your app published on Play Store you will get your release key in SHa1 from there but you will have to convert it to base64 which you can do by a simple google search)
A) openssl which u can get at https://code.google.com/archive/p/openssl-for-windows/downloads , after downloading it save it on your C: drive in a seperate folder and name it something like “open ssl”
B) you need to have jdk installed on your system to be able to generate the keys : https://www.oracle.com/java/technologies/javase-jdk13-downloads.html
After that you will need to open command line in jdk folder
(the path is C:\Program Files\Java\jdk1.8.0_261\bin), once opened you need to run this command :
- keytool -exportcert -alias androiddebugkey -keystore “C:\Users\USERNAME\.android\debug.keystore” | “PATH_TO_OPENSSL_LIBRARY\bin\openssl” sha1 -binary | “PATH_TO_OPENSSL_LIBRARY\bin\openssl” base64
remember to fill in your own details in the command like your username and the path to open SSL (if you followed what I have said completely then it will be : “C:/open SSL/bin/OpenSSL” fill it in both places where it is required.
It will then generate the key required to for logging in to Facebook, it will be of 28 characters minimum and will end with an “=”
10. Now we are really close to completing our Facebook login all we need right now is to put our O’auth(remember this guy from step 5?), all you need to do now is go back to your Facebook for developers(the one where you created your app) and then you will see product + icon there click it.
After getting facebook login option there you can click it then select settings and then you will encounter this page:
See the censored part? That’s where you will have to put in your O’auth you got from Firebase(in case you didn’t save it you can go back and click on edit option in Firebase Sign in methods to get it again)
After that save changes.
11. Now we can finally move onto our project and add some configuration there as well
Go to your /android/app/src/main/res/values/ and find if you have a Strings.xml file if you dont have it create one, after creating one you can enter this information in it :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Your App Name here.</string>
<!-- Replace "000000000000" with your Facebook App ID here. -->
<string name="facebook_app_id">YOUR APP ID HERE</string>
<!--
Replace "000000000000" with your Facebook App ID here.
**NOTE**: The scheme needs to start with `fb` and then your ID.
-->
<string name="fb_login_protocol_scheme">fbYOUR APP ID</string>
</resources>DO as told in the comments.
Now go over to your <your project root>/android/app/src/main/AndroidManifest.xml and add the following just above the “<! — Don’t delete the meta-data below.” comment in androidManifest.xml file then add the following
<meta-data android:name="com.facebook.sdk.ApplicationId"
android:value="@string/facebook_app_id"/>
<activity android:name="com.facebook.FacebookActivity"
android:configChanges=
"keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:label="@string/app_name" />
<activity
android:name="com.facebook.CustomTabActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="@string/fb_login_protocol_scheme" />
</intent-filter>
</activity>After you are done with that part, you are almost good to go(there are some specific IOS configurations which you can find in https://pub.dev/packages/flutter_facebook_login be sure to do them as well if you want it to work for IOS as well)
Now in your project make a HelperClass called Authentication.dart
In the file you need to make a function that will help you sign the user into Facebook :
first of all import all these files
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_facebook_login/flutter_facebook_login.dart';
import 'package:flutter_twitter_login/flutter_twitter_login.dart';
import 'package:http/http.dart' as http;
After this make an object of FacebookLogin() and write the following function
final fbLogin = FacebookLogin();
Future signInFB() async {
final FacebookLoginResult result = await fbLogin.logIn(["email"]);
final String token = result.accessToken.token;
final response = await http.get('https://graph.facebook.com/v2.12/me?fields=name,first_name,last_name,email&access_token=${token}');
final profile = jsonDecode(response.body);
print(profile);
return profile;
}
After that, you can call that function in your button like
RaisedButton(
onPressed: () {
Authenticate auth = Authenticate();
auth.signInFB().whenComplete((onComplete) {Navigator.of(context}.push(MaterialPageRoute(builder: (context)=>HomePage()));
},
Its that simple.
Congratulations you have achieved Facebook login, now on your app after clicking on sign In FB button you will be redirected to Facebook page to allow sign in and after allowing in you can see it print users data which you can store in your database and then log them in.
Feel free to connect with us:
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
