GitHub - jamesnet214/blazor-authentication

Blazor Authentication

이 리포지토리는 Blazor(Wasm) Identity 구조와 OAuth 인증에 대한 개념적인 설명과 샘플코드를 제공합니다.

Star	License	Activity

Blazor ID 구조와 외부 인증(OAuth) 끝내기

개요
ID (Identity)
OAuth (Authentication)
개발환경
IDE
프로젝트 생성
필수 어셈블리
마이그레이션
데이터베이스
인증: 구글
인증: 페이스북
인증: 트위터
인증: 애플
인증: 깃허브
인증: 카카오톡
인증: 네이버
스케폴딩
스케폴딩 구조 기반 실습
빈 프로젝트 기반 실습

개요

이 레포지토리는 Blazor WebAssembly(WASM) 환경을 기반으로 서버/클라이언트가 분리된 Hosted 구조에서 계정(ID)과 인증(OAuth)를 구현하는 방법에 대한 내용을 다루고 있습니다.

✔️ 세부 개념적인 내용은 아래와 같이 크게 4개로 나누어 설명합니다.

ID(Identity) 스케폴더
데이터베이스 마이그레이션
엔터티프레임워크
주요 공급자(Provider) 인증

✔️ 소스코드는 아래 두 가지 버전으로 제공됩니다.

ID(Identity) 스케폴더를 제공받아 구현하는 방식
빈 프로젝트에서 새로 구현하는 방식

❗ 학습 순서에 대한 안내

빈 프로젝트에서 처음부터 구현하기 위해서는 ID(Identity) 스케폴더 구조가 충분히 숙련된 상태에서 시작하는 것이 좋습니다. 스케폴더 구조가 생각보다 양이 많고 생소한 개념이 많아 진입장벽을 느낄 수 있기 때문에 스케폴더 구조를 더욱 자세하게 익히는 것을 권장합니다.

ID

Blazor는 프로젝트를 생성하는 과정에서 완성된 ID(Identity) 모듈 사용 여부를 선택할 수 있습니다.
그리고 이 모듈은 닷넷 팀에서 제공하며 신뢰할 수 있는 좋은 구조를 가집니다.

이 ID 모듈을 선택하는 이유는...

계정/인증과 관련해서 어렵고 복잡한 구현 부분을 도움 받을 수 있다
스케폴더 기법을 통해 원하는 부분만 편집이 가능
DB 구조를 받을 수 있다 (마이그레이션)

하지만 ID(Identity) 구조를 반드시 사용해야 하는 것은 아닙니다!

이미 존재하는 DB를 사용해야 하는 경우
독창적인 새 ID 인증 구조를 직접 만드는 경우
필요한 기능만을 구현하고자 하는 경우

OAuth

유명 공급자(Provider)를 통해 제공되는 OAuth 인증 방식은 어느덧 인증 방식의 표준으로 자리잡았습니다.

🔐 대표적인 OAuth 공급자

개발환경

Microsoft Windows
Apple MacOS
Linux

Blazor는 Windows OS를 기반으로 한 닷넷프레임워크 환경에서 탈피한 닷넷코어 기반의 웹앱입니다. 따라서 더 이상 닷넷프레임워크에만 의존하지 않고 모든 운영체제 환경에서 동일한 소스코드를 쓸 수 있기 때문에 운영체제간 협업 역시 가능합니다. 또한 기존 ASP.NET처럼 IIS에 의존하지 않고 손쉽게 독립(Self-contained)적인 배포가 가능합니다.

IDE

Visual Studio (2022 Preview)
Visual Studio for Mac
Visual Studio Code

Visual Studio 뿐만 아니라 Visual Studio Code에서도 Blazor를 개발할 수 있습니다. 따라서 여러분이 익숙한 IDE를 선택하는 것이 좋습니다.

호스팅

Microsoft Azure
Amazon AWS
Server Hosting
직접 (노트북, 데스크톱, 라즈베리파이 등)

Blazor를 서비스하기 위한 가장 쉬운 방법은 클라우드 서비스를 이용하는 것입니다. 대표적인 클라우드 서비스로는 Azure와 AWS가 있습니다. Azure의 경우 무료로 웹앱을 서비스할 수 있기 때문에 개발단계에서 아주 유용하게 이용할 수 있습니다.

프로젝트 생성

Blazor 프로젝트를 생성하는 방법입니다.

Visual Studio

Blazor WebAssembly App 프로젝트 선택
Individual Accounts 옵션 선택
ASP.NET Core Hosted 옵션 선택

Visual Studio Code / NET Core CLI

dotnet new blazorwasm -au Individual -ho -o {APP NAME}

❗ 자세한 dotnet new 명령어는 여기를 통해 학습할 수 있습니다.

필수 어셈블리

인증시스템을 구현하기 위해 필요한 필수 어셈블리를 살펴보겠습니다.
기본적으로 세팅되어있는 어셈블리 항목들을 살펴보면 Blazor의 인증 구조가 어떻게 제공되고 있는지 파악하는 것에 큰 도움이 됩니다.

✔️ 클라이언트

▪️ Microsoft.AspNetCore.Components.WebAssembly
▪️ Microsoft.AspNetCore.Components.WebAssembly.DevServer
▪️ Microsoft.AspNetCore.Components.WebAssembly.Authentication
▪️ Microsoft.Extensions.Http

✔️ 서버

▪️ Microsoft.AspNetCore.Authentication.Google
▪️ Microsoft.AspNetCore.Components.WebAssembly.Server
▪️ Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore
▪️ Microsoft.AspNetCore.Identity.EntityFrameworkCore
▪️ Microsoft.AspNetCore.Identity.UI
▪️ Microsoft.AspNetCore.ApiAuthorization.IdentityServer
▪️ Microsoft.EntityFrameworkCore.SqlServer
▪️ Microsoft.EntityFrameworkCore.Tools

데이터베이스 마이그레이션

Blazor Individual 모드는 Authentication 인증 관련 데이터베이스 마이그레이션을 지원합니니다.

마이그레이션이란?

필요한 데이터베이스를 현재 버전으로 자동 변경되도록 하는 기능입니다. Authentication 관련 인증 처리는 데이터베이스가 필수로 필요하기 때문에 반드시 데이터베이스가 먼저 준비되어있어야 합니다.

DB 연결정보

Data Source=<IP-ADDRESS>;Initial Catalog=<DB-NAME>;User Id=<ACCOUNT>;Password=<PASSWORD>

파일 위치: Server > appsettings.json

"ConnectionStrings": {
  "DefaultConnection": "Data Source=.;Initial Catalog=blazor-db;User Id=sa;Password=!@#$1234"
},

마이그레이션 시점은 언제이며 어떻게 동작합니까?

PM Console에서 실행
PM(패키지매니저) Console에서 update-database를 입력하면 마이그레이션을 시작하게 됩니다.

PM > update-database

Build started...
Build succeeded.
Done.

브랴우저에서 실행
인증 수행이 진행될 때마다 데이터베이스 연결 및 마이그레이션 버전 정보를 확인합니다. 만약 생성된 데이터베이스가 없거나 새로운 버전의 마이그레이션이 필요할 경우에는 아래처럼 버튼이 활성화됩니다.

버튼을 클릭하면 엔터티를 통해 데이터베이스 마이그레이션 작업이 실행됩니다.

마이그레이션 형식

마이그레이션은 EntityFramework 형태로 준비되어 있습니다. 그리고 서버 환경에 따라 MS-SQL, SQLite, Oracle 등 엔터티프레임워크를 지원하는 DB를 선택할 수 있습니다.

데이터베이스 테이블

마이그레이션을 통해 생성된 데이터베이스 테이블 다이어그램입니다.

데이터베이스 테이블 (.NET6.0 기준)

	테이블명	설명
1	__EFMigrationsHistory	마이그레이션 히스토리 테이블
2	AspNetRoleClaims
3	AspNetRoles
4	AspNetUserClaims
5	AspNetUserLogins	인증 제공자(예, 구글) 정보
6	AspNetUserRoles
7	AspNetUsers
8	AspNetUserTokens
9	DeviceCodes
10	PersistedGrants

OAuth

OAuth 방식은 구글, 페이스북, 트위터, 깃허브 등의 대규모 그룹에서 널리 쓰이는 표준 인증 방식으로, 사용자들이 타사 애플리케이션이나 웹사이트의 계정에 관한 정보를 공유할 수 있게 허용합니다.

OAuth Providers 확인

공급자(Provider)별 개발자 계정 만들기

닷넷데브 커뮤니티에서 제공하는 글 참고.

https://forum.dotnetdev.kr/t/oauth-provider/1392?u=james.lee

인증키 샘플

공급자(Provider)로부터 발급 받은 인증 정보(ClientId, ClientSecret)를 관리하는 형식입니다.

server > appsettings.json

"Authentication": {
  "Google": {
    "ClientId": "xxx-xxx.apps.googleusercontent.com",
    "ClientSecret": "xxx-xxxxxx"
  }
},

소스보기

구글 인증

구글 계정 인증(Auth2.0)은 Google Developer에서 발급받을 수 있습니다.

PM> install-package Microsoft.AspNetCore.Authentication.Google

.AddGoogle(o =>
    {
        o.ClientId = Configuration["Authentication:Google:ClientId"];
        o.ClientSecret = Configuration["Authentication:Google:ClientSecret"];
    });

페이스북 인증

페이스북 계정 인증(Auth2.0)은 Facebook Developer에서 발급받을 수 있습니다.

PM> install-package Microsoft.AspNetCore.Authentication.Facebook

.AddFacebook(o =>
    {
        o.AppId = Configuration["Authentication:Facebook:AppId"];
        o.ClientSecret = Configuration["Authentication:Facebook:ClientSecret"];
    });

트위터 인증

트위터 계정 인증(Auth2.0)은 Twitter Developer에서 발급받을 수 있습니다.

PM> install-package Microsoft.AspNetCore.Authentication.Twitter

.AddTwitter(o =>
    {
        o.ConsumerKey = Configuration["Authentication:Twitter:ClientId"];
        o.ConsumerSecret = Configuration["Authentication:Twitter:ClientSecret"];
    });

애플 인증

애플은 API를 발급받기 위해 먼저 Apple Developer Program을 통해 개발자 등록 신청이 절차를 걸쳐야 합니다.

애플 계정 인증(Auth2.0)은 Apple Developer에서 발급받을 수 있습니다.

PM> install-package AspNet.Security.OAuth.Apple

.AddApple(o =>
    {
        o.ClientId = Configuration["Authentication:Apple:ClientId"];
        o.ClientSecret = Configuration["Authentication:Apple:ClientSecret"];
    });

깃허브 인증

깃허브 계정 인증(Auth2.0)은 GitHub Developer에서 발급받을 수 있습니다.

PM> install-package AspNet.Security.OAuth.GitHub

.AddGitHub(o => 
    {
        o.ClientId = Configuration["Authentication:GitHub:ClientId"];
        o.ClientSecret = Configuration["Authentication:GitHub:ClientSecret"];
    });

카카오톡 인증

카카오톡 계정 인증(Auth2.0)은 Kakao Developer에서 발급받을 수 있습니다.

PM> install-package AspNet.Security.OAuth.KakaoTalk

.AddKakaoTalk(o => 
    {
        o.ClientId = Configuration["Authentication:Kakao:ClientId"];
        o.ClientSecret = Configuration["Authentication:Kakao:ClientSecret"];
    });

네이버 인증

네이버 계정 인증(Auth2.0)은 Naver Developers에서 발급받을 수 있습니다.

PM> install-package Powerumc.AspNetCore.Authentication.Naver

.AddNaver(o => 
    {
        o.ClientId = Configuration["Authentication:Naver:ClientId"];
        o.ClientSecret = Configuration["Authentication:Naver:ClientSecret"];
    });

JWT 인증

JWT란 Json Web Token의 약자로써 이것은 웹상에서 서명과 인증 암호화 데이터를 만들기 위한 표준 기술입니다. Blazor Identity 모듈에서도 이 표준기술을 로그인 유저 세션으로 사용합니다.

스케폴딩

특정 구현 방식을 라이브러리(RCL) 형태로 제공받아 사용하고 필요한 부분을 스캐폴딩 하여 수정하는 것을 말합니다. 특히 스케폴딩을 통해 생성된 파일은 RCL보다 우선 적용되도록 설계되어 있으므로 재정의에 특화된 구조입니다. 또한 닷넷에서 제안하는 구현 방식을 토대로 학습 또는 확장이 용이하다는 장점을 가지고 있습니다.

Identity 모듈

Identity 모듈은 웹 인증과 계정관리를 하나로 제공하는 라이브러리(RCL) 입니다.

Account

   - StatusMessage
   - ConfirmEmailChange
   - ForgetPasswordConfirmation
   - RegisterConfirmation
   - ResetPasswordConfirmation
   - LoginWith2fa
   - AccessDenied
   - ExternalLogin
   - Lockout
   - LoginWithReccoveryCode
   - ResendEmailConfirmation
   - ConfirmEmail
   - ForgetPassword
   - Login
   - Logout

Account/Manage

   - Layout
   - ChangePassword
   - DownloadPersonalData
   - ExtarnalLogins
   - PersonalData
   - ShowRecoveryCodes
   - ManageNav
   - DeletePersonalData
   - Email
   - GenerateRecoveryCodes
   - ResetAuthenticator
   - TwoFactorAuthentication
   - StatusMessage
   - Disable2fa
   - EnableAuthenticator
   - Index
   - SetPassword
   - Register
   - ResetPassword

Account/Register

- Confirmation

스케폴딩 요령

한 번에 모든 모듈을 스케폴딩 하는 것 보다는 수정하고자 하는 부분을 하나씩 순차적으로 스케폴딩 하는 것이 더욱 효율적입니다.

회원가입 플로우

로그인
OAuth 인증
가입유무 DB 확인
이메일, OAuth 등록
확인 메일 체크
가입 최종 승인

스케폴딩 임시 설명

Scaffold Identity in ASP.NET Core projects MSDN

Name		Name	Last commit message	Last commit date
Latest commit History 334 Commits
.github		.github
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md

License

jamesnet214/blazor-authentication

Folders and files

Latest commit

History

Repository files navigation

Blazor Authentication

Blazor ID 구조와 외부 인증(OAuth) 끝내기

Contents

개요

❗ 학습 순서에 대한 안내

ID

이 ID 모듈을 선택하는 이유는...

하지만 ID(Identity) 구조를 반드시 사용해야 하는 것은 아닙니다!

OAuth

개발환경

IDE

호스팅

프로젝트 생성

Visual Studio

Visual Studio Code / NET Core CLI

필수 어셈블리

✔️ 클라이언트

✔️ 서버

데이터베이스 마이그레이션

마이그레이션이란?

마이그레이션 시점은 언제이며 어떻게 동작합니까?

마이그레이션 형식

데이터베이스 테이블

데이터베이스 테이블 (.NET6.0 기준)

OAuth

공급자(Provider)별 개발자 계정 만들기

인증키 샘플

구글 인증

페이스북 인증

트위터 인증

애플 인증

깃허브 인증

카카오톡 인증

네이버 인증

JWT 인증

스케폴딩

Identity 모듈

스케폴딩 요령

회원가입 플로우

인증 방식

About

Resources

License

Stars

Watchers

Forks

Releases

Sponsor this project

Packages 0

Contributors 3

Packages