Access services with OAuth credentials

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

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

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 Authenticator class, which has a dialog that automatically displays the proper authentication 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/toolkitcpp.pri).

Create OAuth credentials for user authentication

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

1. Go to the Create OAuth credentials for user authentication tutorial and create OAuth credentials using your ArcGIS Location Platform or ArcGIS Online account.

2. Copy the Client ID and Redirect URL as you will use them to implement user authentication later in this tutorial. Both the Client ID and the Redirect URL are found on the Settings page.

The Client ID uniquely identifies your app on the authenticating server. If the server cannot find an app with the provided Client ID, your app will be unable to authenticate.

The Redirect URL (also referred to as a callback url) is used to identify a response from the authenticating server when the system returns control back to your app after an OAuth login. Since it does not necessarily represent a valid endpoint that a user could navigate to, the redirect URL can use a custom scheme, such as urn:ietf:wg:oauth:2.0:oob and my-app://. You can configure several redirect URLs in your application definition and can remove or edit them. It's important to make sure the redirect URL used in your app's code matches a redirect URL configured for the application.

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 Authenticator, 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/toolkitcpp.pri). Then add the Qt WebEngine Quick module to your project. The Qt WebEngine is used to display an OAuth sign in webpage in your app. Then save and close the Display_a_map.pro file.

   See the Install and setup for details on installing the Qt WebEngine on your system.

   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.8.0
   include($$PWD/arcgisruntime.pri)
   
   include(<path_to_toolkit_repo>/uitools/toolkitcpp/toolkitcpp.pri) # example: C:/arcgis-maps-sdk-toolkit-qt/uitools/toolkitcpp/toolkitcpp.pri
   
   qtHaveModule(webenginequick) {
     QT += webenginequick
   }
   

   Expand

Implement user authentication using OAuth credentials

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

1. In the project Sources folder of Qt Creator, 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
   85
   86
   87
   88
   #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
   85
   86
   87
   88
   using namespace Esri::ArcGISRuntime;
   
   int main(int argc, char *argv[])
   {
       QGuiApplication app(argc, argv);
   
       // Initialize the QtWebEngineQuick to use the web based login dialog.
       QtWebEngineQuick::initialize();
   
   

4. Add code to set the ArcGISRuntimeEnvironment::setUseLegacyAuthentication to false. Setting this is needed for the new Authentication pattern starting with the ArcGIS Maps SDK for Qt v200.8.

   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
   85
   86
   87
   88
   using namespace Esri::ArcGISRuntime;
   
   int main(int argc, char *argv[])
   {
       QGuiApplication app(argc, argv);
   
       // Initialize the QtWebEngineQuick to use the web based login dialog.
       QtWebEngineQuick::initialize();
   
       // Needed for the new Authentication pattern starting with the ArcGIS Maps SDK for Qt v200.8.
       ArcGISRuntimeEnvironment::setUseLegacyAuthentication(false);
   

5. Add code to 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
   85
   86
   87
   88
       // 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

6. In Qt Creator, navigate to Resources > qml\qml.qrc > qml and open Display_a_mapForm.qml. Add an import statement for the Toolkit.

   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
   import QtQuick
   import QtQuick.Controls
   import Esri.Display_a_map
   
   import Esri.ArcGISRuntime.Toolkit
   

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

   The Authenticator is a Toolkit component that simplifies the authentication workflow to automatically display the correct login user interface for each security method (Token, OAuth, PKI, and so on).

   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
       // Declare the C++ instance which creates the map etc. and supply the view
       Display_a_map {
           id: model
           mapView: view
       }
   
       // Declare an Authenticator to support login.
       Authenticator {
           anchors.centerIn: parent
       }
   

   Expand

Add required class header files and namespaces

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

1. In Qt Creator, find the project Sources folder and open the Display_a_map.cpp file. 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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   #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>
   
   #include "Portal.h"
   #include "PortalItem.h"
   #include "ArcGISMapImageLayer.h"
   #include "LayerListModel.h"
   #include "Authentication/OAuthUserConfiguration.h"
   #include "OAuthUserConfigurationManager.h"
   

2. Add another namespace statement 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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   using namespace Esri::ArcGISRuntime;
   
   using namespace Esri::ArcGISRuntime::Authentication;
   

Create an OAuth user configuration and portal to access secured services

Using the Redirect URL and Client ID information obtained from the earlier step in the tutorial when creating your OAuth credentials, you will create a new OAuthUserConfiguration object. This object is used as the input for the Qt Toolkit OAuthUserConfigurationManager to make use of the Qt WebEngine based login dialog. You will then use an instance of the Portal class to access secure services on your portal.

1. In the setupViewpoint function, add the following code to create a OAuthUserConfiguration object. Replace the "REDIRECT_URL" and "CLIENT_ID" placeholders strings (created earlier in this tutorial in the section Create OAuth credentials for user authentication).

   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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   void Display_a_map::setupViewpoint()
   {
   
       const Point center(-118.80543, 34.02700, SpatialReference::wgs84());
       const Viewpoint viewpoint(center, 100000.0);
       m_mapView->setViewpointAsync(viewpoint);
   
       // Define the Redirect URL string obtained when creating the OAuth credentials.
       // TODO: You need to replace the "REDIRECT_URL" with your own valid string,
       // ex: "urn:ietf:wg:oauth:2.0:oob"
       const auto qStringRedirectUrl = QString{"REDIRECT_URL"};
   
       // Define the URL of the portal to authenticate with.
       const QUrl qUrlPortal = QUrl{"https://www.arcgis.com/"};
   
       // Define a unique identifier associated with an application registered with the
       // portal that assists with client/server OAuth authentication.
       // TODO: You need to replace the "CLIENT_ID" with your own valid string.
       const QString qStringClientId = QString{"CLIENT_ID"};
   
       // Create a new OAuth user configuration using: the Url to ArcGIS online, the Client ID
       // string, and the Redirect Url string.
       auto* oAuthUserConfiguration = new OAuthUserConfiguration(qUrlPortal, qStringClientId,
                                                                 qStringRedirectUrl, this);
   
       // Call the Toolkit's OAuthUserConfigurationManager static `addConfiguration`
       // method to use the OAuth dialog. This will require the input of a valid username/password.
       Toolkit::OAuthUserConfigurationManager::addConfiguration(oAuthUserConfiguration);
   

2. Now add code to create a Portal that will use the boolean true which forces the login to occur 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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
       // Call the Toolkit's OAuthUserConfigurationManager static `addConfiguration`
       // method to use the OAuth dialog. This will require the input of a valid username/password.
       Toolkit::OAuthUserConfigurationManager::addConfiguration(oAuthUserConfiguration);
   
       // Create a new portal using the boolean `true` which forces the login to occur.
       constexpr auto loginRequired = true;
       Portal* portal = new Portal(loginRequired, 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. Add code to 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
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
       // Create a new portal using the boolean `true` which forces the login to occur.
       constexpr auto loginRequired = true;
       Portal* portal = new Portal(loginRequired, this);
   
       // Create a new portal item using the inputs of: a portal and the String ID for the
       // ArcGIS World Traffic service. This causes the OAuth challenge of occur.
       PortalItem* portalItem = new PortalItem(portal, "ff11eb5b930b4fabba15c47feb130de4", this);
   
       // Create a new ArcGIS map image layer using the input of the portal item.
       ArcGISMapImageLayer* arcGISMapImageLayer = new ArcGISMapImageLayer(portalItem, this);
   
       // Append the traffic layer to the map's data layer collection.
       m_map->operationalLayers()->append(arcGISMapImageLayer);
   

   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 Authenticator 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

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