Error: Generating Access Token while calling API from External Application

We have created Widget (Using Velocity) which is dynamically fetching group, forum, tags based on user selection. The widget is working fine within community.

Our requirement is to call this widget from external application.

To implement this we are generating access token using the instruction (Using the Authorization Code Grant Type) provided at the below link (community.telligent.com/.../authentication

We are getting the below error.

'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."

Any help will be appreciated.

Parents Reply Children
  • 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

  • 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.