The primary motive of this blog is to show how to

  • Enable Facebook login in Oracle MCS (16.4.x)
  • Implement Facebook login in Oracle JET Hybrid application by using Oracle MCS Cordova SDK
  • Calling a custom API secured using Social Login

 

Key Components

Below tables summarizes the key components involved in this solution:

 

Component
Details
Social Login - Facebook

Facebook Login is a secure, fast and convenient way for people to log into your mobile application. This mode of authentication is particularly useful for apps targeting consumers

Mobile Middleware - Oracle MCS

In Oracle MCS:

  • Configure mobile backend  to enable users to log in through Facebook login.
  • Add custom API's to this mobile backend secured with social login
Client Application - Oracle JET Hybrid applicationOracle JET Hybrid application is based on Apache cordova framework. We will integrate Oracle MCS Cordova SDK to simplify Social Login authentication

 

Functional Flow

Below is the application flow:

  1. The user presses Facebook login button created in our hybrid mobile application.
  2. The MCS Cordova SDK gets initialized and calls the Facebook Login service.
  3. The Facebook login page appears within the mobile app and user is prompted to enter credentials
  4. The social-login security check validates the credentials.
  5. Upon success, The social-login returns the access token
  6. The mobile app then uses the access token to access secure MCS APIs.

 

Component: Social Login - Facebook

The first step is to create a Facebook developer app. For more details, please refer Facebook developer documentation

 

Below are the steps to create the same:

 

Create a new App

Visit the Facebook Developer Apps Page and follow below steps:

 

Add-A-New-app.png

 

Basic Settings

Add basic settings of the application. "App ID" and "App Secret" will be used in Oracle MCS backend configuration.

 

Settings-basic.png

 

Advanced Settings

Please refer the advance settings in the image below:

 

Settings-advanced.png

 

 

 

Facebook Login Settings

Add the redirect OAuth URL as shown below.

FacebookLoginSettings.png

App Review

Once everything is tested, make your app public

AppReview.png

 

Once above steps are done, your facebook login setup is ready.

Component: Mobile Middleware - Oracle MCS

The next step is the create a new Mobile Middleware in Oracle MCS and perform following settings

 

Mobile Backend - Settings

  • Enable Facebook option
  • Enter the Facebook App ID and Secret you received when you registered your application.

mcs-settings.png

 

Secure Custom API

Create a custom API and enable the security using Social Identity

mcs-security.png

 

API Test

Once the custom API is ready, the next step is to test the same using facebook access token.

mcs-test-endpoint.png

 

Facebook User Access Token

Please follow below steps to obtainFacebook user access token

  1. Log into your Facebook account (the one with which you registered the mobile app).

  2. Navigate to https://developers.facebook.com/tools/accesstoken/ and find your app.

  3. Click the You need to grant permissions to your app to get an access token link to generate the token. A token is generated for you on the next page.

 

Copy the user token and paste in MCS Test screen as shown above

facebook-user-token.png

Please follow link "Getting a Facebook User Access Token Manually" for more deatils

 

Test Endpoint

After entering the user token, press "Test Endpoint" button to verify the result

mcs-test-endpoint.png

 

At this stage, the mobile backend providing social login and a secured custom API. The next step is to create client application utilizing this backend and facebook login page!

 

Component: Client Application - Oracle JET Hybrid application

 

Once the mobile back-end is up and ready, our next step is to develop client side application.

 

You may please refer to Troubleshooting while developing your First JET based Hybrid Application blog in case of initial issues faced during development/configuration issues.

Project Setup using Yeoman

Yeoman generator for Oracle JET lets you quickly set up a project for use as a Web application or mobile-hybrid application for Android and iOS.

Use following command to generate hybrid application for Android:

 

 

yo oraclejet:hybrid fbmcssample --appId=com.rdh.fbmcs --appName="fbmcssample" --template=navBar --platforms=android  

 

 

Cordova Plugin Required

Please refer to Cordova Applications section in Oracle Mobile Cloud Service to obtain details of the cordova plugin. Following cordova plugin needs to be added in our application:

 

  • cordova-plugin-inappbrowser: Plugin to provide Facebook authentication in your app
cordova plugin add cordova-plugin-inappbrowser -save

 

Adding Oracle MCS Cordova SDK

In order to communicate with Oracle MCS, following steps are required:

  1. Download the Cordova SDK from Oracle MCS. Extract the same on your local machine. It will contain Javascript based Cordova SDK , configuration files and documentation
  2. Add Oracle MCS Cordova SDK to your application, Copy mcs.js, mcs.min.js and oracle_mobile_cloud_config.js into the directory where you keep your JavaScript libraries.

 

For example, in this implementation, I have kept these files in mcs folder added in js/libs folder as shown in below image:

mcs-additions.png

 

Code Addition

 

Configuring SDK Properties for Cordova

Fill in your mobile backend details in oracle_mobile_cloud_config.js.

 

var mcs_config = {
  "logLevel": 3,
  "mobileBackends": {
    "RDXTESTSSO": {
      "default": true,
      "baseUrl": "http://XXX.us.oracle.com:7777",
      "applicationKey": "YOUR_BACKEND_APPLICATION_KEY",
      "synchronization": {
        "periodicRefreshPolicy": "PERIODIC_REFRESH_POLICY_REFRESH_NONE",
        "policies": [
          {
            "path": '/mobile/custom/taskApi/*',
            "fetchPolicy": 'FETCH_FROM_SERVICE_ON_CACHE_MISS_OR_EXPIRY',
            "expiryPolicy": 'EXPIRE_ON_RESTART',
            "evictionPolicy": 'EVICT_ON_EXPIRY_AT_STARTUP',
            "updatePolicy": 'QUEUE_IF_OFFLINE',
            "noCache" : false
          },
          {
            "path": '/mobile/custom/firstApi/tasks',
            "fetchPolicy": 'FETCH_FROM_SERVICE_ON_CACHE_MISS'
          },
          {
            "path": '/mobile/custom/secondApi/tasks',
          }
        ],
        "default" :{
          "fetchPolicy": 'FETCH_FROM_SERVICE_IF_ONLINE',
          "expiryPolicy": 'EXPIRE_ON_RESTART'
        }
      },
        "authorization": {
        "basicAuth": {
          "backendId": "YOUR_BACKEND_ID",
          "anonymousToken": "YOUR_BACKEND_ANONYMOUS_TOKEN"
        },
        "oAuth": {
          "clientId": "YOUR_CLIENT_ID",
          "clientSecret": "YOUR_ClIENT_SECRET",
          "tokenEndpoint": "YOUR_TOKEN_ENDPOINT"
        },
        "facebookAuth":{
          "facebookAppId": "21664XXXX175",
          "backendId": "cdXX781f-7fd4-4b42-88e1-XX409de0823f",
          "anonymousToken": "UFJJTUVfREVDRVBUSUNPTXXXT0JJTEVfQU5PTllNT1VTX0FQUElEOnZXXXXmwuamEwbTdu"
        }
        
      }
    }
  }
};

 

For details please refer this link

 

Update Main.JS for path mapping

After adding the physical files, update the paths mapping for mcs and mcs_cloud_config  in main.js file under requirejs.config section:

 

 paths:
                    //injector:mainReleasePaths
                            {
                                'knockout': 'libs/knockout/knockout-3.4.0.debug',
                                'jquery': 'libs/jquery/jquery-2.1.3',
                                'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.11.4',
                                'promise': 'libs/es6-promise/promise-1.0.0',
                                'hammerjs': 'libs/hammer/hammer-2.0.4',
                                'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0',
                                'ojs': 'libs/oj/v2.0.2/debug',
                                'ojL10n': 'libs/oj/v2.0.2/ojL10n',
                                'ojtranslations': 'libs/oj/v2.0.2/resources',
                                'text': 'libs/require/text',
                                'signals': 'libs/js-signals/signals',
                                'mcs': 'libs/mcs/mcs',
                                'mcsconf': 'libs/mcs/oracle_mobile_cloud_config'
                            }

 

Implementation Steps

We will be implementing the entire code in dashboard.html and dashboard.js for easy implementation.

 

Add the additional modules: mcs and mcsconf to get loaded in dashboard.js file:

 

define(['ojs/ojcore', 'knockout', 'jquery', 'mcs', 'mcsconf', 'ojs/ojknockout','ojs/ojbutton'],
        function (oj, ko, $,mcs) {

Note: Please see that I have added "mcs" as a parameter to the function in dashboard.js file. This is required as I am using MCS SDK 16.3.x. In 16.3.3, Oracle  added support for RequireJS. So when MCS library is loaded in RequireJS environment, the global “mcs” variable is not declared like it was before in earlier version of the SDK.

 

Step 1: Loading Mobile Backend's Configuration

Get the mobile backend and set the authentication type to facebookAuth.

 

function initializeMCS() {
                    mcs.MobileBackendManager.platform = new mcs.CordovaPlatform();
                    mcs.MobileBackendManager.setConfig(mcs_config);
                    backend = mcs.MobileBackendManager.getMobileBackend("RDXTESTSSO");
                    if (backend != null) {
                        backend.setAuthenticationType("facebookAuth");
                        fbLogin();
                    }
                }

 

Step 2: Authenticate

Then add a function that calls Authorization.authenticate

 

function fbLogin() {
                    backend.Authorization.authenticate(
                            function (statusCode, data) {
                                console.log(data);
                                console.log(statusCode);
                                alert("FB Login success, status:" + statusCode);                                
                                invokeCustomTestAPI();
                            },
                            function (statusCode, data) {
                                console.log(statusCode + " with message:  " + data);
                                alert("FB Login failed, statusCode" + statusCode);
                            });
                }

Step 3: Invoke Custom API

Finally call the custom API secured by social identity:

 

function invokeCustomTestAPI()
                {
                    backend.CustomCode.invokeCustomCodeJSONRequest("TestFB/test", "GET", null, function (statusCode, data) {
                        console.log("statusCode"+statusCode);                        
                        console.log("data"+JSON.stringify(data)); 
                        alert("Status="+statusCode+"data="+JSON.stringify(data));                        
                    },
                            function (statusCode, data) {
                                console.log("statusCode"+statusCode);                        
                                console.log("data"+data);       
                                alert("Status="+statusCode+"data="+JSON.stringify(data));
                            });
                }

Build and Run

 

In your command prompt, please change directory to project folder and run the following command:

 

Build the application using following command

 

  1.  grunt build --platform=android  

 

Once build is success, then run the application using following command, assuming android emulator is already up and running:

 

 

grunt serve --platform=android  --disableLiveReload=true    

 

Output

Open App and Click on Login

  1. On opening, "Login via Facebook" button is shown
  2. Also open Chrome://Inspect to view logs
  3. Touch/Click Login via Facebook button

output1.png

 

Login via Facebook

Enter your facebook credentials

output2.png,

 

Facebook Authentication result

output3.png

Calling MCS Custom API Secured using Social Identity

output4.png