블레이저 웹 어셈블리 인증 양식 만들기

### Blazor WebAssembly에서 사용자 인증 구현하기
* 🔐 2024년 6월 28일에 열리는 개발자 토크쇼에서는 **블레이저, 웹어셈블리, 사용자 인증을 처음부터 구현하는 방법**에 대한 논의가 이어집니다.
* 🎉 이 행사에서 다가오는 .NET Aspire 개발자의 날에 대해 발표했는데, **Glenn Condron과 Maddy Montia의 키노트 세션, 심층 세션, Mango 및 New Relic과 같은 파트너의 커뮤니티 기여** 등이 있었습니다.
* 📅 제프 프리츠는 최근 **7월 23일에 예정된 전일 행사에서 두 시간 동안 .NET Aspire에 대한 소개 세션**을 진행했습니다.
* 🛠 Rich와 호스트는 애플리케이션을 쉽게 설정할 수 있도록 후자의 YAML 구성을 활용하여 **'개발 드라이브'와 '개발 홈'**을 설정하는 방법에 대해 논의했습니다.
* 🖥 호스트는 **환경을 처음부터 생성할 수 있는 개발 머신 설정 도구**를 구축할 계획을 공유했습니다.
* 🧠 블레이저 웹어셈블리 프로젝트에는 **클라이언트 프로젝트에 인터랙티브 렌더링 모드**를 위한 컴포넌트를 배치해야 합니다.
* 🔒 서버 측의 **"PersistingServerAuthenticationStateProvider"**는 사용자의 인증 상태를 저장하고, 클라이언트 측의 **"PersistentAuthenticationStateProvider"**는 이를 검색하고 유지 관리합니다.
* 📝 블레이저에서 'EditForm'을 만들 때 양식 필드를 바인딩하려면 **모델 매개변수를 제공**하고 초기화해야 합니다.

### 서버 측 인증을 사용하여 Blazor 웹 어셈블리 로그인 양식 구축하기
* 🧱 클라이언트 측에서 사용자를 서명하는 문제를 해결하기 위해 **로그인 양식을 서버 측으로 옮겼습니다.**
* 서버 측 렌더링의 모델 바인딩에는 **`@attribute` 지시어**를 사용했는데, 이는 **인터랙티브 렌더링과 동작이 다르기 때문**입니다.
* 📝 `null인 경우에만 새 모델 인스턴스를 생성하도록 **??= 연산자**`를 구현했습니다.
* 🔏 사용자 로그인을 위한 서버 측 인증 로직을 추가하여 기본 체계를 **`tdtsCookie`로 설정**했습니다.
* 🔍 블레이저 웹 어셈블리에서 **사전 렌더링 후 사용자의 인증 상태가 손실**되는 문제가 발생했습니다.
* 🤔 컴포넌트를 서버 측으로 만들기 위해 **렌더링 모드를 재정의**해야 하는 문제에 직면했습니다.
* 🎯 인증을 위해 **API와 통신하는 클라이언트 측 로그인 양식**의 가능성을 탐색했습니다.
* 📅 인증 상태 지속성 문제를 추가로 조사할 계획입니다.

블레이저 웹 어셈블리의 로그인 페이지에는 사용자 로그인을 위한 모델 바인딩 및 인증 설정이 필요합니다.

Authentication in Blazor WebAssembly From Scratch - Part 2

The Dev Talk Show

NET 및 Blazer의 최신 개발 사항 논의하기

이 쇼에서는 키나잇 세션과 심층 세션으로 다가오는 .

NET Aspire 개발자의 날에 대해 논의합니다.

7월 23일에 예정된 전일 행사에서 Jeff Fritz가 두 시간 동안 .

NET Aspire에 대한 기본 소개 세션을 진행했습니다.

호스트는 비공식 개 프로듀서의 혼란과 개발 머신 재구축 계획에 대해서도 이야기합니다.

개발자 드라이브, 개발자 상자 및 개발자 홈 설정하기

개발 드라이브 설정은 파일에 더 빠르게 액세스할 수 있는 일회성 프로세스이며 가상 머신 설정과 유사합니다.

Dev Box는 다양한 애플리케이션을 포함한 개발 환경을 ymo 파일을 사용하여 편리하게 구성하고 저장할 수 있는 방법을 제공합니다.

Dev Home을 사용하면 애플리케이션 목록에서 애플리케이션을 선택하고 나중에 로컬 또는 다른 Dev Box 머신에서 사용할 수 있도록 구성 파일을 생성하여 개발 환경을 쉽게 설정할 수 있습니다.

블레이저 프로젝트의 컴포넌트 및 페이지 배치

프로젝트가 웹 어셈블리로 설정된 경우 Blazer 프로젝트의 컴포넌트 또는 페이지는 일반적으로 "클라이언트" 폴더에 위치합니다.

"Razor" 컴포넌트는 인증된 경로 보기에 사용되며, 사용자의 현재 인증 상태를 하위 프로젝트에서 사용할 수 있도록 합니다.

"클라이언트" 프로젝트에서는 사용자의 상태를 저장하기 위해 영구 인증 상태 공급자 클래스가 추가되어 인증 목적으로 다른 컴포넌트 간의 통신을 허용합니다.

웹어셈블리 앱에서 컴포넌트 렌더 모드의 중요성

애플리케이션의 요구 사항과 우선순위에 따라 컴포넌트 렌더링 모드를 결정하는 것이 중요합니다.

프로덕션 수준의 인증 및 데이터베이스 상호 작용을 처리하지 않고 WebAssembly에서 클라이언트 측 앱을 실행하는 데 중점을 둡니다.

서버 측 및 클라이언트 측 인증 상태 공급자는 WebAssembly 앱의 사용자 정보를 유지하는 데 중요한 역할을 합니다.

인증은 주로 서버 측 활동이며 클라이언트 디바이스에서만 구현하기는 어렵습니다.

로그인 양식을 만들고 클라이언트 측 인증을 위한 컨텍스트를 처리하는 과정은 복잡할 수 있으며 신중한 고려가 필요합니다.

매개변수 이름 충돌을 해결하고 양식을 자체 구성 요소로 만들지 여부를 결정해야 하는 어려움은 클라이언트 측 인증의 복잡성을 더합니다.

블레이저의 '하위 콘텐츠'와 폼 렌더링 이해하기

블레이저의 "하위 콘텐츠" 개념은 많은 사용자에게 익숙하지 않을 수 있으며 양식 작업 시 혼란을 야기할 수 있습니다.

"하위 콘텐츠" 속성과 오류 메시지는 양식 렌더링에 도움을 주기 위한 것이지만, 블레이저에 대한 충분한 이해가 필요할 수 있습니다.

이 프로세스에는 모델을 만들고, 양식에 바인딩하고, 양식 제출을 처리하는 제출 방법을 정의하는 작업이 포함되며, 적절한 기능을 위해 모델을 초기화해야 합니다.

블레이저 코드의 널 인스턴스 문제 해결

생성자에서 새 인스턴스를 생성하여 블레이저 코드의 널 인스턴스 문제를 해결합니다.

대상 유형 매개변수를 사용하여 자격 증명 클래스의 null 인스턴스 문제 해결.

Blazer 코드의 디버깅, 특히 코드의 런타임 위치를 파악하기 위해 console.

Blazer 클라이언트 측의 사용자 로그인 및 인증 관련 문제

사용자 로그인 및 인증을 위한 코드가 클라이언트 측에서 작동하지 않으며 Blazer 플랫폼의 특정 부분을 클라이언트 측에서 사용할 수 없습니다.

로그인 컴포넌트를 서버 측으로 옮길지 아니면 API를 통해 로그인 사용자를 탐색할지 결정해야 합니다.

로그인 컴포넌트를 서버 측으로 이동하는 과정에는 몇 가지 의미가 있을 수 있으며 HTTP 컨텍스트를 고려해야 합니다.

블레이저 웹 어셈블리에서 렌더 모드의 딜레마

이 논의는 Blazer Web Assembly의 렌더링 모드 사용, 특히 렌더링 모드를 서버 측으로 재정의하는 문제를 중심으로 진행되었습니다.

팀은 렌더링 모드를 null로 변경할 가능성을 모색하고 있지만 이 접근 방식을 구현하는 데 어려움을 겪고 있습니다.

렌더링 모드 문제를 해결하기 위해 앱 Razer 컴포넌트에서 사용되는 대체 방법을 고려하고 있습니다.

로그인 컴포넌트 및 서버 측 로그인 이동에 대한 토론

코드 논의에는 로그인 구성 요소를 서버 측으로 옮기는 것과 이러한 변경의 의미에 대한 내용이 포함됩니다.

팀은 로그인 양식을 클라이언트 측에 두고 API를 통해 통신할 수 있는 가능성을 모색하고 있습니다.

또한 로그인 시 사용자 이름이 전달되지 않는 문제를 해결하고, C#의 널 합산 할당 연산자를 사용하여 현재 모델이 널인 경우에만 새 모델을 생성해야 하는 문제를 해결하고 있습니다.

블레이저의 양식 모델 및 서버 측 렌더링 문제 해결

블레이저의 서버 측 렌더링 모드 유형에 따라 양식 모델이 널이면 새 자격 증명으로 생성되고 널이 아닌 경우 생성되지 않습니다.

양식 모델은 속성을 사용하여 양식에서 채워지므로 작업자 동작에 영향을 미치고 새로 생성되지 않습니다.

영구 인증 상태 공급자를 시작하려면 Blazer 서버 측 코드의 인증 체계 및 설정에 대한 추가 조사가 필요할 수 있습니다.

동기화 파이어의 지속성 디버깅하기

동기화 오류가 지속되는 과정을 관찰하고 분석하여 Blazer 웹 어셈블리에서 사전 렌더링과 관련된 잠재적인 문제를 발견했습니다.

팀은 로그인 구성 요소를 구현하고 클라이언트 측 및 서버 측 구현의 문제를 해결하고 구성 요소 기반 프레임워크에서 인증의 복잡성을 탐색하는 작업을 수행했습니다.

특히 인증과 관련하여 애그노스틱 컴포넌트를 만들 때 Blazer가 직면한 고유한 어려움에 대해서도 논의했습니다.