Access services with OAuth 2.0

Learn how to authenticate a user to access a secure ArcGIS service with OAuth 2.0.

In this tutorial, you will build an app that uses named user login credentials to access a secure ArcGIS service using OAuth 2.0.

You can use different authentication methods to access ArcGIS location services. To implement OAuth 2.0, you can use your ArcGIS account to register an application 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 services that consume credits, the app user's account will be charged.

You will implement OAuth 2.0 so users can sign in to ArcGIS to access the ArcGIS World Traffic service.

Prerequisites

Steps

Download the ArcGIS Runtime Toolkit for Qt

The open-source ArcGIS Runtime Toolkit for Qt 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 Runtime Toolkit for Qt repository in GitHub onto your development machine.

2. You can do this by cloning the ArcGIS Runtime Toolkit for Qt repo (using the the URL: https://github.com/Esri/arcgis-runtime-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 devlopement machine. You will need to reference the path to this file later in the tutorial (for example: C:/arcgis-runtime-toolkit-qt/toolkit/uitools/toolkitcpp.pri).

Configure OAuth 2.0 for your app

Use the ArcGIS Developer dashboard to create an application, generate a client ID, and define a redirect URL to access secure services.

1. Sign in to your ArcGIS developer account. If you don't already have one, sign-up for free. You need to sign in so you can create an application and get a client ID for authentication.
2. Click the OAuth 2.0 tab in the ribbon at the top.
3. Click the New Application button in the upper-left of the page.
4. In the Create New Application window, provide a Name and an optional Description for your application definition. Then click Create application. When the application is created, Client ID, Client Secret, and Temporary Token values will also be generated. Take note of the Client ID; you will use this when implementing OAuth for your app.
5. Click the Add URI button at the bottom of the page to add a redirect URL.
6. In the Add Allowed URI window, type urn:ietf:wg:oauth:2.0:oob and click Add.

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.

Implement OAuth login for this app

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

1. Open display_a_map.pro and add webengine to the list of included modules. WebEngine is a Qt module that can display an OAuth login webpage in your app.

   display_a_map.pro

   Expand

   Use dark colors for code blocks

   15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 16 17 18 19 20 21 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 21 20 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19

   Change line

   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
   TEMPLATE = app
   
   CONFIG += c++14
   
   # additional modules are pulled in via arcgisruntime.pri
   
   QT += opengl qml quick webengine
   

   Expand

2. To utilize AuthenticationView , add the path to where the toolkitcpp.pri file is located on your development system (for example: C:/arcgis-runtime-toolkit-qt/toolkit/uitools/toolkitcpp.pri). Then save and close display_a_map.pro.

   display_a_map.pro

   Expand

   Use dark colors for code blocks

   34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 34 35 36 37 38 39 40 41 42 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43

   Add line.Add line.

   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
   equals(QT_MAJOR_VERSION, 6) {
     error("This version of the ArcGIS Runtime SDK for Qt is incompatible with Qt 6")
   }
   
   ARCGIS_RUNTIME_VERSION = 100.15.0
   include($$PWD/arcgisruntime.pri)
   
   # Set the path to the toolkit, absolute or relative to this app.
   include(<path_to_toolkit_repo>/toolkit/uitools/toolkitcpp.pri) # example: C:/arcgis-runtime-toolkit-qt/toolkit/uitools/toolkitcpp.pri
   

   Expand

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

   main.cpp

   Expand

   Use dark colors for code blocks

   16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 17 18 19 20 21 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22

   Remove lineRemove lineRemove line

   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 "ArcGISRuntimeEnvironment.h"
   #include "MapQuickView.h"
   
   #include <QDir>
   #include <QGuiApplication>
   #include <QQmlApplicationEngine>
   

   Expand

4. Include QtWebEngine, and register.h for the ArcGIS Runtime Toolkit.

   main.cpp

   Expand

   Use dark colors for code blocks

   16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 16 17 18 19 20 21 21 21 21 21 21 21 21 21 21 21 21 20 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 18 17 16 16 16 16 16 16 16 16 16 16 16

   Add line.Add line.

   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
   85
   #include "ArcGISRuntimeEnvironment.h"
   #include "MapQuickView.h"
   
   #include <QtWebEngine>
   #include "Esri/ArcGISRuntime/Toolkit/register.h"
   

   Expand

5. Add code to initialize QtWebEngine.

   main.cpp

   Expand

   Use dark colors for code blocks

   27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 27 28 29 30 31 32 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 33 32 31 30 30 30 30 30 30 30 30 30 30 30

   Add line.

   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
   85
   int main(int argc, char *argv[])
   {
       QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
       QGuiApplication app(argc, argv);
   
       QtWebEngine::initialize();
   

   Expand

6. Register the ArcGIS Runtime Toolkit. Then save and close main.cpp.

   main.cpp

   Expand

   Use dark colors for code blocks

   66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 66 67 68 69 70 71 72 73 74 74 74 74 74 74 74 74 74 74 74 74

   Add line.Add line.

   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
   85
       // 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

7. Navigate to Resources > qml\qml.qrc > qml and open Display_a_mapForm.qml. Import the ArcGIS Runtime Toolkit. Be sure set the version to your installed ArcGIS Runtime version.

   Display_a_mapForm.qml

   Expand

   Use dark colors for code blocks

   14 14 14 14 14 14 14 14 14 14 14 14 14 14 15 16 17 18 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 18 17 16 15 14 13 13

   Add line.

   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
   import QtQuick 2.6
   import QtQuick.Controls 2.2
   import Esri.display_a_map 1.0
   
   import Esri.ArcGISRuntime.Toolkit 100.13
   

   Expand

8. Now that the toolkit is available, declare an AuthenticationView component. Then save and close Display_a_mapForm.qml.

   More info

   AuthenticationView is a an ArcGIS Runtime 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, etc.). For more information, see AuthenticationView .

   Display_a_mapForm.qml

   Expand

   Use dark colors for code blocks

   30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 30 31 32 33 34 35 36 37 38 39 40 41 41 41

   Add line.Add line.Add line.Add line.Add line.

   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
       // Declare the C++ instance that 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. Include the six required header files as shown.

   Display_a_map.cpp

   Expand

   Use dark colors for code blocks

   18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 19 20 21 22 23 24 25 26 27 28 29 29 29 29 29 29 29 29 29 29 29 29 29 29 29 29 29 29 29 29 29 29 29 29 29 29 29 27 25 23 23 22 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21

   Add line.Add line.Add line.Add line.Add line.

   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 "Basemap.h"
   #include "Map.h"
   
   #include "MapQuickView.h"
   #include <QUrl>
   
   #include "Credential.h"
   #include "OAuthClientInfo.h"
   #include "Portal.h"
   #include "PortalItem.h"
   #include "ArcGISMapImageLayer.h"
   

   Expand

Create a credential and portal to access secured services

You can use an instance of the Portal class to access services hosted on ArcGIS Online or an ArcGIS Enterprise 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 resources.

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

   Display_a_map.cpp

   Expand

   Use dark colors for code blocks

   48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 49 50 51 52 53 54 55 56 57 57 57 56 55 55 54 53 52 51 50 49 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48

   Add line.Add line.

   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
   void Display_a_map::setupViewpoint()
   {
   
       const Point center(-118.80543, 34.02700, SpatialReference::wgs84());
       const Viewpoint viewpoint(center, 100000.0);
       m_mapView->setViewpoint(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"
   

   Expand

2. Create a Portal that will use credential to gain access to a secured ArcGIS service, the traffic layer resource.

   Display_a_map.cpp

   Expand

   Use dark colors for code blocks

   51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 51 52 53 54 55 56 57 58 59 60 60 60 59 58 57 56 55 54 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53

   Add line.

   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
       const Point center(-118.80543, 34.02700, SpatialReference::wgs84());
       const Viewpoint viewpoint(center, 100000.0);
       m_mapView->setViewpoint(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);
   

   Expand

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.

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

   55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 56 57 58 59 60 61 62 63 64 65 66 67 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68

   Add line.Add line.Add line.Add line.Add line.Add line.

   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
       // 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.

Other tutorials

Some of the following also include instructions for QML.

• Add a feature layer
• Add a point, line, and polygon
• Display a web map
• Display a scene
• Browse all tutorials