form validation과 jetstream, 로그인한 user 알아내기, 리소스 라우팅

Form validation

form validation은 안전을 위해 프론트쪽에서 한 번 거르고, 서버 측에서 한 번 더 거르는게 좋다.

왜냐하면 먼저 프론트에서 bootstrap 같은 라이브러리를 이용해 내용의 유효성을 검사해도,

사용자가 개발자 모드를 켜서 input text에 있는 required를 지우면 프론트에서의 유효성 검사는 뚫리게 되기 때문이다.

 

1. bootstrap을 이용해 유효성 검사를 한다.

 

2. 서버 측에서 하는 유효성 검사를 한다.

라라벨에서는 유효성 검사하는 기능을 제공한다.

 

controller의 유효성 검사할 함수

public function store(Request $request)
{
    // 유효성 검사
    request()->validate([   
        'title'=>'required|max:255',
        'content'=>'required'
    ]);
    //같음
    // $validatedData = $request->validate([
    //     'title' => ['required', 'max:255'],
    //     'content' => ['required'],
    // ]);
    ...

 

html코드

{{--오류 한꺼번에 출력하기--}}
@if($errors->any())
    @foreach ($errors->all() as $error)
        <div>{{ $error }}</div>
    @endforeach
@endif

{{--오류 따로 출력--}}
@error('title')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

{{--유효성 검사 걸리면 text 필드 테두리에 빨간 선 그리기--}}
<input id="title" type="text" class="@error('title') is-invalid @enderror">

{{--기존값 유지--}}
<input type="text" value="{{ old('title') ? old('title') : '' }}" name="title" required>

따로 출력 결과 예시

한꺼번에 출력 결과 예시

 

라라벨 코리아 validation 부분에 다른 방법도 많으니까 참고하면 좋다.

 

 

 

로그인 기능 만들기 - jetstream

라라벨은 jetstream이라는 로그인(인증) 기능을 제공하기 때문에 따로 만들지 않아도 된다.

현재 라라벨 프로젝트로 가서 아래의 명령을 치면 된다. 

composer require laravel/jetstream
php artisan jetstream:install inertia
npm install
npm run dev
php artisan migrate

inertia는 ui를 vue.js를 이용해서 만드는 것이고, livewire은 기존 laravel php 언어로 만드는 것이다.

blade같은 걸로 만들고 싶은거면 inertia 자리에 inertia 대신 livewire를 적어주면 된다.

 

 

그다음 config.php 파일의 jetstream.php 와

'features' => [
    Features::termsAndPrivacyPolicy(), // 이용약관 묻는거
    // Features::profilePhotos(),
    // Features::api(),
    // Features::teams(['invitations' => true]),
    Features::accountDeletion(),
],

fortify.php를 수정하여 인증쪽을 커스텀할 수 있다.

'features' => [
    Features::registration(),
    Features::resetPasswords(),
    // Features::emailVerification(),
    Features::updateProfileInformation(),
    Features::updatePasswords(),
    Features::twoFactorAuthentication([
        'confirmPassword' => true,
    ]),
],

 

 

 

 

이메일 인증 기능 만들기 - jetstream

1. app / Models / User.php User class에다 MustVerifyEmail 인터페이스 구현을 추가한다.

예시

2. config / fortify.php로 가서 이메일 인증 부분 주석을 해제시킨다.

Features::emailVerification()

 

3. .env 파일로 가서 mail 부분을 수정해준다.

mailtrap : 이메일을 테스트하는 데 사용하는 온라인 프로그램

mailtrap을 이용해서 가상 메일 함을 만든다.

integration을 Laravel 7+로 맞추고 아래의 내용을 복사하고, .env에 가서 기존 내용에다 저 내용에 맞게 수정한다.

결과

회원가입을 하면 email이 보내진다.

 

 

 

jetstream 이용약관 페이지 수정하기

resources / markdown 아래에 있는 markdown 파일들을 수정하면 된다.

 

 

 

jetstream 로고 수정하기

저 로고를 수정할 수 있다.

 

inertia로 했을 경우

resources / js / Jetstream 폴더 아래의

resources/js/Jetstream/AuthenticationCardLogo.vue
resources/js/Jetstream/ApplicationLogo.vue
resources/js/Jetstream/ApplicationMark.vue

이 세개 vue 파일의 svg코드를 수정하고

npm run dev

을 치면 로고를 수정할 수 있다.

 

 

livewire로 했을 경우

php artisan vendor:publish --tag=jetstream-views

이 명령어를 치면 

\vendor\laravel\jetstream\resources\views에 있던 내용이 \resources\views\vendor\jetstream에 카피되어 수정할 수 있다.

resources/views/vendor/jetstream/components/application-logo.blade.php, 
resources/views/vendor/jetstream/components/authentication-card-logo.blade.php, resources/views/vendor/jetstream/components/application-mark.blade.php components

에 있는 svg 코드를 고치면 로고를 고칠 수있다.

 

 

 

현재 로그인한 사용자의 아이디 알아내기

auth()->id(); // 현재 로그인한 사용자의 id를 리턴
auth()->user(); // 현재 로그인한 사용자의 정보를 리턴

활용 예시

public function show(Book $book)
{
    if(auth()->id() != $book->user_id) { 
        abort(403); // 403 오류 페이지를 띄움
    }
    //같음
    // abort_if(auth()->id() != $book->user_id, 403);
    //abort_if(!auth()->user()->owns($book), 403);
    //abort_unless(auth()->user()->owns($book), 403);
}



// User 모델 코드
//public function owns(Book $book) {
//    return auth()->id() == $book->user_id;  
//}

 

 

 

리소스 라우팅

Route::middleware(['auth'])->prefix('books')->group(function () {
    Route::get('/', [BookController::class, 'index'])->name('home');
    Route::get('/create', [BookController::class, 'create']);
    Route::post('/', [BookController::class, 'store']);
    Route::get('/{book}', [BookController::class, 'show']);
    Route::get('/{book}/edit', [BookController::class, 'edit']);
    Route::put('/{book}', [BookController::class, 'update']);
});

이렇게 긴 라우팅 코드를 resourceful 라우트를 사용하면 한 줄로 줄일 수 있다.

Route::resource('books', BookController::class)->middleware('auth');

 

 

 

 

출처 : jetstream 공식페이지 문서 https://jetstream.laravel.com/1.x/installation.html#application-logo