background

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

6 months ago ◦ 2,315 Views

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

วิธีการทำ 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 อื่น ๆ ได้อีกด้วย หวังว่าจะประยุกต์กันอย่างราบรื่นนะครับ




#laravel #facebook #tutorial

View count: 2,315
  • avatar
  • Save Pongsiri ศิลปินด้านพัฒนาซอฟต์แวร์ มีเป้าหมายคือพัฒนาตัวเองให้ยืดหยุ่นที่สุด ชอบความเรียบง่าย,ดนตรี,กีฬา และแมว