Salesforce OAuth with REST API using Javascript

Question

I have an app in my salesforce developer account that I want to allow my users to access from a remote app that I am building. I see that I must use OAuth2.0 to first authorize my users before they are allowed to access the salesforce data. At the moment I am trying to use the username-password OAuth flow described on salesforce.

Step 1) I request access token using username and password via the below code snippet

var password = 'userPassword' + 'securityToken'
$.ajax({
    type: 'GET',
    url: 'https://login.salesforce.com/services/oauth2/token',
    contentType: 'application/json',
    dataType: 'json',
    beforeSend: function(xhr) {
        xhr.setRequestHeader('grant_type','password'),
        xhr.setRequestHeader('client_id',  '<client_id_here>'),
        xhr.setRequestHeader('client_secret', '<client_secret_here'),
        xhr.setRequestHeader('username', '[email protected]'),
        xhr.setRequestHeader('password', "password")
    },
    success: function(response) {
        console.log('Successfully retrieved ' + response);
        //Other logic here
    },
    error: function(response) {
        console.log('Failed ' + response.status + ' ' + response.statusText);
        //Other logic here
    }
});

My request, however, is failing with the following message:

1) OPTIONS https://login.salesforce.com/services/oauth2/token 400 (Bad Request) 

2) XMLHttpRequest cannot load https://login.salesforce.com/services/oauth2/token. No 
  'Access- Control-Allow-Origin' header is present on the requested resource. 
   Origin   http://localhost is therefore not allowed access.

I have seen some sources (here here here) mention that CORS is not supported in salesforce, and that another solution should be used. Some solutions I have seen are Salesforce APEX code, AJAX toolkit, or ForceTK.

In summary, I am looking to see if (1) there is a simple mistake that I am making with my above request to get the OAuth access_token (2) or if I need to do something different to get the access (3) is there a better way to login users and access their salesforce data from my connected app?

All and any help is appreciated!

Your approach to implement OAuth2.0 entirely in the front end will always face the CORS problem. — PM 77-1
– PM 77-1, Commented Jul 29, 2014 at 17:34
The error is indeed because CORS is not supported. So, you are right, you need to handle it differently. You need server-side code to handle this. — Jeroen Noten
– Jeroen Noten, Commented Jul 29, 2014 at 17:34
Is there a best approach to handling OAuth for salesforce server-side? Salesforce APEX code or AJAX toolkit? I tried using [salesforce.stackexchange.com/questions/17382/… example) and get a "Refused to set unsafe header "User-Agent" message. — Jaskaye17
– Jaskaye17, Commented Jul 29, 2014 at 18:36
Is the AJAX Toolkit available to external apps or only to VisualForce pages? — jlewkovich
– jlewkovich, Commented Jul 27, 2015 at 21:22

James Ward · Accepted Answer · 2014-07-30 15:03:41Z

7

You will need to handle the OAUTH part on your own server. This isn't just due to lack of CORS, there is also no way to securely OAUTH purely on the client-side. The server could really be anything but here is an example server written in Java using Play Framework which has a JavaScript / AngularJS client as well: http://typesafe.com/activator/template/reactive-salesforce-rest-javascript-seed

answered Jul 30, 2014 at 15:03

James Ward

29.4k9 gold badges52 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:54:48Z

3

You can not make this request from JavaScript. You'll need to make a server side request. There are many implementations of this flow in PHP, C#, Java, etc.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Jul 30, 2014 at 3:24

ckirksey3

1,20510 silver badges13 bronze badges

2 Comments

Jaskaye17 Over a year ago

Is this going to be the case for all requests that I make from Salesforce because they don't allow CORS? Or will I be able to access their RESTful API from Javascript after I get through the OAuth process using a server-side request?

ckirksey3 Over a year ago

Once you get through the OAuth process and have an active access token, you should be able to make an API Request from the client. See this page for more info: developer.salesforce.com/page/…

Muhammad Abdul Arif Sarker · Accepted Answer · 2016-12-28 11:00:30Z

1

I'm posting my ajax code here that has worked for me and this CORS error in console doesn't matter. If you see in network you will get the access token. see the ajax code below.

function gettoken()
{
    var param = {
      grant_type: "password",
      client_id : "id here",
      client_secret : "seceret here ",
      username:"username",
      password:"password with full key provided by sf"};
$.ajax({
    url: 'https://test.salesforce.com/services/oauth2/token',
    type: 'POST',
    data: param,
    dataType: "json",
    contentType: "application/x-www-form-urlencoded",
    success: function (data) {
        alert(data);
    }

});
}

I hope this will work for you perfectly.

edited Dec 28, 2016 at 11:00

Muhammad Abdul Arif Sarker

1,2194 gold badges15 silver badges25 bronze badges

answered Dec 28, 2016 at 9:44

user7349210

113 bronze badges

1 Comment

TheShadow Over a year ago

Of course the response contains the token. But no JS will be allowed to access and use this token. So yeah.... your Answer is right but does not solve the issue itself...

Sumit Chhabra · Accepted Answer · 2020-03-26 06:19:00Z

0

I think you need to add the origin URL/IP in CORS setting as well in salesforce if you are making a request from Javascript app so it can get access to salesforce data.

answered Mar 26, 2020 at 6:19

Sumit Chhabra

1

1 Comment

Yan Sklyarenko Over a year ago

This is rather a comment than an answer.

Collectives™ on Stack Overflow

Salesforce OAuth with REST API using Javascript

4 Answers 4

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related