Laravel Socialite tích hợp xác thực Facebook vào website

Hiện nay, các website đều sử dụng mạng xã hội như Facebook, Google, Twitter, Github… để đăng nhập, việc này giúp cho các thành viên sử dụng trang web sẽ thuận tiện hơn rất nhiều. Laravel Socialite được đưa vào danh sách các gói cài đặt chính thức từ phiên bản Laravel 5.3. Bài viết sẽ hướng dẫn các bạn tích hợp gói Laravel Socialite cùng với mạng xã hội Facebook vào hệ thống website của bạn.

Bạn có thể tham khảo một website sử dụng Laravel Socialite trong việc xác thực người dùng bằng mạng xã hội ở trang đăng nhập hệ thống Adshare.vn:

Bài hướng dẫn sử dụng Laravel 5.4 và yêu cầu bạn có kiến thức cơ bản về Laravel. (Xem thêm Hướng dẫn cài đặt framework Laravel)

laravel new laravel-learning
cd laravel-learning

Tiếp theo, tạo database

Migrate dữ liệu vào database mới tạo

php artisan migrate

Thêm phần khung đăng nhập vào dự án

php artisan make:auth

Bắt đầu chạy dịch vụ và vào trang chủ http://localhost:8080

 

Cài đặt gói Laravel Socialite

Socialite là một gói chuyên xây dựng xác thực người dùng thông qua các mạng xã hội thông dụng như Facebook, Google, Twitter, Github… Cài đặt gói bằng composer:

composer require laravel/socialite

Sau đó thực hiện theo hướng dẫn sau:

Thêm provider vào file config/app.php

'providers' => [
    // Other service providers...

    Laravel\Socialite\SocialiteServiceProvider::class,
],

Thêm alias vào đoạn cuối của file này

'Socialite' => Laravel\Socialite\Facades\Socialite::class,

Chúng ta đã cài đặt xong gói Socialite, bắt đầu sử dụng thôi.

Cấu hình trang Facebook cho người phát triển

Facebook mạng xã hội lớn nhất hiện nay nên đa số các website đều muốn tích hợp Facebook trong phần đăng nhập hệ thống. Tích hợp Facebook giúp người dùng rất thuận tiện trong việc sử dụng, người dùng chỉ cần đăng nhập vào Facebook là có thể xác thực luôn cả bên phía website. Bạn cần có tài khoản phát triển Facebook, để đăng ký bạn xem Hướng dẫn đăng ký tài khoản phát triển Facebook.

Mở trang phát triển Facebook và thực hiện theo các bước sau:

Trong phần Ứng dụng của tôi chọn Thêm ứng dụng mới.

Cấu hình Facebook Developer cho Laravel Socialite

Trong cửa sổ tạo ứng dụng mới điền vào các thông tin:

  • Tên hiển thị: Tên sẽ được hiển thị trong trang đăng nhập của Facebook
  • Email liên hệ: Địa chỉ email hỗ trợ khi người dùng không đăng nhập được thông qua Facebook.
  • Danh mục: Chọn ứng dụng cho trang

Tạo ứng dụng mới trong Facebook Developer

Tiếp tục, cấu hình các thông số khác trong trang ứng dụng Laravel Learning trên Facebook Developer vừa tạo. Trong cửa sổ mới chọn Cấu hình, trong đây chứa các thông tin để thiết lập cho file config/service.php.

Các thông số cấu hình cho Socialite từ Facebook Developer

Giá trị trong ID ứng dụng đưa vào client_id, giá trị trong Khóa ứng dụng đưa vào client_secret.

'facebook' => [
        'client_id' => '597752324277084316',
        'client_secret' => '8789b6972c62b2cssdse43dec615a73f9d2',
        'redirect' => '',
    ],

Tiếp theo chúng ta sẽ tiếp tục chuyển hướng người dùng đến Facebook và quản lý callback về từ Facebook. Chúng ta cần tạo một controller mới cho xác thực qua mạng xã hội:

php artisan make:controller SocialAuthController

Sau đó thêm vào controller SocialAuthController.php này hai phương thức:

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use Socialite;

class SocialAuthController extends Controller
{
    public function redirectToProvider()
    {
        return Socialite::driver('facebook')->redirect();   
    }   

    public function handleProviderCallback()
    {
        // Sau khi xác thực Facebook chuyển hướng về đây cùng với một token
        // Các xử lý liên quan đến đăng nhập bằng mạng xã hội cũng đưa vào đây.    
    }
}

Tiếp theo, chúng ta đăng ký các phương thức này trong routes/web.php (Các phiên bản Laravel từ 5.2.31 chuyển việc map các đường dẫn sang phương thức ở routes.php sang routes/web.php)

Route::get('/auth/facebook', 'SocialAuthController@redirectToProvider');
Route::get('/auth/facebook/callback', 'SocialAuthController@handleProviderCallback');

Tiếp đó cập nhật lại file config/service.php giá trị chứa đường dẫn callback ở trên:

'facebook' => [
        'client_id' => '597752324277084316',
        'client_secret' => '8789b6972c62b2cssdse43dec615a73f9d2',
        'redirect' => 'http://localhost/laravel-learning/auth/facebook/callback',
    ],

Tiếp đó, chúng ta vào resources/views/auth/login.blade.php để thêm một liên kết xác thực website bằng Facebook, thêm một liên kết vào sau phần Quên mật khẩu.

<a href="{{ URL::to('auth/facebook') }}">Facebook Login</a>

Xong, chúng ta đã có thể kiểm tra xem đăng nhập website thông qua Facebook như thế nào?

 

Socialite sẽ xử lý một cách tự động, khi Facebook đã xác thực được người dùng nó sẽ chuyển hướng người dùng về http://localhost/laravel-learning/auth/facebook/callback cùng với token và thông tin người dùng đã đăng nhập Facebook. Socialite cung cấp phương thức để lấy các thông tin này:

$user = Socialite::driver($provider)->user();

Như vậy $user đã chứa đầy đủ thông tin chúng ta có thể khai thác bằng các phương thức:

  • getId(): ID người dùng trên mạng xã hội Facebook
  • getNickName(): trả về Nickname người dùng
  • getName(): trả về tên người dùng trên Facebook
  • getEmail(): trả về email người dùng đăng ký với Facebook
  • getAvatar(): trả về ảnh đại diện người dùng trên Facebook

 

Trong bài tiếp theo chúng tôi sẽ hướng dẫn bạn sử dụng Laravel Socialite để tích hợp xác thực người dùng qua Google.

13 thoughts on “Laravel Socialite tích hợp xác thực Facebook vào website

    1. Bạn có tạo id ứng dụng mới trên facebook development chưa? Đừng copy nguyên code trong bài vì các thông tin client_id và client_secret ở đây chỉ là demo thôi.

  1. Mọi người cho mình hỏi là những package này nếu chạy trên share hosting thì phải cài như thế nào ạ? Có cách nào không chạy lệnh Composer require laravel/socialite mà vẫn dùng được cái package này không?

    Cảm ơn mọi người đã đọc!

    1. Bạn có thể buid toàn bộ ở local rồi push toàn bộ code lên share host là chạy ngon. Bản chất composer là lấy mã nguồn thư viện về và build lại autoload thôi mà.

      1. Nhưng có trường hợp source đã chạy trên host rồi. Khi muốn cài thêm 1 package nào đó thì sẽ phải download toàn bộ source về local, cài package rồi up toàn bộ source code lên host lại. Như thế có vẻ khá cực khổ. Mình băn khoăn không biết mọi người thường làm như thế nào cho yêu cầu kiểu này. Nếu có cách nào hay hơn xin mọi người chia sẻ nha!

        1. Theo như mình biết thì chỉ có cách này thôi, framework Laravel không được thiết kế dành cho share host. Host dùng chung thì không được cài đặt thoải mái theo ý thích. Bạn cũng nên nghiên cứu và chuyển dần sang VPS vì giờ giá cũng khá rẻ, có khi bằng share host đấy

  2. Không thể tải URL: Miền của URL này không được đưa vào miền của ứng dụng. Để có thể tải URL này, hãy thêm tất cả các miền và miền phụ của ứng dụng vào trường Miền ứng dụng trong cài đặt ứng dụng của bạn.

    em dùng trên local bị lỗi như thế anh chị nào chỉ giúp em đc k ạ.

  3. Trương Lâm Vũ

    - Edit

    Reply

    cURL error 60: SSL certificate problem: unable to get local issuer certificate sau khi đăng nhập xong mình bị lỗi này là sao vậy ad.

  4. bác ơi cho e hỏi, e muốn bỏ check client_secret đi, tức là chỉ cần client_id là đủ để đăng nhập.
    bác có cách nào ko giúp e với ạ !

  5. Bạn ơi chạy thêm câu lệnh
    php artisan make:model SocialAccount
    Câu lệnh cài đặt Composer ở trên chỉ là cài thư viện socialite, sao tạo được model 😀

Add Comment