Built into Aquro is full support for using Facebook as an authentication / login provider.

By implementing Facebook login, you can make user registration and signin extremely easy for both yourself and your end users.

Implementing user Facebook authentication in your app is a 4 step process.

1. Creating a Facebook app
2. Configuring your mobile app inside Aquro Studio to use Facebook authentication.
3. Configuring your Facebook app to work with your mobile app.
4. Adding a sign in button to your page

This article will cover all these steps and lastly you will find some information about testing your app with Facebook login.

Step 1 - Creating a Facebook app

To be able to authenticate with Facebook you will first need to create your own Facebook app. This app will be responsible for handling the sign in process. To create an app on Facebook follow these instructions.

1. Go to https://developers.facebook.com/quickstarts/
2. Click on Basic Setup
3. Enter the name of your app in Display Name
4. Enter your email address in Contact Email
5. Choose an appropriate category under Category
6. Click on Create App ID
7. Your app will now be created

When accessing Facebook developers you might be told that you have to create a developer account first. If that's the case follow the instructions and then retry the steps above.

Once the app has been created you should now locate the App ID of your app, you will find it on the top of the page. It will look something like this:

Copy the App ID and save it, you will need it in the next step.

Step 2 - Configure your app in Aquro Studio

Now you are ready to configure your app inside Aquro Studio to support FaceBook login authentication.

First make sure that you have loaded your app into Aquro App Studio and then follow these steps:

1. Goto the DEVELOPMENT area
2. Expand the Backend Services node in the treeview to the left side of the screen
3. Click on User Service
4. Goto the FACEBOOK tab
5. Click on Activate to activate the Facebook support in your app
6. Type in the App ID you got from Facebook earlier in the Facebook AppID field
7. Click on SAVE

As you might have seen you also had the possibility to configure the requested permissions in this page. This is only needed when you will continue to work with data from facebook. To use authentication the default settings works fine.

Step 3 - Configure your Facebook App

In this step we will configure the Facebook app to work with your app. This is needed to make sure that the communication with Facebook is secure and that no one else may access your Facebook data.

When configuring the Facebook app you will need to enter some different information, this information will be found in Aquro App Studio on the bottom of the Facebook page we used in the previous step.

Before you continue to configure your Facebook app please make sure that you have added the signing keys and certificates needed to release your app to Apple AppStore and Google Play. If you are not ready to release your app yet, you might skip this step for now and continue with Step 4. However it is very important that you complete this step before you release your app to AppStore or Google Play - as your facebook integration will not work without this configured.

If your signing keys are ready, continue the configuration of the Facebook app now by following these steps.

1. Go back to Facebook developer and open up your app you created in step 1
2. Click on Settings
3. Click on Add Platform
4. Choose iOS
5. Enter the Bundle ID found in Aquro Studio into the Bundle ID field
6. Click on Add Platform
7. Choose Android
8. Enter the Google Play Package Name found in Aquro Studio into the Google Play Package Name field
9. Enter the Class Name found in Aquro Studio into the Class Name field
10. Copy each of the lines of found under Key Hashes in Aquro Studio and paste them into the Key Hashes field
11. Click on Save Changes

Your page should look something like this:

Now the Facebook app has been successfully configured and you are ready to implement the actual login functionality into your app.

Step 4 - Signing into your app

Using Facebook to sign into your app may be done in 3 different ways:

1. Use the FacebookLogin component
2. Use a Visual Coding Script
3. Use JavaScript

This article will cover all three options below:

Option 1 - Use the FacebookLogin component.

The FacebookLogin component is the easiest way to add Facebook login into your app. This is easily done by following these steps:

1. Make sure that you have loaded your app into the Aquro App Studio
2. Make sure that you are in the DEVELOPMENT area
3. Expand the Pages node in the treeview to the left
4. Click on the page where you like to add the button
5. Add a panel to your page
6. Add the Aquro:FacebookLogin component to this panel
7. Click on the component in your page
8. Goto properties
9. Change the SuccessPage setting to the page where you like to take your user after signing in successfully

Option 2 - Use a Visual Coding Script

1. Open up the Visual Coding Script editor for an event where you like to trigger a facebook login
2. Add the Cloud.Auth.Facebook login manager to the page
3. Connect the Success, Cancelled, Failure outlets to appropriate actions.

A complete script would look something like this:

Option 3 - Use JavaScript

To trigger the facebook login feature use the following JavaScript:

  FacebookIntegration.Login(function(success, result){
    if(success){
       alert('Signed in')
    }else{
        if(result.AquroError){
          alert('Something went wrong:' + result.AquroError);
          return;
        }
        if(result.cancelled == 1 || result.cancelled == true){
          alert('Cancelled by user');
          return;
        }
        alert('Unknown facebook error');
    }
  })

Testing your app

As Facebook login uses native device features to authenticate with Facebook you cannot test the facebook integration inside Aquro App Studio. Therefore you will need to use the Aquro Preview App, or build and package your app to test the Facebook functionality.

When testing Facebook login inside the Aquro Preview app you will notice that your app will authenticate to the Aquro Preview facebook app and not your own Facebook app. This is because the native app you are running on the device handles all the communication to facebook and the native app itself is bound to only work with one facebook app.

Once you publish your app on Google Play and AppStore the app will use the Facebook app you configured in step 2 of this article.

Read more about testing your app with the Aquro Preview App here.