Authentication cho Vuejs + Laravel với Laravel Passport (Phần 1): Cấu hình back-end

Nội dung bài viết

Giới thiệu chung

Xin chào các bạn, trong quá trình làm việc xây dựng website thì chức năng đăng nhập cho website là một điều gần như không thể thiếu.

Việc tạo chức năng đăng nhập cho website thông thường (không sử dụng các Front-end Framework) thì đã có rất rất nhiều bài hướng dẫn rồi và hầu hết thì bạn cần sử dụng đến SESSION hay COOKIE. Đặc biệt là trong Laravel thì việc này lại càng dễ dàng vì chỉ cần 1 dòng comand bạn đã có thể tạo đầy đủ các chức năng: đăng nhập, đăng ký, quên mật khẩu,… Tuy nhiên nếu bạn sử dụng Front-end riêng biệt với Back-end thì sao. Ví dụ như dùng Vuejs Framework làm Front-end và Laravel làm backend chẳng hạn.

Chính vì vậy mà hôm nay mình xin hướng dẫn các bạn làm chức năng đăng nhập trên phía Backend sử dụng Laravel và Frontend sử dụng Vuejs nhé. Với back-end thì mình sẽ sử dụng 1 package của Laravel là Passport để làm việc này.

Bắt tay vào làm nào

Bước 1: Install Laravel

Chúng ta sẽ cài thông qua composer nên nếu ai chưa có composer thì các bạn hãy cài đặt để có thể tiếp tục nhé (trang chủ của Composer tại đây). Nếu bạn chưa có project Laravel hãy chạy lệnh sau để cài đặt 1 project Laravel nhé:

composer create-project --prefer-dist laravel/laravel auth-vuejs-laravel

Sau đó sẽ xuất hiện 1 thư mục tên là auth-vuejs-laravel và bên trong nó như sau là các bạn đã thành công rồi đó:

Cài đặt Laravel Passport

Sau khi có 1 project Laravel rồi thì các bạn cần cài đặt Passport nhé. Đây là 1 package đầy đủ chức năng để hỗ trợ bạn thực hiện chức năng này. Để tìm hiểu thêm về package này thì các bạn có thể truy cập tại đây.

Chạy lệnh sau trong project của bạn:

composer require laravel/passport

Sau khi cài đặt xong thì các bạn cần chỉnh sửa file ENV cho đúng thông số cầu hình database nhé. Sau đó thì chạy migrate để tạo ra các bảng cần thiết:

php artisan migrate

Chạy migrate xong thì chạy lệnh sau để hoàn tất quá trình cài đặt cũng như tạo ra key để các bạn có thể sử dụng:

Cấu hình

Sau khi cài đặt xong thì các bạn hãy lưu lại 2 cái key được generate ra nhé. Rồi tiếp tục các bạn hãy vào User model và trait Laravel\Passport\HasApiTokens vào nhé. Trait này sẽ cung cấp các hàm cân thiết để kiểm tra các token của người dùng gửi lên.

<?php

namespace App;

use Laravel\Passport\HasApiTokens;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    use HasApiTokens, Notifiable;
    ...

Sau đó vào AuthServiceProvider thêm vào trong boot() câu lệnh sau Passport::routes();. Lúc này AuthServiceProvider sẽ trông giống như sau:

<?php

namespace App\Providers;

use Laravel\Passport\Passport;
use Illuminate\Support\Facades\Gate;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;

class AuthServiceProvider extends ServiceProvider
{
    ...
    /**
     * Register any authentication / authorization services.
     *
     * @return void
     */
    public function boot()
    {
        $this->registerPolicies();

        Passport::routes();
    }
    ...
}

Cuối cùng các bạn hãy vào file config/auth.php rồi chỉnh sửa lại guard sang passport cho api nhé:

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],
    'api' => [
        'driver' => 'passport',
        'provider' => 'users',
    ],
],

Middleware

Để bảo vệ các API mà ko muốn cho người dùng chưa xác thực có thể truy cập. Các bạn cần sử dụng 1 middleware là: auth:api.

Laravel cung cấp cho bạn 1 file là routes/api.php, các bạn có thể tạo trước 1 route để thử nghiệm:

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Thử nghiệm thôi nào

Tạo tài khoản

Trước tiên thì các bạn tự tạo 1 tài khoản trên database nhé. Lưu ý là mật khẩu cần mã hóa nên các bạn có thể dùng tinker để tạo 1 mật khẩu rồi insert vào database:

Khởi động server

Vào project của bạn sau đó chạy lệnh để khởi động server nhé:

php artisan serve

Lấy token

Tiếp theo thì bật Post Man lên để test, nếu bạn chưa có Post Man thì vào đây để download nhé.

Chi tiết cho request:

Phương thức: POST
URL: http://127.0.0.1:8000/oauth/token
Body data:

grant_type:password
client_id:2
client_secret:4BcixxwWeJLvzKOhmIiwa6JmtOpovN38tQO2hJNS
username:test@vantien.net
password:12345678
scope:*

Sau khi gửi request lên thì server sẽ gửi lại cho bạn dữ liệu như trong ảnh. Trong đó thì:

token_type: Bearer với kiểu này thì bạn cần thêm Bearer ở trước token nếu muốn truy cập các api.
expires_in: thời gian token hết hiệu lực (tính bằng giây)
access_token: token để người dùng có thể truy cập vào các API được bảo vệ bằng middleware. Thường thì phía Front-end sẽ lưu lại token này bằng Cookie hay LocalStorage để gửi kèm mỗi lần request.
refresh_token: dùng để được lấy 1 access_token mới khi nó hết hạn.

Lấy thông tin user

Sau khi có access_token rồi thì các bạn có thể sử dụng để test route mà chúng ta đã viết ở trên. Tiếp tục vẫn là Post Man nhé:

Chi tiết request

Phương thức : GET
Header:
- Authorization: Bearer access_token_của_bạn
- Accept: application/json

Kết luận

Trên đây là hướng dẫn các bạn thực hiện phía back-end sử dụng Laravel với package hỗ trợ là Passport. Phần sau mình sẽ hướng dẫn các bạn thực hiện trên Vuejs.

Cảm ơn các bạn đã đọc bài viết.

Các bạn có thể download Source Code tại đây: https://github.com/nguyentien98/auth-vuejs-laravel

Tham khảo

https://laravel.com/docs/5.7/passport