Error: Generating Access Token while calling API from External Application

You can't call or display widgets directly from an external application. You will need to build a similar UI that uses direct REST calls to get data from Community. This is actually what the Authentication training you linked is designed for - you make calls using the REST APIs and include the authentication details along with each request. 

Thanks Steven Heffner  for your response.

As you mentioned, we have built a similar UI and then calling RestApi (from external) for prefetching data on form. To access restApi, we are generating access-token (authentication details) "Using the Authorization Code Grant Type" for calling rest api with authentication from external application.

In this process, we got the error in console while calling api.ashx/v2/oauth/authorize.

Please help me to resolve this issue. Do let us know if you need any further information on this.

Please try passing the 'Access-Control-Allow-Origin: * ' in the header

We have already added 'Access-Control-Allow-Origin: * ' in header, still got the same error.

You're making requests from your dev instance against another instance (community-qa.thomsonreuters.com). Is this what you intend to do, rather than setting up an OAuth client fully in your dev environment for testing?

If so, check your CORS settings under Administration > Integration > CORS. You may need to allow dev requests from the dev url on the community-qa.thomsonreuters.com site.

We are trying to show the widget (created widget in qa-internal) in external app (dev instance).

As you noted, we have enabled the CORS in both server (qa,dev), but we still got the same error.

Could you please let us know how to access rest api from external application using javascript? or As per the documentation, How to have the $.telligent.evolution REST methods from external application?

We also had the same issues , making calls from purely UI applications are causing CORS issues even the site is whitelisted under Administration > Integration > CORS.

for this, we had added the following to web.config file 

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="https://yourwebsite.com" />
      <add name="Access-Control-Allow-Methods" value="GET,POST" />
      <add name="Access-Control-Allow-Headers" value="Rest-User-Token,Rest-Method" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

It's highly recommended to use only HTTPS  enabled websites as a value under  'Access-Control-Allow-Origin'

Thanks Satish Polampalli 3sides for responding. We made the changes in web.config file under web directory for both Dev and QA server. (putting Dev/QA URL)

<system.webServer>
.............

<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="">community-dev.thomsonreuters.com/" />
<add name="Access-Control-Allow-Methods" value="GET,POST" />
<add name="Access-Control-Allow-Headers" value="Rest-User-Token,Rest-Method" />
</customHeaders>
</httpProtocol>
.............
</system.webServer>

Access to XMLHttpRequest at 'community-qa.thomsonreuters.com/.../authorize' from origin 'community-dev.thomsonreuters.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

test2RestApi.html:68 GET community-qa.thomsonreuters.com/.../authorize net::ERR_FAILED

Any help will be highly appreciated.

if possible can you share your code without client ids , secrets

Here is the code.

const http = new XMLHttpRequest();
const clId="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
const redirectpage="">community-dev.thomsonreuters.com/testRestApi.html";
const url = 'community-qa.thomsonreuters.com/.../authorize';
http.open('GET', url,true);
http.setRequestHeader("Access-Control-Allow-Origin", "*");
http.setRequestHeader('response_type', 'token');
http.setRequestHeader('redirect_uri', redirectpage);
http.setRequestHeader('client_id', clId);
http.send(null);
http.onload = ()=>{
if(http.status===200) {
debugger;
//var parm=getParams(http.responseURL);
//document.getElementById('demo').innerHTML=http.response;
} else {
console.log(`error ${http.status}`)
}
}

Hi, 

As per the above conversation its clear that you are using a grant type as code so you need to form the URL as below

http://community-qa.thomsonreuters.com//api.ashx/v2/oauth/authorize?response_type=token&client_id=placeyourclientid&redirect_uri=placeredirecturlhere

and if you type this URL directly on the browser you should see the login screen as below

And the you need to allow the application click allow on next screen

And then you should be redirected back to your return url page with the access token and Expiry time as query string parameters

Hi Satish,

Thank you for your valuable reply.

Now we can get the access_token Using the Implicit Grant Type. But we are facing the same CORS error when calling to access the rest-api with this acess-token.

#1

I have attached the code and screenshot for your further reference.

Code:
--------

function getAccessToken(AuthKey){
	const http = new XMLHttpRequest();
	var clId="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
	var secretId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
	var g_url = "https://community-qa.thomsonreuters.com/api.ashx/v2/groups/12/forums.json";
	http.open('GET', g_url,true);
	http.setRequestHeader("Access-Control-Allow-Origin", "*");
	http.setRequestHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
	
	http.setRequestHeader('Authorization', 'OAuth '+AuthKey);
	
	http.send(null);
	http.onload = ()=>{
	  if(http.status===200) {
		//document.getElementById('demo').innerHTML=http.response;
	  } else {
		 console.log(`error ${http.status}`);
	  }
	}
}
const queryString=window.location.search;
const urlParams = new URLSearchParams(queryString);
const codeParam = urlParams.get('access_token');
if(codeParam===null) {
	const clId="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
	const redirectpage="https://community-dev.thomsonreuters.com/test5.html";
	const url = 'https://community-qa.thomsonreuters.com/api.ashx/v2/oauth/authorize';
	
	const path = url+'?response_type=token&client_id='+clId+'&redirect_uri='+redirectpage;
	location.replace(path);
} else if (codeParam!==null && codeParam!=='' && codeParam!== undefined) {
	getAccessToken(codeParam);
}

Screenshot:

and Kindly let me know, if there is any chance to skip Authorize(allow-deny) xxxx page?(user doesn't need to click Allow)

#2

As per the documentation, we have tried another method called Authorization Code Grant Type. By using this method, we have followed two step to get acess-token.

In first step, we have received the authorization code successfully by following url api.ashx/v2/oauth/authorize?response_type=code&client_id=xxxxxxxxxxx&redirect_uri=xxxxxxx

In second step, we got the same CORS error when making the request(api.ashx/v2/oauth/token) for getting access-token.

Below I have attached the code and screenshot for your reference.

Code:
--------

function getAccessToken(AccessToken){
		const http = new XMLHttpRequest();
		var clId="xxxxxxxxxxxxxxxxxxxxxxxxx";
		var secretId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
		var g_url = "https://community-qa.thomsonreuters.com/api.ashx/v2/oauth/token";
		http.open('POST', g_url,true);
		http.setRequestHeader("Access-Control-Allow-Origin", "*");
		http.setRequestHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
		http.setRequestHeader('Content-Type', 'application/json');
		//http.setRequestHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
		//http.setRequestHeader('grant_type', 'authorization_code');
		//http.setRequestHeader('client_id', clId);
		//http.setRequestHeader('client_secret',secretId);
		//http.setRequestHeader('code', AccessToken);
		const data = {
			'grant_type':'authorization_code',
			'client_id':clId,
			'client_secret':secretId,
			'code':AccessToken
		}
		http.send(JSON.stringify(data));
		http.onload = ()=>{
		  if(http.status===200) {
			//document.getElementById('demo').innerHTML=http.response;
		  } else {
			 console.log(`error ${http.status}`);
		  }
		}
	}
	const queryString=window.location.search;
	const urlParams = new URLSearchParams(queryString);
	const codeParam = urlParams.get('code');
	if(codeParam===null) {
		const clId="xxxxxxxxxxxxxxxxxxxxxxxxxx";
		const redirectpage="https://community-dev.thomsonreuters.com/Test4.html";
		const url = 'https://community-qa.thomsonreuters.com/api.ashx/v2/oauth/authorize';
		const path = url+'?response_type=code&client_id='+clId+'&redirect_uri='+redirectpage;
		location.replace(path);
	} else if (codeParam!==null && codeParam!=='' && codeParam!== undefined) {
		getAccessToken(codeParam);
	}

Screenshot

Hi Satish,

Thank you for your valuable reply.

Now we can get the access_token Using the Implicit Grant Type. But we are facing the same CORS error when calling to access the rest-api with this acess-token.

#1

I have attached the code and screenshot for your further reference.

Code:
--------

function getAccessToken(AuthKey){
	const http = new XMLHttpRequest();
	var clId="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
	var secretId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
	var g_url = "https://community-qa.thomsonreuters.com/api.ashx/v2/groups/12/forums.json";
	http.open('GET', g_url,true);
	http.setRequestHeader("Access-Control-Allow-Origin", "*");
	http.setRequestHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
	
	http.setRequestHeader('Authorization', 'OAuth '+AuthKey);
	
	http.send(null);
	http.onload = ()=>{
	  if(http.status===200) {
		//document.getElementById('demo').innerHTML=http.response;
	  } else {
		 console.log(`error ${http.status}`);
	  }
	}
}
const queryString=window.location.search;
const urlParams = new URLSearchParams(queryString);
const codeParam = urlParams.get('access_token');
if(codeParam===null) {
	const clId="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
	const redirectpage="https://community-dev.thomsonreuters.com/test5.html";
	const url = 'https://community-qa.thomsonreuters.com/api.ashx/v2/oauth/authorize';
	
	const path = url+'?response_type=token&client_id='+clId+'&redirect_uri='+redirectpage;
	location.replace(path);
} else if (codeParam!==null && codeParam!=='' && codeParam!== undefined) {
	getAccessToken(codeParam);
}

Screenshot:

and Kindly let me know, if there is any chance to skip Authorize(allow-deny) xxxx page?(user doesn't need to click Allow)

#2

As per the documentation, we have tried another method called Authorization Code Grant Type. By using this method, we have followed two step to get acess-token.

In first step, we have received the authorization code successfully by following url api.ashx/v2/oauth/authorize?response_type=code&client_id=xxxxxxxxxxx&redirect_uri=xxxxxxx

In second step, we got the same CORS error when making the request(api.ashx/v2/oauth/token) for getting access-token.

Below I have attached the code and screenshot for your reference.

Code:
--------

function getAccessToken(AccessToken){
		const http = new XMLHttpRequest();
		var clId="xxxxxxxxxxxxxxxxxxxxxxxxx";
		var secretId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
		var g_url = "https://community-qa.thomsonreuters.com/api.ashx/v2/oauth/token";
		http.open('POST', g_url,true);
		http.setRequestHeader("Access-Control-Allow-Origin", "*");
		http.setRequestHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
		http.setRequestHeader('Content-Type', 'application/json');
		//http.setRequestHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
		//http.setRequestHeader('grant_type', 'authorization_code');
		//http.setRequestHeader('client_id', clId);
		//http.setRequestHeader('client_secret',secretId);
		//http.setRequestHeader('code', AccessToken);
		const data = {
			'grant_type':'authorization_code',
			'client_id':clId,
			'client_secret':secretId,
			'code':AccessToken
		}
		http.send(JSON.stringify(data));
		http.onload = ()=>{
		  if(http.status===200) {
			//document.getElementById('demo').innerHTML=http.response;
		  } else {
			 console.log(`error ${http.status}`);
		  }
		}
	}
	const queryString=window.location.search;
	const urlParams = new URLSearchParams(queryString);
	const codeParam = urlParams.get('code');
	if(codeParam===null) {
		const clId="xxxxxxxxxxxxxxxxxxxxxxxxxx";
		const redirectpage="https://community-dev.thomsonreuters.com/Test4.html";
		const url = 'https://community-qa.thomsonreuters.com/api.ashx/v2/oauth/authorize';
		const path = url+'?response_type=code&client_id='+clId+'&redirect_uri='+redirectpage;
		location.replace(path);
	} else if (codeParam!==null && codeParam!=='' && codeParam!== undefined) {
		getAccessToken(codeParam);
	}

Screenshot

Taking the CORs issue aside, which is really something that is beyond the scope of community support, especially from a third party application, if you are doing any of this via javascript on that site I would re-evaluate doing it this way all together.

When you do this in javascript on the client, you are exposing your client secret to ANYONE who can view the source of the page, which means any user can take that secret and access the API and depending on how you have your client configured, possibly with administrative rights.

It is more appropriate to proxy all REST requests server side, meaning you expose an HTTP endpoint to your app, then the app makes the REST request on the server.  This not only makes sure your secret is not compromised, but also completely eliminates your CORS issues.

Have you tried this on the postman, Please try to do so.