Validator라는 것은 필수값을 입력하지 않을 경우 서버에 등록되지 않도록 하는 것을 말한다. 보통 사용자페이지에서도 하고 서버측에서도 한다. 아무래도 사용자 페이지에 노출된 부분은 사용자들이 임의로 변경할 수 있기때문에 반드시 서버측에서도 해주어야한다.
우선 로그인할때 Validator 처리를 해보자.
MemberController
public function loginok(Request $request){
$validated = $request->validate([
'email' => 'required',
'passwd' => 'required',
]);
$email = $request->email;
$passwd = $request->passwd;
$passwd = hash('sha512',$passwd);
$remember = $request->remember;
$loginInfo = array(
'email' => $email,
'passwd' => $passwd
);
$ismember = Members::where($loginInfo)->first();
if($ismember){
Auth::login($ismember, $remember);
return redirect() -> route('boards.index');
}else{
return redirect() -> route('auth.login')->with('loginFail', '아이디나 비밀번호가 틀렸습니다.');
}
}
$validated 부분을 추가했다. email과 passwd는 반드시 입력해야 하는 값이다. 이렇게 콘트롤러에서 처리를 해주고 에러 발생시 사용자 화면에서도 보이도록 수정해보자.
/resources/views/member/login.blade.php
@extends('boards.layout')
@section('content')
<style>
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 330px;
padding: 15px;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
</style>
<main class="form-signin w-100 m-auto">
<form method="post" action="/loginok">
@csrf
<div style="text-align:center;">
<img class="mb-4" src="/images/bootstrap-logo.svg" alt="" width="72" height="57">
<h1 class="h3 mb-3 fw-normal">로그인 페이지</h1>
</div>
<div class="form-floating">
<input type="email" name="email" class="form-control" id="floatingInput" placeholder="name@example.com"
value="{{ old('email') }}"
>
<label for="floatingInput">아이디(이메일)</label>
</div>
<div class="form-floating">
<input type="password" name="passwd" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">암호</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="1" name="remember"> Remember me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">로그인</button>
</form>
</main>
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@if(Session::has('loginFail'))
<script type="text/javascript" >
alert("{{ session()->get('loginFail') }}");
</script>
@endif
@endsection
value="{{ old('email') }}"
이 부분은 입력했던 값이 지워지지 않고 다시 입력돼도록 하기 위해 넣었다. submit으로 한 경우에만 해당된다.
다시 아래쪽에 보면 $errors->any부분을 추가했다. email이나 passwd를 입력하지 않고 로그인을 하면 에러처리를 하고 다시 로그인 페이지로 넘어오게 된다. 그때 에러값이 있다면 화면에 뿌려주겠다는 것이다.
테스트를 해보면...
이렇게 경고창을 보여주게 된다.
로그인 페이지는 submit으로 하는 경우다. submit으로 하는 경우에는 모두 이렇게 해주면 된다. 그러면 ajax로 하는 경우에는 어떨까? 회원가입 페이지를 보자.
/app/Http/Controllers/MemberController.php
<?php
namespace App\Http\Controllers;
use App\Models\Members;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Validator;
class MemberController extends Controller
{
public function login(){
return view('member.login');
}
public function signup()
{
return view('member.signup');
}
public function signupok(Request $request){
$validator = Validator::make($request->all(), [
'name' => 'required',
'email' => 'required',
'password' => 'required'
]);
if ($validator->fails()) {
return response()->json(array('msg'=> "필수값을 입력해 주세요.", 'result'=>false), 200);
exit;
}
$passwd = $request->password;
$passwd = hash('sha512',$passwd);
$uid = explode("@",$request->email);
$form_data = array(
'userid' => $uid[0],
'email' => $request->email,
'passwd' => $passwd,
'name' => $request->name,
'username' => $request->name
);
$ms = Members::where('email',$request->email)->count();
if($ms){
return response()->json(array('msg'=> "이미 사용중인 이메일입니다.", 'result'=>false), 200);
exit;
}
$rs = Members::create($form_data);
if($rs){
return response()->json(array('msg'=> "가입해 주셔서 감사합니다.", 'result'=>true), 200);
}else{
return response()->json(array('msg'=> "실패했습니다. 관리자에게 문의해주세요.", 'result'=>false), 200);
}
}
public function emailcheck(Request $request){
$email = $request->email;
$rs = Members::where('email',$email)->count();
if($rs){
return response()->json(array('msg'=> "이미 사용중인 이메일입니다.", 'result'=>false), 200);
}else{
return response()->json(array('msg'=> "사용할 수 있는 이메일입니다.", 'result'=>true), 200);
}
}
public function loginok(Request $request){
$validated = $request->validate([
'email' => 'required',
'passwd' => 'required',
]);
$email = $request->email;
$passwd = $request->passwd;
$passwd = hash('sha512',$passwd);
$remember = $request->remember;
$loginInfo = array(
'email' => $email,
'passwd' => $passwd
);
$ismember = Members::where($loginInfo)->first();
if($ismember){
Auth::login($ismember, $remember);
return redirect() -> route('boards.index');
}else{
return redirect() -> route('auth.login')->with('loginFail', '아이디나 비밀번호가 틀렸습니다.');
}
}
public function logout(){
auth() -> logout();
return redirect() -> route('boards.index');
}
}
signupok()에 Validator를 추가했다. Validator를 사용하려면 상단에
use Illuminate\Support\Facades\Validator;
를 추가해주어야 한다. 그거 보여줄려고 전체 소스를 붙여 넣은거다.
필수값이 입력되지 않으면 리턴값을 false로 보내서 처리하게 해 주었다. 사용자 페이지에는 딱히 수정할게 없어서 보여주지 않는다.