ASP.NET Core에서 Azure Active Directory B2C를 사용하는 클라우드 인증

아티클
11/06/2024

Azure AD B2C (Azure Active Directory B2C)는 웹 및 모바일 앱용 클라우드 identity 관리 솔루션입니다. 이 서비스는 클라우드 및 온-프레미스에서 호스트되는 앱에 대한 인증을 제공합니다. 인증 유형에는 개별 계정, 소셜 네트워크 계정 및 페더레이션된 엔터프라이즈 계정이 포함됩니다. 또한 Azure AD B2C는 최소한의 구성으로 다단계 인증을 제공할 수 있습니다.

팁

Microsoft Entra ID, Microsoft Entra 외부 ID 및 Azure AD B2C는 별도의 제품 제품입니다. Entra ID 테넌트는 일반적으로 조직을 나타내지만 Azure AD B2C 테넌트 또는 Microsoft Entra 외부 ID 테넌트는 신뢰 당사자 애플리케이션에 사용할 ID 컬렉션을 나타낼 수 있습니다. 자세한 내용은 Azure AD B2C: FAQ(질문과 대답)를 참조하세요.

팁

고객을 위한 Microsoft Entra 외부 ID Microsoft의 새로운 CIAM(고객 identity 및 액세스 관리) 솔루션입니다.

이 자습서에서는 Azure AD B2C로 인증을 위해 ASP.NET Core 앱을 구성하는 방법에 대해 알아봅니다.

필수 조건

활성 구독이 있는 Azure 계정. 체험 계정을 만듭니다.
.NET SDK. 플랫폼에 대한 최신 .NET SDK 를 설치합니다.

준비

Azure Active Directory B2C 테넌트 만들기.
새 ASP.NET Core Razor 페이지 앱 만들기:
```
dotnet new razor -o azure-ad-b2c
```
이전 명령은 azure-ad-b2c라는 디렉터리에 Razor 페이지 앱을 만듭니다.

팁

Visual Studio를 사용하여 앱을 만드는 것이 좋습니다.
테넌트에서 웹앱 등록을 만듭니다. 리디렉션 URI의 경우 https://localhost:5001/signin-oidc를 사용합니다. Visual Studio에서 생성된 포트를 사용할 때 5001을 앱에서 사용하는 포트로 대체합니다.

앱 수정

프로젝트에 Microsoft.Identity.Web 및 Microsoft.Identity.Web.UI 패키지를 추가합니다. Visual Studio를 사용하는 경우 NuGet 패키지 관리자 사용할 수 있습니다.
```
dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI
```
위에서:
- Microsoft.Identity.Web에는 Microsoft identity 플랫폼으로 인증하기 위한 기본 의존성 집합이 포함되어 있습니다.
- Microsoft.Identity.Web.UI에는 MicrosoftIdentity라는 영역에 캡슐화된 UI 기능이 포함되어 있습니다.

AzureADB2Cappsettings.json에 개체를 추가합니다.

참고 항목

Azure B2C 사용자 흐름을 사용하는 경우 흐름 형식의 인스턴스 및 PolicyId를 설정해야 합니다.

{
  "AzureADB2C": {
    "Instance": "https://--your-domain--.b2clogin.com",
    "Domain": "[Enter the domain of your B2C tenant, e.g. contoso.onmicrosoft.com]",
    "TenantId": "[Enter 'common', or 'organizations' or the Tenant Id (Obtained from the Azure portal. Select 'Endpoints' from the 'App registrations' blade and use the GUID in any of the URLs), e.g. da41245a5-11b3-996c-00a8-4d99re19f292]",
    "ClientId": "[Enter the Client Id (Application ID obtained from the Azure portal), e.g. ba74781c2-53c2-442a-97c2-3d60re42f403]",
    // Use either a secret or a certificate. ClientCertificates are recommended.
    "ClientSecret": "[Copy the client secret added to the app from the Azure portal]",
    "ClientCertificates": [
    ],
    // the following is required to handle Continuous Access Evaluation challenges
    "ClientCapabilities": [ "cp1" ],
    "CallbackPath": "/signin-oidc",
    // Add your policy here
    "SignUpSignInPolicyId": "B2C_1_signup_signin",
    "SignedOutCallbackPath": "/signout-callback-oidc"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

도메인의 경우 Azure AD B2C 테넌트의 도메인을 사용합니다.
ClientId의 경우 테넌트에서 만든 앱 등록의 애플리케이션(클라이언트) ID를 사용합니다.
인스턴스의 경우 Azure AD B2C 테넌트의 도메인을 사용합니다.
SignUpSignInPolicyId의 경우 Azure B2C 테넌트에서 정의된 사용자 흐름 정책을 사용합니다.
ClientSecret 또는 ClientCertificates 구성을 사용합니다. ClientCertificates를 사용하는 것이 좋습니다.
다른 모든 값은 그대로 둡니다.

Pages/Shared에서 _LoginPartial.cshtml라는 파일을 만듭니다. 다음 코드를 포함합니다.

@using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity?.IsAuthenticated == true)
{
        <span class="navbar-text text-dark">Hello @User.Identity?.Name!</span>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">Sign out</a>
        </li>
}
else
{
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">Sign in</a>
        </li>
}
</ul>

앞의 코드가 하는 역할은 다음과 같습니다.

사용자가 인증되었는지 확인합니다.
로그아웃 또는 로그인 링크를 적절하게 렌더링합니다.
- 링크는 MicrosoftIdentity 영역의 Account 컨트롤러에 있는 작업 메서드를 가리킵니다.

Pages/Shared/_Layout.cshtml에서 <header> 요소 내에 강조 표시된 줄을 추가합니다.

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-page="/Index">azure_ad_b2c</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                </ul>
                <partial name="_LoginPartial" />
            </div>
        </div>
    </nav>
</header>

추가하면 <partial name="_LoginPartial" /> 이 레이아웃을 _LoginPartial.cshtml 사용하는 모든 페이지 요청에서 부분 보기가 렌더링됩니다.

Program.cs에서 다음을 변경합니다.
1. 다음 using 지시문을 추가합니다.
```
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
```
  위의 코드는 다음 단계에서 사용되는 참조를 확인합니다.
2. 다음 코드로 builder.Services 줄을 업데이트합니다.
```
builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
        .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureADB2C"));

builder.Services.AddAuthorization(options =>
{
    // By default, all incoming requests will be authorized according to 
    // the default policy
    options.FallbackPolicy = options.DefaultPolicy;
});
builder.Services.AddRazorPages(options => {
    options.Conventions.AllowAnonymousToPage("/Index");
})
.AddMvcOptions(options => { })
.AddMicrosoftIdentityUI();
```
  위의 코드에서
  - AddAuthentication 및 AddMicrosoftIdentityWebApp 메서드에 대한 호출은 특히 Microsoft identity 플랫폼용으로 구성된 Open ID Connect를 사용하도록 앱을 구성합니다.
  - AddAuthorization은 ASP.NET Core 권한 부여를 초기화합니다.
  - AddRazorPages 호출은 익명 브라우저가 인덱스 페이지를 볼 수 있도록 앱을 구성합니다. 다른 모든 요청에는 인증이 필요합니다.
  - AddMvcOptions 및 AddMicrosoftIdentityUI는 Azure AD B2C 간 리디렉션하는 데 필요한 UI 구성 요소를 추가합니다.
3. 강조 표시된 줄을 Configure 메서드에 업데이트합니다.
```
app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

app.MapRazorPages();
```
  위의 코드는 ASP.NET Core에서 인증을 활성화합니다.

앱 실행

참고 항목

Azure 앱 등록 리디렉션 URI와 일치하는 프로필 사용

앱을 실행합니다.
```
dotnet run --launch-profile https
```
앱의 보안 엔드포인트(예: https://localhost:5001/)로 이동합니다.
- 인덱스 페이지는 인증 챌린지 없이 렌더링됩니다.
- 인증되지 않았기 때문에 헤더에 로그인 링크가 포함됩니다.
Privacy 링크를 선택합니다.
- 브라우저는 테넌트의 구성된 인증 방법으로 리디렉션됩니다.
- 로그인하면 헤더에 시작 메시지와 로그아웃 링크가 표시됩니다.

다음 단계

이 자습서에서는 Azure AD B2C로 인증을 위해 ASP.NET Core 앱을 구성하는 방법을 배웠습니다.

이제 ASP.NET Core 앱이 인증에 Azure AD B2C를 사용하도록 구성되었으므로 Authorize 특성을 사용하여 앱을 보호할 수 있습니다. 다음을 학습하여 앱 개발을 계속합니다.

Azure AD B2C 사용자 인터페이스 사용자 지정
암호 복잡성 요구 사항 구성
다단계 인증 사용
Microsoft, Facebook , Google , Amazon , Twitter 등과 같은 추가 identity 공급자를 구성합니다.
Microsoft Graph API를 사용하여 Azure AD B2C 테넌트에서 그룹 멤버 자격과 같은 추가 사용자 정보를 검색합니다.
Azure AD B2C를 사용하여 ASP.NET Core에 빌드된 Web API를 보호하는 방법
자습서: Azure Active Directory B2C를 사용하여 ASP.NET Web API에 대한 액세스 권한 부여

다음을 통해 공유

ASP.NET Core에서 Azure Active Directory B2C를 사용하는 클라우드 인증

필수 조건

준비

앱 수정

앱 실행

다음 단계

추가 리소스