OAuth Basic | ArcGIS API for JavaScript

This sample uses OAuth 2.0 to allow users to log in to the ArcGIS platform via the app. More detailed information about user logins and OAuth 2.0 can be found here.

This sample shows you how to use "inline" web flow, as opposed to using a Popup window that presents an login user interface. With inline web flow there is no popup window involved.

User Login is performed in a single step that requires the App to direct the browser to the authorization URL for the portal (shown below for arcgis.com) :

https://www.arcgis.com/sharing/oauth2/authorize?
client_id=APPID&
response_type=token&
redirect_uri=<redirect_uri>

If the end user successfully presents credentials (eg username and password) to the platform (eg. arcgis.com) the server returns an access token by redirecting the browser to the specified redirect_uri. The access token is returned as part of the url fragment appended to the redirect_uri.

For example the server may redirect the browser to the following url :

http://app.example.com/cb#access_token=2YotnFZFEjr1zCsicMWpAA&expires_in=3600

To run this sample on your own web server you need to register your application on ArcGIS.com. Once the application is registered you will get an appid that you use in the sample. More detailed step-by-step information can be found here on how to add and register your app(s). Note: When running the sample in IE9 be sure to use a fully qualified domain name, for example: http://myhost.example.com instead of http://myhost.

Code

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9,IE=10">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>ArcGIS Online Items</title>

  <link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.6compact/js/dojo/dijit/themes/claro/claro.css">
  <style>
    html, body {
      font-family: Lucida Sans,Lucida Grande,Arial !important;
      font-size: 14px;
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    
    .esri-item-gallery .esri-item-container {
      float: left;
      text-align: center;
      padding: 10px;
      width: 204px;
      display: inline-block;
    }
    
    .esri-item-gallery .esri-image {
      width: 200px;
      height: 133px;
      border: 2px solid gray;
      border-radius: 5px;
    }
    
    .esri-item-gallery .esri-null-image {
      line-height: 133px;
      text-align: center;
      color: #999999;
    }
    
    .esri-item-gallery .esri-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .esri-item-gallery .esri-null-title {
      color: #999999;
    }
  </style>
  
  <script>
    var dojoConfig = { 
      packages: [{ 
        name: "app",  
        location: location.pathname.replace(/\/[^/]+$/, "") 
      }]
    };
  </script>
  <script src="//js.arcgis.com/3.6compact/"></script>

  <script>
    var grid, signIn;
    require([
      "esri/arcgis/Portal", "app/OAuthHelper",
      "dojo/dom-style", "dojo/dom-attr", "dojo/dom", "dojo/_base/array", 
      "dojo/domReady!"
    ], function(
      esriPortal, OAuthHelper, 
      domStyle, domAttr, dom, arrayUtils
    ) {
      OAuthHelper.init({
        appId:      "q244Lb8gDRgWQ8hM",
        portal:     "http://www.arcgis.com",
        expiration: (14 * 24 * 60), // 2 weeks, in minutes
        popup:      false
      });
      
      if (OAuthHelper.isSignedIn()) {
        displayItems();
      } else {
        // Anonymous view
        domStyle.set("anonymousPanel", "display", "block");
        domStyle.set("personalizedPanel", "display", "none");
      }
    
      signIn = function() {
        OAuthHelper.signIn().then(displayItems);
      }
      
      function displayItems() {
        new esriPortal.Portal("https://www.arcgis.com").signIn().then(
          function(portalUser) {
            console.log("Signed in to the portal: ", portalUser);

            domAttr.set("userId", "innerHTML", portalUser.fullName);
            domStyle.set("anonymousPanel", "display", "none");
            domStyle.set("personalizedPanel", "display", "block");
            
            queryPortal(portalUser);
          }
        ).otherwise(
          function(error) {
            console.log("Error occurred while signing in: ", error);
          }
        );
      }

      function queryPortal(portalUser) {
        var portal = portalUser.portal;
        
        //See list of valid item types here:  http://www.arcgis.com/apidocs/rest/index.html?itemtypes.html
        //See search reference here:  http://www.arcgis.com/apidocs/rest/index.html?searchreference.html
        var queryParams = {
          q:          "owner:" + portalUser.username,
          sortField:  "numViews",
          sortOrder:  "desc",
          num:        20
        };

        portal.queryItems(queryParams).then(createGallery);
      }
      
      function createGallery(items) {
        var htmlFragment = "";
        
        arrayUtils.forEach(items.results, function(item) {
          htmlFragment += (
            "<div class=\"esri-item-container\">" +
              (
                item.thumbnailUrl ?
                "<div class=\"esri-image\" style=\"background-image:url(" + item.thumbnailUrl + ");\"></div>" :
                "<div class=\"esri-image esri-null-image\">Thumbnail not available</div>"
              ) +
              (
                item.title ?
                "<div class=\"esri-title\">" + (item.title || "") + "</div>" :
                "<div class=\"esri-title esri-null-title\">Title not available</div>"
              ) +
            "</div>"
          );
        });
        
        dom.byId("itemGallery").innerHTML = htmlFragment;
      }
    });
  </script>
</head>

<body class="claro">

  <div id="anonymousPanel" style="display: none; padding: 5px; text-align: center;">
    <a href="javascript:void(0);" onclick="signIn();">Sign In</a> and view your ArcGIS Online items.
  </div>

  <div id="personalizedPanel" style="display: none; padding: 5px; text-align: center;">
    Welcome <span id="userId" style="font-weight: bold;"></span>
     - 
    <a href="javascript:void(0);" onclick="OAuthHelper.signOut();">Sign Out</a>
  </div>
  
  <div id="itemGallery" class="esri-item-gallery" style="width: 100%;"></div>
  
</body>
</html>

View live sample Download as a zip file

Description

Code

View live sample
Download as a zip file