Power Up Your ASP.NET Application with External ID Integration in Visual Studio

JoylynnKirui

Microsoft

Nov 25, 2024

In this blog, we walk you through the process of creating an ASP.Net application with External ID using Visual Studio.

Microsoft Entra External ID is a comprehensive identity management solution tailored to streamline a vital component of application development; authentication. By integrating External ID, developers can leverage advanced, built-in security features that reduce the risk of vulnerabilities and ensure compliance with industry standards. This approach not only expedites the development process but also supports scalability and enhances the user experience by providing seamless and secure access. Ultimately, it empowers developers to deliver high-quality, secure applications with greater efficiency.

In this blog, we walk you through the process of creating an ASP.Net application with External ID using Visual Studio. Currently the template on Visual Studio supports ASP.Net only. If you’d like to explore External ID on other samples (JavaScript, React, Angular, Node.js (Express), ASP.NET Core, Python Django, Python Flask, Java Servlet etc.), please check out the Microsoft Entra External ID extension for Visual Studio Code or the Microsoft Entra admin center wizard guide.

Setting up and running your application

Prerequisites

Install the recommended Visual Studio version (17.11.3), along with ASP.NET and the web development workload.
An external tenant on Microsoft Entra Admin Center.

- If you don’t have one, you can create one using our 30-day free trial or create an external tenant with an Azure subscription.
- If you have one continue reading.

Ensure you have the application administrator role on Microsoft Entra.

After meeting the above prerequisites, you can dive into the video where we show you how to integrate Microsoft Entra External ID in your app on Visual Studio or jump straight into the guide.

Create your project

Open Visual Studio and create a new project.

o From the templates, select ‘ASP.NET Core Web App (Razor Pages)’ and click Next.

o Provide a Project Name, e.g. ‘ASP-Application’ and a Location (where you want to create the project) and click Next.

o In the Framework selection, use ‘.NET 8.0 (Long Term Support)’ and under Authentication Type, select ‘Microsoft identity platform’. Then click on Create.

Figure 1: Entering Framework and Authentication type

The following diagram shows the Microsoft identity platform at a high level, including the application registration experience, SDKs, endpoints, and supported identities or account types.

Figure 2: Diagram showing the Microsoft identity platform at a high level

Install components

Install the required component, dotnet msidentity tool, and click Next. 

Figure 3: Installing dotnet tool

Configure External ID

Sign in to External ID with a user that has permission to create an application registration.
Select your trial or external tenant from the Tenants drop down.

Figure 4: Selecting from Tenants drop-down

Click Create new and give your application a name, like “visual-studio-asp-app”. This will create an application in Microsoft Entra External ID including a linked user flow, fully defining the sign-in and sign-up experience for your users. Then click Register.

Figure 5: 'Create new' in Microsoft Entra External ID

The app registration process collects and assigns these values for your app:

An Application (client) ID that uniquely identifies your app.
A Redirect URI that you can use to direct responses back to your app.
A few other scenario-specific values such as supported account types.

Figure 6: App registration

Next, select the application you’ve just registered then click Next.
Skip the ‘Additional settings’ step shown below as it does not work with External tenant.

Figure 7: Skipping additional settings step

Review the Summary of changes and click Finish.

Figure 8: Reviewing summary of changes and clicking 'Finish'

The dependency configuration process starts as shown below. Once done, click Close.

Figure 9: Dependency configuration process

Run and test the application

To run your application, navigate to Debug> Start Without Debugging.
Once your build is complete, a new browser window will open at https://localhost:7124.
Complete the sign-up and sign-in process on the screen shown below: