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.

Make sure you follow the full instructions on that page, including setting up an OAuth client under Administration > Integration > OAuth Clients. That is where you will get the client id and secret used for authentication/authorization process. Then, the process is a two step flow to first get an authorization code, then get an access_token. These are generated from Community, you don't generate your own codes.

As you mentioned, the first step - When using the authorization code grant type the client application first requests an authorization code by making a request to api.ashx/v2/oauth/authorize with the following parameters in header
   response_type=code
   client_id={QAUTH_CLIENT_ID}
   redirect_uri={APPLICATION_URL}

When call this method, got CORS error

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

When using the implicit grant type (with response_type=token), facing the same CORS error.

As this is a higher priority task, please help me to resolve this issue asap.

As you mentioned, the first step - When using the authorization code grant type the client application first requests an authorization code by making a request to api.ashx/v2/oauth/authorize with the following parameters in header
   response_type=code
   client_id={QAUTH_CLIENT_ID}
   redirect_uri={APPLICATION_URL}

When call this method, got CORS error

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

When using the implicit grant type (with response_type=token), facing the same CORS error.

As this is a higher priority task, please help me to resolve this issue asap.

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