Skip to content

Latest commit

 

History

History
419 lines (280 loc) · 25.4 KB

quickstart-single-page-app-sign-in.md

File metadata and controls

419 lines (280 loc) · 25.4 KB
title description author manager ms.author ms.custom ms.date ms.reviewer ms.service zone_pivot_groups ms.topic
Quickstart - Sign in users in a single-page app (SPA) and call the Microsoft Graph API
Quickstart that shows how to configure a sample SPA that signs in employees or customers by using the Microsoft identity platform
OwenRichards1
CelesteDG
owenrichards
01/27/2025
OwenRichards1
identity-platform
entra-tenants
quickstart

Quickstart: Sign in users in a single-page app (SPA) and call the Microsoft Graph API

[!INCLUDE applies-to-workforce-external]

In this quickstart, you use a sample single-page app (SPA) to show you how to sign in users by using the authorization code flow with Proof Key for Code Exchange (PKCE) and call the Microsoft Graph API. The sample uses the Microsoft Authentication Library to handle authentication.

::: zone pivot="workforce"

Prerequisites

  • An Azure account with an active subscription. If you don't already have one, Create an account for free.
  • This Azure account must have permissions to manage applications. Any of the following Microsoft Entra roles include the required permissions:
    • Application Administrator
    • Application Developer
  • A workforce tenant. You can use your Default Directory or set up a new tenant.
  • Visual Studio Code or another code editor.

JavaScript

  • Register a new app in the Microsoft Entra admin center, configured for Accounts in this organizational directory only. Refer to Register an application for more details. Record the following values from the application Overview page for later use:
    • Application (client) ID
    • Directory (tenant) ID
  • Add the following redirect URIs using the Single-page application platform configuration. Refer to How to add a redirect URI in your application for more details.
    • Redirect URI: http://localhost:3000/
  • Node.js

React

  • Register a new app in the Microsoft Entra admin center, configured for Accounts in this organizational directory only. Refer to Register an application for more details. Record the following values from the application Overview page for later use:
    • Application (client) ID
    • Directory (tenant) ID
  • Add the following redirect URIs using the Single-page application platform configuration. Refer to How to add a redirect URI in your application for more details.
    • Redirect URI: http://localhost:3000/
  • Node.js

Angular

  • Register a new app in the Microsoft Entra admin center, configured for Accounts in this organizational directory only. Refer to Register an application for more details. Record the following values from the application Overview page for later use:
    • Application (client) ID
    • Directory (tenant) ID
  • Add the following redirect URI using the Single-page application platform configuration. Refer to How to add a redirect URI in your application for more details.
    • Redirect URI: http://localhost:4200/
  • Node.js

Blazor

  • Register a new app in the Microsoft Entra admin center, configured for Accounts in this organizational directory only. Refer to Register an application for more details. Record the following values from the application Overview page for later use:
    • Application (client) ID
    • Directory (tenant) ID
  • Add the following redirect URIs using the Single-page application platform configuration. Refer to How to add a redirect URI in your application for more details.
    • Redirect URI: http://localhost:5000/authentication/login-callback.
  • .NET SDK

Clone or download the sample application

To obtain the sample application, you can either clone it from GitHub or download it as a .zip file.

JavaScript

  • To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git

  • Download the .zip file. Extract it to a file path where the length of the name is fewer than 260 characters.

React

  • To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git

  • Download the .zip file. Extract it to a file path where the length of the name is fewer than 260 characters.

Angular

  • To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git

  • Download the .zip file. Extract it to a file path where the length of the name is fewer than 260 characters.

Blazor

  • To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet.git

  • Download the .zip file. Extract it to a file path where the length of the name is fewer than 260 characters.

Configure the project

JavaScript

  1. In your IDE, open the project folder, ms-identity-docs-code-javascript, containing the sample.

  2. Open vanillajs-spa/App/public/authConfig.js and update the following values with the information recorded in the admin center.

    :::code language="JavaScript" source="~/../ms-identity-docs-code-javascript/vanillajs-spa/App/public/authConfig.js":::

    • clientId - The identifier of the application, also referred to as the client. Replace the text in quotes with the Application (client) ID value that was recorded earlier.
    • authority - The authority is a URL that indicates a directory that MSAL can request tokens from. Replace Enter_the_Tenant_Info_Here with the Directory (tenant) ID value that was recorded earlier.
    • redirectUri - The Redirect URI of the application. If necessary, replace the text in quotes with the redirect URI that was recorded earlier.

React

  1. In your IDE, open the project folder, ms-identity-docs-code-javascript/react-spa, containing the sample.

  2. Open react-spa/src/authConfig.js and update the following values with the information recorded in the admin center.

    :::code language="JavaScript" source="~/../ms-identity-docs-code-javascript/react-spa/src/authConfig.js":::

    • clientId - The identifier of the application, also referred to as the client. Replace the text in quotes with the Application (client) ID value that was recorded earlier.
    • authority - The authority is a URL that indicates a directory that MSAL can request tokens from. Replace Enter_the_Tenant_Info_Here with the Directory (tenant) ID value that was recorded earlier.
    • redirectUri - The Redirect URI of the application. If necessary, replace the text in quotes with the redirect URI that was recorded earlier.

Angular

  1. In your IDE, open the project folder, ms-identity-docs-code-javascript/angular-spa, containing the sample.

  2. Open angular-spa/src/app/app.module.ts and update the following values with the information recorded in the admin center.

    :::code language="JavaScript" source="~/../ms-identity-docs-code-javascript/angular-spa/src/app/app.module.ts":::

    • clientId - The identifier of the application, also referred to as the client. Replace the text in quotes with the Application (client) ID value that was recorded earlier.
    • authority - The authority is a URL that indicates a directory that MSAL can request tokens from. Replace Enter_the_Tenant_Info_Here with the Directory (tenant) ID value that was recorded earlier.
    • redirectUri - The Redirect URI of the application. If necessary, replace the text in quotes with the redirect URI that was recorded earlier.

Blazor

  1. In your IDE, open the project folder, ms-identity-docs-code-dotnet/spa-blazor-wasm, containing the sample.

  2. Open spa-blazor-wasm/wwwroot/appsettings.json and update the following values with the information recorded earlier in the admin center.

    :::code language="JavaScript" source="~/../ms-identity-docs-code-dotnet/spa-blazor-wasm/wwwroot/appsettings.json":::

    • Authority - The authority is a URL that indicates a directory that MSAL can request tokens from. Replace Enter_the_Tenant_Info_Here with the Directory (tenant) ID value that was recorded earlier.
    • ClientId - The identifier of the application, also referred to as the client. Replace the text in quotes with the Application (client) ID value that was recorded earlier.

Run the application and sign in and sign out

JavaScript

Run the project with a web server by using Node.js:

  1. To start the server, run the following commands from within the project directory:

    cd vanillajs-spa/App
npm install
npm start

  2. Copy the https URL that appears in the terminal, for example, https://localhost:3000, and paste it into a browser. We recommend using a private or incognito browser session.

  3. Follow the steps and enter the necessary details to sign in with your Microsoft account. You'll be requested an email address so a one time passcode can be sent to you. Enter the code when prompted.

  4. The application will request permission to maintain access to data you have given it access to, and to sign you in and read your profile. Select Accept. The following screenshot appears, indicating that you have signed in to the application and have accessed your profile details from the Microsoft Graph API.

    :::image type="content" source="./media/quickstarts/js-spa/quickstart-js-spa-sign-in.png" alt-text="Screenshot of JavaScript App depicting the results of the API call." lightbox="./media/quickstarts/js-spa/quickstart-js-spa-sign-in.png":::

React

Run the project with a web server by using Node.js:

  1. To start the server, run the following commands from within the project directory:

    cd react-spa
npm install
npm start

  2. Copy the https URL that appears in the terminal, for example, https://localhost:3000, and paste it into a browser. We recommend using a private or incognito browser session.

  3. Follow the steps and enter the necessary details to sign in with your Microsoft account. You're requested an email address so a one time passcode can be sent to you. Enter the code when prompted.

  4. The application requests permission to maintain access to data you have given it access to, and to sign you in and read your profile. Select Accept. The following screenshot appears, indicating that you have signed in to the application and have accessed your profile details from the Microsoft Graph API.

    :::image type="content" source="./media/common-spa/react-spa/display-api-call-results-react-spa.png" alt-text="Screenshot of JavaScript App depicting the results of the API call." lightbox="./media/common-spa/react-spa/display-api-call-results-react-spa.png":::

Angular

Run the project with a web server by using Node.js:

  1. To start the server, run the following commands from within the project directory:

    cd angular-spa/App
npm install
npm start

  2. Copy the https URL that appears in the terminal, for example, https://localhost:4200, and paste it into a browser address bar. We recommend using a private or incognito browser session.

  3. Follow the steps and enter the necessary details to sign in with your Microsoft account. You'll be requested an email address so a one time passcode can be sent to you. Enter the code when prompted.

  4. The application will request permission to maintain access to data you have given it access to, and to sign you in and read your profile. Select Accept. The following screenshot appears, indicating that you have signed in to the application and have accessed your profile details from the Microsoft Graph API.

    :::image type="content" source="./media/quickstarts/angular-spa/quickstart-angular-spa-sign-in.png" alt-text="Screenshot of JavaScript App depicting the results of the API call." lightbox="./media/quickstarts/angular-spa/quickstart-angular-spa-sign-in.png":::

Blazor

Run the project with a web server by using dotnet:

  1. To start the server, run the following commands from within the project directory:

    cd spa-blazor-wasm
dotnet workload install wasm-tools
dotnet run

  2. Copy the http URL that appears in the terminal, for example, http://localhost:5000, and paste it into a browser. We recommend using a private or incognito browser session.

  3. Follow the steps and enter the necessary details to sign in with your Microsoft account. You'll be requested an email address so a one time passcode can be sent to you. Enter the code when prompted.

  4. The application will request permission to maintain access to data you have given it access to, and to sign you in and read your profile. Select Accept. The following screenshot appears, indicating that you have signed in to the application and have accessed your profile details from the Microsoft Graph API.

    :::image type="content" source="./media/common-spa/blazor-spa/display-api-call-results-blazor-spa.png" alt-text="Screenshot of Blazor WASM SPA App depicting the results of the API call." lightbox="./media/common-spa/blazor-spa/display-api-call-results-blazor-spa.png":::

::: zone-end ::: zone pivot="external"

Prerequisites

JavaScript

React

Angular

Clone or download sample SPA

To obtain the sample application, you can either clone it from GitHub or download it as a .zip file.

JavaScript

  • To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:

    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Download the sample. Extract it to a file path where the length of the name is fewer than 260 characters.

React

  • To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:

    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Download the sample. Extract it to a file path where the length of the name is fewer than 260 characters.

Angular

  • To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:

    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Download the sample. Extract it to a file path where the length of the name is fewer than 260 characters.

Configure the sample SPA

JavaScript

  1. Open App/public/authConfig.js and replace the following with the values obtained from the Microsoft Entra admin center:

    • Enter_the_Application_Id_Here and replace it with the Application (client) ID of the app you registered earlier.
    • Enter_the_Tenant_Subdomain_Here and replace it with the Directory (tenant) subdomain. For example, if your tenant primary domain is contoso.onmicrosoft.com, use contoso. If you don't have your tenant name, learn how to read your tenant details.

  2. Save the file.

React

  1. Open SPA\src\authConfig.js and replace the following with the values obtained from the Microsoft Entra admin center:

    • Enter_the_Application_Id_Here and replace it with the Application (client) ID of the app you registered earlier.
    • Enter_the_Tenant_Subdomain_Here and replace it with the Directory (tenant) subdomain. For example, if your tenant primary domain is contoso.onmicrosoft.com, use contoso. If you don't have your tenant name, learn how to read your tenant details.

  2. Save the file.

Angular

  1. Open SPA/src/app/auth-config.ts and replace the following with the values obtained from the Microsoft Entra admin center:

    • Enter_the_Application_Id_Here and replace it with the Application (client) ID of the app you registered earlier.
    • Enter_the_Tenant_Subdomain_Here and replace it with the Directory (tenant) subdomain. For example, if your tenant primary domain is contoso.onmicrosoft.com, use contoso. If you don't have your tenant name, learn how to read your tenant details.

  2. Save the file.

Run your project and sign in

JavaScript

  1. To start the server, run the following commands from within the project directory:

    cd 1-Authentication\0-sign-in-vanillajs\App
npm install
npm start

  2. Copy the https URL that appears in the terminal, for example, https://localhost:3000, and paste it into a browser. We recommend using a private or incognito browser session.

  3. Sign-in with an account registered to the tenant.

  4. The following screenshot appears, indicating that you have signed in to the application and have accessed your profile details from the Microsoft Graph API.

    :::image type="content" source="./media/common-spa/react-spa/display-api-call-results-react-spa.png" alt-text="Screenshot of JavaScript App depicting the results of the API call." lightbox="./media/common-spa/react-spa/display-api-call-results-react-spa.png":::

React

  1. To start the server, run the following commands from within the project directory:

    cd 1-Authentication\1-sign-in-react\SPA
npm install
npm start

  2. Copy the https URL that appears in the terminal, for example, https://localhost:3000, and paste it into a browser. We recommend using a private or incognito browser session.

  3. Sign-in with an account registered to the external tenant.

  4. The following screenshot appears, indicating that you have signed in to the application and have accessed your profile details from the Microsoft Graph API.

Angular

  1. To start the server, run the following commands from within the project directory:

    cd 1-Authentication\2-sign-in-angular\SPA
npm install
npm start

  2. Copy the https URL that appears in the terminal, for example, https://localhost:4200, and paste it into a browser. We recommend using a private or incognito browser session.

  3. Sign-in with an account registered to the external tenant.

  4. The following screenshot appears, indicating that you have signed in to the application and have accessed your profile details from the Microsoft Graph API.

    :::image type="content" source="./media/common-spa/angular-spa/customer-display-api-call-results-angular-spa.png" alt-text="Screenshot of JavaScript App depicting the results of the API call." lightbox="./media/common-spa/angular-spa/customer-display-api-call-results-angular-spa.png":::

::: zone-end

Sign out from the application

  1. Find the Sign out button on the page, and select it.
  2. You'll be prompted to pick an account to sign out from. Select the account you used to sign in.

A message appears indicating that you have signed out. You can now close the browser window.

Related content