Hướng dẫn thêm đăng nhập bằng Discord (Login by Discord) cho website sử dụng Framework Laravel

Một thời gian mày mò thì hiện mình chưa thấy ae Việt Nam nào hướng dẫn về tích hợp đăng nhập bằng Discord vào website Laravel. Hôm nay mh sẽ hướng dẫn ae chi tiết từng bước.

Bước 1: Cài đặt Laravel Socialite

Trước hết, ae cần cài đặt 2 gói sau bằng cách chạy lệnh sau trong terminal của dự án:

composer require laravel/socialite
composer require socialiteproviders/discord

Coppy cái đoạn code trên vào và mở terminal tương ứng với dự án (Lưu ý máy ae phải cài composer  rồi nhé, hoặc không thì nhanh với khoẻ nhất là dùng Laragon  (All in one, nhẹ ăn ít Ram) mà xài, ae không phải đi cài mấy cái như Nodejs, rồi môi trường Php trên windows, rồi composer,vvv. Tiếp thep thì ae muốn đập sao thì đập cho cái phím enter nó nhận là được và ngồi đợi nó chạy...

Bước 2: Cấu hình dịch vụ Discord

  1. Truy cập vào Discord Developer Portal.
  2. Tạo một New Application.

Tạo một ứng dụng discord developer  mới để sử dụng cho dự án

2. Ae sau khi tạo, truy cập vào phần Oauth, sẽ thấy có phần để lấy CLIENT_ID CLIENT_SECRET

Bước 3: Cập nhật file .env

Vào dự án Laravel lấy các thông tin cấu hình như trên của Discord và thêm vào file .env:

DISCORD_CLIENT_ID=

DISCORD_CLIENT_SECRET=

DISCORD_REDIRECT_URI=

DISCORD_REDIRECT_URI là cái đường dẫn sau khi đăng nhập thành công thì sẽ chuyển hướng về đó để ae xử lý các thông tin user ấy, cái này ae làm đăng nhập nền tảng nào thì cũng vậy ah.

Ví dụ: ae có thể để là /auth/discord/callback

 

Bước 4: Cấu hình Socialite

Mở file config/services.php và thêm cấu hình cho Discord:

'discord' => [
    'client_id' => env('DISCORD_CLIENT_ID'),
    'client_secret' => env('DISCORD_CLIENT_SECRET'),
    'redirect' => env('DISCORD_REDIRECT_URI'),
],

Bước 5: Tạo routes cho đăng nhập và callback

Trong file routes/web.php, bạn thêm các route cho đăng nhập và callback:

use Laravel\Socialite\Facades\Socialite;
use App\Models\User;
use Illuminate\Support\Facades\Auth;

Route::get('/login/discord', function () {
    return Socialite::driver('discord')->redirect();
});

Route::get('/auth/discord/callback', function () {
    $discordUser = Socialite::driver('discord')->user();

    // Kiểm tra xem người dùng đã tồn tại trong hệ thống chưa
    $user = User::where('discord_id', $discordUser->id)->first();

    if (!$user) {
        // Tạo tài khoản mới nếu chưa tồn tại
        $user = User::create([
            'name' => $discordUser->name,
            'email' => $discordUser->email,
            'discord_id' => $discordUser->id,
            'avatar' => $discordUser->avatar,
            // thêm các thông tin khác nếu cần
        ]);
    }

    // Đăng nhập người dùng
    Auth::login($user);

    return redirect('/home'); // Điều hướng đến trang sau khi đăng nhập thành công
});
 

Bước 6: Tạo cột discord_id trong bảng users (nếu chưa có)

Thêm cột discord_id trong bảng users để lưu ID Discord của người dùng. Chạy lệnh tạo migration:

php artisan make:migration add_discord_id_to_users_table --table=users

Sau đó cập nhật file migration để thêm cột:

public function up()
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('discord_id')->nullable()->unique();
    });
}

Chạy lệnh migrate:

php artisan migrate

Bước 7: Fix code để có thể sử dụng Discord trên Laravel

Ae còn nhớ bước đầu cần phải cài socialiteproviders/discord để sử dụng không, mục đích của nó là để để lắng nghe sự kiện và đăng ký driver Discord

Mở file App\Providers\EventServiceProvider.php và thêm đoạn code sau để lắng nghe sự kiện và đăng ký driver Discord.

Trong phần listen, ae thêm sự kiện sau:

protected $listen = [
    \SocialiteProviders\Manager\SocialiteWasCalled::class => [
        'SocialiteProviders\\Discord\\DiscordExtendSocialite@handle',
    ],
];

Ví dụ cụ thể file App\Providers\EventServiceProvider.php sẽ như sau:

namespace App\Providers;

use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
use Illuminate\Support\Facades\Event;

class EventServiceProvider extends ServiceProvider
{
    protected $listen = [
        \SocialiteProviders\Manager\SocialiteWasCalled::class => [
            'SocialiteProviders\\Discord\\DiscordExtendSocialite@handle',
        ],
    ];

    public function boot()
    {
        parent::boot();
    }
}

Bước 8: Tận hưởng thành quả, sử dụng tính năng đăng nhập

Bây giờ, ae có thể truy cập vào /login/discord để bắt đầu quá trình đăng nhập với Discord. Sau khi đăng nhập thành công, người dùng sẽ được chuyển hướng về trang.

Như vậy là mh đã  hướng dẫn ae tích hợp đăng nhập bằng Discord vào Laravel. Ae có thể tùy chỉnh thêm các logic khác, như xác thực email hoặc thêm quyền quản lý cho người dùng. Cảm ơn ae đã đọc bài, chúc ae thành công!