Blazor Web App용 Azure Entra External ID 인증 구성

I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (or the portion you want translated) here? I’ll keep the source line and all formatting exactly as you requested.

개요

이 가이드는 Azure Entra External ID(Azure AD B2C의 후속 제품)를 Blazor Web App에 구성하는 방법을 설명합니다. Blazor Server 앱을 대상으로 하지만 WebAssembly에서도 작동합니다. 사용된 .NET 버전은 .NET 10(최신 LTS)입니다.

전제 조건

1. Azure Entra에 기본 Workforce 테넌트.
2. Azure Entra 관리자 액세스.
3. .NET 10 SDK 설치.

Blazor 웹 앱 만들기

dotnet new blazorserver -o MyBlazorApp

Interactive Render Mode를 Server 로 설정합니다 (원한다면 WebAssembly 로도 설정할 수 있습니다).

필요한 NuGet 패키지 추가

dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI

Azure Entra 구성

1. Azure Entra 관리 센터에 로그인

기본 Workforce 테넌트에 있는지 확인하세요 (Overview → Manage Tenants).

2. 외부 ID

External Identities → External Identity Providers 로 이동하여 원하는 공급자가 활성화되어 있는지 확인하세요 (기본값이면 보통 충분합니다).

3. 사용자 흐름

가입/로그인을 위한 새로운 User Flow 를 만들고 필요한 사용자 속성을 선택하세요.

4. (선택 사항) 사용자 지정 도메인

사용자 지정 도메인이 있으면 Domain names 아래에 추가하고 인증을 완료하세요.

5. 앱 등록

1. App registrations → New registration 로 이동합니다.
2. 개인 계정 허용 옵션을 선택합니다.
3. (선택 사항) Branding & Properties 에서 로고, 서비스 약관 및 사용자 지정 도메인을 설정합니다.
4. (선택 사항) Owners 에서 자신을 앱 소유자로 추가합니다.

6. 인증

Web redirect URI 를 추가합니다:

https:///signin-oidc

예시:

• http://localhost:5171/signin-oidc
• https://localhost:7215/signin-oidc

7. 인증서 및 비밀

새로운 client secret 을 생성하고 값을 복사해 두세요.

appsettings.json에 설정 추가

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "TenantId": "consumers",               // external users authentication
    "ClientId": "your_app_registration_client_id",
    "ClientSecret": "the_secret_you_generated_earlier", // use Key Vault in production
    "CallbackPath": "/signin-oidc"
  },
  "DownstreamApi": {
    "BaseUrl": "https://graph.microsoft.com/v1.0/",
    "RelativePath": "me",
    "Scopes": [
      "user.read"
    ]
  }
}

Program.cs에서 서비스 구성

using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;

var builder = WebApplication.CreateBuilder(args);
var configuration = builder.Configuration;

// Add authentication services
builder.Services
    .AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(configuration)
    .EnableTokenAcquisitionToCallDownstreamApi()
    .AddInMemoryTokenCaches();

builder.Services.AddCascadingAuthenticationState();

var app = builder.Build();

// Middleware
app.UseAuthentication();
app.UseAuthorization();

app.MapRazorComponents()
   .AddInteractiveServerRenderMode();

app.Run();

_Imports.razor 업데이트

@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization

페이지 또는 컴포넌트에 인증 요구

Razor 컴포넌트 또는 페이지 상단에 Authorize 특성을 추가합니다:

@attribute [Authorize]

역할을 지정할 수도 있습니다. 예: [Authorize(Roles = "Admin")].

AuthorizeView 사용하기

AuthorizeView를 사용하면 인증된 사용자와 인증되지 않은 사용자에게 서로 다른 UI를 표시할 수 있습니다. 예를 들어 로그인/로그아웃 버튼을 표시하거나 민감한 섹션을 숨길 수 있습니다.

<AuthorizeView>
    <Authorized>
        <button @onclick="Logout">Logout</button>
    </Authorized>
    <NotAuthorized>
        <button @onclick="Login">Login</button>
    </NotAuthorized>
</AuthorizeView>

참조 구현

Azure Entra External ID 통합을 보여주는 완전한 샘플 프로젝트가 Inventory Management System 저장소에 제공됩니다 (링크는 저자가 제공할 예정입니다).