중요합니다
2025년 5월 1일부터 새 고객을 위해 Azure AD B2C를 더 이상 구매할 수 없습니다. FAQ에서 자세히 알아보세요.
이 문서에서는 사용자 고유의 ASP.NET 웹 애플리케이션에 Azure AD B2C(Azure Active Directory B2C) 인증을 추가하는 방법을 보여 줍니다. OpenID Connect 프로토콜을 사용하는 ASP.NET Core 미들웨어를 사용하여 ASP.NET Core 웹 애플리케이션을 만드는 방법을 알아봅니다.
샘플 웹앱에서 인증 구성과 함께 이 문서를 사용하여 샘플 웹앱을 사용자 고유의 웹앱으로 바꿔 보세요.
필수 조건
필수 구성 요소 및 통합 지침을 검토하려면 샘플 웹 애플리케이션에서 인증 구성을 참조하세요.
1단계: 웹앱 프로젝트 만들기
기존 ASP.NET MVC(model-view-controller) 웹앱 프로젝트를 사용하거나 새로 만들 수 있습니다. 새 프로젝트를 만들려면 명령 셸을 열고 다음 명령을 입력합니다.
dotnet new mvc -o mywebapp
위의 명령은 다음을 수행합니다.
- 새 MVC 웹앱을 만듭니다.
- 매개 변수는
-o mywebapp앱의 원본 파일을 사용하여 mywebapp 이라는 디렉터리를 만듭니다.
2단계: 인증 라이브러리 추가
Azure AD B2C 인증 및 권한 부여 지원을 웹앱에 추가하는 작업을 간소화하는 ASP.NET Core 라이브러리 집합인 Microsoft Id 웹 라이브러리를 추가합니다. Microsoft ID 웹 라이브러리는 쿠키 기반 인증을 사용하여 인증 파이프라인을 설정합니다. HTTP 인증 메시지, 토큰 유효성 검사, 클레임 추출 등을 보내고 받는 작업을 처리합니다.
Microsoft ID 웹 라이브러리를 추가하려면 다음 명령을 실행하여 패키지를 설치합니다.
dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI
3단계: 인증 라이브러리 시작
Microsoft ID 웹 미들웨어는 호스팅 프로세스가 시작될 때 실행되는 시작 클래스를 사용합니다. 이 단계에서는 인증 라이브러리를 시작하는 데 필요한 코드를 추가합니다.
Startup.cs 열고 클래스 시작 부분에 다음 using 선언을 추가합니다.
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;
Microsoft Identity Web은 쿠키 기반 인증을 사용하여 웹앱을 보호하므로 다음 코드는 SameSite 쿠키 설정을 설정합니다. 그런 다음 AzureAdB2C 애플리케이션 설정을 읽고 해당 뷰를 사용하여 미들웨어 컨트롤러를 시작합니다.
함수를 ConfigureServices(IServiceCollection services) 다음 코드 조각으로 바꿉다.
public void ConfigureServices(IServiceCollection services)
{
services.Configure<CookiePolicyOptions>(options =>
{
// This lambda determines whether user consent for non-essential cookies is needed for a given request.
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.Unspecified;
// Handling SameSite cookie according to https://learn.microsoft.com/aspnet/core/security/samesite?view=aspnetcore-3.1
options.HandleSameSiteCookieCompatibility();
});
// Configuration to sign-in users with Azure AD B2C
services.AddMicrosoftIdentityWebAppAuthentication(Configuration, "AzureAdB2C");
services.AddControllersWithViews()
.AddMicrosoftIdentityUI();
services.AddRazorPages();
//Configuring appsettings section AzureAdB2C, into IOptions
services.AddOptions();
services.Configure<OpenIdConnectOptions>(Configuration.GetSection("AzureAdB2C"));
}
다음 코드는 쿠키 정책을 추가하고 인증 모델을 사용합니다. 함수를 Configure 다음 코드 조각으로 바꿉다.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
// Add the Microsoft Identity Web cookie policy
app.UseCookiePolicy();
app.UseRouting();
// Add the ASP.NET Core authentication service
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
// Add endpoints for Razor pages
endpoints.MapRazorPages();
});
};
4단계: UI 요소 추가
사용자 인터페이스 요소를 추가하려면 사용자가 로그인했는지 여부를 확인하기 위한 논리가 포함된 부분 보기를 사용합니다. 사용자가 로그인하지 않으면 부분 보기가 로그인 단추를 렌더링합니다. 로그인한 경우 사용자의 표시 이름과 로그아웃 단추가 표시됩니다.
다음 코드 조각을 사용하여 /Views/Shared 폴더 내에 새 파일 _LoginPartial.cshtml을 만듭니다.
@using System.Security.Principal
@if (User.Identity.IsAuthenticated)
{
<ul class="nav navbar-nav navbar-right">
<li class="navbar-text">Hello @User.Identity.Name</li>
<!-- The Account controller is not defined in this project. Instead, it is part of Microsoft.Identity.Web.UI nuget package and
it defines some well known actions such as SignUp/In, SignOut and EditProfile-->
<li class="navbar-btn">
<form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="EditProfile">
<button type="submit" class="btn btn-primary" style="margin-right:5px">Edit Profile</button>
</form>
</li>
<li class="navbar-btn">
<form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">
<button type="submit" class="btn btn-primary">Sign Out</button>
</form>
</li>
</ul>
}
else
{
<ul class="nav navbar-nav navbar-right">
<li class="navbar-btn">
<form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">
<button type="submit" class="btn btn-primary">Sign Up/In</button>
</form>
</li>
</ul>
}
추가한 _LoginPartial.cshtml 파일을 포함하도록 /Views/Shared_Layout.cshtml 파일을 수정합니다. _Layout.cshtml 파일은 사용자가 페이지에서 페이지로 이동하면서 일관된 환경을 제공하는 일반적인 레이아웃입니다. 레이아웃에는 앱 머리글 및 바닥글과 같은 일반적인 사용자 인터페이스 요소가 포함됩니다.
비고
실행 중인 .NET Core 버전과 기존 앱에 로그인을 추가하는지 여부에 따라 UI 요소가 다르게 보일 수 있습니다. 그렇다면 페이지 레이아웃 내의 적절한 위치에 _LoginPartial 포함해야 합니다.
/Views/Shared/_Layout.cshtml 파일을 열고 다음 div 요소를 추가합니다.
<div class="navbar-collapse collapse">
...
</div>
이 요소를 다음 Razor 코드로 바꿉다.
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Claims">Claims</a></li>
</ul>
<partial name="_LoginPartial" />
</div>
위의 Razor 코드에는 다음 단계에서 만들 작업에 대한 링크 Claims 가 포함되어 있습니다.
5단계: 클레임 뷰 추가
ID 토큰 클레임을 보려면 /Views/Home 폴더에서 Claims.cshtml 보기를 추가합니다.
@using System.Security.Claims
@{
ViewData["Title"] = "Claims";
}
<h2>@ViewData["Title"].</h2>
<table class="table-hover table-condensed table-striped">
<tr>
<th>Claim Type</th>
<th>Claim Value</th>
</tr>
@foreach (Claim claim in User.Claims)
{
<tr>
<td>@claim.Type</td>
<td>@claim.Value</td>
</tr>
}
</table>
이 단계에서는 Claims 보기를 홈 컨트롤러에 연결하는 작업을 추가 합니다. 작업은 Claims 작업에 대한 액세스를 인증된 사용자로 제한하는 특성을 사용합니다 Authorize .
/Controllers/HomeController.cs 컨트롤러에서 다음 작업을 추가합니다.
[Authorize]
public IActionResult Claims()
{
return View();
}
클래스의 시작 부분에 다음 선언을 추가합니다 using .
using Microsoft.AspNetCore.Authorization;
6단계: 앱 설정 추가
Azure AD B2C ID 공급자 설정은 appsettings.json 파일에 저장됩니다. appsettings.json열고 다음 설정을 추가합니다.
"AzureAdB2C": {
"Instance": "https://<your-tenant-name>.b2clogin.com",
"ClientId": "<web-app-application-id>",
"Domain": "<your-b2c-domain>",
"SignedOutCallbackPath": "/signout-oidc",
"SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}
필요한 정보는 샘플 웹앱 문서의 인증 구성에 설명되어 있습니다. 다음 설정을 사용합니다.
-
인스턴스: Azure AD B2C
<your-tenant-name>첫 번째 부분으로 바꿉 니다(예:https://contoso.b2clogin.com). -
도메인: Azure AD B2C 전체
<your-b2c-domain>(예: )으로 바꿉contoso.onmicrosoft.com니다. -
클라이언트 ID:
<web-app-application-id>의 애플리케이션 ID로 바꿉니다. -
정책 이름:
<your-sign-up-in-policy>에서 만든 사용자 흐름으로 바꿉 니다.
7단계: 애플리케이션 실행
- 프로젝트를 빌드하고 실행합니다.
-
https://localhost:5001로 이동합니다. - 등록/로그인을 선택합니다.
- 등록 또는 로그인 프로세스를 완료합니다.
성공적으로 인증되면 탐색 모음에 표시 이름이 표시됩니다. Azure AD B2C 토큰이 앱에 반환하는 클레임을 보려면 클레임을 선택합니다.
다음 단계
- 웹앱에 대한 Azure AD B2C 인증 환경 사용자 지정 및 개선 방법을 알아봅니다.