• Phát triển
  • Đăng nhập website bằng tài khoản google với Laravel Socialite.

Xin chào mọi người, hôm nay em sẽ chia sẻ với mọi người thiết lập và xử lý đăng nhập website với Laravel Socialite.
1. Cài đặt ứng dụng laravel.
Trước khi tiến hành chức năng đăng nhập google chúng ta cần cài đặt ứng dụng laravel, ở đây em sẽ chạy cmd để tiến hành cài đặt ứng dụng (để chạy được cmd dưới đây thì mọi người cần cài đặt composer trước nhé).
composer create-project --prefer-dist laravel/laravel example
2. Thiết lập cơ sở dữ liệu.
Sau khi cài đặt laravel chúng ta mở project và mở file .env tiến hành thiết lập thông tin kết nối cơ sở dữ liệu (lưu ý mọi người điền đúng thông tin kết nối cơ sở dữ liệu của mọi người nhé).
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3307
DB_DATABASE=example
DB_USERNAME=root
DB_PASSWORD=''

Tiếp theo trong migration \database\migrations\2014_10_12_000000_create_users_table.php chúng ta sẽ sửa thành đoạn code dưới đây:
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->string('social_id');
$table->timestamp('email_verified_at')->nullable();
$table->string('password')->nullable();
$table->rememberToken();
$table->timestamps();
});

Cuối cùng chúng ta chạy command sau:
php artisan migrate
3. Cài đặt package.
Chúng ta cần cái đặt package socialite của laravel để có thể hỗ trợ chúng ta connect tới google và để cài đặt package chúng ta cần chạy command sau:
composer require laravel/socialite
Sau khi cài đặt package thành công chúng ta vào config/app.php và thêm đoạn code sau vào aliese:
'Socialite' => Laravel\Socialite\Facades\Socialite::class

4. Tạo ứng dụng google.

  • Trước khi bắt đầu chúng ta cần truy cập vào để tạo một ứng dụng, sau khi tạo ứng dụng chúng ta sẽ có Client ID và Client secret để kết nối đến google xác thực đăng nhập.

5. Xử lý đăng nhập

  • Đầu tiieen chúng ta cần cài đặt Authentication để có thể xác thực đăng nhập nhé, do bài viết này là chia sẻ về đăng nhập google nên em sẽ không nói rõ về authentication nên mọi người có thể vào trang chủ laravel để có thể tìm hiểu thêm nhé.
  • Vào file .env thêm đoạn cấu hình sau:
    GOOGLE_APP_ID=xxx
    GOOGLE_APP_SECRET=xxx
    GOOGLE_APP_CALLBACK_URL=xxx
  • Sau khi tạo ứng dụng google xong chúng ta sẽ có được GOOGLE_APP_ID và GOOGLE_APP_SECRET. Đối với GOOGLE_APP_CALLBACK_URL sẽ do chúng ta cài đặt lúc tạo ứng dụng google.
  • Tiếp theo chúng ta vào trong file \config\services.php và thêm đoạn code sau:
    'google' => [
    'client_id' => env('GOOGLE_APP_ID'),
    'client_secret' => env('GOOGLE_APP_SECRET'),
    'redirect' => env('GOOGLE_APP_CALLBACK_URL'),
    ],
  • File web.php (lưu ý route callback chính là url chúng ta setting khi tạo ứng dụng google và là url chúng ta config trong file .env):
    `Route::get('/dashboard', function () {
    return view('dashboard');
    })->middleware(['auth'])->name('dashboard');

Route::group([
'namespace' => 'App\Http\Controllers',
], function () {
Route::get('/login/{social}', 'LoginController@redirectToSocial')->name('login.social')->where('social', 'google');
Route::get('/login/{social}/callback', 'LoginController@handleSocialCallback')->name('login.social.callback')->where('social', 'google');
});

require DIR.'/auth.php';`

  • Chúng ta tạo ra file app\Http\Controllers\LoginController.php có nội dung như sau:
    `<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;

class LoginController extends Controller
{
public function redirectToSocial(Request $request, $social)
{
return Socialite::driver($social)->redirect();
}

public function handleSocialCallback(Request $request, $social)
{
    $socialUser = Socialite::driver($social)->user();
    $user = User::where('social_id', $socialUser->id)->first();

    if (!$user) {
        $user = User::create([
            'name' => $socialUser->name,
            'email' => $socialUser->email,
            'social_id' => $socialUser->id,
        ]);
    }
    
    return redirect(route('dashboard'));
}

}
`

  • Trong app\Models\User.php sửa biến $fillable thành đoạn code dưới đây:
    protected $fillable = [
    'name',
    'email',
    'password',
    'social_id'
    ];
  • Cuối cùng chúng ta chạy lệnh command php artisan serve rồi mở trình duyệt truy cập vào đường dẫn
    http://127.0.0.1:8000/login/google nếu web di chuyển đến trang đăng nhập của google và sau khi đăng nhập trình duyệt sẽ chuyển về trang http://127.0.0.1:8000/dashboard nghĩa là chúng ta đã thành công đăng nhập website bằng google.

6. Kết luận.
Vậy là em là phần login google với Laravel socialite của em đến đây là kết thúc ạ, chúc mọi người thành công. Rất mong bài viết có thể giúp ích cho mọi người ạ. Do lần đầu viết bài còn nhiều sai sót mong mọi người cho ý kiến đóng góp để em rút kinh nghiệm cho các bài viết lần sau ạ.

    Bài viết hay quá, em xứng đáng làm anh rể của a 🤣

      xin lỗi mọi người, em viết xong rồi đăng lên nó bị lỗi trình bày nhưng không biết sửa lại như nào ạ.

      • VanNT đã thích điều này.
      • VanNT đã trả lời bài viết này.

        SinhTrn C có sửa phần trình bày mục 5, 6, còn về code chị chưa hiểu em có thể nhờ Hà hoặc Long sp nhé

        • SinhTrn đã thích điều này.
        • SinhTrn đã trả lời bài viết này.

          cám ơn em đã chia sẻ 🙂

          Hay quá anh từ giờ không sợ quên mật khẩu nữa rồi ^^

          VanNT dạ vâng em cảm ơn chị ạ

          • VanNT đã thích điều này.
          • Đã chỉnh sửa

          Xịn sò anh ạ, nhưng mà em hơi thắc mắc về option đăng nhập cuối cùng, không biết Laravel Socialite có hỗ trợ không anh nhỉ :vvvv

          • SinhTrn đã thích điều này.
          • SinhTrn đã trả lời bài viết này.

            LongTD để anh thử nhé, long cho anh xin config option này với =))

            19 ngày trước
            2 năm trước

            Admin làm như nào để click login with google nó bật ra 1 window view chứa list account google, xử lý chọn account thì nó đóng window view đi vậy ?

            • SinhTrn đã trả lời bài viết này.

              VanNhatNguyen bạn có thể thử dùng JS dưới đây để xử lý button login của bạn xem sao ạ. Cảm ơn bạn đã quan tâm đến bài viết của mình. Chúc bạn thành công ạ.

              function openGoogleLogin() {
                  var popup = window.open('{{ route('login.social', ['social' => 'google']) }}', 'google-login', 'width=500,height=600');
                  var popupTick = setInterval(function() {
                      if (popup.closed) {
                          clearInterval(popupTick);
                          window.location.reload();
                      }
                  }, 1000);
              }
              5 tháng trước

              SinhTrn 6. Kết luận.

              quá tuyệt ạ

              Viết câu trả lời...