Friday, March 22, 2019

Generate ArcGIS Token By URL Request From ArcGIS Portal, Federated Environment , ESRI JS API and Angular snippets

In my custom angular web application, I had to pull the data from different ArcGIS server environments, say Dev ArcGIS server and Test ArcGIS server environment, some of my items are directly referred from ArcGIS server services and some of them are from Enterprise portal referring the WebMapId and PortalId from both environment (Dev, Test). Servers are in federated environment.

To pull the data from different ArcGIS server environment, user must login in each environment. In addition, user must login to get inside the custom application and Enterprise AD Group was set to authenticate users on the custom web application and ArcGIS server environments. So, there will be 3 login attempts (1 –application itself, 2- Dev server/portal, 3- Test server/portal) to use the application, which doesn’t provide good user experience.

To improve the better application workflow, I decided to reduce the number of logins required in the application and use AD Username and Password captured during application login to generate token for each ArcGIS server environment. Here are some reference snippets to generate token from ArcGIS server and use tokens request parameter in ESRI JS API and Angular.

Step 1: Generate token and store tokens in session 

 devServerLogin(username, password){
     let portalTokenUrl = ....+'/portal/sharing/rest/generateToken'; //Federated evn.,  use Portal  to generate user token.

    if(username && password){, this.getCredentials(username, password), this.getHttpOptions()).subscribe(esriResponse =>{
        sessionStorage.setItem('dev_access_token', esriResponse['token']);
        sessionStorage.setItem('dev_access_token_expires', esriResponse['expires']);

  private getCredentials(username, password){
    let expiration = 720; //1440 -> 60 minute * 24 = 1 day token , 720 ->  12hrs token 
let urlReferer = 'https://''/';     
 let tokenCredentials =  'username='+username+'&password='+password+'&f=json&expiration='+expiration+'&client=referer&referer='+urlReferer;

    return tokenCredentials;

  private getHttpOptions(){
    let httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded', }),
      withCredentials: true,            
    return httpOptions;

Step 2: Use token for custom query to ArcGIS server directly

  let token = sessionStorage.getItem('dev_access_token');  
  let serverUrl = .....+'rest/services/MapServer/exts/'+....;
  let customQuery = '';
  let queryUrl:string = serverUrl+customQuery+'&f=pjson&token='+token; //Append the token
  this.httpClient.get(queryUrl, {withCredentials:true}).subscribe( esriResponse ->{
      console.log('Custom query response ' + esriResponse);

Step 3: Register ArcGIS Server pregenerated token with IdentityManager

      let tokenProperties = {
      'server' : ...+'/rest/services', // Use ArcGIS server REST url not portal REST URL
      'token' : sessionStorage.getItem('dev_access_token'),
      'ssl' : false,
      'userId' : username,
      'expires': sessionStorage.getItem('dev_access_token_expires')


Step 4: Force ESRI JS API to use credentials from IdentityManager for subsequent request    
    esriConfig.request.identity = true; 



Angular , ESRI , ESRI JS API

1 comment :

  1. "use AD Username and Password captured during application login to generate token for each ArcGIS server environment"

    This is probably a textbook definition of a bad practice and, if your users didn't consent to this; a violation of trust.

    It's also a clear example of why the username/password flow is never recommended unless no other option exists. The idea that you "capture" a users credentials is unforgivable.



© 2011 GIS and Remote Sensing Tools, Tips and more .. ToS | Privacy Policy | Sitemap

About Me