Social Login - KeithWilliamsGMIT/4th-Year-Mobile-Application-Development-Project GitHub Wiki

Overview

The client application will allow users to login using different identity providers. This will be achieved using the OAuth Protocol. There are two separate approaches which you can take when setting up authentication for an Azure mobile app. They are server-managed and client-managed authentication. While client-managed authentication provides a better user experience, it also takes longer to implement and so I decided to start with the server-managed approach and then upgrade to client-managed authentication if there was time. The server-managed authentication flow displays the provider's sign-in interface in the app.

Create a Mobile App Service

The first step is to setup a mobile app service on Azure using the following steps.

  1. Log into the Azure portal.
  2. Click App Services -> Add -> search and select Mobile App.
  3. Click the Create button.
  4. Enter the application name.

Configure Identity Provider

This section outlines the steps taken in order to configure an identity provider to handle the authentication for the application. Google and Microsoft are used in this application as it aims to be published on both the Play Store and Windows Store.

Create a Google APIS Project

  1. Log into the Azure portal.
  2. Navigate to the mobile app created above and copy the URL.
  3. Navigate to the Google apis website and login.
  4. Click Create Project, provide a Project name, then click Create.
  5. Under Social APIs click Google+ API and then Enable.
  6. In the left navigation, Credentials > OAuth consent screen.
  7. Select your Email address, enter a Product Name, and click Save.
  8. In the Credentials tab, click Create credentials > OAuth client ID, then select Web application.
  9. Paste the app service URL copied earlier into Authorized JavaScript Origins
  10. Paste your redirect URI into Authorized Redirect URI. (https://<app-service-url>/.auth/login/google/callback)
  11. Click Create and note the values of the client ID and client secret.

Register your app with Microsoft Account

  1. Log on to the Azure portal.
  2. Navigate to the mobile app created above and copy the URL.
  3. Navigate to the My Applications page in the Microsoft Account Developer Center.
  4. Log on with your Microsoft account, if required.
  5. Click Add an app and type an application name.
  6. Click Create application.
  7. Note the Application ID for later use.
  8. Under "Platforms", click Add Platform and select "Web".
  9. Under "Redirect URIs", supply the endpoint for your application (https://<app-service-url>/.auth/login/microsoftaccount/callback).
  10. Click Save.
  11. Under "Application Secrets", click Generate New Password.
  12. Note the password for later use.

Note that the steps for configuring each identity provider are very similar.

Mobile App Authentication/Authorization

Finally, we must use the values we noted above to allow these identity providers to authenticate users of the mobile app service.

  1. In the Azure portal, navigate to your application.
  2. Click Settings, and then Authentication/Authorization.
  3. If the Authentication/Authorization feature is not enabled, turn the switch to On.
  4. Click Google and paste in the App ID and App Secret values.
  5. Click OK.
  6. Click Save.
  7. Repeat steps 4, 5 and 6 for Microsoft, pasting in the Application ID and password values.

Now the mobile app service is configured to use Google an an identity provider for authentication. The next step is to configure the Xamarin Forms application to login using Google.

References