{"id":27032,"date":"2016-08-11T13:09:28","date_gmt":"2016-08-11T20:09:28","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=27032"},"modified":"2016-08-11T13:09:28","modified_gmt":"2016-08-11T20:09:28","slug":"authenticating-mobile-apps-with-azure-active-directory-b2c","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/authenticating-mobile-apps-with-azure-active-directory-b2c\/","title":{"rendered":"Authenticating Mobile Apps with Azure Active Directory B2C"},"content":{"rendered":"

\t\t\t\tIdentity is a critical component of every mobile app, but it’s also tricky to get right. As developers, we have many different options in terms of authentication. Creating our own identity solution (with username\/password or email\/password combinations) is one approach. However, this also means that we must handle password reset and 2 Factor Authentication (2FA), not to mention ensuring that our solution is securely storing and handling user credentials. Utilizing social accounts has grown in popularity in recent years, but it’s not uncommon for users to not have accounts with the social providers you support; some users are also wary of privacy concerns with granting applications social permissions.<\/p>\n

Azure Active Directory B2C allows developers to authenticate users with a single identity management solution<\/a> that supports both social providers (Facebook, Google, Microsoft accounts, Amazon, LinkedIn) as well as local accounts (username\/password or email\/password combinations). As developers, we can focus on building great cross-platform mobile apps without having to worry about the pains that come with identity management (scalability, sign in, sign up, password reset, 2FA, etc.), while still building a flexible solution that works for all of our users, whether they prefer authenticating with local accounts or social providers.<\/p>\n

In this blog post, you’ll learn how to use Azure Active Directory B2C<\/a> to authenticate users in your mobile apps and even add a cool “advanced” identity management feature like 2FA.<\/p>\n

Creating an Azure AD B2C Tenant<\/h2>\n

Azure Active Directory B2C is completely cloud-based, which allows it to scale to hundreds of millions of consumer identities. To get started, you will need to have an Azure account<\/a>. Azure B2C is currently available free of charge<\/a>, so you shouldn’t incur any costs with using Azure B2C at this time. Once you’ve created an Azure account, we’re ready to get started creating an Azure B2C tenant.<\/p>\n

1. Create an Azure B2C Tenant<\/h4>\n

Visit portal.azure.com<\/a> and click New -> Security + Identity -> Active Directory. A new window will open in the Azure classic portal where we’ll create our Azure B2C tenant.<\/p>\n

\"Creates<\/p>\n

Enter a Name<\/strong>, Domain Name<\/strong>, and Country or Region<\/strong> for your tenant. Be sure to check the option that says This is a B2C directory<\/strong>. Click the checkmark in the lower righthand corner to create your Azure Active Directory B2C tenant.<\/p>\n

Note<\/strong>: Azure B2C is only generally available in North America at this time. For regions outside of North America, check out this blog post on production-scale vs. preview tenants<\/a>.<\/p>\n

You may experience issues creating Azure B2C tenants in countries outside this region.<\/p>\n

\"Create<\/p>\n

When your tenant finishes deployment, click the tenant name, followed by the Configure<\/strong> tab, and click Manage B2C Settings<\/strong>.<\/p>\n

\"Opens<\/p>\n

This will open up the new Azure Portal for easier management of our Azure B2C tenant. Click the pin icon to pin the settings to your Azure Dashboard for easy management.<\/p>\n

\"Pins<\/p>\n

You’ve just created your first Azure AD B2C tenant! At this time, you can use the classic portal to manage users and groups, configure password reset, and enable company branding features. The new Azure Portal can be used for settings management and application creation.<\/p>\n

2. Register Application<\/h4>\n

It’s time to register an application with the tenant we just created! This will allow our application to authenticate users using Azure AD B2C. In the settings for your B2C tenant (which you have pinned to the Azure Dashboard<\/a>), click Settings<\/strong>, Applications<\/strong>, then Add<\/strong>. Enter an Application Name<\/strong>, select Yes<\/strong> for Include Native Client<\/strong>, and click Create<\/strong>.<\/p>\n

\"Create<\/p>\n

After the application is successfully created, click on the app name and copy the Application Id<\/strong> field for later user.<\/p>\n

\"Copy<\/p>\n

3. Create a Sign-Up\/Sign-In Policy<\/h4>\n

Policies in Azure AD B2C describe a consumer identity experience<\/a>, such as sign-up, sign-in, or editing a profile. Each policy type has options that we as developers can configure to achieve our ideal identity experience with options like supported account types, attributes to be collected during sign-up, use of 2FA, login page user interface, as well as the information our stored in authentication tokens for use in our apps. We can create multiple policies, but for this app, we will just create one that handles user sign-up and sign-in flows.<\/p>\n

In the Settings for your Azure AD B2C tenant, click Sign-up or sign-in policies<\/strong>, Add<\/strong>, and enter a Name<\/strong> for the policy.<\/p>\n

\"Add<\/p>\n

For this application, we will be using local accounts to authenticate users. On the Add Policy blade<\/strong>, click Identity providers<\/strong>, select Email sign-up<\/strong>, and click OK<\/strong>. Let’s collect some information from our user at sign-up. Click Select sign-up attributes<\/strong>, select the user information to collect, and click OK<\/strong>.<\/p>\n

\"Select<\/p>\n

We want this information to be available for usage in the app, so we need to click the Select application claims<\/strong> blade, click the information to include in our authentication token, and click OK<\/strong>. One claim you want to be sure to grab is the Object Id<\/code>, as this is the unique identifier for an authenticated user. Try to keep the number of claims minimal, and only select claims that were selected in the sign-up attributes blade. You can always request this information later using the Microsoft Graph API<\/a>.<\/p>\n

Enabling 2 Factor Authentication is as easy as clicking the Multifactor authentication<\/strong> setting and changing the setting to On<\/strong>.<\/p>\n

Click Create<\/strong> and our sign-in or sign-up policy will be created! Be sure to note the name of the policy after creation (e.x.: B2C_1_SignInSignUp). In just a few clicks and without writing any code, we just added identity management to our app, complete with 2FA!<\/p>\n

Authenticating iOS, Android, and Windows Apps with Azure AD B2C<\/h2>\n

Now that all the server-side configuration is completed on our tenant, let’s use Azure AD B2C to authenticate users! For authentication, we will be using a library named Microsoft Authentication Library, or MSAL. This library makes it extremely easy to authenticate users using Azure AD, Azure AD B2C, or Microsoft accounts as identity providers in a single library. If you are familiar with ADAL, MSAL will feel right at home. As a convenience, the MSAL NuGet has been already added to each project in the solution. MSAL does not support Windows Phone 8.1, so PCLs will need to remove this target in order to use MSAL.<\/p>\n

1. Create an Authentication Client<\/h4>\n

Download the starter code<\/a>, which contains some boilerplate code and a login screen, and open App.cs<\/code>. Enter your Client Id<\/strong> and Policy Name<\/strong> from earlier into the corresponding fields. MSAL will use these to provide the correct authentication flow to the user. We have also created a PublicClientApplication<\/code> and passed in our Client Id<\/strong>, which is the main class in MSAL for authenticating users.<\/p>\n

Open up AppDelegate.cs<\/code> in the iOS project and MainActivity.cs<\/code> in the Android project. MSAL requires that we set the PlatformParameters<\/code> property of the PublicClientApplication<\/code> for iOS and Android. This helps to assist the library in presenting a native web view for users to sign-up or sign-in with, and is required<\/strong> when using MSAL.<\/p>\n

2. Authenticate Users<\/h4>\n

Now that we have successfully created an authentication client, let’s use it to log the user in. Open up the LoginPage.xaml.cs<\/code> file. When the user clicks the button to log in, the event handler LoginButton_Clicked<\/code> will execute. Under the comment Step #2<\/strong>, add a call to AcquireTokenAsync<\/code> to authenticate users.<\/p>\n

\/\/ Authenticate users with Microsoft Authentication Library (MSAL).\nvar authenticationResult = await App.AuthenticationClient.AcquireTokenAsync(App.Scopes,\n    \"\",\n    UiOptions.SelectAccount,\n    string.Empty,\n    null,\n    App.Authority,\n    App.SignUpSignInPolicy);\n\/\/ Navigate users into the main portion of our app.\nawait Navigation.PushAsync(new AuthenticationSuccessfulPage(authenticationResult));\n<\/pre>\n
This will present a web view to the user. If the user has an account, he can log in; if not, he can create an account using this flow. It’s worth noting that you don’t have to use a web view for authentication; you may create your own user interface for this flow and pass the information back to MSAL.<\/p>\n
After successful login, users are taken to the main portion of the application, AuthenticationSuccessfulPage<\/code>. Because we are now authenticated, we have access to the authentication token, as well as information like the user id. Let’s display that information to the user by adding the following code under the Step #3<\/strong> comment in AuthenticationSuccessfulPage.xaml.cs<\/code>.<\/p>\n
UserId = $\"User Id: {authenticationResult.User.UniqueId}\";\nExpiresOn = $\"Token Expires {authenticationResult.ExpiresOn.ToString()}\";\n<\/pre>\n
3. Re-authenticate Users Silently<\/h4>\n
Authentication tokens only last for a short period of time, and we want to ensure that users can seamlessly use our application without having to re-authenticate. The MSAL library has a great method named AcquireTokenSilently<\/code>, which will attempt to refresh the user token without requiring the user to log back in. Under the Step #4 comment in the AuthenticationSuccesfulPage.xaml.cs<\/code> file, add the following code to refresh the user’s token.<\/p>\n
await App.AuthenticationClient.AcquireTokenSilentAsync(App.Scopes, \n    string.Empty,\n    App.Authority, \n    App.SignUpSignInPolicy, \n    false);\n<\/pre>\n
In the event that we’re unable to successfully refresh the token, we present the LoginPage<\/code> to the user to re-authenticate.<\/p>\n
Build the app, and you’ll see a rich sign up and sign in experience with local accounts powered by Azure Active Directory B2C. Users signing up are prompted to verify their email address with a code, create strong passwords, enter information we asked for in our policy, and even verify their phone number for 2FA. Users signing in will be required to enter their credentials as well as enter the code that Azure Active Directory B2C automatically texts the user to authenticate with for maximum security, without any additional effort required from you.<\/p>\n
 <\/p>\n\n\n\n