Microsoft integration

With this integration you can add Login with Microsoft button to your application. We integrated the authorization code flow.

Pre-config

Before you start, you must register/create your application in the Azure portal. The callback url is the trickiest part. For local tests you can use https://lvh.me:9443/microsoft/callback or https://localtest.me:9443/microsoft/callback (these domains pointed to 127.0.0.1 which will be your local machine). For production, you want to use your own (tutelar) domain (with the /microsoft/callback path).

After you created your new OAuth2 app on the Azure portal, you will need the application (client) ID and clientSecret.

Configuration

You should set the oauth2.microsoft.clientId, oauth2.microsoft.clientSecret and oauth2.microsoft.scopes variables. The first two comes from the pre-config step. The last one is user.read by default, but you can use anything from the official list. (If you use multiple scopes, you need to separate them with , like a,b,c.)

Also you should set the rootUrl correctly (it is needed for the callbacks). And the callback.success and callback.failure to handle redirects correctly.

Furthermore, if you’d like to be able to use the token endpoint for retrieving the user’s access tokens, you should set the oauth2.microsoft.auth to the desired authentication method and set the corresponding configurations as well.

Example

Your frontend is on https://example.com, your tutelar service is on https://auth.example.com.

The rootUrl should be https://auth.example.com. The success url is something like https://example.com/authentication?token=<<TOKEN>> and the failure like https://example.com/authenticationError/<<ERROR>>

Hooks data

The hooks will contain the user profile from https://graph.microsoft.com/v1.0/me.

Getting more data from the API

You can get the user’s access token for Microsoft account by calling the https://lvh.me:9443/microsoft/token?userId=<<USER_ID>> endpoint where the <<USER_ID>> query param is the id found in the JWT provided by the user.

Frontend for registration

Not needed to differentiate your registration and login frontend.

Frontend for login

The easiest way to create a proper button is using an already created lib for it.

If you want to go with minimal HTML:

<a id="microsoft-button" class="btn btn-block btn-social btn-microsoft">
  <i class="fa fa-microsoft"></i> Sign in with Microsoft
</a>

You should add a href="https://auth.example.com/microsoft/login" to the <a> tag too.

Or if you want to go with the official just use that.

Mobile implementation