title | description | author | manager | ms.author | ms.custom | ms.date | ms.reviewer | ms.service | ms.topic |
---|---|---|---|---|---|---|---|---|---|
Quickstart: Sign in to a SPA & call an API - Angular |
In this quickstart, learn how a JavaScript Angular single-page application (SPA) can sign in users of personal accounts, work accounts, and school accounts by using the authorization code flow and call Microsoft Graph. |
henrymbuguakiarie |
CelesteDG |
henrymbugua |
scenarios:getting-started, languages:JavaScript, devx-track-js |
01/31/2024 |
j-mantu |
identity-platform |
quickstart |
This quickstart uses a sample Angular 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 for JavaScript to handle authentication.
- An Azure account with an active subscription. If you don't already have one, Create an account for free.
- Node.js
- Visual Studio 2022 or Visual Studio Code
[!INCLUDE Register a single-page application]
[!INCLUDE Add a platform redirect URI]
To obtain the sample application, you can either clone it from GitHub or download it as a .zip file.
-
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.
-
In your IDE, open the project folder, ms-identity-docs-code-javascript/angular-spa, containing the sample.
-
Open src/app/app.module.ts and update the following values with the information recorded earlier 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.
Run the project with a web server by using Node.js:
-
To start the server, run the following commands from within the project directory:
npm install npm start
-
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. -
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.
-
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.":::
- Find the Sign out button in the top right corner of the page, and select it.
- 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.
-
Quickstart: Protect an ASP.NET Core web API with the Microsoft identity platform
-
Learn more by building this Angular SPA from scratch with the following series - Tutorial: Sign in users and call Microsoft Graph