Laravel Socialite Github Oauth

Laravel Socialite – đăng nhập thông qua mạng xã hội

Hi các bạn,

Nay mình sẽ đi qua 1 library nữa, official Library mà Laravel đã làm, đó chính là Laravel Socialite.

Library này sẽ giúp bạn:

  • Đăng nhập người dùng thông qua tài khoản mạng xã hội của họ
  • Sử dụng đơn giản, wide range of APIs
  • Hỗ trợ nhiều MXH như: Facebook, Twitter, Github,…

Khá hay và dễ dàng sử dụng, tiện lợi 😀

1/ Cài đặt Socialite

Follow theo hướng dẫn tại đây: https://laravel.com/docs/5.8/socialite

(Các laravel version cũ thì cài version cũ nha bạn. Với các Laravel mà xài PHP5 thì 2.0.22 là ok nhất)

Cài thông qua composer với câu lệnh:

composer require laravel/socialite

Chỉ vậy thui :v. Với các project dùng Laravel 5.5+ thì ko cần fải làm thêm gì cả (vì Laravel nó đã auto-discover cái ServiceProvider rùi). Còn các version Laravel cũ thì chịu khó vào config/app.php để thêm cái ServiceProvider & Facade vào nhé 😀

Mọi thứ về OAuth, Rest APIs,… đều được library này lo liệu cho mình hết :D. Chiến thoy.

Và mình sẽ làm 1 cái đăng nhập thông qua Github để demo nhé.

2/ Tạo GitHub OAuth App

Đầu tiên vào đây https://developer.github.com/program/ ,  chọn Register Now để nâng cấp tài khoản của bạn lên Developer Mode nè.

Nó sẽ redirect các bạn qua 1 trang nhập info, nhập đầy đủ info (email, web url) là tạo dc nhé.

Thành công nè:

Laravel Socialite đăng nhập thông qua mạng xã hội

Tiếp tục vào tiếp link này https://github.com/settings/applications/new để tạo 1 OAuth Application

Nhập đầy đủ thông tin cần thiết nha:

Laravel Socialite Github Oauth

  • Application name: tên application
  • Homepage URL: url trang chủ của bạn
  • Callback URL: là cái URL mà Github sẽ đá user về nếu user login thành công or thất bại or blah blah blah….
    • Của mình sẽ là /auth/callback nhé, các bạn tạo theo ý các bạn mún nha 😀

Tạo xong oy nè, các bạn sẽ có cái Client ID Secret, copy lại tý tính tiếp nhé nhé nhé. Chuẩn bị cho user đăng nhập thông qua mạng xã hội nà.Laravel Socialite Github Oauth

3/ Bắt đầu implement Laravel Socialite vào project của bạn

Đầu tiên là ta cấu hình đã, mở file .env của bạn lên, thêm 3 dòng này vào cuối:

GITHUB_CLIENT_ID=<client_id_hui_nay>
GITHUB_CLIENT_SECRET=<secret_hui_nay>
GITHUB_CALLBACK_URL=<cai_url_callback_hui_nay>

Tiện thể bỏ client id, secret, callback URL vào lun đi nhé 😀

Mở file config/services.php và thêm github info vào cái array như sau:

<?php
return [
...
'github' => [
    'client_id' => env('GITHUB_CLIENT_ID'),
    'client_secret' => env('GITHUB_CLIENT_SECRET'),
    'redirect' => env('GITHUB_CALLBACK_URL'),
],
...

Xong phần cofiguration nhé. Giờ qua làm cái route, thêm 2 cái route nhé (tùy ý bạn), cả 2 đều là GET:

Route::get('login/github', 'Auth\GithubAuthController@redirectLogin');
Route::get('auth/callback', 'Auth\GithubAuthController@handleCallback');

Xong, giờ mình tạo Controller có tên GithubAuthController trong Controller/Auth để lo cho vụ authentication.

Import cái này vào đã:

use Socialite;

Đầu tiên mình tạo cái constant để lưu cái tên service cần dùng cái nè:

const SERVICE = "github";

Cái method “redirectLogin” sẽ đơn giản như sau:

public function redirectToProvider()
{
    return Socialite::driver(static::SERVICE)->redirect();
}

Và tiếp cái method “handleCallback” sẽ như sau (xử lý sau khi user login/cancel,…), chúng ta cần xử lý 3 trường hợp là:

  • User login thành công
    • Chưa có tài khoản trong DB
    • Đã có tài khoản trong DB
  • User login thất bại/hủy login

Define cái method cái nà:

public function handleCallback() {
        try {

        } catch (\Exception $e) {
            return redirect()
                ->to('/')
                ->with('error', 'Login via Github failed. Please try again.');
        }
    }

Vì cuộc đời ko bao giờ perfect, vậy nên bọc lại cái try catch cho an toàn nà <3. Từ đó ta có thể thấy rằng nếu user login failed (or hủy) => sẽ vào cái catch lun

Đầu tiên trong cái try, ta sẽ lấy info user đã đăng nhập ra cái nè, bằng method này từ Socialite:

// get user information
$user = Socialite::driver(static::SERVICE)->user();

Nếu lấy dc là nó sẽ ko throw error đâu => login thành công.

Vì ta chỉ register cái scope cơ bản => chỉ lấy dc những thông tin cơ bản của người dùng, như là:

  • Tên
  • Email
  • Profile Pics

Nhưng vậy là đủ để login rồi, ai cần nhiều làm gì trừ khi ta cần làm những special cases. Chúng ta sắp xong vụ đăng nhập thông qua mạng xã hội cơ bản oy 😀

Vậy đây là những method ta có thể access vào obj User kia để lấy info ra:

// Get information from user
$user->getId();
$user->getNickname();
$user->getName();
$user->getEmail();
$user->getAvatar();

Okay nhé, giờ tiếp theo là sẽ query với DB xem coi user này đã có record trong system chưa, có rồi thì login thẳng thông qua Auth API của Laravel lun, chưa có thì tạo 1 user record mới.

// check if user registered or not in the system
$userDB = User::query()->where('email', $user->getEmail())->first();

// if not registered yet, create a new user record
if (empty($userDB)) {
    $userDB = new User;
    $userDB->name = $user->getName();
    $userDB->email = $user->getEmail();
    // more info if you have any

    // if db error
    if (!$userDB->save()) {
        throw new \Exception('Create user failed due to DB Error...');
    }
    // ok, it saved. login now
}

// login to the system now
Auth::loginUsingId($userDB->id);

// redirect back to homepage with success
return redirect()
        ->to('/')
        ->with('success', 'Login successfully!');

Lưu ý, vì mình ko để user tự set password của họ => cột password trong table User của mình sẽ default NULL => Chỉ login dc vào tài khoản này nếu họ log qua GitHub or Quên Mật Khẩu để tạo lại mật khẩu khác :D. Tùy theo logic mà các bạn muốn deal 😀 Mình đơn giản nên làm đơn giản lun cho dễ demo 😀

Okay oy, giờ test thui.

4/ Testing testing cái đăng nhập thông qua mạng xã hội Github nè

Mình sẽ vào URL Route của mình là: http://localhost:82/login/github để test, các bạn vào route login riêng của các bạn nha 😀

Vì mình đã logged in vào Github sẵn rùi nên nó sẽ có dialog như sau:

đăng nhập vào mạng xã hội github

Hehe ngon lành phết nhỉ, Authorize liền nà <3

Làm 1 cái view đơn giản để test coi thành công chưa, redirect lại nhận dc thông báo nà :v

Check cái record trong DB thử:

Ngon lành, thế là ok roài. Vừa chạy thử login bỏ validation với empty password => ko login dc => quá ngon 😀

5/ Kết luận

Với 1 walkthough cơ bản này, các bạn có thể tiếp tục làm với Google, Twitter, Facebook,… một cách đơn giản nhất có thể 😀

Socialite khá hay, nó lo hết vụ OAuth và khiến ta nhẹ ng` khi xử lý vụ này. Cũng chính là lý do mà ta tạo ra những cái library khác nhau mà nhỉ, dùng để đơn giản hóa đi công việc xử lý của chúng ta, đầu vào đầu ra rõ ràng 😀

Cám ơn các bạn đã tham khảo bài viết này.

Full Controller code tại đây: https://gist.github.com/sethsandaru/0bf2c6ce14519f827a4b108c7fc3ec6e

facebook
Seth Phát

Seth Phát

Mình là Phát - biệt danh Seth Phát. Hiện đang là một Sr. Full-Stack Engineer. Mình là một người yêu thích và đam mê lập trình và hiện tại đang theo về phần Web là chủ yếu. Mạnh Back-end và khá Front-end, vẫn đang theo đều cả 2 :v. Còn gì bằng khi được làm những thứ mà mình yêu thích, đam mê ;)

Leave a Reply

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

Bình luận qua Facebook