Introduction
Integrating Facebook Login into your platform offers a reliable, user-friendly authentication method, leveraging Facebook's robust security infrastructure.
This article explores the benefits, configuration process, and practical use cases of implementing Facebook Login in your marketplace.
🔵 Feature included from Pro Plan
Benefits for Your Business
Implementing Facebook Login in your marketplace provides several advantages:
User Convenience: Simplifies the login process by allowing users to authenticate using their existing Facebook credentials, reducing the need for multiple usernames and passwords.
Increased Security: Utilizes Facebook's secure authentication protocols, offering a higher level of security for user data.
Improved User Engagement: Facilitates easier access, encouraging users to interact more frequently with your marketplace.
Access to User Data: Provides access to basic user information, helping you personalize the user experience and tailor your services.
Reduced Account Creation Friction: Minimizes the barriers to account creation, potentially increasing user registrations and engagement.
How it works
Configure your Facebook Developer Account
To configure you need to create an account, in https://developers.facebook.com/
Once you have an account you need to find the "My Apps" option in the top of the page, in the Business portfolio (if you have a verified business only) find the right account and click in the "Create App" button:
App Details:
Then you need to select the name of your app and the app contact email. Click in Next button:
Uses Cases:
Select All(18) in order to find the righ option wich in this case is "Authenticate and request data from ysers with Facebook Login" and select it. Then click on Next:
Business:
Now select the bsiness portfolio you want to connenct to this App and click Next:
Requirements:
Then in the requirements you just check that "Business verification" and "App Review" are checked in the publishing requirements and click on Next:
Overview:
Finally in overview we can see all the configuration we just did a few minutes ago. Just click on Go to dashboard to continue with the configuration:
Dashboard:
Here you can see the options you need to configure please let's go through each one of them.
Customize the Authenticate and request data from users with facebook logins use case: Click on it and then you will see more options, but we just need one, so just check that is activated like this: then just go back to the previous page.
Review and complete testing requirements:
When you go back surely this space will be checked. Otherwise, please click on it and then just go back to the dashboard:
Business verification will also be checked, unless you have not done it yet. In this case you will need to verify your business, just click in Business Verifications and follow the steps there.
App Review: Click on it and then click on Next:
App settings: Once you clicked in the "Go to app settings" you need to upload the "App icon" with the format indicated there. The link for privacy policy (URL). The "User data deletion", select the "App category" and the email for "Primary contact". Once this all is done, click to Netx button.
5.1 Allowed usage: Click on the Get started button,
Select the checkbox and click on Save button and then Next button:
5.2 Data Handling: Here select the "No" option in the "Platform Data". Type the name of the Person will be responsable for all platform data meta shares. Select the country where this person or entity is located. In the next select "No", the next select "Non of the above".
5.3 Reviewer instructions: Click on the "Go to settings" a new window will be open and you need to check this:
You need to copy the "App ID" and "App secret" and add them in the dashboard in the "social login options", also make sure that all the information marked in green square has been completed:
Then provide the information in the "Data protection Officer contact information and click the Save changes button:
5.4 In the botom of the page please click the button "Add plaftorm" and then select web. Then add the URL for your website to add the facebook login option:
Save the changes.
Now return to "Review" and then "App Review" in order to fill those fields: In the "provide instructions for accesing the app..." just write the steps to use the facebook login, something like this:
1. please go to: (your site)
2. click on the login button.
3. click on continue with Facebook
4. Enter your facebook data
(Here you can provide a video of the test for facebook login)
The next fields are optional and theres no need yo fill them unless you need them. Just click on Next button.
Now all the steps for "Review" are ready, now you can submit for review:
We are currently updating this Help section to provide you with complete and accurate guidance.
The following sections have not yet been updated and may be incomplete. We kindly ask for your patience while we finish these updates. Thank you for your understanding.
In order to Add iOS App
Click on "+Add Platform" and select "iOS" option. Then just click in the "Next" button.
Then this information will appear, you just need to fill up the "Bundle ID" option. Please copy and paste the package bundle of your Ordering App, if you don't know it, please have a look into your builder, is on the Settings section, under the name "Package*"
In order to Add Android App
Click on "+ Add Platform" and select "Android" option. Then just click in the "Next" button.
Then select Google Play, and click on the "Next" button.
Then just fill up these fields:
Package names: Is the same case of the iOS, use the package bundle. Example: com.orderingapp.ordering
Class Name: Type this: com.facebook.loginactivity
Key Hashes: Please copy and paste these 6 key hashes:
P06REiEMufbvSOrQ76OaICh4L50=
TwtQwSSbQbitJBrpdPuZwp56eaA=
KNhJ+X6VJU/FVwXiAV3fs1KGC7c=
wwaw8MEJvRZJY0UDqH1D5hg97ns=
nQDiV5o9r4uzoIMvN/xzEDi1QF4=
Xo8WBi6jzSxKDVR4drqm84yr9iU=
Leave active only the "Log In-App Events Automatically (Recommended)". This should look like this: u have
Once you have Saved the changes. You can go to the "Add product" in the left panel. And then click into the Facebook Login option "Set up":
Then select the "Settings" option in the left panel, please do not click on Quickstart:
It necessary to deactivate and activate few options:
Deactivate the "Force Web OAuth Login"
Activate the "embedded Browser OAuth Login"
On the "Valid OAuth redirect URIs" section, have to use these texts below:
Your Domain example: https://www.ordering.co/
Note change "Your_Domain" for your custom domain, example: https://ordering.co/oathucallback.html
Enable the JavaScript SDK
Finally save the changes.
Get the App on Live Mode:
Attention: To be able to do this step (enable FB Login on Live Mode) first the app should be live on the stores (Play Store - App Store).
Recommendations:
Setup FB Login on Developer Mode (uses tests credentials to check that it works) and upload the apps on the stores.
Setup FB Login only on the website to enable the Live Mode and later when the app is live on the stores, finish the app setup and add the FB Login ID on the Ordering App (this means that is necessary to upload a new app version)
To complete the configuration about Facebook login only need to publish your app, please switch from Development move to live mode:
A popup message will/may appear, just click on "Use the name of this package" button to continue with the configuration.
Finally, go to your Ordering Dashboard.
Write your App ID to finish your settings in the Facebook ID space inside your Ordering Dashboard.
Also, be sure that the Facebook_app_name is the same as the one in the Facebook Developer Account. After this, you need to save.
Then in your Ordering Dashboard, go to the Settings area and select the "Operation Settings" and finally click on Facebook Settings to complete the configuration to your Facebook login.
Additional Practices
NOTE 🚨
If you get a message saying "Invalid key hash. The key hash "xxxxxxxxxxxxxxxx=" does not match any sorted key hashes. Configure your app key hashes at (link)" you'll have to go in your key hashes inside the Android configuration and add it just like you added the last 5 key hashes.
Practical Use Cases
Seamless User Onboarding: Simplify the registration process for new users, increasing the likelihood of sign-ups and reducing drop-off rates.
Enhanced Personalization: Utilize user data from Facebook to personalize recommendations, improving user engagement and satisfaction.
Social Sharing: Enable users to share their marketplace activities on Facebook, driving organic traffic and increasing visibility.
Targeted Advertising: Leverage Facebook's advertising tools to create targeted campaigns based on user demographics and interests.
Conclusion
Integrating Facebook Login into your marketplace not only enhances user convenience and security but also opens up new avenues for personalized experiences and targeted marketing.
By following the outlined steps, you can seamlessly implement Facebook Login, providing a superior user experience and driving engagement on your platform.