Blazor/ASP.NET 구글 인증 로그인 만들기 - 1. 프로젝트 세팅

소셜 인증을 통한 로그인은 많은 편리함을 주고 있습니다.

가장 큰 장점으로 유저 입장에서 여러 사이트의 아이디, 패스워드를 기억하지 않아도 된다는 것 입니다.

 

여기서는 구글 인증을 통해 얻어온 이메일 정보를 페이지에 띄어볼 것입니다.

 

목차

1. 프로젝트 세팅

2. 구글 클라우드 API 프로젝트 세팅

3. 구글 인증 처리 코드 작성

4. 구글 계정 정보 페이지에 띄우기

 

Blazor 에서 구글 인증 로그인을 하고 DB 연동을 통하여 회원가입하는 기능 구현 방법에 대해 설명드리겠습니다.

 

 

새 프로젝트 만들기

블레이저 서버 앱 템플릿 기준입니다.

 

프로젝트 이름은 GoogleOAuthSample 라고 할게요.

 

프레임워크는 .NET 6.0 기준이나 7.0 또는 8.0에서도 큰 차이는 없을 것으로 예상됩니다.

 

프로젝트 만들기 완료

 

실행하여 사이트가 정상적으로 동작하는지 확인합니다.

 

로그인 버튼 만들기

Pages 폴더의 Index.razor의 코드를 수정합니다.

 

@page "/"

<button class="btn btn-primary" @onclick="Login">구글 로그인</button>
<button class="btn btn-primary" @onclick="Logout">구글 로그아웃</button>

@code {

    private void Login()
    {
        
    }
    
    private void Logout()
    {
        
    }
}

 

 

간단하게 구글 로그인 버튼까지 만들어보았습니다.

 

향후 Login/Logout 함수에서는 구글 인증을 받기 위한 페이지로 리다이렉트하는 코드가 작성될 예정입니다.