Platter’s Facebook Login:
Integrate Facebook login with your Pelter app, that is, Android and iOS apps, so that users can easily log in to your app with a Facebook account and without having to create new credentials.
You can log in to your Pepper app through various providers like Facebook, Google and also OTP based authentication that we talked about Here.
In this blog we will discuss the detailed process of integrating Facebook login directly from the Facebook developer terminal, Google Firebase configurations.
You can access the user’s login information like email address, name and other details may refer to the Facebook Developers website for more information you can access this information by providing required information.
Can also use features like advertising to your Facebook account from the app, information sharing and other services available on Facebook.
pubspec.yaml:
Add Firebase authentication, Firebase kernel and Facebook authentication to sign in to Facebook.
dependencies: flutter: sdk: flutter firebase_auth: firebase_core: flutter_facebook_auth:
AndroidManifest.xml:
Add information below to your manifest file Visit the tutorial video for more details on connecting to Facebook.
<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>
strings.xml:
Replace the app ID and your logon protocol.
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">"Login"</string> <string name="facebook_app_id">1**************</string> <string name="fb_login_protocol_scheme">fb1************</string> </resources>
main.dart:
Void main boot and specify Firebase boot.
Future<void> main() async{ WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(App()); }
Specify variable user data and string value
Map<String, dynamic>? _userData; String welcome = "Facebook";
Specify LoginResult and search for email request.
final LoginResult result = await FacebookAuth.instance.login(permissions:['email']);
If the login is successful then using login status check the success status and store the user information by retrieving as shown below
if (result.status == LoginStatus.success) { final userData = await FacebookAuth.instance.getUserData(); _userData = userData; }
If login fails, handle another block of code
else { print(result.message); }
Trying to set a status and update information, i.e. the user’s email address to Text widget using the declared String variable
setState(() { welcome = _userData?['email']; });
Get Facebook verification confirmation with a token
final OAuthCredential facebookAuthCredential = FacebookAuthProvider.credential(result.accessToken!.token);
Using AuthCredential Full login procedure
FirebaseAuth.instance.signInWithCredential(facebookAuthCredential);
Provide the full code for Flutter’s Facebook login integration below
import 'package:firebase_auth/firebase_auth.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:flutter/material.dart'; import 'package:flutter_facebook_auth/flutter_facebook_auth.dart'; Future<void> main() async{ WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(App()); } class App extends StatelessWidget { const App({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text("Login"),), body: MyApp(), ), ); } } class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { Map<String, dynamic>? _userData; String welcome = "Facebook"; @override void initState() { // TODO: implement initState super.initState(); } @override Widget build(BuildContext context) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextButton(onPressed: (){ signInWithFacebook(); }, child: Text(welcome)) ], ), ); } Future<UserCredential> signInWithFacebook() async { final LoginResult result = await FacebookAuth.instance.login(permissions:['email']); if (result.status == LoginStatus.success) { final userData = await FacebookAuth.instance.getUserData(); _userData = userData; } else { print(result.message); } setState(() { welcome = _userData?['email']; }); final OAuthCredential facebookAuthCredential = FacebookAuthProvider.credential(result.accessToken!.token); return FirebaseAuth.instance.signInWithCredential(facebookAuthCredential); } }
If you have any queries in this guide on connecting to Pelter’s Facebook, let us know in the comments section below. If you like this guide do like and share us for more interesting updates.