วิธีการทำ Login with Facebook และ Social อื่น ๆ ด้วย Laravel Socialite

บทความนี้จะขอพูดสิ่งที่ปัจจุบันถือได้ว่าเป็นเรื่องพื้นฐานไปแล้วสำหรับเว็บไซต์ที่มีระบบสมาชิกนั่นก็คือการ Login ด้วยบัญชี Social Network ต่าง ๆ ไม่ว่าเป็น Facebook, Google(Gmail), Twitter, Github และอื่น ๆ 

ซึ่งหลาย ๆ คนก็รู้ดีว่าภายใต้การใช้งานที่เรียบง่าย ๆ แสนง่ายนั้น มันแฝงไปด้วยขั้นตอนการพัฒนาที่วุ่นวาย หลายขั้นตอนซะเหลือเกิน ไปว่าจะเป็นการเปิด App Account ของแต่ละเจ้า การติดตั้ง SDK จนถึงการเขียน API เพื่อเชื่อมต่อกว่าจะใช้งานได้จริงก็สูญเสียพลังงานไปไม่น้อย

แต่สำหรับใครที่ใช้ Laravel ก็ง่ายขึ้น เพราะเราก็กำลังจะมาใช้งาน Laravel Socialite ซึ่งเป็น Package ที่ตอบโจทย์ในเรื่องการไม่ต้องการติดตั้ง SDK ของ Social ใด ๆ ที่เราจะ Connect อีกต่อไป แค่ติดตั้ง Package ทีเดียวเราก็เชื่อมต่อได้แทบจะทุก Social ที่เรานึกออกเลยแหละ ถ้าไม่เชื่อคลิกเข้ารายการ Social ที่สามารถ Connect ได้ที่ลิงค์นี้ Socialite Providers

เริ่มติดตั้ง

ติดตั้ง Socialite ด้วยคำสั่ง Composer

composer require laravel/socialite

สำหรับ Package นี้เป็น Offcial Package ของ Laravel ก็พร้อมใช้งานแล้วครับ

ตอนนี้เราก็มาเขียน Controller ให้สามารถใช้งาน Socialite ได้ โดยตัวอย่างนี้ผมจะเขียนดัดแปลงให้ Auth/LoginController.php ซึ่งเป็นไฟล์ที่สร้างมาจากคำสั่ง php artisan make:auth สามารถ Login ด้วย Facebook หรือ Social อื่น ๆ ได้ครับ

เพิ่มคำสั่ง use Socialite; ที่ด้านบนของไฟล์ ใน Class LoginController ให้เพิ่ม Method สำหรับ Redirect ไป Facebook และ รับ Callback กลับมาจาก Facebook แล้วบันทึกหรือดึงข้อมูลของ User ตามโค้ดด่างล่างนี้

...

use Socialite;
use App\User;
use App\SocialAccounts;

class LoginController extends Controller
{
    ......


    /**
     * Social Login
     */
    public function redirectToProvider($provider = 'facebook')
    {
        return Socialite::driver($provider)->redirect();
    }

    public function handleProviderCallback($provider = 'facebook')
    {
        $providerUser = Socialite::driver($provider)->user();
            
        $user = $this->createOrGetUser($provider, $providerUser);
        auth()->login($user);

        return redirect()->to('/home');
    }

    public function createOrGetUser($provider, $providerUser)
    {
        /** Get Social Account */
        $account = SocialAccount::whereProvider($provider)
            ->whereProviderUserId($providerUser->getId())
            ->first();

        if ($account) {
            return $account->user;
        } else {

            /** Get user detail */
            $userDetail = Socialite::driver($provider)->userFromToken($providerUser->token);

            /** Create new account */
            $account = new SocialAccount([
                'provider_user_id' => $providerUser->getId(),
                'provider' => $provider,
            ]);

            /** Get email or not */
            $email = !empty($providerUser->getEmail()) ? $providerUser->getEmail() : $providerUser->getId() . '@' . $provider . '.com';

            /** Get User Auth */
            if (auth->check()) {
                $user = auth()->user();
            }else{
                $user = User::whereEmail($email)->first();
            }

            if (!$user) {
                /** Get Avatar */
                $image = $provider . "_" . $providerUser->getId() . ".png";
                $imagePath = public_path(config('app.media.directory') . "users/avatar/" . $image);
                file_put_contents($imagePath, file_get_contents($providerUser->getAvatar()));


                /** Create User */
                $user = User::create([
                    'email' => $email,
                    'name' => $providerUser->getName(),
                    'username' => $providerUser->getId(),
                    'avatar' => $image,
                    'password' => bcrypt(rand(1000, 9999)),
                ]);

            }

            /** Attach User & Social Account */
            $account->user()->associate($user);
            $account->save();

            return $user;
        }
    }
}

แล้วไปเพิ่ม Route ใหม่ที่ไฟล์ routes/web.php สำหรับ Redirect และ Callback กับ Facebook หรือ Social อื่น ๆ

Route::prefix('login')->group(function () {
    Route::get('/{provider}', 'Auth\[email protected]')->name('login.provider');
    Route::get('/{provider}/callback', 'Auth\[email protected]')->name('login.provider.callback');
});

ต่อมาก็สร้างไฟล์ Migration ใหม่ด้วยคำสั่ง

php artisan make:migration create_social_accounts_table 

ไฟล์ migration จะถูกสร้างใหม่ที่โฟลเดอร์ database/migrations/
จะเจอที่ไฟล์ใหม่ประมาณนี้ ........ create_social_accounts_table.php ให้เพิ่ม Field ชื่อ provider และ provider_user_id ตามโค้ดด้านล่าง

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateSocialAccountsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('social_accounts', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id');
            $table->string('provider');
            $table->string('provider_user_id');            
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('social_accounts');
    }
}

แล้วรันคำสั่ง migrate

php artisan migrate

(สำหรับใครที่อยากแสดง Avatar ของ Facebook ให้ไปเพิ่ม Field ชื่อว่า avatar ที่ตาราง User ด้วยนะ)

เอาละสุดท้ายก็ตั้งค่าข้อมูลสำคัญสำหรับเชื่อมต่อกับ Facebook เข้าไปที่ config/services.php ด้านต่างก็เพิ่ม array ตั้งค่าของ facebook ตามนี้

'facebook' => [
    'client_id' => env('FACEBOOK_CLIENT_ID', {Your App ID}),
    'client_secret' => env('FACEBOOK_CLIENT_SECRET', {Your App Secret}),
    'redirect' => env('APP_URL') . 'login/facebook/callback',
],

สำหรับ Cliend ID, Client Secret ใส่ตามที่ขึ้นที่หน้า app ของเราที่สร้างไว้ที่ Facebook Developer ครับ

แต่ถ้าใครยังไม่ได้สร้าง app ใน Facebook Developer ให้เข้าไปที่ Facebook Developers 

สร้าง Facebook App

เจอเว็บแบบนี้แล้วคลิกที่ My Apps > Add New App จะพบการ Modal ให้เราตั้งชื่อ App และใส่ Email ติดต่อของเราไป เสร็จแล้วก็กด Create App ID 

พอสร้างเสร็จให้คลิกที่เมนู Settings > Basic ให้เราใส่ข้อมูลให้ครบแบบนี้

ต่อมาคือการเพิ่ม Product ของ App ในการที่นี้คือ Facebook Login ให้กดปุ่ม + หลังคำว่า Products + หากล่องที่เขียนว่า Facebook Login แล้วกดปุ่ม Set Up ด้านล่างของกล่อง

คลิกเลือกประเภทเป็น Web

แล้วใส่ URL ของเว็บที่จะใช้ Connect เข้ามา

กด Save และข้าม Step การติดตั้ง SDK ได้ไปเลย เพราะเรากำลังจะใช้ Laravel Socialite มาจัดการตรงนี้ครับ

คลิกที่ Facebook Login > Settings จะเจอหน้าตั้งแค่แบบนี้

สิ่งที่จำเป็นคือการเปิด Client OAuth Login, Web OAuth Login, Use Strict Mode for Redirect URIs, Enforce HTTPS และใส่ Valid OAuth Redirect URIs เป็น URL ที่เราจะให้ Facebook Callback กลับไปที่เว็บเราครับ 

https://{your_domain}/login/facebook/callback

เอ๊าะ!! เมื่อใช้งานจริงที่โปรดักชั่นให้เปิด Status เป็น ON แบบรูปด้านบนด้วยครับ

ประยุกต์ใช้

การใช้งานก็แค่สร้างปุ่ม Login with Facebook แบบไหนก็ได้ขึ้นมาที่ View แล้วใส่ลิ้งค์เป็น Route ที่ใช้ Redirect ไป Facebook ที่เซ็ตไว้คือ /login/facebook

พอคลิกที่ปุ่มก็จะ Redirect ไปที่หน้าขอใช้ App ของ Facebook แบบนี้ครับ

พอเราคลิก Continue as ... Facebook ก็จะ Callback กลับมาที่เว็บเราตาม URL ที่เราเซ็ตไว้คือ /login/facebook/callback ซึ่งเราแล้วเขียนให้เก็บชื่อ อีเมล และ Avatar เอาไว้ และ Redirect ต่อไปที่หน้า /home แบบนี้ครับ

ภารกิจ Login with Facebook เรียบร้อยแล้ว และอย่างที่บอกเราสามารถ Connect กับ Social อื่น ๆ ได้อีกด้วย หวังว่าจะประยุกต์กันอย่างราบรื่นนะครับ