XÂY DỰNG API LOGIN GOOGLE, FACEBOOK, TWITTER HAY GITHUB VỚI SERVER LARAVEL CHO CÁC DỰ ÁN VỀ APP MOBILE

Ngày đăng: Thứ Năm, 24/01/2019

Người viết: Nguyễn Văn Quy

Lời nói đầu

Trong những năm gần đây, sự thông dụng của smartphone cũng làm ngành Lập trình phát triển ứng dụng di động (Mobile Application Development) có những bước tiến lớn. Ngày càng nhiều các ứng dụng mobile app được ra đời cùng với sự tiện ích hơn, dễ sử dụng hơn (đăng nhập thuận tiện hơn, giao diện dễ dùng, tốc độ nhanh hơn,…)

Cách các app đăng nhập

May mắn cho mình cũng được làm việc trong team phát triển app mobile với vai trò là backend developer. Tuy nhiên vấn đề chính mà mình đang hướng đến tại đây là “Xây dựng API login Google, Facebook, Twitter hay Github với server laravel cho các dự án về App Mobile”. Với việc đăng nhập bằng Google, Facebook, Twitter hay Github, … bạn sẽ không phải mất thời gian làm công đoạn đăng ký phức tạp, nhập 1 đống input thông tin, rồi còn phải chờ email để active tài khoản bla…bla như trước đây nữa. Để đăng nhập vào app chỉ cần chọn mạng xã hội mà bạn muốn đăng nhập. Ví dụ bạn muốn kết nối với mạng xã hội Facebook chẳng hạn. Bấm vào icon Facebook rồi đồng ý chuyển hướng đến trang đăng nhập của facebook

Sau khi đăng nhập thành công thì cũng đồng nghĩa bạn đã đăng nhập thành công vào ứng dụng. 

Ý tưởng đăng nhập cho app và server

  • Bên app sẽ setup package Facebook SDK , Google SDK. Các package đều hỗ trợ cho hệ điều hành Android và Ios
  • Sau khi bên app cài đặt và sử dụng các package cho các mạng xã hội. Tiến hành đăng nhập tại app, response trả về sẽ gồm có: access_tokenprofile user, …. Nhưng cái quan trọng nhất mà bên server cần ở đây chỉ là access_token.
  • Bên server viết 1api authentication cho app và yêu cầu 1 request từ bên app là access_tokenmà bên app vừa nhận được ở trên. Tại server sẽ gửi lại 1 request lên trên facebook, google,… để xác định đúng phiên đăng nhập cũng như lấy lại thông tin user từ các mạng xã hội. Sau đó sẽ check email (facebook, google) xem email này đã được đăng ký từ hệ thống chưa. Nếu đăng ký rồi => tự động đăng nhập app, nếu chưa tồn tại, tự động đăng ký cho user dựa vào thông tin nhận được từ mạng xã hội (tên, avatar,…).

Xây dựng API

 

 

composer require laravel/passport

 

 

Sau khi tải laravel/passport về project trong migration sẽ tạo các table của nó, nên chúng ta hãy tiếp tục chạy migrate để thêm vào database.

 

php artisan migrate

 

 

Tiếp theo chúng ta cần chạy command passport:install, command này sẽ tạo một encryption keys dùng để bảo mật cho access token. Nó sẽ tạo ra “personal access” and “password grant” clients là 2 lựa chọn cho bảo mật access token.

 

php artisan passport:install

 

 

Trong Models User thêm như bên dưới.

 

 

<?php

 

namespace App;

 

use Laravel\Passport\HasApiTokens;

use Illuminate\Notifications\Notifiable;

use Illuminate\Foundation\Auth\User as Authenticatable;

 

class User extends Authenticatable

{

    use HasApiTokens, Notifiable;

}

 

 

Trong config/auth.php sửa lại driver api là passport.

 

 

  'guards' => [

    'web' => [

        'driver' => 'session',

        'provider' => 'users',

    ],

 

    'api' => [

        'driver' => 'passport',

        'provider' => 'users',

    ],

],

 

 

Dưới đây sẽ là function login của chúng ta. Request nhận vào chính là access_token và provider chúng ta cũng có thể gửi thẳng qua url cũng được.

 

/**

     * @param  $provider

     * @param  \Illuminate\Http\Request  $request

     * @return \Illuminate\Http\JsonResponse

     */

    public function login(Request $request, $provider)

    {

        if ($provider == 'google') {

            return $this->checkGoogle($request->social_token);

        }

 

        if ($provider == 'facebook') {

            return $this->checkFacebook($request->social_token);

        }

    }

 

 

Đăng nhập với google, server sẽ gửi 1 request ứng với access_token của nó và lấy ra profile của user.

 

/**

     * @param String $social_token

     * @return void

     */

    public function checkGoogle($social_token)

    {

        try {

            $checkToken = $this->client->get("https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=$social_token");

            $responseGoogle = json_decode($checkToken->getBody()->getContents(), true);

 

            return $this->checkUserByEmail($responseGoogle);

        } catch (\Exception $e) {

            return $this->responseBadRequest(['message' => $e->getMessage()]);

        }

    }

 

 

Tương tự facebook cũng vậy, nó cũng trả về các thông tin mà ta cần.

 

/**

     * @param String $social_token

     * @return void

     */

    public function checkFacebook($social_token)

    {

        try {

            $checkToken = $this->client->get("https://graph.facebook.com/v3.1/me?fields=id,name,email&access_token=$social_token");

            $responseFacebook = json_decode($checkToken->getBody()->getContents(), true);

 

            return $this->checkUserByEmail($responseFacebook);

        } catch (\Exception $e) {

            return $this->responseBadRequest(['message' => $e->getMessage()]);

        }

    }

 

 

Sau khi lấy được profile của user trên các mạng xã hội, việc còn lại là kiểm tra xem email của user đã được đăng ký tại hệ thống của chúng ta chưa.

Tổng kết:

 

 

<?php

 

namespace App\Http\Controllers\Api\Auth;

 

use App\Models\User;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use Illuminate\Support\Facades\Auth;

use Carbon\Carbon;

use GuzzleHttp\Client;

 

class SocialsController extends Controller

{

    public function __construct()

    {

        $this->client = new Client();

    }

 

    /**

     * @param  $provider

     * @param  \Illuminate\Http\Request  $request

     * @return \Illuminate\Http\JsonResponse

     */

    public function login(Request $request, $provider)

    {

        if ($provider == 'google') {

            return $this->checkGoogle($request->social_token);

        }

 

        if ($provider == 'facebook') {

            return $this->checkFacebook($request->social_token);

        }

 

    }

 

    /**

     * @param String $social_token

     * @return void

     */

    public function checkGoogle($social_token)

    {

        try {

            $checkToken = $this->client->get("https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=$social_token");

            $responseGoogle = json_decode($checkToken->getBody()->getContents(), true);

 

            return $this->checkUserByEmail($responseGoogle);

        } catch (\Exception $e) {

            return $this->responseBadRequest(['message' => $e->getMessage()]);

        }

    }

 

    /**

     * @param String $social_token

     * @return void

     */

    public function checkFacebook($social_token)

    {

        try {

            $checkToken = $this->client->get("https://graph.facebook.com/v3.1/me?fields=id,name,email&access_token=$social_token");

            $responseFacebook = json_decode($checkToken->getBody()->getContents(), true);

 

            return $this->checkUserByEmail($responseFacebook);

        } catch (\Exception $e) {

            return $this->responseBadRequest(['message' => $e->getMessage()]);

        }

    }

 

    /**

     * @param $profile

     * @return void

     */

    public function checkUserByEmail($profile)

    {

        $user = User::where('email', $profile['email'])->first();

        if (!$user) {

            $user = User::create([

                'name' => $profile['name'],

                'email' => $profile['email'],

                'password' => bcrypt(str_random(8)),

            ]);

        }

 

        $user->forceFill([

            'verified' => true,

            'email' => $user['email'],

            'activated_at' => Carbon::now(),

        ])->save();

        $tokenResult = $user->createToken('Personal Access Client');

        $token = $tokenResult->token;

        $token->expires_at = Carbon::now()->addMonth();

        $token->save();

 

        return response()->json([

            'access_token' => $tokenResult->accessToken,

            'token_type' => 'Bearer',

            'expires_at' => Carbon::parse(

                $tokenResult->token->expires_at

            )->toDateTimeString()

        ]);

    }

}

 

Kết luận

Việc xây dựng API login Google, Facebook, Twitter hay Github với server laravel cho các dự án về App Mobile cũng khá đơn giản nhưng vô cùng tiện lợi cho người dùng 

Theo Techtalk

CÁC TIN TỨC, SỰ KIỆN KHÁC


5 XU HƯỚNG THIẾT KẾ ĐƯỢC THIẾT LẬP ĐỂ ĐỊNH HÌNH TƯƠNG LAI
5 xu hướng thiết kế được thiết lập để định hình tương lai
Thứ Ba, 19/02/2019 bởi Nguồn Creativebloq

Thiết kế tiêu đề ở đâu? Dự đoán của chúng tôi là xu hướng xã hội rộng lớn đối với lối sống dựa trên ứng dụng và web có nghĩa là các dòng chảy mạnh sẽ tiếp tục khuyến khích tiêu chuẩn hóa và đơn giản hóa thiết kế, cả trực tuyến và tắt.


THUẬT TOÁN SẮP XẾP NÀO LÀ NHANH NHẤT?
Thuật toán sắp xếp nào là nhanh nhất?
Thứ Hai, 18/02/2019 bởi Nguồn Techtalk via Viblo

“Thuật toán sắp xếp nào là nhanh nhất?” Và bài viết này của mình sẽ phần nào giúp các bạn tìm ra đáp án cho câu hỏi trên.


BẠN TRẺ MÊ IT KHÔNG THỂ BỎ QUA 3 TIÊU CHÍ VÀNG NÀY KHI CHỌN TRƯỜNG
Bạn trẻ mê IT không thể bỏ qua 3 tiêu chí vàng này khi chọn trường
Thứ Sáu, 25/01/2019 bởi Nguồn: Trí Thức Trẻ

Chọn trường nào, học ngành gì để ra trường có việc làm tốt? Đó là câu hỏi mà nhiều bạn trẻ trăn trở khi chưa định hướng chính xác con đường sẽ đi để phát triển sự nghiệp của mình. Nếu yêu thích và đam mê với lĩnh vực CNTT thì bạn đừng bỏ qua 3 tiêu chí “vàng” lựa chọn trường, ngành dưới đây.


20 LỜI KHUYÊN ĐỂ LÀM CHỦ MAYA
20 lời khuyên để làm chủ Maya
Thứ Năm, 24/01/2019 bởi Nguồn Creativebloq

Các chuyên gia trong ngành chia sẻ những lời khuyên khó kiếm được của họ để giúp bạn tận dụng tối đa Maya.


XÂY DỰNG API LOGIN GOOGLE, FACEBOOK, TWITTER HAY GITHUB VỚI SERVER LARAVEL CHO CÁC DỰ ÁN VỀ APP MOBILE
Xây dựng API login Google, Facebook, Twitter hay Github với server laravel cho các dự án về App Mobile
Thứ Năm, 24/01/2019 bởi Theo Techtalk

Trong những năm gần đây, sự thông dụng của smartphone cũng làm ngành Lập trình phát triển ứng dụng di động (Mobile Application Development) có những bước tiến lớn. Ngày càng nhiều các ứng dụng mobile app được ra đời cùng với sự tiện ích hơn, dễ sử dụng hơn (đăng nhập thuận tiện hơn, giao diện dễ dùng, tốc độ nhanh hơn,…)


XU HƯỚNG CÔNG NGHỆ WEB SẼ PHÁT TRIỂN TRONG NĂM 2019
Xu hướng công nghệ Web sẽ phát triển trong năm 2019
Thứ Hai, 21/01/2019 bởi Theo Techtalk

Thế giới phát triển web luôn thay đổi và đó là một thách thức để theo dõi chặt chẽ mọi thứ đang diễn ra. Những frameworks nào vẫn sẽ có liên quan trong năm tới? Và ngôn ngữ lập trình nào phù hợp nhất cho ứng dụng web của bạn? Hãy thảo luận về sáu công nghệ thú vị để phát triển web. Trong bài viết này, chúng tôi phân biệt giữa công nghệ front-end và back-end. Chúng tôi bắt đầu với ba frameworks phát triển front-end và sau đó thảo luận về ba frameworks phát triển back-end.

XEM THÊM


KẾT NỐI VỚI CHÚNG TÔI