라라벨 브리즈, 이메일 대신 아이디로 로그인하도록 수정하기

오늘의 포스트는 이전 포스트에서 예고한 대로 이메일이 아닌, 아이디로 로그인을 하도록 로그인 페이지를 수정해 보겠다.

그렇게 만들려면 그전에, 이전 포스트에서 다룬 내용처럼 데이터베이스의 users 테이블에 아이디를 저장할 컬럼을 만들어야 한다.

이전 포스트

Laravel 회원가입 폼 수정: 아이디와 닉네임 필드 추가 및 한글화

라라벨 브리즈 회원가입 폼을 수정하여 기본 name 필드를 삭제하고, userid와 nickname 컬럼을 추가하는 방법입니다. 데이터베이스 테이블 변경부터 #[Fillable] 어트리뷰트 정의, 그리고 유효성 검사 에러 메시지를 한글화 하는 팁까지 정리했습니다.

email 대신 userid로 로그인하도록 변경 · 4th-avenue/laravel13-livewire@440b45c · GitHub

설명 없음

github.com

전체적인 코드 수정은 이 깃허브 링크를 통해서 확인할 수 있다.

app/Livewire/Forms/LoginForm.php 파일 수정

이 파일에서 email이라고 쓰여있는 부분을 모두 userid로 바꿔야 한다.

단, 유효성 검사 안에 있는 email은 그냥 삭제한다.

#[Validate('required|string')]
public string $userid = '';

변수명이 $email에서 $userid로 변경되었다.

동시에 #[Validate] 어트리뷰트(유효성 검사)에서 email 규칙이 제거되었다.

아이디는 이메일 형식(@가 포함된 형태)이 아니기 때문에, 일반 문자열^string 검증만 통과하도록 규칙을 정상적으로 수정한 것이다.

if (! Auth::attempt($this->only(['userid', 'password']), $this->remember)) {
    RateLimiter::hit($this->throttleKey());

    throw ValidationException::withMessages([
        'form.userid' => trans('auth.failed'),
    ]);
}

• if (! Auth::attempt($this->only(['userid', 'password']), $this->remember)): 라라벨의 Auth::attempt()는 데이터베이스(users 테이블)에서 회원을 조회할 때 기본적으로 email 컬럼을 확인하도록 되어있었다.
  이것을 $this->only(['userid', ...])로 바꿨으니, 이제 라라벨은 데이터베이스의 userid 컬럼 값과 사용자가 입력한 패스워드를 비교하여 로그인 인증을 처리하게 된다.
• throw ValidationException::withMessages([ 'form.userid' => trans('auth.failed'), ]);: 비밀번호가 틀렸거나 없는 계정일 때 '인증에 실패했습니다' 같은 에러 메시지를 화면에 출력하는 부분이다.
  라이브와이어 블레이드 뷰 화면에 있는 <x-input-error :messages="$errors->get('form.userid')" /> 태그와 매핑되도록, form.email에서 form.userid로 변경했다.

throw ValidationException::withMessages([
    'form.userid' => trans('auth.throttle', [ ... ]),
]);

위의 설명과 같은 맥락이다.

로그인 시도를 5회 이상 실패하여 몇 초 동안 로그인이 제한될 때 나오는 경고 메시지(auth.throttle)를 이메일 입력창이 아닌 아이디 입력창 하단(form.userid)에 띄워주도록 변경된 것이다.

return Str::transliterate(Str::lower($this->userid).'|'.request()->ip());

라라벨은 악의적인 사용자가 로그인을 계속 시도하는 것을 막기 위해 '누가 로그인 시도를 실패하고 있는지' 기억해야 한다.

그 기준을 이전에는 소문자로 바꾼 이메일 주소 + 접속한 IP 조합으로 판별했는데, 이제는 소문자로 바꾼 아이디(userid) + 접속한 IP 조합을 기준으로 판별하여 카운트를 세도록 수정된 것이다.

login.blade.php 파일 수정

<!-- Userid -->
<div>
    <x-input-label for="userid" :value="__('Userid')" />
    <x-text-input wire:model="form.userid" id="userid" class="block mt-1 w-full" type="text" name="userid" required autofocus autocomplete="username" />
    <x-input-error :messages="$errors->get('form.userid')" class="mt-2" />
</div>

여기는 딱히 설명할 필요가 없을 것 같다.

간단히 설명하자면 email 입력 필드를 userid 입력 필드로 변경했다.

여기까지 수정하면 이제 이메일이 아닌, 회원 아이디로 로그인할 수 있게 된다.

layouts/navigation.blade.php 파일 수정 (닉네임 표시하기)

마지막 한 가지 문제가 남아있다.

로그인한 사용자의 이름^name이 표시되던 곳이 비어있다.

DB에서 name 컬럼을 삭제했으니 당연한 거다.

여기에 대신 닉네임이 표시되도록 수정해야 한다.

div 태그의 x-data 속성이 x-data="{{ json_encode(['name' => auth()->user()->name]) }}"이라고 되어있는 곳이 2곳 있다.

여기를 전부 x-data="{{ json_encode(['name' => auth()->user()->nickname]) }}"으로 수정하자.

한 곳은 데스크톱, 한 곳은 모바일 화면이기 때문에 둘 다 수정해야 한다.

이로써 회원가입부터 로그인, 그리고 로그인 이후 상단 내비게이션바에 사용자 고유의 닉네임이 표시되는 일련의 커스텀 인증 체계가 완성되었다.

다음 포스트

라라벨 브리즈, 프로필 수정 페이지에 nickname 항목 추가

라라벨 브리즈 환경에서 users 테이블의 name을 nickname으로 대체한 뒤 프로필 수정 페이지에서 발생하는 에러 해결법입니다. 정보 변경 시 기존 닉네임 중복 예외 처리를 하는 방법과 입력창 빨간 밑줄을 없애는 spellcheck 속성의 팁을 공유합니다.