Access services with OAuth credentials

Learn how to implement user authentication to access a secure ArcGIS service with OAuth credentials.

access services with oauth 2

You can use different types of authentication to access secured ArcGIS services. To implement OAuth credentials for user authentication, you can use your ArcGIS account to register an app with your portal and get a Client ID, and then configure your app to redirect users to login with their credentials when the service or content is accessed. This is known as user authentication. If the app uses premium ArcGIS Online services that consume credits, for example, the app user's account will be charged.

In this tutorial, you will build an app that implements user authentication using OAuth credentials so users can sign in and be authenticated through ArcGIS Online to access the ArcGIS World Traffic service.

Prerequisites

Before starting this tutorial:

  1. You need an ArcGIS Location Platform or ArcGIS Online account.

  2. Your system meets the system requirements.

  3. The ArcGIS Maps SDK for Qt, version 200.6.0 or later is installed.

  4. The Qt 6.5.6 software development framework is installed.

Steps

Download the ArcGIS Maps SDK for Qt Toolkit

The open-source ArcGIS Maps SDK for Qt Toolkit contains UI components and utilities to help simplify your Qt app development. For this OAuth tutorial app we will use the toolkit that provides the AuthenticationView class, which has a dialog that automatically displays the proper authentication view for any of the supported authentication types (OAuth, Token, HTTP Basic, HTTP Digest, SAML, PKI).

  1. To configure the toolkit for use in this tutorial, you need to copy the ArcGIS Maps SDK for Qt Toolkit repository in GitHub onto your development machine.

  2. You can do this by cloning the ArcGIS Maps SDK for Qt Toolkit repo (using the the URL: https://github.com/Esri/arcgis-maps-sdk-toolkit-qt.git) or downloading the .zip version of the repo and unzipping it to your preferred location on your development machine.

IMPORTANT: Make a particular note for the path to the toolkitcpp.pri file that is in the directory structure of the toolkit on your development machine. You will need to reference the path to this file later in the tutorial (for example: C:/arcgis-maps-sdk-toolkit-qt/uitools/toolkitcpp.pri).

Create OAuth credentials

OAuth credentials are required to implement user authentication. These credentials are created as an Application item in your organization's portal.

  1. Sign in to your portal.

  2. Click Content > My content > New item and select Developer credentials.

  3. In the Create developer credentials window, select OAuth 2.0 credentials radio button and click Next.

  4. Add a Redirect URL to your OAuth credentials: urn:ietf:wg:oauth:2.0:oob. The remaining properties, Referrer URLs, Application environment and URL, can remain with their default values. Click Next.

  5. For Privileges, click Next. Privileges are not required for this tutorial.

  6. Click Skip to move past Grant item access as it is not required for this tutorial.

  7. Provide a Title of your choice. Optionally, stipulate a Folder to store your Application item, add Tags, and add a Summary. Click Next.

  8. Review your settings and go back to correct any errors. When you are ready, click Create. When the application item is created, Client ID, Client Secret, and Temporary Token values will also be generated. You will be redirected to the Application item's Overview page.

IMPORTANT: Make a particular note for the Client ID string that is generated. You will need to use this string later in the tutorial (for example: XYZ123).

Open the project in Qt Creator

  1. To start this tutorial, complete the Display a map tutorial or download and unzip the solution.
  2. Open the Display_a_map project in Qt Creator.

Configure the .pro file

Qt .pro files contains information required by qmake to build an application, a library, or a plugin.

  1. To utilize AuthenticationView, add the path to where the toolkitcpp.pri file is located on your development system (for example: C:/arcgis-maps-sdk-toolkit-qt/uitools/toolkitcpp.pri). Also, Qt WebEngine Quick is a Qt module that can display an OAuth sign in webpage in your app. Add this module to your project. Then save and close Display_a_map.pro.

    Display_a_map.pro
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    ARCGIS_RUNTIME_VERSION = 200.6.0
    include($$PWD/arcgisruntime.pri)
    
    include(<path_to_toolkit_repo>/uitools/toolkitcpp.pri) # example: C:/arcgis-maps-sdk-toolkit-qt/uitools/toolkitcpp.pri
    
    qtHaveModule(webenginequick) {
      QT += webenginequick
    }
    
    Expand

Implement user authentication using OAuth credentials

The OAuth sign in web page is implemented using the AuthenticationView class and the Qt WebEngine, which is part of the ArcGIS Toolkit.

  1. In the project Sources folder, open main.cpp. Remove these #include statements. These Qt types are not needed for this tutorial.

    main.cpp
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    #include "Display_a_map.h"
    
    #include "ArcGISRuntimeEnvironment.h"
    #include "MapQuickView.h"
    
    #include <QDir>
    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    
  2. Add #include statements for QtWebEngineQuick, and register.h for the Toolkit.

    main.cpp
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    #include "Display_a_map.h"
    #include "ArcGISRuntimeEnvironment.h"
    #include "MapQuickView.h"
    
    #include <QtWebEngineQuick>
    #include "Esri/ArcGISRuntime/Toolkit/register.h"
    
  3. Add code to initialize QtWebEngineQuick.

    main.cpp
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    using namespace Esri::ArcGISRuntime;
    
    int main(int argc, char *argv[])
    {
        QGuiApplication app(argc, argv);
    
        QtWebEngineQuick::initialize();
    
  4. Register the Toolkit. Then save and close main.cpp.

    main.cpp
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
        // Register the Display_a_map (QQuickItem) for QML
        qmlRegisterType<Display_a_map>("Esri.Display_a_map", 1, 0, "Display_a_map");
    
        // Initialize application view
        QQmlApplicationEngine engine;
    
        // Register the toolkit
        Esri::ArcGISRuntime::Toolkit::registerComponents(engine);
    
    Expand
  5. Navigate to Resources > qml\qml.qrc > qml and open Display_a_mapForm.qml. Import the Toolkit. Be sure set the version to your installed ArcGIS Maps SDK for Qt version.

    Display_a_mapForm.qml
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    import QtQuick
    import QtQuick.Controls
    import Esri.Display_a_map
    
    import Esri.ArcGISRuntime.Toolkit
    
  6. Now that the toolkit is available, declare an AuthenticationView component. Then save and close Display_a_mapForm.qml.

    AuthenticationView is a Toolkit component that simplifies the authentication workflow by using AuthenticationManager to automatically display the correct login user interface for each security method (Token, OAuth, PKI, and so on). For more information, see AuthenticationView.

    Display_a_mapForm.qml
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
        // Declare the C++ instance which creates the map etc. and supply the view
        Display_a_map {
            id: model
            mapView: view
        }
    
        // Declare an AuthenticationView to support login.
        AuthenticationView {
            id: authView
            anchors.fill: parent
        }
    
    Expand

Add required class header files

Several additional classes are required to support the functionality your app needs. Specifically, for managing OAuth authentication, creating a credential, creating an image layer, and accessing the secured traffic layer portal item.

  1. In the project Sources folder, open Display_a_map.cpp. Add #include statements for the required header files as shown.

    Display_a_map.cpp
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    #include "Display_a_map.h"
    #include "Map.h"
    #include "MapTypes.h"
    #include "MapQuickView.h"
    #include "Point.h"
    #include "Viewpoint.h"
    #include "SpatialReference.h"
    #include <QFuture>
    
    
    // For the OAuth tutorial, add these includes:
    #include "Credential.h"
    #include "OAuthClientInfo.h"
    #include "Portal.h"
    #include "PortalItem.h"
    #include "ArcGISMapImageLayer.h"
    #include "CoreTypes.h"
    #include "LayerListModel.h"
    

Create a credential and portal to access secured services

You can use an instance of the Portal class to access secure services on your portal. In the constructor, you can either provide the portal URL or leave it out to use ArcGIS Online by default. You can also provide a Credential in the constructor to use when accessing secured services.

  1. In the setupViewpoint function, add the following code to create Credential. Paste your Client ID (created earlier with Create OAuth credentials) to replace the "CLIENT_ID" placeholder. Also be sure that OAuthMode is set to User.

    Display_a_map.cpp
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    void Display_a_map::setupViewpoint()
    {
    
        const Point center(-118.80543, 34.02700, SpatialReference::wgs84());
        const Viewpoint viewpoint(center, 100000.0);
        m_mapView->setViewpointAsync(viewpoint);
    
        // Create a credential for this app and set the authentication mode.
         Credential* credential = new Credential(OAuthClientInfo("CLIENT_ID", OAuthMode::User), this); // Change the CLIENT_ID to your string, example "XYZ123"
    
  2. Create a Portal that will use credential to gain access to the secured ArcGIS World Traffic service.

    Display_a_map.cpp
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
        const Point center(-118.80543, 34.02700, SpatialReference::wgs84());
        const Viewpoint viewpoint(center, 100000.0);
        m_mapView->setViewpointAsync(viewpoint);
    
        // Create a credential for this app and set the authentication mode.
         Credential* credential = new Credential(OAuthClientInfo("CLIENT_ID", OAuthMode::User), this); // Change the CLIENT_ID to your string, example "XYZ123"
    
         Portal* portal = new Portal(credential, this);
    

Add the secured traffic layer

The ArcGIS World Traffic service is a dynamic map service that presents historical and near real-time traffic information for different regions of the world. This service requires an ArcGIS Online organizational subscription. You will add a portal item referencing this service, and create a traffic layer from that.

ArcGIS World Traffic service data is updated every five minutes to provide traffic speed and traffic incident visualization and identification. Traffic speeds are displayed as a percentage of free-flow speeds, which is frequently the speed limit or how fast cars tend to travel when unencumbered by other vehicles. The streets are color coded as follows:

  • Green (fast): 85 - 100% of free flow speeds
  • Yellow (moderate): 65 - 85%
  • Orange (slow); 45 - 65%
  • Red (stop and go): 0 - 45%
  1. Create a PortalItem using the traffic service's item ID. Then create an ArcGISMapImageLayer to display the traffic service. Finally, append the traffic layer to the map's collection of data layers (operational layers).

    Display_a_map.cpp
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
        // Create a credential for this app and set the authentication mode.
         Credential* credential = new Credential(OAuthClientInfo("CLIENT_ID", OAuthMode::User), this); // Change the CLIENT_ID to your string, example "XYZ123"
    
         Portal* portal = new Portal(credential, this);
    
         // Create a layer to display the ArcGIS World Traffic service.
         // traffic layer https://www.arcgis.com/home/item.html?id=ff11eb5b930b4fabba15c47feb130de4
         PortalItem* item = new PortalItem(portal, "ff11eb5b930b4fabba15c47feb130de4", this);
         ArcGISMapImageLayer* imageLayer = new ArcGISMapImageLayer(item, this);
         // Append the traffic layer to the map's data layer collection.
         m_map->operationalLayers()->append(imageLayer);
    
    Expand
  2. Press Ctrl + R to run the app.

You should briefly see a map with the topographic basemap layer centered on the Santa Monica Mountains in California. The AuthenticationView will then prompt you with an OAuth login page to enter your ArcGIS Online username and password. After authenticating successfully with ArcGIS Online, the map will appear with the traffic layer also displayed.

ArcGIS World Traffic service layer

Other tutorials

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.