Facebook Login Component

The Facebook Login component consists of a Login with Facebook button that, when tapped, opens a login page where a user can sign in by using their Facebook Credentials. The component uses Identity Services on Quantum Fabric to connect to the Facebook developer console for authentication.

You can customize the button logo, and also customize actions that you want to perform when a sign in is successful or when a sign in fails. You can use the component in scenarios such as: a calendar app, in which you want the user to sign in by using their Facebook account to display the events that the user wants to attend.

The following sections help you use the Facebook Login component in your app:

Prerequisites

• Quantum account
• Facebook developer account
• Quantum Visualizer
• Quantum Fabric

Importing the component to your project

1. Make sure that you are signed in to Quantum Visualizer.
2. From the left navigation bar, select Forge.
   
3. In the browser window that opens, search for Facebook Login, and from the search results, select Facebook Login.
4. On the component details page, click Import To Collection Library.
   

Note:
You can also download the component onto your system as a zip file from Temenos Forge. You can then import the zip file by selecting the Import option in the File menu.

After Visualizer downloads the component, it opens a window that asks you to enter the metadata for the component.

• In the Library Name box, type a name if you want to create a new library. Otherwise, you can select an existing library name
• In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select an existing collection name.
• In the Component Name box, the default name of the component is com.konymp.facebooklogin.

When you import a component, the component is imported to Visualizer's workspace, but not directly into your app. Therefore, after you import a component, you must add the component to your app.

Adding a Facebook Login Component into your App

1. From the Project explorer, select the Form to which you want to add the component.
2. On the lower-left panel of Visualizer, on the My Libraries tab, from the drop-down list, select the Library that you selected while importing the component.
3. Drag and drop the facebooklogin component from the collection library onto the form on the Visualizer canvas.

Note:
You can add the facebooklogin component only to FlexForms.

 

To add a facebooklogin component dynamically, follow these steps:

1. From the Project explorer, select the form controller of the form to which you want to add the component.
2. In the form controller, type the following code:

   createComponent: function()
   {
   /* Creating the component's Object */
   var facebooklogin = new com.konymp.facebooklogin(
   {
   	"clipBounds": true,
   	"height": "50dp",
   	"id": "facebooklogin",
   	"isVisible": true,
   	"left": "45%",
   	"masterType": constants.MASTER_TYPE_USERWIDGET,
   	"top": "45%",
   	"width": "50dp"
   }, {}, {});
   
   /* Setting properties for the component */
   facebooklogin.iconSource = "login_with_facebook.png";
   facebooklogin.logoScaleMode = constants.IMAGE_SCALE_MODE_MAINTAIN_ASPECT_RATIO;
   
   /* Defining Events for the component */
   facebooklogin.onLoginSuccess = function(response)
   {
   	alert("Login Successful: "+JSON.stringify(response));
   }.bind(this);
   
   facebooklogin.onLoginFailure = function(response)
   {
   	alert("Login Failed: "+JSON.stringify(response));
   }.bind(this);
   
   /* Adding the component to the form */
   this.view.add(facebooklogin);
   }

Creating an app in Facebook Developer Console

1. Create an app in the Facebook developer console.
2. From the App Dashboard, choose the app that you want to connect to Quantum Fabric.
3. Go to Products → Facebook Login → Settings.
4. Under Client OAuth Settings, in the Valid OAuth redirect URIs field, enter the callback URL of the Quantum Fabric service.
   
   To obtain the callback URL, follow these steps.

   1. Sign in to the Quantum Fabric Console.
   2. From the list of apps, select the app that contains the Facebook Login Identity Service.
   3. On the Configure Services tab, from the Identity section, select the reusableFacebookLogin service.
   4. Under Callback URL, click Copy.
5. Get the Client ID and Client Secret from the developer app and paste it in the Identity Service on Quantum Fabric. For more information, refer to the Service Parameters section.

For more information, refer to the Facebook Developer documentation.

Note:
You only need to follow the steps in the Enter Your Redirect URL section of the Facebook Developer documentation. If the Facebook Console requires a target platform, select Web.

Properties

You can use a component's Properties to customize and configure the elements. These elements can be UI elements, service parameters, or other elements of the component. For more information about properties, you can refer to the Components Overview section of the Visualizer User Guide.

You can set the properties from the Properties panel on the right side of Visualizer. You can also configure these properties by using a JavaScript code.

General

Service Parameters

The Service Parameters are parameters that are configured in the Identity Service on Quantum Fabric.

For information on obtaining the Client ID and Client Secret, refer to Creating an app in Facebook Developer Console.

Events

The component invokes events when its corresponding action is performed. You can configure any logic you want the component to perform whenever an event occurs. You can configure the events directly on the Actions tab or by writing a JavaScript, For more information, refer to Add Actions in the Visualizer User Guide.

Miscellaneous

• In Quantum Fabric, the Use global shared callback url property is enabled by default. You can use this feature during design time if you do not want to configure the Client ID and Client Secret.
  • Before you go live at run time, make sure that you disable the Use global shared callback url property and provide your Client ID and Client Secret to the reusableFacebookLogin Identity Service on Quantum Fabric.

  

Revision History

Asset Version	Modifications
Version 1.1.0	Updated the prerequisites of the component.
Version 1.0.1	Added support for the Tablet channel.
Version 1.0.0	Initial release of asset and documentation.