post-image

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

Tổng quan

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:

Đăng nhập Adshare.vn bằng Laravel Socialite 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.

laravel new laravel-learning cd laravel-learning
Code language: JavaScript (javascript)

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
Code language: CSS (css)

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
Code language: JavaScript (javascript)

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, ],
Code language: PHP (php)

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

'Socialite' => Laravel\Socialite\Facades\Socialite::class,
Code language: PHP (php)

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' => '59775245345277084316', 'client_secret' => '8789b6972c62b3335sdse43dec615a73f9d2', 'redirect' => '', ],
Code language: PHP (php)

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
Code language: CSS (css)

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. } }
Code language: HTML, XML (xml)

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');
Code language: PHP (php)

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' => '5977235235377084316', 'client_secret' => '8789b6972ak839se43dec615a73f9d2', 'redirect' => 'http://localhost/laravel-learning/auth/facebook/callback', ],
Code language: PHP (php)

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>
Code language: HTML, XML (xml)

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();
Code language: PHP (php)

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.

Cảm ơn các bạn đã đọc.

Các bạn có thể tham khảo các bài viết hay về Laravel tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Nguồn tham khảo: allaravel

Leave a Reply

Your email address will not be published. Required fields are marked *