S1 Ignition Pack Mobile Applications Technology Overview

[spb_row wrap_type=”content-width” parallax_type=”color” bg_type=”cover” parallax_video_height=”video-height” parallax_video_overlay=”none” parallax_image_height=”content-height” parallax_image_movement=”fixed” parallax_image_speed=”0.5″ row_overlay_opacity=”0″ row_padding_vertical=”30″ row_margin_vertical=”30″ remove_element_spacing=”no” width=”1/1″ el_position=”first last”] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/1″ el_position=”first last”]

The Ignition Pack uses JQuery Mobile and a theme based on JQuery Mobile Flat UI.  The calls to Salesforce are made from this UI using Javascript for APEX Remoting, allowing the client side code (what is running in S1) to work with JSON.

[/spb_text_block] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/1″ el_position=”first last”]

Ignition users must authenticate using standard processes with S1 to gain access to the Ignition applications (1).  Ignition uses the approach of SSO for Composite Apps to Authenticate to Heroku services that are called via Ajax from within Ignition Visualforce Pages.

s1 ignition architecture diagram

Each Visualforce page within Ignition (all Ignition apps are VF pages) that makes use of the Heroku services, must first send an OPTIONS request (called the “pre-flight request”) to the Heroku services in order to validate that it can make actual calls to the services with business information (2).

Access-Control-Allow-Origin settings within Ignition limit what hosts can make requests to Heroku services.  If the Client is acceptable, Heroku Services reply (3).  When a customer sets up the actual application, they must configure this to align with the location of their APEX pages (e.g. https://c.na10.visual.force.com/apex).

After this, the following two conditions can occur

1. No Existing or Non-Expired JWT Token

If a client does not have a Token, the SSO for Composite Apps is taken and the Api.Session_ID and Api.Partner_Server_URL are sent to the Heroku service (3).  The Heroku service validates that the Parter_Server_URL is valid and uses this, along with the Session_ID to call Salesforce SOAP services to verify that they belong to a valid user session (4).  If the session is not valid, the client is sent a 401.

If valid (5), a JWT Token (algorithm to encode is HS256) is created that contains user and expiry data – based on a secret from the Heroku application (6).  The expiry date is configurable and set to 1 day by default.  Now that a user has their Token, their request to the original REST service will be made, following the process outlined below “existing, valid token” (7).

2. Existing, Valid Token

Clients with a valid Token, will send their Token with custom Headers (x-access-token and x-access-user) with each Ajax request made to the Heroku application.  The Heroku application will validate the token, as well as the user mapped to the token.  This request, as any other to the Heroku services, also enforces Access-Control-Allow-Origin settings.

Calling any REST service running within Heroku services, will follow the above pattern.

Token Storage and Inclusion in Subsequent Calls

In each of the above cases, the valid Tokens are stored in HTML5 local storage.  The Token is sent using a x-access-token Header with each Ajax request made to the Heroku application.  If the Token has expired, the client-side code will request a new Token automatically and reinitialize the authentication flow above.

Heroku Services Detail & REST Endpoints

The Heroku services are provided by a Node.js application, using Node v0.10.29.  The application instance uses the JWT Simple package to provide Token capabilities (https://www.npmjs.org/package/jwt-simple) to authorize all API calls.  The default the algorithm to encode is HS256.

 

Method Path Payload (Params, Headers) Purpose
GET /token Querystring – sessionIdQuerystring – serverUrl Used to validate back to Salesforce and if valid, respond to user with JWT Token
GET /api/getevents Header – x-access-tokenHeader – x-access-userQuerystring – accounts Returns various social and news events for given Accounts
GET /api/getfrequency Header – x-access-tokenHeader – x-access-userQuerystring – accountid Returns how often Account has been mentioned in social / news
POST /api/geteventnews Header – x-access-tokenHeader – x-access-userForm – sourceForm – importanceForm – accounts Returns statistics about social / news for given Accounts
POST /api/gettopnewsevents Header – x-access-tokenHeader – x-access-userForm – sourceForm – importanceForm – accounts Returns news / social information for Accounts on the basis of how “shared” it has been
POST /api/mapevents Header – x-access-tokenHeader – x-access-userForm – mapdata Returns social / news rating for use within map
GET /api/intakenews Header – x-access-tokenHeader – x-access-user Starts the crawling process for news / social APIs (Twitter & Faroo)

 

Libraries Used within Heroku Services

The following libraries are used within the Node.js application.  All are the latest version of their library.

[one_half]

async

https://github.com/caolan/async
Async utilities for node and the browser

coffee-script

https://www.npmjs.org/package/coffee-script
Unfancy JavaScript http://coffeescript.org/

cors

https://github.com/troygoode/node-cors/
A node.js package that provides an Express/Connect middleware to enable Cross Origin Resource Sharing (CORS) with various options.

https://npmjs.org/package/cors

express

https://github.com/strongloop/express / http://expressjs.com
Sinatra inspired web development framework for node.js — insanely fast, flexible, and simple

helmet

https://github.com/evilpacket/helmet
Collection of middleware to implement various security headers for Express / Connect

jsforce

https://github.com/jsforce/jsforce
Salesforce API Library for JavaScript applications (both on Node.js and web browser)
http://jsforce.github.io/

jwt-simple

https://github.com/hokaccha/node-jwt-simple
JWT(JSON Web Token) encode and decode module for node.js

[/one_half][one_half_last]

moment

https://github.com/moment/moment
Parse, validate, manipulate, and display dates in javascript.
http://momentjs.com

nforce

https://github.com/kevinohara80/nforce
nforce is a node.js salesforce REST API wrapper for force.com, database.com, and salesforce.com

node-rest-client

https://github.com/aacerox/node-rest-client
REST API client from node.js

pg

https://github.com/brianc/node-postgres
Non-blocking PostgreSQL client for node.js. Pure JavaScript and native libpq bindings.

Sentimental

https://github.com/thinkroth/Sentimental
A sentiment analysis module for node.js

sequence

https://github.com/FuturesJS/sequence
Execute async code in chronological order. The sequence module of FuturesJS (Browser, Node.js, Bower, and Pakmanager)

twit

https://github.com/ttezel/twit
Twitter API Client for node (REST & Streaming API)

url

https://github.com/isaacs/node-url
The url module from node
[/one_half_last]

[/spb_text_block] [/spb_row] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/1″ el_position=”first last”]

Visualforce Page Asset Details

The following outlines technologies used in the client application (Visualforce Pages for use in Salesforce1)

[/spb_text_block] [spb_column width=”1/2″ el_position=”first”] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/1″ el_position=”first last”]

All Visualforce Pages Use the Following Assets

  • jquery.mobile.flatui.css – Theme to match Salesforce1 Style
  • icons.css – Utility icon reference from Salesforce1 Style Guide
  • jquery.js – JQuery javascript library
  • jquery.mobile-1.4.0-rc.1.js – JQuery mobile
  • Class.create.js – required for JQuery Encoder
  • jquery-encoder-0.1.0.js – Encoder that is a Javascript port of ESAPI methods for XSS prevention

Gist

News reading application

VF Pages – s1m_metro_news.page & s1m_metro_news_overview
  • Chart.min.js – Charting library
  • jquery.xcolor.min.js – For s1m_metro_news_overview

Scout

Opportunity finding application based on geolocation

VF Page – s1m_scout.page
  • No additional libraries

Magellan

Opportunity finding application based on geolocation and mapping visualization

VF Page – s1m_scout_map.page
  • https://maps.googleapis.com/maps/api/js?key={!JSENCODE($Setup.S1M_Google_API_Keys__c.S1M_Google_MAP_API_Key__c)} – for s1m_scout_map.page only

[/spb_text_block] [/spb_column] [spb_column width=”1/2″ el_position=”last”] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/1″ el_position=”first last”]

Kōkua

Corporate services application based on geolocation

VF Page – s1m_corp_services.page
  • No additional libraries

Postbox

Publisher action to share files with Contacts via email or Community

VF Page – s1m_postboy.page

  • publisher.js – native Salesforce library

Deal Fuel

Application that provides education to sales users in the form of presentations and quizzes

Micro App – Quizzer – s1m_explain_quizzer.page

Micro App – Presenter – s1m_explain_presenter.page

[/spb_text_block] [/spb_column] [spb_raw_html width=”1/1″ el_position=”first last”] JTNDc3R5bGUlM0UlMEEuc3BiX2NvbnRlbnRfZWxlbWVudC5jb2wtc20tMTIuczFpZ25pdGlvbi5zcGJfdGV4dF9jb2x1bW4lMjBoMyUwQSU3QiUwQXRleHQtYWxpZ24lM0ElMjBjZW50ZXIlM0IlMEFtYXJnaW4tdG9wJTNBJTIwMTBweCUzQiUwQWZvbnQtc2l6ZSUzQSUyMDEuNmVtJTNCJTBBaGVpZ2h0JTNBJTIwMjRweCUzQiUwQSU3RCUwQSUwQS5zcGJfd3JhcHBlciUyMCUzRSUyMHAlMjAlN0IlMEFjb2xvciUzQSUyMGluaGVyaXQlM0IlMEElN0QlMEEuaW5uZXItcGFnZS13cmFwJTIwJTdCJTBBbWFyZ2luLXRvcCUzQSUyMDBweCUzQiUwQWJhY2tncm91bmQlM0ElMjAlMjNmZmYlM0IlMEElN0QlMEElMEEuc2YtaWNvbi1ib3guc2YtaWNvbi1ib3gtbGVmdC1pY29uJTIwLnNmLWljb24tY29udCUwQSU3QiUwQSUwOWJhY2tncm91bmQlM0ElMjAlMjMzMzMlM0IlMEElMDlib3JkZXIlM0ElMjBub25lJTNCJTBBJTdEJTBBJTBBLnNmLWljb24tY29udC5jb250LXNtYWxsJTIwLnNmLWljb24lMEElN0IlMEFmb250LWZhbWlseSUzQSUyMCUyN3Byb3hpbWEtbm92YSUyNyUzQiUwQWNvbG9yJTNBJTIwJTIzQzA4REZDJTNCJTBBZm9udC1zaXplJTNBJTIwMS44ZW0lM0IlMEElN0QlMEElMEEuc2YtaWNvbi1ib3guc2YtaWNvbi1ib3gtbGVmdC1pY29uJTIwaDMlMkMlMjAuc2YtaWNvbi1ib3guc2YtaWNvbi1ib3gtbGVmdC1pY29uLWFsdCUyMGgzJTIwJTdCJTBBJTA5Zm9udC1mYW1pbHklM0ElMjAlMjdwcm94aW1hLW5vdmElMjclM0IlMEElMDltYXJnaW4tdG9wJTNBJTIwMTBweCUzQiUwQSU3RCUwQSUwQS51aS13aWRnZXQtY29udGVudCUyMGElMjAlN0IlMEElMDljb2xvciUzQSUyMCUyMzQyOGJjYSUyMCUyMSUyMGltcG9ydGFudCUzQiUwQSU3RCUwQSUwQWEuc2YtYnV0dG9uLnRyYW5zcGFyZW50LWxpZ2h0JTNBaG92ZXIlMkMlMjBhLnNmLWJ1dHRvbi50cmFuc3BhcmVudC1kYXJrJTNBaG92ZXIlMjAlN0IlMEElMDljb2xvciUzQSUyMCUyM2ZmZiUyMCUyMSUyMGltcG9ydGFudCUzQiUwQSU3RCUwQSUwQWEuc2YtYnV0dG9uLnRyYW5zcGFyZW50LWRhcmslM0Fob3ZlciUyMCU3QiUwQSUwOWJhY2tncm91bmQlM0ElMjAlMjM3QjQwQzElM0IlMEElMDlib3JkZXItY29sb3IlM0ElMjAlMjM3QjQwQzElM0IlMEElN0QlMEElMEEuc2YtYnV0dG9uJTBBJTdCJTBBJTA5Zm9udC1mYW1pbHklM0ElMjAlMjdwcm94aW1hLW5vdmElMjclM0IlMEElMDlsZXR0ZXItc3BhY2luZyUzQSUyMDEuOHB4JTNCJTBBJTA5Zm9udC13ZWlnaHQlM0ElMjBub3JtYWwlMjFpbXBvcnRhbnQlM0IlMEElMDlmb250LXNpemUlM0ElMjAxZW0lMjAlMjElMjBpbXBvcnRhbnQlM0IlMEElN0QlMEElMEFhLnNmLWJ1dHRvbi50cmFuc3BhcmVudC1kYXJrJTIwJTdCJTBBJTA5Y29sb3IlM0ElMjAlMjM3QjQwQzElMjFpbXBvcnRhbnQlM0IlMEElN0QlMEElMEFhLnNmLWJ1dHRvbi50cmFuc3BhcmVudC1kYXJrJTIwJTdCJTBBJTA5Ym9yZGVyJTNBJTIwMnB4JTIwc29saWQlMjAlMjM3QjQwQzElM0IlMEElN0QlMEElMEEucm93bm9ib3R0b20lMEElN0IlMEFwYWRkaW5nLWJvdHRvbSUzQSUyMDBweCUzQiUwQSU3RCUwQSUwQS52aWRlb2hlYWQlMEElN0IlMEF3aWR0aCUzQSUyMDYwJTI1JTNCJTBBbWFyZ2luJTNBJTIwYXV0byUzQiUwQW1hcmdpbi10b3AlM0ElMjAtMzBweCUzQiUwQSU3RCUwQSUwQS5zcGJfd3JhcHBlciUyMCUzRSUyMGgyJTBBJTdCJTBBZm9udC1zaXplJTNBJTIwMS40ZW0lM0IlMEElN0QlMEElMEElMjN0b3B2aWRlb2Jhbm5lciUwQSU3QiUwQSUwOXBhZGRpbmctdG9wJTNBJTIwMTQwcHglMjAlMjElMjBpbXBvcnRhbnQlM0IlMEElMDlwYWRkaW5nLWJvdHRvbSUzQSUyMDE0MHB4JTIwJTIxJTIwaW1wb3J0YW50JTNCJTBBJTA5Ym94LXNoYWRvdyUzQSUyMG5vbmUlM0IlMEElN0QlMEFoMyUyMCU3QiUwQW1hcmdpbi1ib3R0b20lM0ElMjA1cHglM0IlMEFmb250LXNpemUlM0ElMjAxLjNlbSUyMCUyMSUyMGltcG9ydGFudCUzQiUwQWZvbnQtZmFtaWx5JTNBJTIwJTI3cHJveGltYS1ub3ZhJTI3JTNCJTBBJTdEJTBBJTBBdGFibGUlMEElN0IlMEElMDl3aWR0aCUzQSUyMDEwMCUyNSUzQiUwQSU3RCUwQSUwQWgxJTJDJTIwaDIlMkMlMjBoMyUyQyUyMGg0JTJDJTIwaDUlMEElN0IlMEFmb250LWZhbWlseSUzQSUyMCUyN3Byb3hpbWEtbm92YSUyNyUyMCUyMSUyMGltcG9ydGFudCUzQiUwQSU3RCUwQSUwQWEuc2YtYnV0dG9uLnRyYW5zcGFyZW50LWRhcmslMjAlN0IlMEF3aWR0aCUzQSUyMDMzMHB4JTNCJTBBJTdEJTBBJTBBZGl2Lm9uZV9oYWxmJTIwaDIlMEElN0IlMEElMDlmb250LXNpemUlM0ElMjAxLjRlbSUzQiUwQSU3RCUwQSUwQSUyM3N0Yi0yOTMyJTBBJTdCJTBBYm9yZGVyLXJhZGl1cyUzQSUyMDVweCUzQiUwQSU3RCUwQSUwQSUyM2ZhbmN5Ym94LXRpdGxlLW92ZXIlMjAlN0IlMEFwYWRkaW5nJTNBJTIwMjBweCUzQiUwQWZvbnQtc2l6ZSUzQSUyMDEuNGVtJTNCJTBBJTdEJTBBJTBBLmdhbGxlcnklMjAuZ2FsbGVyeS1pdGVtJTIwJTdCJTBBJTA5d2lkdGglM0ElMjAzMSUyNSUyMCUyMSUyMGltcG9ydGFudCUzQiUwQSUwOW1hcmdpbiUzQSUyMDAlMjAxJTI1JTIwMCUyNSUzQiUwQSU3RCUwQSUwQWltZy5zMXNjcmVlbmltYWdlJTIwJTdCJTBBZmxvYXQlM0ElMjByaWdodCUzQiUwQW1hcmdpbi1yaWdodCUzQSUyMDIwcHglM0IlMEFtYXJnaW4tYm90dG9tJTNBJTIwNjBweCUzQiUwQSU3RCUwQSUwQWltZy5zMWltYWdlJTIwJTdCJTBBJTA5bWF4LXdpZHRoJTNBJTIwNzBweCUzQiUwQSUwOW1hcmdpbi1yaWdodCUzQSUyMDIwcHglM0IlMEElN0QlMEElMEEuZnVsbC13aWR0aC10ZXh0JTBBJTdCJTBBJTA5cGFkZGluZy1ib3R0b20lM0ElMjAwcHglM0IlMEElN0QlMEElMEFoMi5pbWdoZWFkJTBBJTdCJTBBbWFyZ2luLXRvcCUzQSUyMDUwcHglMjAlMjElMjBpbXBvcnRhbnQlM0IlMEElN0QlMEElMEFkaXYuaGVyb2t1c2NyZWVucm93JTBBJTdCJTBBbWFyZ2luLXRvcCUzQS01MHB4JTNCJTBBbWFyZ2luLWJvdHRvbSUzQS04MHB4JTNCJTBBJTdEJTBBJTNDJTJGc3R5bGUlM0U= [/spb_raw_html]

Leave a comment