iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

2

今天要開始實作登入跟登出的部分了

會員登入驗證

會員註冊完成後,接下來要提供會員做登入的動作,必須要能夠識別使用者的帳號密碼是否正確,並記錄會員的登入資訊,在會員登入後,才能判斷會員是否有權限去做管理者才能做的商品的功能,接下來我們就開始時做會員登入的功能吧。

登入及登出路由

在使用登入及登出的流程,我們有規劃登入頁、登入處理及登出三個路由規劃

說明 網址規範 方法
使用者登入頁面 /user/auth/sign-in GET
使用者登入處理 /user/auth/sign-in POST
使用者登出 /user/auth/sign-out GET

routes/web.php

//使用者
Route::group(['prefix' => 'user'], function(){
    //使用者驗證
    Route::group(['prefix' => 'auth'], function(){
        //使用者登入頁面
        Route::get('/sign-in', 'UserAuthController@signInPage');
        //使用者登入處理
        Route::post('/sign-in', 'UserAuthController@signInProcess');
        //使用者登出
        Route::get('/sign-out', 'UserAuthController@signOut');
    });
});

登入頁控制器及模板

登入頁的控制器與模板與註冊頁相似,在收到請求之後,會顯示auth.signIn模板的資料,並將$binding變數的資料傳送到模板中作顯示

app/Http/Controllers/UserAuthController.php

<?PHP
namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Validator; //驗證器
use Hash; //雜湊
use Mail; //寄信
use App\Shop\Entity\User; //使用者 Eloquent ORM Model

class UserAuthController extends Controller
{
    //登入頁面
    public function signInPage()
    {
        //do something~
        $binding = [
            'title' => '登入',
        ];
        return view('auth.signIn', $binding);
    }
}
?>

在使用者作登入時,會要求使用者輸入E-mail及密碼(password),讓我們可以驗證使用者的身份為何,在這樣的規劃下,使用者登入頁的模板會長的像下面這樣

resources/views/auth/signIn.blade.php

<!-- 指定繼承 layout.master 母模板 -->
@extends('layout.master')

<!-- 傳送資料到母模板,並指定變數為title -->
@section('title', $title)

<!-- 傳送資料到母模板,並指定變數為content -->
@section('content')
<div class="container">
    <h1>{{ $title }}</h1>

    <!-- 錯誤訊息模板元件 -->
    @include('components.validationErrorMessage')

    <form action="/user/auth/sign-in" method="post">
        <!-- 手動加入 csrf_token 隱藏欄位,欄位變數名稱為 _token -->
        <input type="hidden" name="_token" value="{{ csrf_token() }}"/>

        <label>
            E-mail:
            <input type="text" name="email" placeholder="Email" value="{{ old('email') }}"/>
        </label>

        <label>
            密碼:
            <input type="password" name="password" placeholder="密碼" value="{{ old('password') }}"/>
        </label>

        <button type="submit">登入</button>
    </form>
</div>
@endsection

在登入頁模板中,沿用了註冊的錯誤訊息模板元件,處理登入資料時,也需要驗證使用者輸入的資料是否正確,當資料驗證錯誤時,一樣需要顯示驗證錯誤的相關訊息,在先前我們已經將這個錯誤訊息模板元件化了,所以在這邊直接引用就好,而且當之後元件化的模板樣式若有異動,在所有引用的頁面也會一併的作異動,這就是元件化的好處,減少重複的程式,且容易修改異動。

在登入時,需要傳送帳號密碼資料的請求作登入處理,而該請求也有被Laravel保護著,避免受到CSRF(跨網站請求偽造)攻擊,所以在表單中一樣要加入CSRF欄位

目前的頁面如下
http://localhost:6943/user/auth/sign-in
https://ithelp.ithome.com.tw/upload/images/20191012/201056942KO40Wbkll.png


上一篇
[Day 30] Laravel實作 - 會員註冊(九)
下一篇
[Day 32] Laravel實作 - 會員登入及登出(二)
系列文
Laravel從入門到放棄…………原生PHP (疑?48

尚未有邦友留言

立即登入留言