In this blog, I will provide step-by-step implementation to integrate and secure a custom API using Facebook Login in Oracle JET Hybrid application. The mobile app will enable users to login via Facebook and then display information retrieved from the backend.
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 application | Oracle 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:
- The user presses Facebook login button created in our hybrid mobile application.
- The MCS Cordova SDK gets initialized and calls the Facebook Login service.
- The Facebook login page appears within the mobile app and user is prompted to enter credentials
- The social-login security check validates the credentials.
- Upon success, The social-login returns the access token
- 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:
Basic Settings
Add basic settings of the application. "App ID" and "App Secret" will be used in Oracle MCS backend configuration.
Advanced Settings
Please refer the advance settings in the image below:
Facebook Login Settings
Add the redirect OAuth URL as shown below.
App Review
Once everything is tested, make your app public
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.
Secure Custom API
Create a custom API and enable the security using Social Identity
API Test
Once the custom API is ready, the next step is to test the same using facebook access token.
Facebook User Access Token
Please follow below steps to obtainFacebook user access token
-
Log into your Facebook account (the one with which you registered the mobile app).
-
Navigate to https://developers.facebook.com/tools/accesstoken/ and find your app.
-
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
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
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:
- 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
- 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:
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](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
- 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
- On opening, "Login via Facebook" button is shown
- Also open Chrome://Inspect to view logs
- Touch/Click Login via Facebook button
Login via Facebook
Enter your facebook credentials
,
Facebook Authentication result
Calling MCS Custom API Secured using Social Identity
