Add authentication to your Apache Cordova app

In this tutorial, you add Microsoft authentication to the quickstart project using Microsoft Entra ID. Before completing this tutorial, ensure you've created the project and enabled offline sync.

Configure your backend for authentication

To configure your backend for authentication, you must:

• Create an app registration.
• Configure Azure App Service Authentication and Authorization.
• Add your app to the Allowed External Redirect URLs.

During this tutorial, we'll configure your app to use Microsoft authentication. A Microsoft Entra tenant has been configured automatically in your Azure subscription. You can use Microsoft Entra ID to configure Microsoft authentication.

You need the backend URL of the Azure Mobile Apps service that was provided when you provisioned the service.

Create an app registration

1. Sign in to the Azure portal.
2. Select Microsoft Entra ID > App registrations > New registration.
3. In the Register an application page, enter zumoquickstart in the Name field.
4. Under Supported account types, select Accounts in any organizational directory (Any Microsoft Entra directory - multitenant) and personal Microsoft accounts (e.g. Skype, Xbox).
5. In Redirect URI, select Web and type <backend-url>/.auth/login/aad/callback. For example, if your backend URL is https://zumo-abcd1234.azurewebsites.net, you would enter https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
6. Press the Register button at the bottom of the form.
7. Copy the Application (client) ID.
8. From the left pane, select Certificates & secrets > New client secret.
9. Enter a suitable description, select a validity duration, then select Add.
10. Copy the secret on the Certificates & secrets page. The value isn't displayed again.
11. Select Authentication.
12. Under Implicit grant and hybrid flows, enable ID tokens.
13. Press Save at the top of the page.

Configure Azure App Service Authentication and Authorization

1. In the Azure portal, select All Resources, then your App Service.

2. Select Settings > Authentication.

3. Press Add identity provider.

4. Select Microsoft as the identity provider.

   • For App registration type, select Provide the details of an existing app registration.
   • Paste the values you copied earlier into the Application (client) ID and Client secret boxes.
   • For Issuer URL, enter https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. This URL is the "magic tenant url" for Microsoft logins.
   • For Restrict access, select Require authentication.
   • For Unauthenticated request, select HTTP 401 Unauthorized.

5. Press Add.

6. Once the authentication screen returns, press Edit next to Authentication settings.

7. In the Allowed external redirect URLs box, enter zumoquickstart://easyauth.callback.

8. Press Save.

Step 10 requires that all users are authenticated before accessing your backend. You can provide fine-grained controls by adding code to your backend.

DID YOU KNOW? You can also allow users with organizational accounts in Microsoft Entra ID, Facebook, Google, Twitter, or any OpenID Connect compatible provider. Follow the instructions in the Azure App Service documentation.

Test that authentication is being requested

• Run the app using cordova run android
• Verify that an unhandled exception with a status code of 401 (Unauthorized) is raised after the app starts.

Add authentication to the app

To add authentication via the built-in provider, you must:

• Add the authentication provider to the list of known good sources.
• Call the authentication provider before accessing data.

Update the Content Security Policy

Each Apache Cordova app declares their known good sources via a Content-Security-Policy header. Each supported provider has an OAuth host that needs to be added:

Edit www/index.html; add the OAuth host for Microsoft Entra ID as follows:

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self' 
    data: gap: https://login.microsoftonline.com https://ZUMOAPPNAME.azurewebsites.net; 
    style-src 'self'; media-src *;">

The content is multiple lines for readability. Place all code on the same line.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://login.microsoftonline.com https://ZUMOAPPNAME.azurewebsites.net; style-src 'self'; media-src *;">

You have already replaced ZUMOAPPNAME with the name of your app.

Call the authentication provider

Edit www/js/index.js. Replace the setup() method with the following code:

function setup() {
    client.login('aad').then(function () {
        // ORIGINAL CONTENTS OF FUNCTION
        todoTable = client.getSyncTable('todoitem');
        refreshDisplay();
        addItemEl.addEventListener('submit', addItemHandler);
        refreshButtonEl.addEventListener('click', refreshDisplay);
        // END OF ORIGINAL CONTENTS OF FUNCTION
    });
}

Test the app

Run the following command:

cordova run android

Once the initial startup is complete, you'll be prompted to sign in with your Microsoft credentials. Once complete, you can add and delete items from the list.

Deleting the resources

Now you've completed the quickstart tutorial, you can delete the resources with az group delete -n zumo-quickstart. You can also delete the global app registration used for authentication through the portal.

Next steps

Take a look at the HOW TO sections:

• Server (Node.js)
• Server (ASP.NET Framework)
• Apache Cordova Client

You can also do a Quick Start for another platform using the same service:

• Windows (UWP)
• Windows (WPF)
• Xamarin.Android
• Xamarin.Forms
• Xamarin.iOS