This post has been republished via RSS; it originally appeared at: New blog articles in Microsoft Community Hub.
TOC
Steps
References
Steps:
- Create an App registration in Microsoft Entra.
- After creation, note down the Application (client) ID and Directory (tenant) ID, which will be used later.
- Create a Linux web app in Azure Portal and use Node.js.
- After creation, note down the App Name, which will be used later.
- Download the sample code in your development environment:
- You can use VS Code to open the react-spa subfolder.
- Edit src/authConfig.js and make the corresponding modifications:
| clientId | Specify the Application (client) ID obtained in step 2 |
| authority | Fill in the Directory (tenant) ID obtained in step 2 in the specified format. (https://login.microsoftonline.com/<TENANT_ID>) |
| redirectUri | Fill in the App Name obtained in step 4 in the specified format. (https://<APP_NAME>.azurewebsites.net/.auth/login/aad/callback) |
- Run the following command to install the relevant packages:
- Run the following command to compile the project. After execution, a build subfolder will be created.
- Create or modify build/.deployment with the following content:
- Publish your project, specifying the build subfolder during the publishing process.
- After publishing, go back to the App registration in Microsoft Entra, find Authentication, create a Platform, specify Single-Page Application, and fill in the value of authority from Step 7.
- Go back to the project, navigate to Configuration, and specify the Startup Command as follows:
- After restarting the web app, you can visit your webpage using a browser.
References:
Quickstart: Sign in to a SPA & call an API - React - Microsoft identity platform | Microsoft Learn