Exercise - Sign in to your app by using Microsoft Graph Toolkit Login component

  • 12 minutes

In this unit, you'll create a web application and explore a starter project. You'll then use the Login component from the toolkit to sign in to your application, and access Microsoft Graph functionality.

Install Dev Proxy

To complete this exercise, you need to install the latest version of Dev Proxy. Dev Proxy is a tool that simulates API responses. It allows you to build and test your application without needing a Microsoft 365 tenant. Follow the getting started instructions and verify that Dev Proxy is running before you proceed.

Note

When you use Dev Proxy to complete this exercise, your app uses static, simulated data. The code you write works with both simulated- and live data configurations. To use live data from a Microsoft 365 tenant, you only need to create a Microsoft Entra app registration and update the client ID reference in your app.

Download Dev Proxy preset

To complete this exercise, you need to download the Dev Proxy preset for this module. The preset contains the mock data and responses that you use to build your application. To download the preset, run the following command in your terminal:

devproxy preset get learn-msgraph-toolkit-intro

Set up the app structure for your web app

Create a new folder for the project

  1. Open Visual Studio Code. Select File > Open Folder from the command menu.
  2. When you're opening a folder, the operating system provides a button to create a New folder.
  3. Go to the location where you want to create the new folder, and select New Folder. Name the folder mgt-app.
  4. Open the folder mgt-app in Visual Studio Code.

Create files and folders under the project folder

Your web application will have one HTML file and a folder for Live Server settings. Live Server is a Visual Studio Code extension. Let's create the project structure.

  1. Select File > New File.

  2. Name the file index.html, and save the file by using CTRL+S (Windows) or COMMAND+S (macOS).

  3. Add the following HTML into index.html, and save the file.

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

  4. Add a folder named .vscode into the root of your project folder

  5. Add a file named settings.json into the .vscode folder. Copy and paste the following code into settings.json, and save the file.

    {
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}

These settings ensure the smooth testing of the application locally, when you're using Live Server.

Add code to sign in to your app with the Login component

Before you start adding code to use the toolkit in your web application, you'll need to set up a Microsoft Entra application.

You'll use the details of the Microsoft Entra application to authenticate your application by using the Microsoft Authentication Library (MSAL) v2 provider.

Set up a Microsoft Entra application

  1. In the browser, go to the Microsoft Entra admin center, sign in, and go to Microsoft Entra ID.

  2. Select App registrations in the left pane, and select New Registration.

    Screenshot that shows selecting New registration to create a new app registration.

  3. On the Register an application screen, enter the following values:

    • Name: enter the name for your application.
    • Supported account types: select Accounts in any organizational directory (Any Microsoft Entra directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox).
    • Redirect URI (optional): select Single page application (SPA) and enter http://localhost:3000.
    • Select Register.

    Screenshot that shows registering your application in Microsoft Entra ID.

Now that you have successfully set up the application, let's add some code!

Add the Microsoft Graph Toolkit to your project

Earlier you learned that you can reference the toolkit directly from the content delivery network. To do that, add the following code snippet just before the </head> tag in your index.html file.

<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>

Initialize the MSAL v2 provider

To authenticate your application, initialize the MSAL v2 provider by using the Application(client) ID that you saved in the previous section.

Add the following snippet into the <body> of your index.html file.

<mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>

Replace YOUR-CLIENT-ID with the Application (client) ID that you saved in the previous section.

To authenticate your application, initialize the MSAL v2 provider by using f601c4cb-6902-4675-8415-7db28a4a332d as the application ID. Dev Proxy will simulate the authentication process for this mock app registration.

Add the following snippet into the <body> of your index.html file.

<mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>

Add the Login component to your web app

To add the Login component, add the following element in the body of the index.html file.

<mgt-login></mgt-login>

After all the changes, your index.html file should look like the following:

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

Save the file and let's test the results!

Test your app in a browser

Start Dev Proxy

Begin by starting Dev Proxy. In a terminal, run the following command:

devproxy --config-file "~appFolder/presets/learn-msgraph-toolkit-intro/devproxyrc.json"

Keep the terminal open and running Dev Proxy while you test your application.

Start the application

To test your application in a browser, you need to have installed Visual Studio Code Live Server.

To run your application in Live Server, press the following key combination in Visual Studio Code, and search for Live Server:

  • Windows: CTRL+SHIFT+P
  • macOS: COMMAND+SHIFT+P

Open with Live Server, select the option, and press Enter.

After Live Server is running, it might open the page http://localhost:3000/index.html. Open http://localhost:3000 in the browser.

Select Sign in, Dev Proxy will simulate the authentication process, and the application will display the mock sign-in information.

Select Sign in, and enter your Microsoft 365 developer tenant account. You'll be asked to consent to the required permissions the first time. After you've consented, the application displays your sign-in information.

Screenshot that shows the final results of your application after the user sign-in.

You've now successfully implemented an authentication mechanism to access Microsoft 365 data.

Note

We'd appreciate your feedback on your experience with using Dev Proxy to complete this exercise. Please take a moment to complete this short survey.