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.httpClient.post(tokenUrl, 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://'+window.location.host+'/';
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;
}
