UNITY/MOBILE-개발
3. 유니티 모바일 2D 로그인, 회원가입 창
아침밥챙겨먹어
2023. 11. 12. 17:45
이후에 백앤드 연동을 위해 로그인과 회원가입 기능을 넣어보았다.
우선은 JSON파일을 기반으로 수행한다.
로그인 화면을 위해 Canvas를 새로 만들어주고, 로그인 패널과, 회원가입 패널을 따로 만들어 준다.
로그인 패널이다.
일반적으로는 로그인과 회원가입이 나란히 있는게 일반적이지만 그렇게 하니 anchor을 적용하여 화면조절에 따른 크기 조절이 쉽지않았다.
회원가입 패널이다.
내부 첫번째 패널은 ID, PW, PWCheck Input의 길이와 너비를 통일해 주기위해 생성
두번째 패널은 나머지 3개의 길이를 통일 시키기 위해 생성
겹치는 ID가 있는지 확인하기 위해 CheckID버튼을 생성, 그리고 유효한 ID일경우 checkBox1의 색깔이 바뀐다.
비밀번호를 올바르게 입력했는지 확인하기 위해 CheckPW, checkBox2도 동일한 기능.
훌륭한 유니티는 비밀번호는 물론, 기본적인 정규화는 만들 필요 없이 다 제공해준다.
아이디 또는 비밀번호의 길이의 제한을 주고 싶으면 바로 위의 Character Limit을 사용한다.
이제 사용자 객체를 만든다.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
[System.Serializable]
public class UserData
{
public string ID;
public string Password;
public string Nickname;
public string Email;
public string PhoneNumber;
}
[System.Serializable]
public class UserDataList
{
public List<UserData> userDatas = new List<UserData>();
}
사용자는 ID, Password, 닉네임, 이메일, 휴대폰 번호를 가지도록 하였다.
Serializable를 키지 않으면 json에 제대로 안들어간다.
회원가입 기능을 할 script를 만들어준다.
우선 전체 코드
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.IO;
using UnityEngine.UI;
public class SignUpController : MonoBehaviour
{
public InputField ID;
public InputField Password;
public InputField PasswordCheck;
public InputField Nickname;
public InputField Email;
public InputField PhoneNumber;
public Button checkID;
public Button checkPassword;
public Button checkBoxID;
public Button checkBoxPW;
public GameObject loginPanel;
public GameObject signUpPanel;
void Start()
{
ID.onValueChanged.AddListener(delegate { OnIDChanged(); });
Password.onValueChanged.AddListener(delegate { OnPWChanged(); });
PasswordCheck.onValueChanged.AddListener(delegate { OnPWChanged(); });
}
private void reset()
{
ID.text = "";
Password.text = "";
PasswordCheck.text = "";
Nickname.text = "";
Email.text = "";
PhoneNumber.text = "";
}
public void Back()
{
reset();
signUpPanel.SetActive(false);
loginPanel.SetActive(true);
}
public void SignUp()
{
if (checkBoxID.IsInteractable() && checkBoxPW.IsInteractable())
{
UserData userData = new UserData();
userData.ID = ID.text;
userData.Password = Password.text;
userData.Nickname = Nickname.text;
userData.Email = Email.text;
userData.PhoneNumber = PhoneNumber.text;
string path = Path.Combine(Application.dataPath, "userData.json");
UserDataList userDataList = new UserDataList();
if (File.Exists(path))
{
string existingData = File.ReadAllText(path);
userDataList = JsonUtility.FromJson<UserDataList>(existingData);
}
userDataList.userDatas.Add(userData);
string newData = JsonUtility.ToJson(userDataList, true);
File.WriteAllText(path, newData);
reset();
signUpPanel.SetActive(false);
loginPanel.SetActive(true);
}
else
{
Debug.Log("ID와 비밀번호 확인 미완료");
}
}
public void CheckID()
{
string id = ID.text;
string path = Path.Combine(Application.dataPath, "userData.json");
if (File.Exists(path))
{
string jsonData = File.ReadAllText(path);
UserDataList userDataList = JsonUtility.FromJson<UserDataList>(jsonData);
foreach (UserData userData in userDataList.userDatas)
{
if (userData.ID == id)
{
Debug.Log("중복되는 ID가 있습니다.");
checkBoxID.interactable = false;
return;
}
}
Debug.Log("사용가능한 ID 입니다.");
checkBoxID.interactable = true;
}
else
{
Debug.Log("User data not found.");
}
}
public void CheckPW()
{
string pw = Password.text;
string check = PasswordCheck.text;
if (pw != check)
{
Debug.Log("비밀번호가 일치하지 않습니다.");
checkBoxPW.interactable = false;
}
else
{
Debug.Log("비밀번호가 확인됐습니다.");
checkBoxPW.interactable = true;
}
}
public void OnIDChanged()
{
if(ID.text.Length < 4)
{
checkID.interactable = false;
}
else
{
checkID.interactable = true;
}
checkBoxID.interactable = false;
}
public void OnPWChanged()
{
if (Password.text.Length < 4)
{
checkPassword.interactable = false;
}
else
{
checkPassword.interactable = true;
}
checkBoxPW.interactable = false;
}
}
함수 하나씩 뜯어보았다.
SignUp 함수, 회원가입 버튼의 기
public void SignUp()
{
if (checkBoxID.IsInteractable() && checkBoxPW.IsInteractable())
{
UserData userData = new UserData();
userData.ID = ID.text;
userData.Password = Password.text;
userData.Nickname = Nickname.text;
userData.Email = Email.text;
userData.PhoneNumber = PhoneNumber.text;
string path = Path.Combine(Application.dataPath, "userData.json");
UserDataList userDataList = new UserDataList();
if (File.Exists(path))
{
string existingData = File.ReadAllText(path);
userDataList = JsonUtility.FromJson<UserDataList>(existingData);
}
userDataList.userDatas.Add(userData);
string newData = JsonUtility.ToJson(userDataList, true);
File.WriteAllText(path, newData);
reset();
signUpPanel.SetActive(false);
loginPanel.SetActive(true);
}
else
{
Debug.Log("ID와 비밀번호 확인 미완료");
}
}
회원가입버튼을 눌렀을때, ID와 비밀번호 유효 검사가 완료되었을때만 진행한다.
유효할 경우 새로운 userData 객체를 만들어, json파일에 저장해 줄 것이다.
json파일에 이미 있는 userData들을 읽어와서 userDataList에 임시적으로 저장해준다.
그 뒤, 새로 만든 userData를 userDataList에 추가한뒤, 다시 json에 작성한다.
public void CheckID()
{
string id = ID.text;
string path = Path.Combine(Application.dataPath, "userData.json");
if (File.Exists(path))
{
string jsonData = File.ReadAllText(path);
UserDataList userDataList = JsonUtility.FromJson<UserDataList>(jsonData);
foreach (UserData userData in userDataList.userDatas)
{
if (userData.ID == id)
{
Debug.Log("중복되는 ID가 있습니다.");
checkBoxID.interactable = false;
return;
}
}
Debug.Log("사용가능한 ID 입니다.");
checkBoxID.interactable = true;
}
else
{
Debug.Log("User data not found.");
}
}CheckID함수, checkID버튼을 눌렀을때 ID가 겹치는지 확인한다.
json파일을 읽어와서, 중복되는 ID가 있는지 검사하고 없을경우 checkBoxID를 체크한다.
public void CheckPW()
{
string pw = Password.text;
string check = PasswordCheck.text;
if (pw != check)
{
Debug.Log("비밀번호가 일치하지 않습니다.");
checkBoxPW.interactable = false;
}
else
{
Debug.Log("비밀번호가 확인됐습니다.");
checkBoxPW.interactable = true;
}
}CheckPW 함수, 비밀번호와 비밀번호 확인이 서로 일치하는지 확인한다.
일치할 경우 checkBoxPW를 체크한다.
public void OnIDChanged()
{
if(ID.text.Length < 4)
{
checkID.interactable = false;
}
else
{
checkID.interactable = true;
}
checkBoxID.interactable = false;
}
public void OnPWChanged()
{
if (Password.text.Length < 4)
{
checkPassword.interactable = false;
}
else
{
checkPassword.interactable = true;
}
checkBoxPW.interactable = false;
}
이 두 함수는 만약 ID또는 비밀번호 유효성을 검사하였는데 값을 변경할 경우, checkBox를 해제한다.
또한 최소길이도 검사하여 미만일 경우 check 버튼을 비활성화 한다.
위의 두 함수는 아래 코드를 사용해 상시적으로 확인한다.
void Start()
{
ID.onValueChanged.AddListener(delegate { OnIDChanged(); });
Password.onValueChanged.AddListener(delegate { OnPWChanged(); });
PasswordCheck.onValueChanged.AddListener(delegate { OnPWChanged(); });
}
다음 로그인 script
로그인 기능만 수행하면되서 간단하다.
using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine;
using UnityEngine.UI;
public class LoginController : MonoBehaviour
{
public InputField ID;
public InputField Password;
public GameObject loginPanel;
public GameObject signUpPanel;
public void toSignUp()
{
loginPanel.SetActive(false);
signUpPanel.SetActive(true);
}
public void Login()
{
string id = ID.text;
string password = Password.text;
string path = Path.Combine(Application.dataPath, "userData.json");
if (File.Exists(path))
{
string jsonData = File.ReadAllText(path);
UserDataList userDataList = JsonUtility.FromJson<UserDataList>(jsonData);
foreach (UserData userData in userDataList.userDatas)
{
if (userData.ID == id && userData.Password == password)
{
Debug.Log("Login successful!");
// 로그인 성공 시 수행할 작업.
return;
}
}
Debug.Log("Login failed. Invalid ID or password.");
}
else
{
Debug.Log("User data not found.");
}
}
}json파일에 사용자가 입력한 동일한 ID가 있는지 확인하고, 비밀번호도 일치하는지 확인하여 로그인을 진행한다.
이제 이 두 script를 UserManager란 빈 object를 생성해서 넣어준다.
필요한 object들도 모두 넣어주고 각 버튼들에게 수행해야하는 onClick함수를 지정해주면 완성이다.
시작하기 전에 LoginPanel외에는 모두 비활성화 해준다.
-완-
이후에 로그인을 성공하면 Dialogue로 들어가고, ID값을 전달하는 부분도 만들어야한다.