Setting up Microsoft (OAuth2) social login

📘

Tenant-Level Social Login

This guide outlines the process for implementing social login at the Application Level. The steps are consistent when configuring social login at the Tenant Level, with the only difference occurring in the Wristband dashboard. In this case, you would select a specific tenant for configuration and override purposes.


Setting Up a Microsoft OAuth2 Integration

This step-by-step walkthrough details how a developer can set up a Microsoft social login integration in Wristband.

1. Locate Your External IDP Callback URL

  • In the Wristband dashboard, enter Application View for the application you wish to establish a Microsoft integration.
  • Navigate to the Identity Providers > Social menu in the side navigation.
  • After landing on the Social Identity Providers page, select the Microsoft provider icon at the top.

Here, you will see a "Redirect URL" field towards the bottom of the form. Click the copy button in order to copy that value off somewhere, as you will need it in the steps below.

Redirect URL

2. Sign Up/Login to Your Account

Before completing the configuration of the Microsoft Social Login Identity Provider in the Wristband dashboard, head over to the Microsoft Azure Console (make sure you have an Azure account registered):

https://azure.microsoft.com/en-us/free

3. Register a New Application

Once inside the Azure dashboard, search for the Microsoft Entra ID service in the navigation bar search.

Home Page

Microsoft Tenants

When you choose the Entra ID service, Microsoft will direct you to the Overview Page of your default tenant. If necessary, you can also create and switch to another tenant.

After reaching the Entra ID Overview page for your tenant, click on the "App registrations" menu in the side navigation on the left side of the screen. Then, click the "New registration" button at the top of the screen to start creating an Entra ID application.

App Registrations

On the "Register an application" page, make sure the following fields are filled out:

  • Name: You can give this whatever value you deem appropriate.
  • Supported account types: Depending on your requirements, you should only choose one the following options (Default Directory only - Single tenant is meant for Enterprise SSO):
    • Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant)
    • Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)
    • Personal Microsoft accounts only
  • Redirect URI: Here, select the Web platform option and paste in the External IDP Callback URL value you copied from the Wristband dashboard during step 1.
Register App Form

Now click the "Register" button to complete registration of the new application. From there, Microsoft will take you to that app registration's Overview page.

4. Get the Client Information

On the app registration's Overview page, copy the "Application (client) ID" (which is the Client ID). You will need this in the steps below when creating the External Identity Provider in Wristband.

Client ID

Now click on the "Certificates and secrets" menu in the side navigation on the left side of the screen. In the "Client secrets" tab navigation menu towards the top, click the "New Client Secret" button to start creating a client secret.

Certificates and Secrets Page

In the "Add a client secret" aside, you can provide whatever values you deem appropriate for the form values, though it is recommended to select a larger "Expires" value to avoid having to change secrets too frequently.

Add Secret Form

Now you should see the newly created client secret in the secrets table. Copy the "Value" right away since this value only appears once after creation. You will need this in the steps below when creating the External Identity Provider in Wristband.

Client Secret

You have now configured everything necessary on Microsoft's side for social login integration.

5. Configure the Microsoft IDP in Wristband

Now head back to the Wristband dashboard to the Social Identity Provider Page that you opened in step 1 above. You can now proceed to fill out the form to configure the Microsoft External IDP. Make sure you use the following values:

  • Client ID: This is the Client ID value that you copied in step 4.
  • Client Secret: This is the Client Secret value that you copied in step 4.
  • Supported Account Types: This must match the value of the "Supported account types" you selected in step 3. The values map as follows:
Microsoft ValuesWristband Values
Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant)Accounts in any organization directory
Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)Accounts in any organization directory and personal Microsoft accounts
Personal Microsoft accounts onlyPersonal Microsoft accounts only

By default, the following scopes will always be requested during authorization with Microsoft (additional scopes are optional):

  • email
  • openid
  • profile

Click the "Save" button to finish. Upon saving, the Microsoft External IDP will be in an ENABLED status.

Add External IDP

At this point, the application has successfully completed a Microsoft social login integration. The next time users in this application reach the Tenant-level Login Page, they should see a Microsoft login button (unless Tenant Overrides are enabled for a particular tenant).

Login Page