Implementing OAuth 2.0 user-agent authentication flow in Salesforce

When developing an app that integrates with Sage Business Cloud Financials or any other Salesforce-based app, you need to configure a secure authentication flow so that your app could authenticate against Salesforce to read and write data.

While Salesforce documentation provides detailed descriptions of how the OAuth 2.0 user-agent flow works, it can be quite tricky to actually implement the flow. In this blog post we’ll implement the OAuth 2.0 user-agent flow step by step. When you’re done, you’ll have a valid access token and a refresh token that can be used to obtain a new access token when the current one expires.

Step 1: Create a connected app in Salesforce

  1. Log on to your Salesforce org as an administrator and go to Setup | Apps | App Manager.

  2. Click New Connected App in the top right, and create a new app, for example:

Configure the following options and keep the default values for other options.

Under Basic Information:

  • Connected App Name and API Name. Enter any descriptive names.

Under API (Enable OAuth Settings):

  • Enable OAuth Settings. Select this check box.

  • Callback URL. Enter an HTTPS callback URL. Ensure that the URL doesn’t redirect to other website. If you’re automatically redirected from this URL to somewhere else, you won’t be able to configure the user-agent flow.

  • Selected OAuth Scopes. Add the required scopes. For the sake of demonstration, we’ll add Full access (full) and Perform requests on your behalf at any time (refresh_token, offline_access).

Once your app is created, take note of the Consumer Key and Consumer Secret of your app – you’ll need them later. For example:

Step 2: Get autorisation code for your app

  1. In Postman, create the following HTTP request:

GET https://login.salesforce.com/services/oauth2/authorize?response_type=code&display=popup&client_id={{ConnApp_ConsumerKey}}&redirect_uri={{ConnApp_CallbackURL}}

In this URL, replace the {{ConnApp_ConsumerKey}} and {{ConnApp_CallbackURL}} variables with the actual Consumer Key and Callback URL of your connected app, for example:

  1. Click the down arrow beside Send and select Send and Download

  2. When prompted, save the response.html file.

  3. Open the downloaded response.html file in a web browser.

  4. When prompted, enter your Salesforce user name and password and allow access for your connected app:

  5. When your callback URL opens in a web browser, copy the URL part after code=, for example:
    https://www.sage.com/en-gb/?display=popup&code=aPrxYkXCmZcIH2yGSGKaIgsLoebmwZ9u_Z0aaBghAfvmAW.tNIMi5XYXhyc.Yo.tEHZhxaP56w%3D%3D

  6. Replace %3D%3D at the end of the URL with ==, like so: aPrxYkXCmZcIH2yGSGKaIgsLoebmwZ9u_Z0aaBghAfvmAW.tNIMi5XYXhyc.Yo.tEHZhxaP56w==

    This is authorisation code for your connected app. Now you can use the code to obtain an access token and a refresh token.

Step 3: Obtain an access token and a refresh token

  1. In Postman, create the following HTTP request:


Replace the following variables with actual values:

{{ConnApp_ConsumerKey}}. Consumer Key of your connected app.

{{ConnApp_Code}}. Authorisation code of your connected app.

{{ConnApp_ConsumerSecret}}. Consumer Secret of your connected app.

{{ConnApp_CallbackURL}}. Callback URL of your connected app.

  1. Send the HTTP request.

The response will contain the access token you can use to authenticate against Salesforce and the refresh token with which you can refresh the access token when it expires:

Anonymous