How to set attributes of Azure Active Directory application for an app using JavaScript to authenticate users

The ‘implicit grant type’ is one of the several grant types of ‘The OAuth 2.0 Authorization Framework‘ which Azure Active Directory endpoint supports.
An application requests an access token to Azure Active Directory endpoint using any grant type of the four types. The article ‘Create Azure Active Directory application’ described the differences between the types.
The ‘implicit grant type’ omits a broker credentials such as an authorization code, because it is designed for accessing from JavaScript such as single page application(Henceforth called SPA).
This article describes how to set attributes of the Azure Active Directory application for using ‘implicit grant type’ to acquire token from JavaScript of a client application. Then describes how to create an application using Microsoft Authentication Library (Hereinafter referred to as ‘MSAL’).

・Set Azure Active Directory application to allow implicit grant flow

The article ‘Create Azure Active Directory application‘ described how to create Azure Active Directory application. And the article ‘Preparing to create the app using programmable authentication flow‘ describes how to set attributes of the Azure Active Directory application for several permissions. Please refer to these articles if you need them.

To be available implicit grant flow of Azure Active Directory application, open the Microsoft Azure portal, then select [Azure Active Directory] – [App registrations] – (select target application) – [Authentication] – ‘Implicit grant’ section, and check [Access tokens] and [ID tokens] to on. Press [Save] button at last.

ID Token is provided by the Open ID Connect identity layer above the OAuth 2.0 protocol of authentication flow of Azure Active Directory endpoint. It is able to use to verify destination of authenticating identity if you want.

Azure Active Directory endpoint responds it as the JWT format, so you can use the following code to check.

using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.Text;
using System.Text.Json;
using System.Linq;

public string ReadJwt(string jwt, string payloadKey = "") 
{
    var result = string.Empty;
    if (jwt.Split('.').Count() != 3) return result;
    var tokenType = Base64UrlEncoder.Decode(jwt.Split('.').FirstOrDefault());
    var typeElement = new JsonElement();
    if(JsonDocument.Parse(tokenType).RootElement.TryGetProperty("typ",out typeElement))
    {
        if (typeElement.GetString() == "JWT")
        {
            var token = new JwtSecurityTokenHandler().ReadJwtToken(jwt);
            if (string.IsNullOrEmpty(payloadKey))
            {
                if (token.Payload.Iss.Contains("sts.windows.net"))
                {
                    result = "microsoft";
                }
            }
            else
            {
                result = token.Payload[payloadKey].ToString();
            }
        }
    }
    return result;
}

This code checks an issuer. If the value of the iss attribute is the security token service of Microsoft, it has provided by the destination that I request. It guarantees that the token is not forged, and it has attributes you expect as ID Token format Microsoft provides.

Access Token provided as JWT format that is same as ID Token. Access token( right figure below) and ID token( left figure below) is able to check a state of forgery by another process alternative of verifying JWT.

If you set the state parameter at request timing of acquiring tokens, then check equivalent of it at timing of receive it.

・Create SPA

Please read quick start of SPA at Azure portal and try it. It is super easy to run because the downloaded SPA is already sat the settings for the Azure Active Directory app of the Azure portal.

>>Go to official document

About takao

I'm Microsoft MVP since June 2010.