Flutter Plugin to login via Facebook.
Easily add Facebook login feature in your application. User profile information included.
Facebook SDK version, used in plugin:
Also package require Android embedding v2. So if your project was create with Flutter pre 1.12 you should upgrade it
To use this plugin:
flutter_login_facebook
as a dependency in your pubspec.yaml file;See Facebook Login documentation for full information.
Also you can read the article on Medium with detailed instructions.
If you have any troubles check out Problem solving section.
Go to Facebook Login for Android - Quickstart page.
You need to complete Step 1: Select an App or Create a New App.
Skip Step 2 (Download the Facebook App) and Step 3 (Integrate the Facebook SDK).
Complete Step 4: Edit Your Resources and Manifest
/android/app/src/main/res/values/strings.xml
(create file if it doesn't exist).
You don't need to add fb_login_protocol_scheme
, only facebook_app_id
and facebook_client_token
:
<string name="facebook_app_id">YOUR_APP_ID</string>
<string name="facebook_client_token">YOUR_CLIENT_ACCESS_TOKEN</string>
android/app/src/main/AndroidManifest.xml
:
meta-data
elements in section application
:
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
<meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
application
):
<uses-permission android:name="android.permission.INTERNET"/>
See full AndroidManifest.xml
in example.
Complete Step 5: Associate Your Package Name and Default Class with Your App.
Package Name
- your package name for Android application (attribute package
in AndroidManifest.xml
).Default Activity Class Name
- your main activity class (with package). By default it would be com.yourcompany.yourapp.MainActivity
.Complete Step 6: Provide the Development and Release Key Hashes for Your App.
echo "{sha1key}" | xxd -r -p | openssl base64
Key Hashes
.⚠️ Important! You should add key hashes for every build variants. E.g. if you have CI/CD which build APK for testing with it's own certificate (it may be auto generated debug certificate or some another) than you should add it's key too.
In the next Step 7 Enable Single Sign On for Your App you can enable Single Sing On if you want to.
And that's it for Android.
Go to Facebook Login for iOS - Quickstart.
You need to complete Step 1: Select an App or Create a New App. If you've created an app during an Android setup than use it.
Skip Step 2 (Set up Your Development Environment) and Step 3 (Integrate the Facebook SDK).
Complete Step 3: Register and Configure Your App with Facebook.
Bundle ID
(you can find it in Xcode: Runner - Target Runner - General, section Identity
, field Bundle Identifier
) and click "Save".Complete Step 4: Configure Your Project.
Configure Info.plist
(ios/Runner/Info.plist
):
Info.plist
, and choose Open As Source Code
.<dict>...</dict>
),
replacing [APP_ID]
with Facebook application id,
[CLIENT_TOKEN]
value found under Settings > Advanced > Client Token in your App Dashboard
and [APP_NAME]
with Facebook application name
(you can copy prepared values from Step 4 in Facebook Quickstart).
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fb[APP_ID]</string>
</array>
</dict>
</array>
<key>FacebookAppID</key>
<string>[APP_ID]</string>
<key>FacebookClientToken</key>
<string>[CLIENT_TOKEN]</string>
<key>FacebookDisplayName</key>
<string>[APP_NAME]</string>
Info.plist
body (<dict>...</dict>
):
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-share-api</string>
</array>
See full Info.plist
in example.
⚠️ NOTE. Check if you already have CFBundleURLTypes
or LSApplicationQueriesSchemes
keys in your Info.plist
. If you have, you should merge their values, instead of adding a duplicate key.
Skip Step 5 (Connect Your App Delegate) and all the rest.
And that's it for iOS.
Additional guidance for developers from Facebook documentation:
Note: Developers can find additional details around the tracking domain field in the Privacy Manifests for Meta SDKs. What is pre-populated in the tracking domain field is intended to receive traffic when a user has provided AppTrackingTransparency (ATT) permission to the app. If our check determines that a request or event from an iOS14.5+ device lacks ATT permission, then usage of such data will be restricted and we will use privacy preserving methods (like those available in [Aggregated Event Measurement]()) to remove or combine information before delivering or measuring ads.
Go to My App on Facebook and select your application.
You should add the App Icon (in Settings -> Basic) to let users see your application icon instead of the default icon when they attempt to log in.
In Setting -> Basic -> iOS fill up field "iPhone Store ID" ("iPad Store ID").
To use the profile data, you must raise the access level for the "public_profile" and "email" functions to "Advanced Access" in App Review
-> Permissions and features
(Administrator rights required).
You may want to change some other settings. For example Display Name, Contact Email, Category, etc.
By default, your application has the status "In development".
You should enable application before log in feature goes public.
Facebook will show a warning if your application is not fully set up. For example, you may need to provide a Privacy Policy. You can use your Privacy Policy from Google Play/App Store.
You can:
Sample code:
import 'package:flutter_login_facebook/flutter_login_facebook.dart';
// Create an instance of FacebookLogin
final fb = FacebookLogin();
// Log in
final res = await fb.logIn(permissions: [
FacebookPermission.publicProfile,
FacebookPermission.email,
]);
// Check result status
switch (res.status) {
case FacebookLoginStatus.success:
// Logged in
// Send access token to server for validation and auth
final FacebookAccessToken accessToken = res.accessToken;
print('Access token: ${accessToken.token}');
// Get profile data
final profile = await fb.getUserProfile();
print('Hello, ${profile.name}! You ID: ${profile.userId}');
// Get user profile image url
final imageUrl = await fb.getProfileImageUrl(width: 100);
print('Your profile image: $imageUrl');
// Get email (since we request email permission)
final email = await fb.getUserEmail();
// But user can decline permission
if (email != null)
print('And your email is $email');
break;
case FacebookLoginStatus.cancel:
// User cancel log in
break;
case FacebookLoginStatus.error:
// Log in failed
print('Error while log in: ${res.error}');
break;
}
With the release of SDK v17.0 for iOS, there are significant changes to the login behavior and token validation process:
isLimitedLogin
field in the AccessToken
object.authenticationToken
field in the AccessToken
.
In Limited Login mode you should validate this token for the server-side verification.
Learn more about token validation in the documentation.getProfileImageUrl()
method will ignore size parameters.
This limitation arises because we can't execute API calls, thus only a 100x100 image from the JWT authentication token can be used.For detailed insights into these changes, please refer to the blog post and the documentation on Limited Login.
Express Login helps users log in with their Facebook account across devices and platforms. If a person has logged into your app before on any platform, you can use Express Login to log them in with their Facebook account on Android, instead of asking for them to select a login method, which sometimes resulted in creating duplicate accounts or even failing to log in at all.
See documentation.
Example:
import 'package:flutter_login_facebook/flutter_login_facebook.dart';
// Create an instance of FacebookLogin
final fb = FacebookLogin();
// Log in
final res = await fb.expressLogin();
if (res.status == FacebookLoginStatus.success) {
final FacebookAccessToken accessToken = res.accessToken;
print('Access token: ${accessToken.token}');
}
Only for Android.
If you targets Android 11 or higher, you should add
<queries>
<package android:name="com.facebook.katana" />
</queries>
in root element of your manifest android/app/src/main/AndroidManifest.xml
.
See Package visibility in Android 11 for details.
You get error like this:
Missing 'package' key attribute on element package at ...
This issue happens for the combination of:
Quote:
Basically, updating build-tools to 31 is not enough to support queries element (of manifest, added since Android 11+). Gradle needs to be updated, too.
Check your com.android.tools.build:gradle
version in
android/build.gradle
. It's should be 3.5.4 or higher.