6

I'm making an application that allows users to log in, and download a report generated from Salesforce with some additional fields specific for our environment (i.e. on top of normal FirstName, LastName fields, also include a barcode of their ID). I'm having users log in through oAuth, which currently works like this:

  • The user clicks on the "Login" link, and is redirected to Salesforce
  • The users logs into Salesforce, and is redirected back to my application
  • The user is now logged into my application

The application will be a internal web app, built in the Ember.js Javascript framework. I would like the user's experience to be smoother, and ideally I would like the following to happen:

  • The user clicks on the "Login" link, and a pop-up or iFrame of the Salesforce login page appears
  • The user logs into Salesforce, is redirected to my application, and the pop-up or iFrame disappears and the user is logged in
    • My application would receive the oauth and refresh tokens, plus any additional variables such as their name in Salesforce

How would you accomplish this? Does Salesforce have a Javascript SDK that allows this? If they don't, I'm thinking of making the redirect_uri something like www.example.com/oauth/salesforce/callback and once it receives the successful login, it will notify the application that the user is logged in, and the application will updates its interface accordingly.

1

Assuming you store data outside of Javascript (Database or Cookie):

  1. generate unique key (key = 12345)
  2. call poller function to check store for user details matching the key
  3. open popup / dialog and pass the key as state param https://login.salesforce.com/services/oauth2/authorize?response_type=code&client_id=CLIENT_ID&redirect_uri=CALLBACK_URL&scope=full refresh_token web&state=12345&display=popup
  4. perform callback and persist returned data or error using the key
  5. poller retrieves data from store and closes the pop-up
1

After looking at how other apps such as Discourse do their oAuth login that spans across multiple websites, I found that this flow works best:

  • When the user clicks on "Log in", they are presented with a pop-up that asks them to log into Salesforce
  • After logging in, the user is redirected to my application (https://www.example.com/auth/salesforce/callback) or something similar
  • The server sets up the user's session, and then redirects to a "complete" url such as http://www.example.com/auth/salesforce/complete. This URL changes depending on what protocol the original page was called from [1]
  • In the /complete URL, the page runs a block of Javascript code that updates the Ember app. See below for example Javascript code.

From here the app updates automatically without the user needing to refresh. There are some caveats to this approach though: if the user is using IE, the code below may not work as intended due to strange security changes on window.opener. In these cases, I would force the browser to pull the user data via ajax and populate the information, or refresh the page. This case will depend on the user's speed at which they can pull requests, since having the application wait 5 seconds to update via ajax would be a possibly jarring experience.

// Example
if (window.opener) {
    App.authenticate({current_user: data;});
}
window.close();

1: The reason that the URL changes depending on the protocol is due to the Same-Origin Policy set by most browsers. If the starting URL protocol is http, the final request won't work without a redirect due to Salesforce's mandatory https callback url.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.