algolia search

Tìm thấy x bài viết trong xms.

Laravel đăng nhập thông qua các mạng xã hội Facebook, Google, Twitter, Github


Hôm nay mình xin giới thiệu một phương thức đăng nhập thông qua mạng xã hội phổ biến hiện nay như Facebook, Google, Twitter, Github, ...

Đăng nhập thông qua mạng xã hội là một tính năng quan trọng ngoài cách đăng nhập thông thường, vì hiện nay số lượng người dùng mạng xã hội là rất lớn, tính tiện lợi khi đăng nhập bằng Social authentication.

Trong ví dụ hôm nay mình demo trên Facebook.

Hình ảnh demo

Laravel đăng nhập thông qua các mạng xã hội Facebook, Google

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

Đây là package do chính Laravel cung cấp đó nha.

Mở terminal tại thư mục root website và chạy command sau để cài đặt:

composer require laravel/socialite

Sau khi cài đặt xong, chúng ta tiến hành thêm vào providersaliases trong file config config/app.php (Bỏ qua bước này đối với laravel 5.5 trở đi)

'providers' => [
 ....
 Laravel\Socialite\SocialiteServiceProvider::class,
],
'aliases' => [
 ....
 'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],

Bước 2: Tạo facebook app

Bước này chúng ta tiến hành tạo 1 app trên https://developers.facebook.com/apps/ và tiến hành tạo app. Cách tạo app cũng đơn giản không cần phải nói.

Laravel đăng nhập thông qua các mạng xã hội Facebook, Google

  • Sau khi tạo xong app, ở mục Thêm sản phẩm ⇒ Đăng nhập Facebook để có thể sử dụng tính năng.
  • Tab Xét duyệt ứng dụng tiến hành Nộp các mục để duyệt *(email, public_profile, user_friends)
  • Cũng tại tab Xét duyệt ứng dụng: Ứng dụng của bạn đang được phát triểnkhông khả dụng với mọi người. Bạn tiến hành click vào để ứng dụng được công khai nếu như bạn muốn đưa lên web server cho mọi người dùng.
  • Và cuối cùng tại tab Bảng điều khiển chúng ta có được: ID ứng dụng và Khóa bí mật của ứng dụng
  • Trong file config/services.php thêm 
'facebook' => [
    'client_id' => 'ID ứng dụng',
    'client_secret' => 'Khóa bí mật của ứng dụng',
    'redirect' => 'https://yourwebsite.com/auth/facebook/callback',
],

Sau sự cố bảo mật thông tin, FB đã thắc chặt chính sách hơn. Toàn bộ callback URL yêu cầu phải là https hết.

Nếu bạn làm localhost, cứ khai báo https://localhost/auth/facebook/callback

Sau đó truy cập https://localhost và làm theo hình sau:

https-localhost-proceed

Bước 3: Tạo facebook login

Facebook sẽ trả về thông tin của user, bạn cần phải lưu vào datatabase. Lưu như thế nào thì tùy các bạn, ở đây để đơn giản hóa demo mình thêm vào table users 2 trường là providerprovider_id.

Trong app/Http/routes.php

Route::get('auth/facebook', 'Auth\AuthController@redirectToFacebook')->name('auth.facebook');
Route::get('auth/facebook/callback', 'Auth\AuthController@handleFacebookCallback');

Trong app/Http/Controllers/Auth/AuthController.php thêm 2 functions sau:

public function redirectToFacebook()
{
    return Socialite::driver('facebook')->redirect();
}

public function handleFacebookCallback()
{
    try {
        $user = Socialite::driver('facebook')->user();
        $create['name'] = $user->name;
        $create['email'] = $user->email;
        $create['facebook_id'] = $user->id;

        $userModel = new User;
        $createdUser = $userModel->addNew($create);
        Auth::loginUsingId($createdUser->id);
        return redirect()->route('home');
    } catch (Exception $e) {
        return redirect('/');
    }
}

Trong Models: app/User.php thêm function sau:

public function addNew($input)
{
    $check = static::where('facebook_id',$input['facebook_id'])->first();

    if(is_null($check)){
        return static::create($input);
    }

    return $check;
    
}

Và cuối cùng trong login page các bạn đặt url là được:

{{ route('auth.facebook') }}

Gặp vấn đề gì vui lòng để lại comment nhé!

Chúc các bạn thành công!

Đánh giá bài viết

Thích thì like
Laravel đăng nhập thông qua các mạng xã hội Facebook, Google, Twitter, Github
5/5 1 votes

Bình luận

BKAP SV avatar
BKAP SV
lỗi trên là sao vậy mọi người

BKAP SV avatar
BKAP SV
Target class [App\Http\Controllers\Auth\AuthController] does not exist.

Bin Joyless avatar
Bin Joyless
Trường hợp mình bị lỗi về trang callback thì do sai dữ liệu hay sao ạ
hang trinh avatar
hang trinh
Mình vừa bật sang chế độ trực tiếp nhưng vẫn chưa đăng nhập thành công. Khi chọn tài khoản FB và nhập pass FB xong thì k vào được.

This site can’t provide a secure connection

localhost sent an invalid response.

ERR_SSL_PROTOCOL_ERROR


hang trinh avatar
hang trinh
Mình làm với localhost

Chung Nguyễn avatar
Chung Nguyễn
ở bước 2 mình có hướng dẫn làm với https localhost mình xem lại nha
hang trinh avatar
hang trinh
Khi truy cập https://localhost thì nó không hiện như trên 
hang trinh avatar
hang trinh

URL chính sách quyền riêng tư không hợp lệ

Bạn phải cung cấp URL Chính sách quyền riêng tư hợp lệ để đăng trực tiếp ứng dụng. Hãy truy cập Cài đặt cơ bản và bảo đảm URL hợp lệ
Có vẻ như tôi chưa thể bật chế độ trực tiếp
Chung Nguyễn avatar
Chung Nguyễn
Mình bấm nút Cài đặt cơ bản mà fb yêu cầu, sau đó nhập đường dẫn đến trang chính sách riêng tư của trang web mình, ở nước ngoài rất chú trọng quyền riêng tư nên ứng dụng mình bắt buộc phải khai báo các liên kết cần thiết nhé.
hang trinh avatar
hang trinh
Mình ấn đăng nhập nhuưng tài khoản cần được phép, mình không xử lý được.
Chung Nguyễn avatar
Chung Nguyễn
Cụ thể hơn được k bạn?
hang trinh avatar
hang trinh
"Ứng dụng chưa được thiết lập: Ứng dụng này vẫn đang ở chế độ phát triển và bạn không có quyền truy cập. Hãy chuyển sang người dùng thử nghiệm đã đăng ký hoặc xin quản trị viên ứng dụng cấp phép".
Mình không biết cần làm gì sau đó.

Chung Nguyễn avatar
Chung Nguyễn
Ứng dụng của mình hiện đang ở chế độ phát triển, cần bật lên mới sử dụng được nha


hang trinh avatar
hang trinh
Cái đấy mình bật r ạ

Hiển thị bình luận Facebook