콘텐츠로 이동

유저네임 로그인 화면

사용자가 유저네임과 비밀번호를 입력해 로그인하거나 새 계정을 만드는 화면입니다.

화면 예시

세로 화면과 가로 화면은 화면 리소스 하나가 함께 처리합니다.

유저네임 로그인 화면의 세로 예시입니다. 화면 가운데에 로그인이라는 제목이 붙은 대화 상자가 있고, 제목 아래에 계정이 없는지 묻는 문구와 새 계정 만들기 링크가 놓여 있습니다. 그 아래에는 username 입력란과 password 입력란이 위아래로 놓여 있고, password 입력란 오른쪽에는 입력한 비밀번호를 보이게 바꾸는 버튼이 있습니다. 대화 상자 맨 아래에는 로그인 버튼이, 오른쪽 위에는 닫기 버튼이 있습니다.

유저네임 로그인 화면의 가로 예시입니다. 가로로 넓어진 대화 상자 안에 계정이 없는지 묻는 문구와 새 계정 만들기 링크, username 입력란과 password 입력란, 로그인 버튼이 위에서 아래로 놓여 있고, 오른쪽 위에는 닫기 버튼이 있습니다.

사용 상황

로그인 화면에서 사용자가 유저네임을 로그인 수단으로 골랐을 때 이 화면을 엽니다. 유저네임과 비밀번호를 입력받는 화면은 레시피에 포함되지 않고 앱이 직접 준비해야 합니다. 이 화면은 그 입력 화면의 구현 예시입니다.

화면은 유저네임 입력란과 비밀번호 입력란, 로그인 버튼으로 구성되어 있습니다. 팝업으로 열면 닫기 버튼도 표시됩니다. 비밀번호 입력란 오른쪽에는 입력한 비밀번호를 보이거나 가리는 버튼이 있고, 제목 아래에는 아직 계정이 없는 사용자를 위한 새 계정 만들기 링크가 있습니다. 새 계정 만들기를 선택했을 때 어떤 화면을 열지는 앱이 정합니다. 화면 리소스는 사용자가 선택했다는 이벤트만 앱에 전달합니다.

관련 레시피

입력받은 유저네임과 비밀번호로 로그인을 처리하는 코드는 레시피가 담당합니다. 화면을 적용하기 전에 레시피의 사용자 흐름과 구현 절차를 먼저 확인하세요.

사용자가 아직 계정이 없는 유저네임을 입력하면 레시피는 그 유저네임으로 계정을 새로 만든 뒤 로그인합니다. 유저네임을 잘못 입력해도 새 계정이 만들어집니다. 새 계정이 만들어졌다는 사실을 사용자에게 알리는 방법은 새 계정과 다른 계정 처리를 참조하세요.

필요한 SDK 기능

화면에서 받은 유저네임과 비밀번호로 로그인하거나 계정을 만들려면 아래 Hive Axyl SDK 기능과 Hive 콘솔 설정이 필요합니다.

  • 유저네임 로그인: 이미 만들어진 유저네임 계정으로 로그인하는 Hive Axyl SDK 기능
  • 유저네임 계정 생성: 입력받은 유저네임과 비밀번호로 계정을 만드는 Hive Axyl SDK 기능
  • 추가 보안 적용: 계정 생성 요청에 앱 서버가 발급받아 전달한 grant key를 함께 보내도록 하는 Hive 콘솔 설정

필요한 API

위 기능을 구현할 때 앱에서 호출하는 Hive Axyl SDK 메서드입니다.

Unity 적용 안내

화면이 전달하는 유저네임과 비밀번호를 받아 두고, 로그인 버튼을 선택했을 때 그 값으로 로그인이 실행되도록 연결합니다. 화면은 로그인 버튼을 선택하는 순간 입력란과 그 버튼을 스스로 잠급니다. 로그인에 실패해 화면을 계속 보여 줄 때는 SetBusy(false)를 호출해 잠금을 푸세요. 화면을 닫는 방법은 화면 닫기를 참조하세요.

비밀번호를 보이거나 가리는 버튼이 달린 입력란과 로그인에 실패했을 때 띄울 실패 안내 토스트는 여러 화면이 함께 쓰는 공용 위젯으로, 공용 폴더에 들어 있습니다. 화면 폴더를 복사할 때는 공용 폴더, 폰트 폴더, UIKit.asmdef 파일도 함께 복사하세요. 복사하는 방법과 복사한 뒤 앱 어셈블리 정의 파일에 추가할 내용은 화면 리소스 가져오기를 참조하세요.

  • Unity GitHub 저장소: 복사할 unity/UI-Kit/UsernameLogin, unity/UI-Kit/Common, unity/UI-Kit/Fonts 폴더와 unity/UI-Kit/UIKit.asmdef 파일