Setting up App based login with ArcGIS JavaScript API

Question

I'm trying to implement an ArcGIS map into an existing JavaScript app (Node.js/React) and started seeing an ArcGIS login pop up window appear in my app when trying to load layers from ArcGIS Online. Since not all of my users will have ArcGIS accounts, I want to enable app based login.

From the documentation (which seems like it's leading me around in circles) it looks like I need to setup my Nodejs server with my client id/secret so that it can get access tokens and then send them to the client so that the client can in turn have access to the resources from ArcGIS Online.

The server side part of that seems easy enough - just make a request and get a valid token back. But I'm not clear what to do once my client app gets the token from my Nodejs server. Since my client side code is written using React I'm using the @esri/react-arcgis npm package to load the ArcGIS modules. I've been playing around with the IdentityManager module but am having no success.

If anyone has any idea how to setup the app based login I'd really appreciate it. Here's my client side React code.

import React from 'react';
import {loadModules} from '@esri/react-arcgis';
const options = {url: 'https://js.arcgis.com/4.6/'};

const styles = {
  container: {
    height: '100%',
    width: '100%'
  },
  mapDiv: {
    padding: 0,
    margin: 0,
    height: '100%',
    width: '100%'
  },
}

export default class MapTab extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        status: 'loading'
      }

      loadModules(['esri/Map', 'esri/views/MapView', 'esri/layers/MapImageLayer'], options)
        .then(([Map, MapView, MapImageLayer]) => {

          // how do I implement app based login here once I have the access token?

          var layer3 = new MapImageLayer({
            url: "https://livefeeds.arcgis.com/arcgis/rest/services/LiveFeeds/NWS_Watches_Warnings_and_Advisories/MapServer"
          });

          const map = new Map({
            basemap: "hybrid",
            layers: [layer3]
          });

          const view = new MapView({
            container: "viewDiv",
            map,
            center: [this.props.latLng.lng, this.props.latLng.lat],
            zoom: 5,
          });

          view.when(() => {
            this.setState({
              map,
              view,
              status: 'loaded'
            });
          });
        })

    }
        renderMap() {
          if(this.state.status === 'loading') {
            return <h1>loading</h1>;
          }
        }

        render() {
          if(this.state.view){
            this.state.view.goTo([this.props.latLng.lng, this.props.latLng.lat])
          }

          return(
                <div id='parent' style={styles.container}>
                  <div id='viewDiv' style={ styles.mapDiv } >
                    {this.renderMap()}
                  </div>
                </div>
          )
        }
      }

What is your goal for using app logins? Is your main use case using premium layers in your app? — GavinR
– GavinR, Commented Apr 6, 2019 at 19:19
Yes I am looking to access premium layers that are available to everyone with an ArcGIS account. Here's some examples of the live feeds I want to use. livefeeds.arcgis.com/arcgis/rest/services/LiveFeeds I was actually able to authenticate earlier today using a temporary token and the registerToken method and it successfully accessed the layer through app based login. The problem now is that I can't figure out a way to authenticate my app for multiple servers through the registerToken method. Is there a way to do that or do I have to call registerToken for each new server used. — Robert Peterman
– Robert Peterman, Commented Apr 6, 2019 at 19:50

GavinR · Accepted Answer · 2019-04-06 20:38:01Z

0

Follow these instructions: https://developers.arcgis.com/javascript/latest/guide/access-services-with-oauth-2/

But a quick summary:

Go to https://developers.arcgis.com
Login with your ArcGIS Online Account information
Go to "Applications" and create a "New Application": https://developers.arcgis.com/applications
Be sure to update the redirect URI to where your app will be housed, and then note the "Client ID"
In your app, use esri/identity/OAuthInfo to put your appId from the previous step into your code.

answered Apr 6, 2019 at 20:38

GavinR

6,2647 gold badges36 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Peterman Over a year ago

Sorry I don't think I fully explained what I meant by app based login. I'm looking to basically login under my app's credentials automatically without any user login or pop up screens. The tutorial looks like its for user based login and involves login pop ups. I did however copy the "portalUrl" variable value from the tutorial and pasted it into the server address in the registerToken method. If I register the token with this server (arcgis.com/sharing), all of the layers I'm looking for seem to be accessible without triggering any login screens.

Robert Peterman · Accepted Answer · 2019-04-06 22:44:26Z

0

I ended up using this solution where the comment code is in my example.

esriId.registerToken({
        server: 'https://www.arcgis.com/sharing',
        token: 'access token here'
      });

Previously I had been using the registerToken method with specific servers that only granted me access to those specific servers when a token was registered under them. Using "https://www.arcgis.com/sharing" as the server value seems to give me access to all the public/premium resources I wanted to use at the same time.

It works for my use case although I can't find any similar examples in the documentation.

answered Apr 6, 2019 at 22:44

Robert Peterman

14 bronze badges

Collectives™ on Stack Overflow

Setting up App based login with ArcGIS JavaScript API

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related