Add authentication to your Xamarin.iOS app

Article
06/25/2019

Overview

This topic shows you how to authenticate users of an App Service Mobile App from your client application. In this tutorial, you add authentication to the Xamarin.iOS quickstart project using an identity provider that is supported by App Service. After being successfully authenticated and authorized by your Mobile App, the user ID value is displayed and you will be able to access restricted table data.

You must first complete the tutorial Create a Xamarin.iOS app. If you do not use the downloaded quick start server project, you must add the authentication extension package to your project. For more information about server extension packages, see Work with the .NET backend server SDK for Azure Mobile Apps.

Register your app for authentication and configure App Services

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.

Add your app to the Allowed External Redirect URLs

Secure authentication requires that you define a new URL scheme for your app. This allows the authentication system to redirect back to your app once the authentication process is complete. In this tutorial, we use the URL scheme appname throughout. However, you can use any URL scheme you choose. It should be unique to your mobile application. To enable the redirection on the server side:

In the Azure portal, select your App Service.
Click the Authentication / Authorization menu option.
In the Allowed External Redirect URLs, enter url_scheme_of_your_app://easyauth.callback. The url_scheme_of_your_app in this string is the URL Scheme for your mobile application. It should follow normal URL specification for a protocol (use letters and numbers only, and start with a letter). You should make a note of the string that you choose as you will need to adjust your mobile application code with the URL Scheme in several places.
Click OK.
Click Save.

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.

In Visual Studio or Xamarin Studio, run the client project on a device or emulator. Verify that an unhandled exception with a status code of 401 (Unauthorized) is raised after the app starts. The failure is logged to the console of the debugger. So in Visual Studio, you should see the failure in the output window.

This unauthorized failure happens because the app attempts to access your Mobile App backend as an unauthenticated user. The TodoItem table now requires authentication.

Next, you will update the client app to request resources from the Mobile App backend with an authenticated user.

Add authentication to the app

In this section, you will modify the app to display a login screen before displaying data. When the app starts, it will not connect to your App Service and will not display any data. After the first time that the user performs the refresh gesture, the login screen will appear; after successful login the list of todo items will be displayed.

In the client project, open the file QSTodoService.cs and add the following using statement and MobileServiceUser with accessor to the QSTodoService class:
```
using UIKit;

// Logged in user
private MobileServiceUser user;
public MobileServiceUser User { get { return user; } }
```

Add new method named Authenticate to QSTodoService with the following definition:

public async Task Authenticate(UIViewController view)
{
    try
    {
        AppDelegate.ResumeWithURL = url => url.Scheme == "{url_scheme_of_your_app}" && client.ResumeWithURL(url);
        user = await client.LoginAsync(view, MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
    }
    catch (Exception ex)
    {
        Console.Error.WriteLine (@"ERROR - AUTHENTICATION FAILED {0}", ex.Message);
    }
}

Note

If you are using an identity provider other than a Facebook, change the value passed to LoginAsync above to one of the following: MicrosoftAccount, Twitter, Google, or WindowsAzureActiveDirectory.

Open QSTodoListViewController.cs. Modify the method definition of ViewDidLoad removing the call to RefreshAsync() near the end:

public override async void ViewDidLoad ()
{
    base.ViewDidLoad ();

    todoService = QSTodoService.DefaultService;
    await todoService.InitializeStoreAsync();

    RefreshControl.ValueChanged += async (sender, e) => {
        await RefreshAsync();
    }

    // Comment out the call to RefreshAsync
    // await RefreshAsync();
}

Modify the method RefreshAsync to authenticate if the User property is null. Add the following code at the top of the method definition:

// start of RefreshAsync method
if (todoService.User == null) {
    await QSTodoService.DefaultService.Authenticate(this);
    if (todoService.User == null) {
        Console.WriteLine("couldn't login!!");
        return;
    }
}
// rest of RefreshAsync method

Open AppDelegate.cs, add the following method:

public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
{
    if (client.ResumeWithURL(app, url, options))
        return true;
    return base.OpenUrl(app, url, options);
}

Open Info.plist file, navigate to URL Types in the Advanced section. Now configure the Identifier and the URL Schemes of your URL Type and click Add URL Type. URL Schemes should be the same as your {url_scheme_of_your_app}.
In Visual Studio, connected to your Mac Host or Visual Studio for Mac, run the client project targeting a device or emulator. Verify that the app displays no data.

Perform the refresh gesture by pulling down the list of items, which will cause the login screen to appear. Once you have successfully entered valid credentials, the app will display the list of todo items, and you can make updates to the data.

Share via