[C#] MySql DB 연동하여 로그인 구현하기 (feat. 카카오톡 PC 버전 UI)

참, 저는 쓸데없이 하나에 열중하는 버릇이 있어요.

꽂히는 게 있으면 무조건 해야된달까.. ㅎㅎ

 

간단하게 MySql Database 연동해서 WinForm으로 로그인 구현하는 거만 만들어보려고 했는데,

쓸데없이 열심히 카카오톡 PC 버전 UI를 만들어봤네요 ^^

카카오톡 프로그램이 WinForm으로 만들어진게 아니라서 (뭐 실제론 잘 모르지만,,,)

완벽하게 따라할 수는 없어도 대충 흉내만 내봤습니다.

WinForm이 정말. 정~~말 UI 만들기가 쉬운데, 디자인은 뭐… 저는... 감각이 없나봐요…^^;;

물론 유튜브 보니깐 이쁘게 디자인 하는 사람도 많더라구요…

대부분 외국 개발자들인데 나름 참고하기 쏠쏠한 것도 많습니다.

 

또, 주저리 주저리 서론이 길었습니다.

본격적으로 로그인 구현을 해봅시다!

---

첫 번째, DB 연결하기.

먼저 Visual Studio 프로젝트를 만들어주시고~

로그인에 필요한 LoginForm 클래스와, 회원가입에 필요한 SignUp 클래스 두 개를 이용해서 해보기 전에!

가계부 프로그램 만들기에서도 등장했던, DBMySql 클래스를 다시 한 번 참고하여 프로젝트에 넣어주세요~

아래 링크 참고↓

2019/05/27 - [IT] - [C#][Database] Mysql Database 연결하기

[C#][Database] Mysql Database 연결하기

프로젝트 로드할 때 DB 연결해주는 것도 잊지마시구요~ㅎㅎ

public static DBMySql _db = new DBMySql();

만든 DBMySql.cs 클래스를 메인에서 사용해주기 위해 LoginForm.cs 에서 전역변수로 위와 같이 설정하여

DB 연결에 관한 함수들을 사용할 수 있게 선언해줍니다.

 

2022.04.04 추가내용

LoginForm.cs 에서 위와같이 데이터베이스 클래스를 _db 로 선언해주고

LoginForm 이 로드(실행)될 때 데이터베이스에 연결하는 부분에 대한 설명이 부족했습니다.

Form 클래스에서 Load 이벤트 만들어주고,

다음과 같이 데이터 베이스 연결 함수 호출 _db.Connection() 후에,

기존 데이터베이스의 사용자 정보를 가져오기 위한 ​LoadUserInfo() 함수를 호출해 주어야합니다.

 

VS 프로젝트에서 MySql로 넘어와서 DB에서 테이블을 만들어야겠죠?

로그인에 필요한 User 테이블을 만들어보겠습니다.

create table user (

   id varchar(32) primary key,

   pw varchar(32),

   name varchar(20),

   birth date,

   phone varchar(20)

);

저는 요렇게 만들었습니다. 아이디, 비밀번호, 이름, 생년월일, 전화번호 5가지 컬럼으로 구성했습니다.

아이디는 중복을 허용하지 않기때문에 Primary key로 선언해줘야합니다.

필요에 따라 컬럼을 추가하거나, 삭제하시면서 각자 컨셉에 맞게 사용하시면 됩니다.

 

---

2021.01.14 추가내용

아래의 코드에서 Config에 관련한 내용이 빠져서 추가했습니다.

namespace LoginTest
{
    enum eTName : int { _user }
    class Config
    {
        public static string Database = "becle";
        public static string Server = "localhost";
        public static string UserID = "becle_sys";
        public static string UserPassword = "becle_pw";
 
        public static string[] Tables = { "user" };
 
        public static DataSet user_ds = null;
    }
}

프로젝트에서 클래스를 하나 더 추가해 줍니다.

Config.cs 파일으로 추가했는데, 여기에 필요한 변수들을 선언하여 사용하도록 하였습니다.

Database 연결시에 필요한 변수들과, 사용자 정보를 DataSet으로 가져와서 사용하도록 user_ds 까지 선언해주었습니다.

이렇게 Config 파일까지 작성해주어야 아래에 있는 코드를 사용하실 수 있습니다.

---

2022.04.01 추가내용

Config 파일을 이용해서 사용하는 게 어려우신거 같아 추가로 설명드립니다.

아래의 코드들에서 나오는 Config.Tables[(int)eTName._user] 같이 사용하는 경우는 테이블이 많은 경우와 같이 관리가 용이하게 하도록 사용하는 경우인데, 지금은 user 테이블 하나만 쓰는 경우이기 때문에

Config.Tables[(int)eTName._user]  => "user" 테이블명으로 사용하시면 됩니다.

Config.user_ds 같은 경우는 메인화면에 user_ds 라는 데이터셋을 전역으로 선언해서 사용해도 되나 이 또한 관리가 용이하도록 한 것으로 편하신대로 사용하시면 됩니다.

---

---

두 번째, LoginForm 구현하기.

그, 제가 공을 들인 LoginForm UI 입니다. 하하.

헷갈리시면 안됩니다. 여러분 ㅋ 제가 만들었어요 ㅎㅋㅋㅋ

여기서 우리가 필요한 부분은 ①아이디 입력창, ②비밀번호 입력창, ③로그인 버튼, ④회원가입하기 버튼 딱 4가집니다.

저는 각각 ①txtID, ②txtPW, ③btnLogin, ④btnSignUp 으로 이름을 지어봤습니다.

위에 나와있는 이미지처럼 텍스트박스에 Placeholder를 지정하는 방법은 바로 전 포스팅을 참고해주세용~ㅎㅎ

2020/11/26 - [IT] - [C#] WinForm TextBox Placeholder 적용하기 (+ textBox 비밀번호 대체문자 적용하기)

 

여기서 해야될 것은 1. 로그인버튼 클릭 했을 때, 2. 회원가입하기 버튼 클릭했을 때 의 2가지 입니다.

 

1. 로그인버튼 클릭 했을 때

실제 아이디와 비밀번호가 일치하는지 알기 위해서는 먼저, DB에서 로그인 정보를 가져와서 입력한 아이디와 비밀번호가 일치하는지 확인합니다. 저는 아이디에 이메일을 붙여서도 로그인 가능하도록 하고 싶어서 ID 비교할 때 아래와 같이 비교했습니다.

private void btnLogIn_Click(object sender, EventArgs e)
{
    LoadUserInfo();
    CheckID_PW(txtID.Text, txtPW.Text);
}
 
public static void LoadUserInfo()
{
    //데이터베이스에서 사용자 정보 가져오기
    Config.user_ds = _db.SelectAll(Config.Tables[(int)eTName._user]);
}
 
private void CheckID_PW(string id, string pw)
{
    //사용자 정보와 비교해서 ID / Password 일치하는 지 확인
    if(Config.user_ds.Tables[0].Rows.Count > 0)
    {
        foreach (DataRow row in Config.user_ds.Tables[0].Rows)
        {
            if(id == row["id"].ToString() || id == row["id"].ToString() + "@ella.com")
            {
                if (pw == row["pw"].ToString()) MessageBox.Show("로그인에 성공했습니다.");
                else MessageBox.Show("비밀번호가 일치하지 않습니다. 확인 후 다시 입력해주세요.");
            }
        }
    } else
    {
        MessageBox.Show("사용자 정보가 없습니다.");
    }
}
 

 

2. 회원가입하기 버튼 클릭 했을 때

회원가입하기 버튼을 클릭하면 SignUpForm을 열어줍니다.

그러기 위해선 SignUpForm을 먼저 생성해 준 다음에 다음과 같이 구현합니다.

    SignUp _signUp = new SignUp();
    private void btnSignUp_Click(object sender, EventArgs e)
    {
        _signUp.StartPosition = FormStartPosition.Manual;
        _signUp.Location = new Point(Location.X + Width, Location.Y);
        _signUp.ClearTextBox();
        _signUp.Show();
    }
 

---

세 번째. SignUpForm 구현하기.

User 테이블에 입력될 내용들을 위와 같이 배치해 봤습니다.

비밀번호는 항상 두 번 입력하는게 국룰이죠?

또, 비밀번호에 왜이렇게 요즘 제한이 많은지 저도 따라해봤습니다.

나머지 이름, 전화번호, 생일은 그냥 입력하는 대로 데이터베이스에 입력해버리고

로그인에서 제일 중요한건 아이디와 비밀번호기 때문에, 그 두개에 대한 유효성 검사만 진행해서 구현해보겠습니다.

 

먼저, 아이디는 중복을 허용하지 않습니다.

이는 동일하게 실제 데이터베이스 상에 같은 아이디가 있는지 없는지 체크해주면 됩니다.

다음으로, 2번 입력한 비밀번호가 동일한지, 비밀번호가 4-32자리이며, 영문, 숫자, 특수문자를 포함하는지를 체크해줍니다.

이를 전부 확인버튼을 눌렀을때 = btnSignUp_Click 일때 다 체크하도록 아래와 같이 구현해보았습니다.

비밀번호 검사에 이용된 Regex (Regular Expression, 정규식)은 겁나 복잡해보이나,

나름의 규칙성이 있어 이해가 어렵진 않습니다. 하지만 맨날 까먹는다는 점. 결국은 구글링이 답이라는 점. ^^;

private void btnSignUp_Click(object sender, EventArgs e)
{
    if (!isValidID(txtID.Text)) { MessageBox.Show("이미 존재하는 아이디입니다."); return; }
    if (txtPW.Text != txtPW2.Text) { MessageBox.Show("비밀번호가 일치하지 않습니다. 확인 후 다시 입력해주세요."); return; }
    if (!isValidPassword(txtPW.Text)) { MessageBox.Show("비밀번호는 영문, 숫자, 특수문자를 포함해야합니다."); return; }
 
    string value = $"'{txtID.Text}', '{txtPW.Text}', '{txtName.Text}', '{txtBirth.Text}', '{txtPhone.Text}'";
    LoginForm._db.Insert(Config.Tables[(int)eTName._user], value);
    LoginForm.LoadUserInfo();
    MessageBox.Show("회원가입을 완료했습니다. 등록한 아이디로 로그인 해주세요.");
            
    Hide();
}
 
public static bool isValidID(string Text)
{
    if (Config.user_ds.Tables[0].Rows.Count > 0)
    {
        foreach (DataRow row in Config.user_ds.Tables[0].Rows)
        {
            if (Text == row["id"].ToString())
            {
                return false;
            }
        }
    }
    return true;
}
 
public static bool isValidPassword(string Text)
{
    //영문, 숫자, 특수문자 포함 4-32자리
    Regex regex = new Regex(@"^(?=.*?[A-Za-z])(?=.*?\d)(?=.*?[~`!@#$%\^&*()-+=.]).{4,32}$");
    Match match = regex.Match(Text);
    return match.Success;
}

이렇게 하면 로그인 구현하기는 끝납니다 ㅎㅎ

여기서 그치지 않고 여러 기능을 추가해나가면서 공부하시면 더더욱 좋겠죠?ㅎㅎ

---

2022.04.01 추가내용

전체 소스코드를 공유해달라는 분이 많아 압축파일로 첨부하였습니다.

위에서 설명한 코드 이외에 Placeholder를 사용한다거나 추가적인 부분이 많지만

핵심적인 내용은 위에서 설명한 내용을 참고해주시기 바랍니다.

이외에 또 궁금한 점이 있으면 댓글로 남겨주세요 : )

LoginTest.zip

19.35MB

---

앞으로도 궁금하신 부분 언제든지 댓글 남겨주시고

도움이 되셨다면 ❤공감❤ 꾹 눌러주세요 : )

그럼 다음 포스팅에서 만나요~^^