Bài 2: Cài đặt Laravel 5.6 và laravel passport.

Thông qua bài trước chúng ta đã hiểu 1 số khái niệm, tiếp tục series chúng ta bắt tay làm việc thôi.

1. Cài đặt laravel và nuxt.js

Khởi tạo thư mục làm việc. composer create-project --prefer-dist laravel/laravel laravel-nuxtjs-more-easy-to-learn "5.6.*"

các bạn nên cài xampp tùy biến tên miền ảo nhé đây là kiến thức cơ bản rồi nên mình không giải thích thêm

Thông qua bài 1, các bạn cần cài vue/cli để cài đặt nuxt.js. Tại thư mục đâu đó gì cũng được, còn mình thì để luôn nuxt-client trong laravel-nuxtjs-more-easy-to-learn cho tiện luôn

Đây là cấu trúc thư mục chính của chúng ta chúng ta vào nuxt-client để cài đặt dependencies

cd nuxt-client

npm install

sau đó

npm run dev

để chạy ứng dụng client http://localhost:3000

Chúng ta cần config .env như database, username, password của mysql. Bước này thì dễ rồi nên mình bỏ qua nhanh và tạo bảng mặc định có sẵn

2. Laravel Passport

Cài đặt laravel passport

composer require laravel/passport

Tạo bảng thông qua migrate

php artisan migrate

Để hiểu rõ hơn về laravel passport là gì? Trên diễn đàn của chúng ta rất nhiều bài cụ thể về nó, theo mình các bạn nên hiểu các cơ chế hoạt động trước, mình xin phép giải thích ngắn gọn thôi

Để tạo personal access và password grant chúng ta sẽ cài đặt bằng

php artisan passport:install

tại AppUser

<?php

namespace App;

use LaravelPassportHasApiTokens;
use IlluminateNotificationsNotifiable;
use IlluminateFoundationAuthUser as Authenticatable;

class User extends Authenticatable
{
    use HasApiTokens, Notifiable;
}

Tiếp theo chúng ta sẽ cài đặt để đăng kí cần thiết access token tại AuthServiceProvider

<?php

namespace AppProviders;

use LaravelPassportPassport;
use IlluminateSupportFacadesGate;
use IlluminateFoundationSupportProvidersAuthServiceProvider as ServiceProvider;

class AuthServiceProvider extends ServiceProvider
{
    /**
     * The policy mappings for the application.
     *
     * @var array
     */
    protected $policies = [
        'AppModel' => 'AppPoliciesModelPolicy',
    ];

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

        Passport::routes();
    }
}

tại config/auth.php để có thể dùng được driver passport và api

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

    'api' => [
        'driver' => 'passport',
        'provider' => 'users',
    ],
],

3.Fake database và viết 1 số method để call API

Chúng ta sử dụng faker để tạo thêm user đăng nhập. tại database/seeds/UsersTablesSeeder.php

<?php

use IlluminateDatabaseSeeder;
use AppUser;

class UsersTablesSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        return factory(User::class, 50)->create();
    }
}

chúng ta sẽ fake 50 người dùng tất cả đều có password mặc định là secret

chúng ta sẽ tạo Controller bằng dòng lệnh php artisan make:controller Auth/AuthController chả biết mình nhớ đúng chưa, nếu sai thì các bạn đổi lại AuthAuthController nhé

chúng ta sẽ xây dựng sẵn các method xử lý

<?php

namespace AppHttpControllersAuth;

use IlluminateHttpRequest;
use AppUser;
use AppHttpControllersController;
use GuzzleHttpClient;
use IlluminateSupportFacadesHash;

class AuthController extends Controller
{
    public function register(Request $request)
    {
        $request->validate([
            'email' => 'required',
            'name' => 'required',
            'password' => 'required'
        ]);

        $user = User::firstOrNew(['email'=>$request->email]);
        $user->name = $request->name;
        $user->email = $request->email;
        $user->password = bcrypt($request->password);
        $user->save();

        $guzzle = new Client;
        //create token for user
        $response = $guzzle->post(url('oauth/token'), [
            'form_params' => [
                'grant_type' => 'password', //sử dụng cơ chế password grant
                'client_id' => '2', 
                'client_secret' => 'ElLyLtBPxqTRAb9nMWiUc0JOMvLT2oihFhpLoBKp', // về secret có thể sẽ khác nhau các bạn thay đổi cho phù hợp
                'username' => $request->email,
                'password' => $request->password,
                'scope' => ',
            ],
        ]);

        return response(['data' => json_decode((string) $response->getBody(), true), 'email' => $user->email, 'userName' => $user->name]);
    }

    public function login(Request $request)
    {
        $request->validate([
            'email' => 'required',
            'password' => 'required'
        ]);

        $user = User::where('email', $request->email)->first();
        if (!$user) {
            return response(['status' => 'error', 'message' => 'User not found']);
        } elseif (Hash::check($request->password, $user->password)) {
            $guzzle = new Client;

            $response = $guzzle->post(url('oauth/token'), [
                'form_params' => [
                    'grant_type' => 'password',
                    'client_id' => '2',
                    'client_secret' => 'ElLyLtBPxqTRAb9nMWiUc0JOMvLT2oihFhpLoBKp',
                    'username' => $request->email,
                    'password' => $request->password,
                    'scope' => ',
                ],
            ]);

            return response(['data' => json_decode((string) $response->getBody(), true), 'email' => $user->email, 'userName' => $user->name]);
        }
    }
}

tại routes/api.php các bạn thêm cho mình 1 số routes để call API tương ứng các method ở trên

Route::post('/register', 'AuthAuthController@register');
Route::post('/login', 'AuthAuthController@login');

Để test được hàm có chạy được không chúng ta sẽ sử dụng POSTMAN

với phương thức POST chúng ta login bằng user soi bên trong database. Kết quả trả về như trên hình về access_token chính là thứ xác minh người dùng đã đăng nhập.

Bài hôm nay mình viết đã kết thúc hẹn các bạn bài 3 là lúc chúng ta thiết lập giao diện của client dựa trên nuxt.js