Blazor/ASP.NET 구글 인증 로그인 기반 회원 가입 만들기 - 1. MongoDB 세팅 및 CRUD

읽기에 앞서 아래 과정까지 완료되어 있어야 합니다!

Blazor/ASP.NET 구글 인증 로그인 만들기 - 4. 구글 계정 정보 페이지에 띄우기

 

목차

1. MongoDB 세팅 및 CRUD

2. 회원가입 처리

 

 

 

회원가입 기능을 만들기 위해 DB를 이용하여야 합니다. MySQL을 많이 사용하기도 하지만 여기서는 MongoDB를 사용해보도록 하겠습니다.

 

https://www.mongodb.com/try/download/community

Try MongoDB Community Edition

 

MongoDB는 오픈소스이며 무료로 이용할 수 있습니다.

그러나, 클라우드 서비스 업체에서 MongoDB 서비스를 제공하는 행위 제외됩니다.

https://www.mongodb.com/licensing/server-side-public-license

 

 

설치 과정은 생략합니다.

 

MongoDB 세팅

1. MongoDB 데이터베이스 생성

MongoDB Compass를 이용하여 CLI가 아닌 GUI 환경에서 작업하도록 하겠습니다.

 

+ 버튼을 눌러 새 데이터베이스를 생성 합니다.

 

Database Name

GoogleOAuthSample

 

Collection Name

Users

 

Create Database를 눌러 생성을 완료 합니다.

 

 

2. MongoDB 데이터 추가

 

생성이 완료되었다면 ADD DATA - Insert document 를 눌러 새 데이터를 추가합니다.

 

NoSQL를 채택하고 있는 MongoDB는 스키마 생성 없이 JSON으로 편리하고 빠르게 데이터를 추가할 수 있습니다.

 

전부 지우고 아래 내용으로 채우고 Insert를 눌러 데이터를 추가합니다.

{
  "GoogleId": "0",
  "Email": "admin@gmail.com",
  "Role": 0
}

GoogleId

구글 계정의 고유 번호

 

Email

구글 계정의 이메일

 

Role

구글 계정과 관련없는 필드로, 사이트에서 자체적으로 사용할 목적으로 생성.

역할을 부여하여 일반 유저 또는 관리자 등 사이트에서 세분화된 접근 권한을 만들어낼 수 있음.

 

작성하지 않았던 _id 필드가 자동으로 생성된 것을 볼 수 있습니다.

MongoDB에서 데이터를 구분하기 위해 유니크한 필드를 생성한 것으로 보입니다.

 

 

프로젝트 세팅

1. Nuget 패키지 설치

Blazor 프로젝트로 돌아와 MongoDB.Driver Nuget 패키지를 설치합니다.

 

2. MongoDB 서비스 등록

appsettings.json 에 아래 내용을 추가합니다.

  "DB": {
    "ConnectionString": "mongodb://localhost:27017",
    "DatabaseName": "GoogleOAuthSample",
    "CollectionName": "Users"
  }

 

예시

 

프로젝트에 MongoDB 폴더를 만들고 DBSettings 클래스 파일을 생성 합니다.

namespace GoogleOAuthSample.MongoDB
{
    public class DBSettings
    {
        public string ConnectionString { get; set; } = null!;

        public string DatabaseName { get; set; } = null!;

        public string CollectionName { get; set; } = null!;
    }
}

 

Program.cs 에 appsettings.json의 DB 필드를 가져오도록 합니다.

builder.Services.Configure<DBSettings>(builder.Configuration.GetSection("DB"));

 

CRUD

1. UserModel.cs 추가

DB와 데이터를 주고 받기 위해 MongoDB 폴더에 UserModel 클래스 파일을 생성 합니다.

using MongoDB.Bson;
using MongoDB.Bson.Serialization.Attributes;

namespace GoogleOAuthSample.MongoDB
{
    public class UserModel
    {
        [BsonId]
        [BsonRepresentation(BsonType.ObjectId)]
        public string? Id { get; set; }

        public string GoogleId { get; set; } = null!;

        public string Email { get; set; } = null!;

        public int Role { get; set; }
    }
}

 

예시

2. DBService.cs 추가

서비스 생성자 및 CRUD 함수를 작성합니다.

using Microsoft.Extensions.Options;
using MongoDB.Driver;

namespace GoogleOAuthSample.MongoDB
{
    public class DBService
    {
        readonly IMongoCollection<UserModel> _users;

        public DBService(IOptions<DBSettings> settings)
        {
            var client = new MongoClient(settings.Value.ConnectionString);

            var db = client.GetDatabase(settings.Value.DatabaseName);

            _users = db.GetCollection<UserModel>(settings.Value.CollectionName);
        }

        public async Task<List<UserModel>> GetAsync() => await _users.Find(_ => true).ToListAsync();

        public async Task<UserModel?> GetAsync(string googleId) => await _users.Find(x => x.GoogleId == googleId).FirstOrDefaultAsync();

        public async Task CreateAsync(UserModel userModel) => await _users.InsertOneAsync(userModel);

        public async Task UpdateAsync(string googleId, UserModel userModel) => await _users.ReplaceOneAsync(x => x.GoogleId == googleId, userModel);

        public async Task RemoveAsync(string googleId) => await _users.DeleteOneAsync(x => x.GoogleId == googleId);
    }
}

 

3. 서비스 등록

Program.cs에서 DBService를 싱글톤으로 서비스를 등록합니다.

builder.Services.AddSingleton<DBService>();

 

테스트

이제까지 작업한 내용들이 정상적으로 동작하는지 확인합니다.

 

1. CRUDTest.razor 추가

MongoDB 폴더에 CRUDTest razor 페이지를 생성합니다.

@page "/crudtest"
@inject DBService DBService

<button class="btn btn-primary" @onclick="GetUsers">Select</button>
<button class="btn btn-primary" @onclick="CreateUser">Create</button>
<button class="btn btn-primary" @onclick="UpdateUser">Update</button>
<button class="btn btn-primary" @onclick="RemoveUser">Delete</button>

<br />
<br />
@if (list != null)
{
	@foreach (var u in list)
	{
		<div>			
			GoogleId: @u.GoogleId<br/>
			Email: @u.Email<br/>
			Role: @u.Role<br />
		</div>
		<hr />
	}
}

@code {

	List<UserModel> list;

	public async void GetUsers()
	{
		list = await DBService.GetAsync();
		StateHasChanged();
	}

	public async void CreateUser()
	{
		UserModel user = new();
		user.GoogleId = "1";
		user.Email = "user@gmail.com";		
		user.Role = 1; // 일반 유저
		await DBService.CreateAsync(user);
	}

	public async void UpdateUser()
	{
		if (list != null)
		{
			UserModel user = list.Find(m => m.GoogleId == "1");
			if (user != null)
			{
				user.Role = 0; // 관리자로 권한 업
				await DBService.UpdateAsync("1", user);
			}
		}
	}

	public async void RemoveUser()
	{
		if (list != null)
			await DBService.RemoveAsync("1");
	}
}

 

2. 테스트 진행

/crudetest 페이지로 이동하여 테스트를 진행합니다.

 

 

Select 테스트

Select 버튼을 눌러 DB로부터 데이터가 잘 로드되는지 확인합니다.

 

 

Create 테스트

Create 버튼을 누른 후 다시 Select 버튼을 눌러 새 데이터가 추가되는지 확인합니다.

 

 

Update 테스트

Update 버튼을 눌러 GoogleId가 1인 유저의 권한이 0 (관리자)로 변경되는지 확인합니다.

 

 

Delete  테스트

Delete 버튼을 누른 후 다시 Select 버튼을 눌러 GoogleId가 1인 유저가 삭제되는지 확인합니다.