Add authentication to your Apache Cordova app

Article
06/25/2019

Summary

In this tutorial, you add authentication to the todolist quickstart project on Apache Cordova using a supported identity provider. This tutorial is based on the Get started with Mobile Apps tutorial, which you must complete first.

Register your app for authentication and configure the App Service

First, you need to register your app at an identity provider's site, and then you will set the provider-generated credentials in the Mobile Apps back end.

Configure your preferred identity provider by following the provider-specific instructions:
Repeat the previous steps for each provider you want to support in your app.

Watch a video showing similar steps

Restrict permissions to authenticated users

By default, APIs in a Mobile Apps back end can be invoked anonymously. Next, you need to restrict access to only authenticated clients.

Node.js back end (via the Azure portal) :

In your Mobile Apps settings, click Easy Tables and select your table. Click Change permissions, select Authenticated access only for all permissions, and then click Save.
.NET back end (C#):

In the server project, navigate to Controllers > TodoItemController.cs. Add the [Authorize] attribute to the TodoItemController class, as follows. To restrict access only to specific methods, you can also apply this attribute just to those methods instead of the class. Republish the server project.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Node.js backend (via Node.js code) :

To require authentication for table access, add the following line to the Node.js server script:
```
  table.access = 'authenticated';
```
For more details, see How to: Require authentication for access to tables. To learn how to download the quickstart code project from your site, see How to: Download the Node.js backend quickstart code project using Git.

Now, you can verify that anonymous access to your backend has been disabled. In Visual Studio:

Open the project that you created when you completed the tutorial Get started with Mobile Apps.
Run your application in the Google Android Emulator.
Verify that an Unexpected Connection Failure is shown after the app starts.

Next, update the app to authenticate users before requesting resources from the Mobile App backend.

Add authentication to the app

Open your project in Visual Studio, then open the www/index.html file for editing.

Locate the Content-Security-Policy meta tag in the head section. Add the OAuth host to the list of allowed sources.

Provider	SDK Provider Name	OAuth Host
Azure Active Directory	aad	https://login.microsoftonline.com
Facebook	facebook	https://www.facebook.com
Google	google	https://accounts.google.com
Microsoft	microsoftaccount	https://login.live.com
Twitter	twitter	https://api.twitter.com

An example Content-Security-Policy (implemented for Azure Active Directory) is as follows:

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

Replace https://login.microsoftonline.com with the OAuth host from the preceding table. For more information about the content-security-policy meta tag, see the Content-Security-Policy documentation.

Some authentication providers do not require Content-Security-Policy changes when used on appropriate mobile devices. For example, no Content-Security-Policy changes are required when using Google authentication on an Android device.

Open the www/js/index.js file for editing, locate the onDeviceReady() method, and under the client creation code add the following code:

 // Login to the service
 client.login('SDK_Provider_Name')
     .then(function () {

         // BEGINNING OF ORIGINAL CODE

         // Create a table reference
         todoItemTable = client.getTable('todoitem');

         // Refresh the todoItems
         refreshDisplay();

         // Wire up the UI Event Handler for the Add Item
         $('#add-item').submit(addItemHandler);
         $('#refresh').on('click', refreshDisplay);

         // END OF ORIGINAL CODE

     }, handleError);

This code replaces the existing code that creates the table reference and refreshes the UI.

The login() method starts authentication with the provider. The login() method is an async function that returns a JavaScript Promise. The rest of the initialization is placed inside the promise response so that it is not executed until the login() method completes.

In the code that you just added, replace SDK_Provider_Name with the name of your login provider. For example, for Azure Active Directory, use client.login('aad').
Run your project. When the project has finished initializing, your application shows the OAuth login page for the chosen authentication provider.

Next Steps

Learn more About Authentication with Azure App Service.
Continue the tutorial by adding Push Notifications to your Apache Cordova app.

Learn how to use the SDKs.

Share via