Getting 401 back while using token generated via adal.js

Question

I am trying out implicit flow using adal js. I have created a dynamics 365 trial instance and under the Azure AD of that instance I have created an app registration. My single page application does the following,

When the user tries go to the home page, it redirects the user to https://login.microsoftonline.com/common/oauth2/authorize where the user successfully logs in.

After the log in I am using the getToken to get the token from the adal service class.

import {AuthenticationContext, withAdalLogin} from 'react-adal';
import ProjectConstant from './data/projectconstant'

export const authContext = new AuthenticationContext(ProjectConstant.adalSet);

export const acquireToken = (func) => 
    authContext.acquireToken(ProjectConstant.adalSet.endpoints.api, func);

export const getToken = () =>{
    let token = authContext.getCachedToken(ProjectConstant.adalSet.clientId);

    if(authContext.getCachedUser() == null || token == null){
        authContext.login();      
      }

    return authContext.getCachedToken(ProjectConstant.adalSet.clientId);
}

export const withAdalLoginApi = withAdalLogin(authContext, ProjectConstant.adalSet.endpoints.api);

I use this token to perform a query against the trial dynamics 365 instance and I am given 401 error the code that does the fetch is below,

export const SearchAccount = () =>{
  var token = getToken(); 
  console.log("Token is" + token );
  let url = "<trial>/api/data/v9.0/accounts";
  fetch(url, { 
      method: 'get', 
      headers: new Headers({
        'Authorization': 'Bearer '+ token, 
        'Accept' : 'application/json',          
        //'Cache-Control' : 'no-cache',
        'Content-Type': 'application/json; charset=utf-8',
        'OData-MaxVersion' : '4.0',
        'OData-Version' :'4.0',
      })})
      .then(result => console.log(result));          
}

I can use a different browser and after I log in to the trial instance physically, I can copy paste the same url above in a different tab and it shows all the data normally. however if i do the same thing on the browser where the app is running, I get 401 on the new tab.

I can also use postman by following these steps, https://docs.microsoft.com/en-us/dynamics365/customer-engagement/developer/webapi/setup-postman-environment and be presented with data.

The app (user) has correct level of privilege in the instance. The only thing that is different in each three conditions is the token I have generated but if the token is wrong should I not get a forbidden error? I am not sure what am i doing wrong

imran chowdhury imran chowdhury · Accepted Answer · 2019-07-08T13:50:16

It seems for some reason the token returned by authContext.getCachedUser() gives me 401. I was looking at any relevant post this topic and found this article. They have used authContext.acquireToken(organizationURI, fncName) for some reason. I used the same and it seems to be working. I changed my getToken() to below,

export const getToken = (fnc) =>{
    if(authContext.getCachedUser() == null){
        authContext.login();
    }

    authContext.acquireToken(ProjectConstant.adalSet.endpoints.api, fnc);
}

and search method then becomes like this,

export const SearchAccount = (fnc) =>{
  getToken( async(error, token) => {    
    if(error === null && token !== null){

    let url =  ProjectConstant.adalSet.endpoints.api + "/api/data/v9.0/accounts?$select=name,websiteurl,address1_city,address1_country&$top=5";

    fetch(url, { 
        method: 'get', 
        headers: new Headers({
          "Authorization": "Bearer "+ token, 
          "Accept" : "application/json",
          "Content-Type": "application/json; charset=utf-8",
          "OData-MaxVersion" : "4.0",
          "OData-Version" :"4.0",
        })})
        .then(res => res.json())
        .then(res => fnc(res));                
      }
  });

Like I said it working now but I am not sure what was wrong with the earlier approach. Any comment on it will be hugely appreciated.

Getting 401 back while using token generated via adal.js

1 Answers