You are here:   Table of contents / User Add-Ons / Authentication And Users Groups

Facebook Authentication - 2/2 | Set up the login with Facebook | Native apps

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 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"

picture

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"


2

Add a product

1. Click "Set up" in the Facebook Login box

picture

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.

picture

4

Select the platform "Web"

1. In the field "Site URL", fill in the URL of your GoodBarber project: "http://[YOURAPP].goodbarber.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.

picture

5

Select the platform "Android"

1. Click "Next" to reach step 3 -- Tell us about your Android Project
2. Go to the menu Users > Settings in your GoodBarber back office
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.goodbarber.saveria45", so I entered "com.goodbarber.saveria45.SplashscreenActivity" in the field "Class Name".
 
Attention: If for any reason the Package name in your GoodBarber 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 GoodBarber.
In this case, the easiest way is to follow the compilation process of your app, and then consult the menu Users > Settings in the GoodBarber backend. It will be updated with the correct information.

picture

6. Click "Continue" to reach step 4. Add Your Development and Release Key Hashes
7. Copy both* key Hash from your GoodBarber back office
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.

picture

11. Enable "Single Sign-On"
12. Click "Save"

picture

6

Select the platform "iOS" (Premium offer only)

If you didn't subscribe for premium GoodBarber 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 Users > Settings  in your GoodBarber back office
3. Copy your Bundle Identifier from your GoodBarber back office 
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 GoodBarber 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 GoodBarber.
In this case, the easiest way is to follow the compilation process of your app, and then consult the menu Users > Settings in the GoodBarber backend, it will be updated with the correct information.

picture

7. Enable "Single Sign-On"
8. Click "Save"

picture

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.goodbarber.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.goodbarber.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.

See example below:

picture

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 back office, go to 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

picture

10

Copy your App ID on Facebook platform

1. Retrieve it at the top of the page

picture

11

Paste this value into your GoodBarber back office

1. Go to the menu Users > Settings  to authorize your users to sign up in your app.

picture

2. Paste your Facebook App ID in the corresponding field.
3. Click OK 

picture

12

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:

picture

13

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"


14

Test Facebook authentication on your ad hoc version

1. Regenerate your apps (PWA, Android and iOS for Premium plan): The different types of native app updates

Warning:
- It doesn't work on My GB 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.


15

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

picture

2. Click "Switch mode" in the popup.

picture

3. Check if your app is properly activated.
The button must display "Live" as shown below:

picture

16

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 GoodBarber takes care service, ask for an update, we'll take care of it for you.