Friday, March 22, 2019

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

1 Comment

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;
  }

Thursday, June 14, 2018

Friday, September 15, 2017

Tutorial: Sharing Data Between Angular Components - Parent to Child, Child to Parent, and between siblings

Be The First To Comment
Great video talking about sharing Data Between Angular Components - Parent to Child, Child to Parent, and between siblings by Jeff Delaney, AngularFirebase. 



Wednesday, September 13, 2017

Wiring Leaflet, ESRI-leaflet, and Angular for a web map

Be The First To Comment
Basic prototype wiring to map geospatial information using Leaflet, ESRI-leaflet, Angular 4.  There are several nice examples out there, but it is a quick and dirty way of putting all things together and display the map using Angular/Cli.

Step 1. Generate an angular project from angular/cli
                ng new leafletPrototype

Step2. Install all dependencies
a.     Npm install leaflet --save
b.     Nmp install esri-leaflet --save
c.      Npm install @types/leaflet –save

Your pacakage.json will looks like –
"dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@types/leaflet": "^1.0.69",
    "core-js": "^2.4.1",
    "esri-leaflet": "^2.1.1",
    "leaflet": "^1.2.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },


Step 3. Configure .angular-cli.json
Add leaflet and esri-leaflet styles and scripts in .angular-cli.json
"styles": [
        "styles.scss",
        "../node_modules/leaflet/dist/leaflet.css",
        "../node_modules/leaflet-draw/dist/leaflet.draw.css"
      ],


      "scripts": ["../node_modules/leaflet/dist/leaflet.js",
        "../node_modules/esri-leaflet/dist/esri-leaflet.js"
      ],

Step 4. Now, run “ng serve” and see if any errors while importing leaflet libraries.

Monday, August 28, 2017

Quick cheat-sheet on Angular/cli

Be The First To Comment
Quick cheat-sheet on Angular/cli to generate boiler plate codes.

Install Angular/cli
npm install –g @angular/cli

Check Agnular/cli version
ng –v
        or
npm list –g  @angular/cli --depth=0

Generate  files without installing it
ng new ng2CliApp --skip-install

Create new project with out writing the files in but report them commandline console
ng new ng2CliApp --dry-run

Create new project with app prefix
ng new ng2CliApp --prefix coolapp --dry-run

Create new project without test files
ng new ng2CliApp  --skip-tests --prefix cool_ng2CliApp --dry-run

Create new project with style-sheets
ng new ng2CliApp --skip-tests --prefix cool_ng2CliApp --style scss 

Create new project with Routing
ng new ng2CliApp --routing --skip-tests --prefix cool_ng2CliApp --style scss --skip-install

Create new Component
ng g component my-new-component

 

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

About Me