Facebook Authentication - 2/2 | Set up the Login with Facebook | Native Apps
o enable the Facebook login, you must declare your app to Facebook.
Create a developer account on Facebook: How to register as a developer on Facebook
If you do not follow the full procedure, you will not be able to connect your App to Facebook.
In the explanation of the process, we will use an example. Make sure you fill in the correct information for YOUR app.
1. Create an App
1. Go to this URL: https://developers.facebook.com/apps
2. Click "Create App".
3. Select "Consumer" in the popup
4. Click "Continue"
5. Fill in the Fields in the Popup:
- "App Display Name": Fill in the name of your application
- "App Contact Email": Add your email
6. Click "Create App"
- "App Contact Email": Add your email
6. Click "Create App"
2. Add a Product
1. Click "Set up" in the Facebook Login box
3. Select Platforms for your App
We are going to repeat the operation 3 times: once for the platform "Web", once for "Android" and finally, once for "iOS" (Premium offer only).
Follow only the instructions given below, you do not need to go through all steps asked by Facebook to set the authentication on your app. We've already dealt with the integration of their SDK for you.
4. Select the Platform "Web"
1. In the field "Site URL", fill in the URL of your Muse mBaaS project: "http://[YOURAPP].musembaas.com" (see example below).
2. Click "Save".
Attention: If you install a domain name for your Progressive Web App later on, remember to edit the field "Site URL" with its new URL (the one using your domain name) on Facebook platform.
5. Select the Platform "Android"
1. Click "Next" to reach step 3 -- Tell us about your Android Project
2. Go to the menu Settings > Registration settings > Registration process in your Muse mBaaS backend.
3. Under External Services, switch Authorize Facebook connection to On
2. Go to the menu Settings > Registration settings > Registration process in your Muse mBaaS backend.
3. Under External Services, switch Authorize Facebook connection to On
4. Copy your "Package Name" in your back office to paste it in the "Package Name" field on the Facebook platform
5. In the field "Class Name", fill in your package name, followed by ".SplashscreenActivity"
In this example, the package name of my app is "com.musembaas.saveria45", so I entered "com.musembaas.saveria45.SplashscreenActivity" in the field "Class Name".
Attention: If for any reason the Package name in your Muse mBaaS backend is wrong, it will be important to enter the correct one in the fields "Package Name", "Class Name", and "Key Hashes". This can be the case if, for example, your app is an update of an existing app not created with Muse mBaaS.
In this case, the easiest way is to follow the compilation process of your app, and then consult the menu Settings > Registration settings > Registration process in the Muse mBaaS backend. It will be updated with the correct information.
6. Click "Continue" to reach step 4. Add Your Development and Release Key Hashes
7. Copy both* key Hash from your Mue mBaaS backend
8. Paste both key on Facebook platform
9. Click "Save"
10. Click "Continue" to reach step 5. Enable Single Sign On for Your App
*If you only have 1 Facebook key hash, copy this unique key from your back office to Facebook platform.
11. Enable "Single Sign-On"
12. Click "Save"
6. Select the Platform "iOS" (Premium Offer Only)
If you didn't subscribe for premium Muse mBaaS offer, skip this step and go directly to step 8.
1. Click "Next" to reach step 2 -- Add your Bundle identifier
2. Go to the menu Settings > Registration settings > Registration process in your Muse mBaaS backend
3. Copy your Bundle Identifier from your Muse mBaaS backend
4. Paste your Bundle Identifier on the Facebook platform
5. Click "Save"
6. Click "Continue" to reach the next step
Attention: If for any reason the Bundle ID in your Muse mBaaS backend is wrong, you must enter the correct one in the field "Bundle ID". This can be the case if, for example, your app is an update of an existing app not created with Muse mBaaS.
In this case, the easiest way is to follow the compilation process of your app, and then consult the menu Settings > Registration settings > Registration process in the Muse mBaaS backend, it will be updated with the correct information.
7. Enable "Single Sign-On"
8. Click "Save"
7. Client OAuth Settings
1. Go to the menu Facebook Login > Settings
2. Fill in the field Valid OAuth Redirect URIs with your PWA url followed by /login
For instance:
https://myapp.musembaas.app/login
If you set a domain name, make sure to add both: default url + custom url (with your domain name) followed by /login
3. Toggle the "Login with the JavaScript SDK" option to Yes
4. Fill in the field Allowed Domains for the JavaScript SDK with the url of your PWA.
For instance:
https://myapp.musembaas.app/
If you set a domain name, make sure to add both: default url + custom url (with your domain name)
5. Click "Save changes" at the bottom of the page.
8. Go to Settings > Basic in the Left Column
1. Add your Privacy Policy URL
You can download a standard privacy policy for your app, from this link
This is a template privacy policy. You are invited to customize it.
In your backend, go to Settings > Other settings > My Files, create a folder called Privacy Policy and upload your file in .pdf format.
Open the file in an external browser to display its full url. Copy it and paste it on Facebook platform.
In your backend, go to Settings > Other settings > My Files, create a folder called Privacy Policy and upload your file in .pdf format.
Open the file in an external browser to display its full url. Copy it and paste it on Facebook platform.
2. In the field User Data Deletion, select Data Deletion Instructions URL and fill in your URL:
To be compliant with General Data Protection Regulation (GDPR), you must provide a URL with explicit instructions to inform people how to delete their data from your app.
3. Choose a category from the drop down menu
4. Click "Save changes" at the bottom of the page
9. Go to Settings > Advanced tab in the Left Column
1. Enable the option "Native or desktop app?"
2. Click "Save changes" at the bottom of the page
10. App ID and Token Facebook
Go to Settings > Advanced menu in Facebook left column
1. Copy your App ID from Facebook platform.
- Retrieve it at the top of the page
- Go to the menu Settings > Registration settings > External settings
- Paste Facebook App ID in Muse mBaaS 's backend.
2. Scroll down to Security section on Facebook app and copy the "Client Token"
- Go back to the menu Settings > Registration settings > External settings of your back office
- Paste the client token in Muse mBaaS 's backend
- Click "Ok" on your backend.
11. Request Advanced Access for Public_Profile Permission
1. Go to the menu App review > Permissions and features on Facebook platform
2. Click "Get advanced access" for the permission public_profile
3. Confirm Advanced Access for public_profile (don't forget to check the box "I agree that any data I receive through public_profile will be used in accordance with the allowed usage.")
4. Re-enter your Facebook password to submit the confirmation
5. Make sure you have an advanced access for the permission public_profile in the list as shown below:
12. Complete Data Use Checkup
If Facebook asks you to complete Data Use Checkup:
1. Click "Start checkup"
2. Check the box "I certify that any use of public_profile is in compliance with the allowed usage."
3. Click "Continue"
4. Check the box to certify Compliance with Platform Terms and Developer Policies and click "Continue"
5. Click "Submit"
1. Click "Start checkup"
2. Check the box "I certify that any use of public_profile is in compliance with the allowed usage."
3. Click "Continue"
4. Check the box to certify Compliance with Platform Terms and Developer Policies and click "Continue"
5. Click "Submit"
13. Test the Facebook Authentication in your ad Hoc Version
1. Regenerate your apps (PWA, Android and iOS for Premium plan): The different types of native app updates
- iOS: Submit an update to the App store to be able to test Facebook Authentication via TestFlight
- Android: Test Facebook Authentication on latest ad hoc version generated
Warning:
- It doesn't work on My MB app or the back office preview, the only way to test the Facebook authentication to your app is with the AdHoc version.
- It will only work for your Facebook account developer, to enable it for all users you must follow the instructions below.
- It doesn't work on My MB app or the back office preview, the only way to test the Facebook authentication to your app is with the AdHoc version.
- It will only work for your Facebook account developer, to enable it for all users you must follow the instructions below.
14. Make your Facebook App Public
Your Android native app must be already published on Google Play store.
If not, you must remove the Android platform from your Facebook app before moving on to the next steps.
1. Toddle the button to make your App public in the top bar of Facebook platform
If not, you must remove the Android platform from your Facebook app before moving on to the next steps.
1. Toddle the button to make your App public in the top bar of Facebook platform
2. Click "Switch mode" in the popup.
3. Check if your app is properly activated.
The button must display "Live" as shown below:
15. Submit an update of your Apps to the Stores to Activate FB Authentication for your Users
1. Android - Update the Android app on the Google Play Store
2. iOS - Update the app on the store (App Store Connect)
3. If you subscribed for Muse mBaaS takes care service, ask for an update, we'll take care of it for you.
2. iOS - Update the app on the store (App Store Connect)
3. If you subscribed for Muse mBaaS takes care service, ask for an update, we'll take care of it for you.
Related Articles
Facebook Authentication - 2/2 | Set up the Login with Facebook | Progressive Web App
To enable the Facebook login, you must declare your app to Facebook. Create a developer account on Facebook: How to register as a developer on Facebook If you do not follow the full procedure, you will not be able to connect your App to Facebook. In ...Facebook Authentication - 1/2 | Register as a Facebook Developer
To be able to login to your application through Facebook, you have to set up your App on the Facebook platform. You must follow 2 steps. The first step described in this online help is to sign up as a Facebook developer. It's free, but you need to ...Twitter Authentication | Set up the Login with Twitter
If you have activated the Authentication extension, you have the option to allow your users to log into your app with their Twitter account (native apps only). You already set a Twitter section, it means that you have created your Twitter ...Authentication Add-ons
1. Activate the Authentication Add-ons 1. Go to the menu to Add-ons Store > All Add-ons 2. Scroll to the Authentication add-ons or search for it in the search bar 3. Install it from the Add-ons store by clicking on the "Install" green button. 2. ...Sign in with Apple Authentication (Premium Plan Only)
Sign in with Apple allows users to sign in to your apps using the Apple ID they already have. With privacy and security features built in, Sign in with Apple is a great way to help users set up an account, sign in, and engage with your app quickly ...