Sample of OAuth2 implicit grant flow in Azure Active Directory

Japanese

This sample is created for the purpose of self-study. This client (JavaScript) authenticates to Azure AD and gets an access token(JWT). This sample uses jwt-decode to decode JWT. This library does not support validation for JWT.

I think that it's much better to use ADAL.js.

Preparation

• Register web application into Azure Active Directory.
  You have to grant Grap API. See following URL. Integrating Applications with Azure Active Directory | Microsoft Docs
• If you will use http-server, set the reply uri to http://localhost:8080/.
• You have to edit the following items in manifest.

{
    "oauth2AllowImplicitFlow": true,
}

• Rename config.sample.js to config.js and , embed tenant and client-id.

    {
        client_id : "<<client-id>>",
        authorization_endpoint:"https://login.microsoftonline.com/<<tenant>>/oauth2/authorize",
        end_session_endpoint:"https://login.microsoftonline.com/<<tenant>>/oauth2/logout",
        redirect_uri : "http://localhost:8080/",
    }

Run

Start the http-server. Alternatively, you may use any different HTTP server, but be careful with the response URL.

> npm install http-server
> .\node_modules\.bin\http-server.cmd

1. Click Login button and redirect authentication page.
2. Input your credential. When authenticated, redirect to reply URL and clients get token.
3. Invoke Graph API with token from client.
4. Some information will be displayed.

Reference

• Understanding the OAuth2 implicit grant flow in Azure AD | Microsoft Docs
• Authentication Scenarios for Azure AD | Microsoft Docs
• Authentication Scenarios for Azure AD | Microsoft Docs