Blazor/ASP.NET 구글 인증 로그인 기반 회원 가입 만들기 - 2. 회원가입 처리

목차

1. MongoDB 세팅 및 CRUD

2. 회원가입 처리

 

 

회원가입 코드 작성

Index.razor 수정

@page "/"
@inject NavigationManager NavigationManager
@using Google;
@using GoogleOAuthSample.MongoDB;
@using System.Security.Claims;
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject DBService DBService

<AuthorizeView>
    <Authorized>
        <button class="btn btn-primary" @onclick="Logout">구글 로그아웃</button>
        <br/>
        
        @if (userModel != null)
        {
            <div>
                로그인이 완료되었습니다!
                <br/>
                - 계정 정보 -
                <br/>
                이메일: @userModel.Email
                <br/>
                역할: @userModel.Role
            </div>
        }
    </Authorized>
    <NotAuthorized>
        <button class="btn btn-primary" @onclick="Login">구글 로그인</button>
    </NotAuthorized>
</AuthorizeView>

@code {
    UserModel userModel;
    string email;
    int role = 1;

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        var user = authState.User;

        if (user.Identity.IsAuthenticated)
        {
            // 인증된 사용자라면 NameIdentifier의 값을 가져온다. 여기서 googleId는 구글 계정의 고유값임. (MongoDB에서 자동생성된 _id가 아님)
            var googleId = user.Claims.FirstOrDefault(c => c.Type == ClaimTypes.NameIdentifier)?.Value;
            userModel = await DBService.GetAsync(googleId);

            // DB에 googleId에 해당하는 유저가 있다면, 이미 회원 가입된 상태
            if (userModel != null)
            {
                email = userModel.Email;
                role = userModel.Role;
            }
            // 회원가입 필요한 상태
            else 
            {
                if (Google.Data != null)
                {
                    var m = new UserModel();
                    m.GoogleId = Google.Data.ID;
                    m.Email = Google.Data.Email;
                    m.Role = 1;
                    await DBService.CreateAsync(m);
                }

                NavigationManager.NavigateTo("/", true);
            }
        }
    }

    private void Login()
    {
        NavigationManager.NavigateTo("signin-google");
    }

    private void Logout()
    {
        NavigationManager.NavigateTo("signout-google");
    }
}

 

순서

1. 구글 로그인 시도

2. 로그인 완료 후 Index페이지로 리디렉션됨 (GoogleAuthController에 의해)

3. Index.razor에서 IsAuthenticated로 인증된 유저인지 판단

4. 인증된 유저인 경우, DB에 존재하는 유저인지 판단

5. 있으면 그대로 UserModel 값을 페이지에 렌더링. 없으면 DB에 데이터를 생성하여 회원가입 처리

 

 

테스트

서버를 실행하여 페이지에서 구글 로그인을 시도합니다.

 

MongoDB Compass에서 확인

리프레쉬 버튼을 눌러 DB에 계정이 생성되었는지 확인합니다.

 

 

페이지에서 확인

이전 CRUD 테스트를 하면서 만든 crudtest 페이지에서도 확인할 수 있습니다.