Authentication using OAuth

    TIP

    For a custom web-service you could also use the standard HTTP authentication for example by using the username and password in the get method (e.g. xhr.open(verb, url, true, username, password))

    OAuth is currently not part of a QML/JS API. So you would need to write some C++ code and export the authentication to QML/JS. Another issue would be the secure storage of the access token.

    Here are some links which we find useful:

    In this section, we will go through an example of OAuth integration using the Spotify API (opens new window). This example uses a combination of C++ classes and QML/JS. To discover more on this integration, please refer to Chapter 16.

    This application’s goal is to retrieve the top ten favourite artists of the authenticated user.

    First, you will need to create a dedicated app on the .

    Once your app is created, you’ll receive two keys: a client id and a client secret.

    image

    1. The application connects to the Spotify API, which in turns requests the user to authorize it;
    2. If authorized, the application displays the list of the top ten favourite artists of the user.

    Let’s start with the first step:

    When the application starts, we will first import a custom library, Spotify, that defines a SpotifyAPI component (we’ll come to that later).

    1. import Spotify

    Once the application has been loaded, this SpotifyAPI component will request an authorization to Spotify:

    1. Component.onCompleted: {
    2.     spotifyApi.setCredentials("CLIENT_ID", "CLIENT_SECRET")
    3.     spotifyApi.authorize()
    4. }

    TIP

    Please note that for security reasons, the API credentials should never be put directly into a QML file!

    Until the authorization is provided, a busy indicator will be displayed in the center of the app:

    1. BusyIndicator {
    2.     visible: !spotifyApi.isAuthenticated
    3.     anchors.centerIn: parent
    4. }

    The next step happens when the authorization has been granted. To display the list of artists, we will use the Model/View/Delegate pattern:

    1.     SpotifyModel {
    2.         id: spotifyModel
    3.         spotifyApi: spotifyApi
    4.     }
    6.     ListView {
    7.         visible: spotifyApi.isAuthenticated
    8.         width: parent.width
    9.         height: parent.height
    10.         model: spotifyModel
    11.         delegate: Pane {
    12.             topPadding: 0
    13.             Column {
    14.                 width: 300
    15.                 spacing: 10
    17.                 Rectangle {
    18.                     height: 1
    19.                     width: parent.width
    20.                     color: model.index > 0 ? "#3d3d3d" : "transparent"
    21.                 }
    23.                 Row {
    24.                     spacing: 10
    26.                     Item {
    27.                         width: 20
    28.                         height: width
    30.                         Rectangle {
    31.                             width: 20
    32.                             height: 20
    33.                             anchors.top: parent.top
    34.                             anchors.right: parent.right
    35.                             color: "black"
    37.                             Label {
    38.                                 anchors.centerIn: parent
    39.                                 font.pointSize: 16
    40.                                 text: model.index + 1
    41.                                 color: "white"
    42.                             }
    43.                         }
    44.                     }
    46.                     Image {
    47.                         width: 80
    48.                         height: width
    49.                         source: model.imageURL
    50.                         fillMode: Image.PreserveAspectFit
    51.                     }
    53.                     Column {
    54.                         Label { text: model.name; font.pointSize: 16; font.bold: true }
    55.                         Label { text: "Followers: " + model.followersCount }
    56.                     }
    57.                 }
    58.             }
    59.         }
    60.     }
    61. }

    The model SpotifyModel is defined in the Spotify library. To work properly, it needs a SpotifyAPI:

    1. SpotifyModel {
    2.     id: spotifyModel
    3.     spotifyApi: spotifyApi
    4. }

    The ListView displays a vertical list of artists. An artist is represented by a name, an image and the total count of followers.

    Let’s now get a bit deeper into the authentication flow. We’ll focus on the SpotifyAPI class, a QML_ELEMENT defined on the C++ side.

    1. #ifndef SPOTIFYAPI_H
    2. #define SPOTIFYAPI_H
    4. #include <QtCore>
    5. #include <QtNetwork>
    6. #include <QtQml/qqml.h>
    8. #include <QOAuth2AuthorizationCodeFlow>
    10. class SpotifyAPI: public QObject
    11. {
    12.     Q_OBJECT
    13.     QML_ELEMENT
    15.     Q_PROPERTY(bool isAuthenticated READ isAuthenticated WRITE setAuthenticated NOTIFY isAuthenticatedChanged)
    17. public:
    18.     SpotifyAPI(QObject *parent = nullptr);
    20.     void setAuthenticated(bool isAuthenticated) {
    21.         if (m_isAuthenticated != isAuthenticated) {
    22.             m_isAuthenticated = isAuthenticated;
    23.             emit isAuthenticatedChanged();
    24.         }
    25.     }
    27.     bool isAuthenticated() const {
    28.         return m_isAuthenticated;
    29.     }
    31.     QNetworkReply* getTopArtists();
    33. public slots:
    34.     void setCredentials(const QString& clientId, const QString& clientSecret);
    35.     void authorize();
    37. signals:
    38.     void isAuthenticatedChanged();
    40.     QOAuth2AuthorizationCodeFlow m_oauth2;
    41.     bool m_isAuthenticated;
    42. };
    44. #endif // SPOTIFYAPI_H

    First, we’ll import the class. This class is a part of the QtNetworkAuth module, which contains various implementations of OAuth.

    1. #include <QOAuth2AuthorizationCodeFlow>

    Our class, SpotifyAPI, will define a isAuthenticated property:

    The two public slots that we used in the QML files:

    1. void setCredentials(const QString& clientId, const QString& clientSecret);
    2. void authorize();

    And a private member representing the authentication flow:

    1. QOAuth2AuthorizationCodeFlow m_oauth2;
    1. #include "spotifyapi.h"
    3. #include <QtGui>
    4. #include <QtCore>
    5. #include <QtNetworkAuth>
    7. SpotifyAPI::SpotifyAPI(QObject *parent): QObject(parent), m_isAuthenticated(false) {
    8.     m_oauth2.setAuthorizationUrl(QUrl("https://accounts.spotify.com/authorize"));
    9.     m_oauth2.setAccessTokenUrl(QUrl("https://accounts.spotify.com/api/token"));
    10.     m_oauth2.setScope("user-top-read");
    12.     m_oauth2.setReplyHandler(new QOAuthHttpServerReplyHandler(8000, this));
    13.     m_oauth2.setModifyParametersFunction([&](QAbstractOAuth::Stage stage, QMultiMap<QString, QVariant> *parameters) {
    14.         if(stage == QAbstractOAuth::Stage::RequestingAuthorization) {
    15.             parameters->insert("duration", "permanent");
    16.         }
    17.     });
    19.     connect(&m_oauth2, &QOAuth2AuthorizationCodeFlow::authorizeWithBrowser, &QDesktopServices::openUrl);
    20.     connect(&m_oauth2, &QOAuth2AuthorizationCodeFlow::statusChanged, [=](QAbstractOAuth::Status status) {
    21.         if (status == QAbstractOAuth::Status::Granted) {
    22.             setAuthenticated(true);
    23.         } else {
    24.             setAuthenticated(false);
    25.         }
    26.     });
    27. }
    29. void SpotifyAPI::setCredentials(const QString& clientId, const QString& clientSecret) {
    30.     m_oauth2.setClientIdentifier(clientId);
    31.     m_oauth2.setClientIdentifierSharedKey(clientSecret);
    32. }
    34. void SpotifyAPI::authorize() {
    35.     m_oauth2.grant();
    36. }
    38. QNetworkReply* SpotifyAPI::getTopArtists() {
    39.     return m_oauth2.get(QUrl("https://api.spotify.com/v1/me/top/artists?limit=10"));
    40. }

    The constructor task mainly consists in configuring the authentication flow. First, we define the Spotify API routes that will serve as authenticators.

    1. m_oauth2.setAuthorizationUrl(QUrl("https://accounts.spotify.com/authorize"));
    2. m_oauth2.setAccessTokenUrl(QUrl("https://accounts.spotify.com/api/token"));

    We then select the scope (= the Spotify authorizations) that we want to use:

    1. m_oauth2.setScope("user-top-read");

    Since OAuth is a two-way communication process, we instanciate a dedicated local server to handle the replies:

    1. m_oauth2.setReplyHandler(new QOAuthHttpServerReplyHandler(8000, this));

    Finally, we configure two signals and slots.

    1. connect(&m_oauth2, &QOAuth2AuthorizationCodeFlow::authorizeWithBrowser, &QDesktopServices::openUrl);
    2. connect(&m_oauth2, &QOAuth2AuthorizationCodeFlow::statusChanged, [=](QAbstractOAuth::Status status) { /* ... */ })

    The first one configures the authorization to happen within a web-browser (through &QDesktopServices::openUrl), while the second makes sure that we are notified when the authorization process has been completed.

    The authorize() method is only a placeholder for calling the underlying grant() method of the authentication flow. This is the method that triggers the process.

    Finally, the getTopArtists() calls the web api using the authorization context provided by the m_oauth2 network access manager.

    1. QNetworkReply* SpotifyAPI::getTopArtists() {
    2.     return m_oauth2.get(QUrl("https://api.spotify.com/v1/me/top/artists?limit=10"));
    3. }

    This class is a QML_ELEMENT that subclasses QAbstractListModel to represent our list of artists. It relies on SpotifyAPI to gather the artists from the remote endpoint.

    1. #ifndef SPOTIFYMODEL_H
    2. #define SPOTIFYMODEL_H
    4. #include <QtCore>
    6. #include "spotifyapi.h"
    8. QT_FORWARD_DECLARE_CLASS(QNetworkReply)
    10. class SpotifyModel : public QAbstractListModel
    11. {
    12.     Q_OBJECT
    13.     QML_ELEMENT
    15.     Q_PROPERTY(SpotifyAPI* spotifyApi READ spotifyApi WRITE setSpotifyApi NOTIFY spotifyApiChanged)
    17. public:
    18.     SpotifyModel(QObject *parent = nullptr);
    20.     void setSpotifyApi(SpotifyAPI* spotifyApi) {
    21.         if (m_spotifyApi != spotifyApi) {
    22.             m_spotifyApi = spotifyApi;
    23.             emit spotifyApiChanged();
    24.         }
    25.     }
    27.     SpotifyAPI* spotifyApi() const {
    28.         return m_spotifyApi;
    29.     }
    31.     enum {
    32.         NameRole = Qt::UserRole + 1,
    33.         ImageURLRole,
    34.         FollowersCountRole,
    35.         HrefRole,
    36.     };
    38.     QHash<int, QByteArray> roleNames() const override;
    40.     int rowCount(const QModelIndex &parent) const override;
    41.     int columnCount(const QModelIndex &parent) const override;
    42.     QVariant data(const QModelIndex &index, int role) const override;
    44. signals:
    45.     void spotifyApiChanged();
    46.     void error(const QString &errorString);
    48. public slots:
    49.     void update();
    51. private:
    52.     QPointer<SpotifyAPI> m_spotifyApi;
    53.     QList<QJsonObject> m_artists;
    54. };
    56. #endif // SPOTIFYMODEL_H

    This class defines a spotifyApi property:

    1. Q_PROPERTY(SpotifyAPI* spotifyApi READ spotifyApi WRITE setSpotifyApi NOTIFY spotifyApiChanged)

    An enumeration of Roles (as per QAbstractListModel):

    1. enum {
    2.     NameRole = Qt::UserRole + 1,    // The artist's name
    3.     ImageURLRole,                   // The artist's image
    4.     FollowersCountRole,             // The artist's followers count
    5.     HrefRole,                       // The link to the artist's page
    6. };

    A slot to trigger the refresh of the artists list:

    2.     void update();

    And, of course, the list of artists, represented as JSON objects:

    1. public slots:

    On the implementation side, we have:

    1. #include "spotifymodel.h"
    3. #include <QtCore>
    4. #include <QtNetwork>
    6. SpotifyModel::SpotifyModel(QObject *parent): QAbstractListModel(parent) {}
    8. QHash<int, QByteArray> SpotifyModel::roleNames() const {
    9.     static const QHash<int, QByteArray> names {
    10.         { NameRole, "name" },
    11.         { ImageURLRole, "imageURL" },
    12.         { FollowersCountRole, "followersCount" },
    13.         { HrefRole, "href" },
    14.     };
    15.     return names;
    16. }
    18. int SpotifyModel::rowCount(const QModelIndex &parent) const {
    19.     Q_UNUSED(parent);
    20.     return m_artists.size();
    21. }
    23. int SpotifyModel::columnCount(const QModelIndex &parent) const {
    24.     Q_UNUSED(parent);
    25.     return m_artists.size() ? 1 : 0;
    26. }
    28. QVariant SpotifyModel::data(const QModelIndex &index, int role) const {
    29.     Q_UNUSED(role);
    30.     if (!index.isValid())
    31.         return QVariant();
    33.     if (role == Qt::DisplayRole || role == NameRole) {
    34.         return m_artists.at(index.row()).value("name").toString();
    35.     }
    37.     if (role == ImageURLRole) {
    38.         const auto artistObject = m_artists.at(index.row());
    39.         const auto imagesValue = artistObject.value("images");
    41.         Q_ASSERT(imagesValue.isArray());
    42.         const auto imagesArray = imagesValue.toArray();
    43.         if (imagesArray.isEmpty())
    44.             return "";
    46.         const auto imageValue = imagesArray.at(0).toObject();
    47.         return imageValue.value("url").toString();
    48.     }
    50.     if (role == FollowersCountRole) {
    51.         const auto artistObject = m_artists.at(index.row());
    52.         const auto followersValue = artistObject.value("followers").toObject();
    53.         return followersValue.value("total").toInt();
    54.     }
    56.     if (role == HrefRole) {
    57.         return m_artists.at(index.row()).value("href").toString();
    58.     }
    60.     return QVariant();
    61. }
    63. void SpotifyModel::update() {
    64.     if (m_spotifyApi == nullptr) {
    65.         emit error("SpotifyModel::error: SpotifyApi is not set.");
    66.         return;
    67.     }
    69.     auto reply = m_spotifyApi->getTopArtists();
    71.     connect(reply, &QNetworkReply::finished, [=]() {
    72.         reply->deleteLater();
    73.         if (reply->error() != QNetworkReply::NoError) {
    74.             emit error(reply->errorString());
    75.             return;
    76.         }
    78.         const auto json = reply->readAll();
    79.         const auto document = QJsonDocument::fromJson(json);
    81.         Q_ASSERT(document.isObject());
    82.         const auto rootObject = document.object();
    83.         const auto artistsValue = rootObject.value("items");
    85.         Q_ASSERT(artistsValue.isArray());
    86.         const auto artistsArray = artistsValue.toArray();
    87.         if (artistsArray.isEmpty())
    88.             return;
    90.         beginResetModel();
    91.         m_artists.clear();
    92.         for (const auto artistValue : qAsConst(artistsArray)) {
    93.             Q_ASSERT(artistValue.isObject());
    94.             m_artists.append(artistValue.toObject());
    95.         }
    96.         endResetModel();
    97.     });
    98. }

    The update() method calls the getTopArtists() method and handle its reply by extracting the individual items from the JSON document and refreshing the list of artists within the model.

    1.     if (role == Qt::DisplayRole || role == NameRole) {
    2.         return m_artists.at(index.row()).value("name").toString();
    3.     }
    5.     if (role == ImageURLRole) {
    6.         const auto artistObject = m_artists.at(index.row());
    7.         const auto imagesValue = artistObject.value("images");
    9.         Q_ASSERT(imagesValue.isArray());
    10.         const auto imagesArray = imagesValue.toArray();
    11.         if (imagesArray.isEmpty())
    12.             return "";
    14.         const auto imageValue = imagesArray.at(0).toObject();
    15.         return imageValue.value("url").toString();
    16.     }
    18.     if (role == FollowersCountRole) {
    19.         const auto artistObject = m_artists.at(index.row());
    20.         const auto followersValue = artistObject.value("followers").toObject();
    21.         return followersValue.value("total").toInt();
    22.     }
    24.     if (role == HrefRole) {
    25.         return m_artists.at(index.row()).value("href").toString();