Access services with OAuth 2.0

Overview

You will learn: how to build an app that uses named user login credentials to access secure services.

Applications can implement several authentication patterns based on OAuth 2.0 to accessArcGIS Onlinepremium services and secure content. There are two workflows that applications can use to authenticate with ArcGIS:

Named user login allows users of ArcGIS Online to use their ArcGIS Online account to log into your application are similar to signing into an app with your Google and Facebook account.
App login allows your application to authenticate with Arcgis Online and obtain credentials to access premium services for users without ArcGIS Online accounts.

You can learn more about implementing named user logins and implementing app logins in the authentication patterns documentation.

In this tutorial you will implement OAuth 2.0 to allow users to sign in with their ArcGIS Online account so they can access the ArcGIS Traffic Layer service. Unlike our other JavaScript tutorials, you won't be able to use CodePen and you'll have to run the code locally.

Steps

Pre-configure OAuth 2.0 for your app

Sign in to your ArcGIS account. If you don't already have one, sign-up for free.
At the top right of the main menu, click > New Application > Create New Application
- Title: Access Premium Services App
- Tags: OAuth
- Description: Access Premium Services App
- Click Register New Application
Click the Authentication tab add localhost or your server name for the redirect URI:
Setting the redirect URL correctly is very important. If you attempt a login attempt from anywhere other than a whitelisted (Redirect URI) location, the request will be denied.
- Redirect URI http://localhost/
Copy the Client ID value as you'll need this in the next step.

NOTE: The terms Client ID and App ID are used interchangeably in this tutorial.

Create your app's HTML

Instead of using CodePen, create a file in your //localhost web directory and add the following code to create a basic starter app.

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
  />
  <title>ArcGIS JS API Tutorials: Access traffic using OAuth2</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
  <script src="https://js.arcgis.com/4.14/"></script>
  <style>
    html,
    body, #viewDiv{
      font-family: Avenir Next W00;
      font-size: 14px;
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    .action {
      color: blue;
      cursor: pointer;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div id="anonymousPanel" style="display: block; padding: 5px; text-align: center;">
    <span id="sign-in" class="action">Sign In</span> to see live traffic.
  </div>

  <div id="personalizedPanel" style="display: none; padding: 5px; text-align: center;">
    Welcome <span id="userId" style="font-weight: bold;"></span> &nbsp;-&nbsp;
    <span id="sign-out" class="action">Sign Out</span>
  </div>
  <!-- for the map -->
  <div id="viewDiv" style="display: none;"></div>
</body>
</html>

In order for users to authenticate themselves, you need to launch the OAuth login dialog. Execute the dialog when the "Sign in" button is clicked.

In the file <head>, add a <script> tag and the JavaScript below. Specify the portalUrl and the appId for the OAuthInfo. Be sure to substitute your Client ID value created above for the appId. Use the identifityManager static class to register the info and then set up click listeners to get and destroy the credentials. Use checkSignInStatus method to show indicate when the user is signed in or signed out.

  <script>
    require([
      "esri/portal/Portal",
      "esri/identity/OAuthInfo",
      "esri/identity/IdentityManager",
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/MapImageLayer",
      "dojo/dom-style",
      "dojo/dom-attr",
      "dojo/on",
      "dojo/dom"
    ], function(
        Portal, OAuthInfo, identityManager, Map, MapView, MapImageLayer,
        domStyle, domAttr, on, dom) {

      // ArcGIS Online or your portal address
      var portalUrl = "https://www.arcgis.com/sharing";

      // subsitute your own client ID to identify who spawned the login and check for a matching redirect URI
      var info = new OAuthInfo({
        appId: "JTpyML5GgvA1jEoo", //*** Your Client ID value goes here ***//
        popup: false // inline redirects don't require any additional app configuration
      });

      identityManager.registerOAuthInfos([info]);

      // send users to arcgis.com to login
      on(dom.byId("sign-in"), "click", function() {
        identityManager.getCredential(portalUrl);
      });

      // log out and reload
      on(dom.byId("sign-out"), "click", function() {
        identityManager.destroyCredentials();
        window.location.reload();
      });

      identityManager.checkSignInStatus(portalUrl).then(function() {
       dom.byId('anonymousPanel').style.display = 'none';
       dom.byId('personalizedPanel').style.display = 'block'
     });

    });
  </script>

Run the http://localhost/privatelayer.html page and try to sign-in and sign-out.
If you are having issues, check the Client ID value to see that it matches the one in your account. You also might need to clear your browser cache and cookies.

The ArcGIS Traffic service is a premium service that can be used to visualize real time traffic speeds and incidents such as accidents, construction sites, or street closures. The service is free, but it does require applications to provide authentication to access it. The layer must be loaded after a user has been successfully authenticated.

In the file, create a new function called displayMap that creates and adds the secure traffic layer to the map after the portal has been successfully loaded.

    function displayMap() {
      var portal = new Portal();

      // Once the portal has loaded, the user is signed in
      portal.load().then(function() {
        dom.byId('viewDiv').style.display = 'flex';

        var map = new Map({
          basemap: "topo"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 14,
          center: [-118.24,34.05]
        });

        var traffic = new MapImageLayer({
          url: 'https://traffic.arcgis.com/arcgis/rest/services/World/Traffic/MapServer'
        })
        map.add(traffic);
      });
    }

Update the existing checkSignInStatus method to call the displayMap function. This will occur after a user has successfully signed in and is authenticated.

     identityManager.checkSignInStatus(portalUrl).then(function() {
       dom.byId('anonymousPanel').style.display = 'none';
       dom.byId('personalizedPanel').style.display = 'block'
       //*** ADD ***//
       displayMap();
     });

Run the code. The map should display live traffic in Los Angeles after you sign in.

Congratulations, you're done!

Your app should look something like this.

Challenge

Use a service proxy to access the traffic service

If you would like to use the "App login" authentication pattern to access the ArcGIS Traffic service directly and prevent the application from prompting the user to sign in, you can use a proxy service.

Go to the Set up authenticated services lab and create a proxy to access the ArcGIS Traffic Layer Service. NOTE: To set up the proxy you can use the application created in the first step or you can create a new application for all service proxies.

In the dashboard, copy the Traffic Layer proxy URL and update the application code.

     var traffic = new MapImageLayer({
       //*** ADD ***//
       url: "https://utility.arcgis.com/usrsvcs/appservices/<your-id>/rest/services/World/Traffic/MapServer"
     });

In your app, comment out all of the OAuth code and call the displayMap function when the application loads.
Run the application again and it shouldn't prompt the user to sign in.

	Site wide shortcuts
`?`	Bring up this help dialog
`esc`	Dismiss this help dialog
`gh`	Go to Home
`gg`	Go to Guide
`ga`	Go to API Reference
`gs`	Go to Sample Code
`gt`	Scroll to top of page
`spacebar`	Scroll page down
`shift spacebar`	Scroll page up
`gb`	Scroll to bottom of page

JavaScript API 4.14 Guide

JavaScript API Guide