Pembangunan Laravel: Bagaimana dengan cepat mengintegrasikan log masuk pihak ketiga menggunakan Laravel Socialite?

Laravel ialah rangka kerja PHP popular yang digunakan untuk membangunkan aplikasi web. Salah satu ciri yang paling biasa ialah penyepaduan log masuk pihak ketiga ke dalam aplikasi. Melakukannya boleh memberikan pengguna pengalaman pengguna yang lebih baik dan mengurangkan proses pendaftaran berulang.

Dalam artikel ini, kita akan membincangkan cara mengintegrasikan log masuk pihak ketiga menggunakan perpustakaan Laravel Socialite.

Apakah itu Laravel Socialite?

Laravel Socialite ialah pakej sambungan untuk rangka kerja Laravel yang membolehkan pembangun melaksanakan log masuk pihak ketiga dengan mudah dalam aplikasi mereka. Ia menyokong pelbagai platform sosial seperti Facebook, Twitter, LinkedIn, dll.

Bagaimana Socialite berfungsi?

Socialite mengikut protokol OAuth. OAuth ialah rangka kerja kebenaran yang membenarkan pengguna menghantar maklumat akaun mereka dari satu tapak ke tapak lain tanpa berkongsi bukti kelayakan mereka. OAuth memerlukan kebenaran pengguna, dalam hal ini pengguna membenarkan aplikasi untuk mengakses akaun media sosial mereka.

Keizinan Socialite berfungsi seperti berikut:

1. Pengguna mengklik butang "Log Masuk", yang akan menunjuk ke kebenaran Socialite:

   Route::get('auth/{provider}', 'AuthSocialController@redirectToProvider');

2. Socialite mencabar pengguna untuk membenarkan akses ke akaun media sosial mereka; mengubah hala ke URL panggil balik;

   Route::get('auth/{provider}/callback', 'AuthSocialController@handleProviderCallback');

Socialite akan mengembalikan URL panggilan balik dengan kod kebenaran kepada aplikasi dan aplikasi akan meminta token akses OAuth dengan kod kebenaran;

public function redirectToProvider($provider)
{
  return Socialite::driver($provider)->redirect();
}

Setelah selesai pengesahan, Socialite akan mengembalikan token yang dibenarkan pengguna dan menyerahkannya kepada aplikasi.

4. Bagaimana untuk menggunakan Socialite dalam Laravel?
5. Menggunakan mana-mana platform media sosial yang disokong oleh Socialite, anda perlu menyediakan bukti kelayakan aplikasi atau kunci di dua tempat:

public function handleProviderCallback($provider)
{
$socialUser = Socialite::driver($provider)->user();
}

Bukti kelayakan atau kunci aplikasi bertujuan untuk mengesahkan identiti aplikasi .

Kami akan menyediakannya dalam fail config/services.php.

Langkah 1: Buat Laluan Kebenaran

Buat laluan yang mencetuskan kebenaran Socialite:

    'facebook' => [
        'client_id' => env('FB_CLIENT_ID'),
        'client_secret' => env('FB_CLIENT_SECRET'),
        'redirect' => env('FB_CALLBACK_URL'),
    ]

    'twitter' => [
        'client_id' => env('TW_CLIENT_ID'),
        'client_secret' => env('TW_CLIENT_SECRET'),
        'redirect' => env('TW_CALLBACK_URL'),
    ],

    'google' => [
         'client_id' => env('GOOGLE_CLIENT_ID'),
         'client_secret' => env('GOOGLE_CLIENT_SECRET'),
         'redirect' => env('GOOGLE_CALLBACK_URL')
    ]

Biasanya laluan ini diletakkan dalam pengawal yang dipanggil SocialController, yang Pengawal digunakan untuk mengendalikan Keizinan sosialit dan panggilan balik.

Langkah 2: Buat SocialController

Seperti semua pengawal, kita perlu mencipta SocialController yang menggunakan amalan pengekodan yang baik.

Gunakan arahan berikut untuk mencipta pengawal:

Route::get('auth/{provider}', 'AuthSocialController@redirectToProvider');
Route::get('auth/{provider}/callback', 'AuthSocialController@handleProviderCallback');

Akhirnya ini akan membolehkan kami menggunakan pembekal kebenaran untuk kebenaran dan panggilan balik ke laluan kami.

Dalam SocialController, kami mentakrifkan dua kaedah, redirectToProvider dan handleProviderCallback. Yang pertama ialah ubah hala kepada pembekal kebenaran. Fungsi panggil balik seterusnya kemudiannya menyediakan URL panggil balik untuk klien dengan kod kebenaran untuk mendapatkan semula maklumat dan melengkapkan pengesahan.

Berikut ialah contoh kod untuk SocialController:

php artisan make:controller AuthSocialController

Langkah 3: Menggunakan Pengawal Paparan

Biasanya, kami akan menggunakan pengawal paparan untuk mengurus pemaparan semua paparan kami. Ini menjadikan kod kami lebih mudah dibaca dan diurus. Mari buat paparan ringkas untuk aplikasi kami menggunakan pengawal paparan Laravel.

Gunakan arahan berikut untuk mencipta pengawal paparan:

namespace AppHttpControllersAuth;
use AppHttpControllersController;
use IlluminateSupportFacadesAuth;
use IlluminateHttpRequest;
use LaravelSocialiteFacadesSocialite;

class SocialController extends Controller
{
    /**
     * Redirect the user to the OAuth Provider.
     *
     * @return IlluminateHttpResponse
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }
    /**
     * Obtain the user information from OAuth Provider.
     *
     * @return IlluminateHttpResponse
     */
    public function handleProviderCallback($provider)
    {
        $user = Socialite::driver($provider)->user();

        // Do something with user data, for example:
        // $user->token;
        // $user->getId();
        // $user->getEmail();
    }
}

Berikut ialah perubahan yang dibuat dalam pengawal.

php artisan make:controller SocialAuthController

Langkah 4: Cipta paparan log masuk

Sekarang pengawal dan laluan kami sudah sedia. Sekarang kita perlu mencipta paparan untuk log masuk.

Buat fail paparan dan namakannya social_login.blade.php. Kami perlu memaparkan butang yang boleh mencetuskan log masuk pihak ketiga. Dalam kes ini kami akan menunjukkan 3 butang untuk menyokong log masuk dengan Google, Facebook dan Twitter.

Berikut ialah contoh kod untuk fail paparan:

namespace AppHttpControllers;

use IlluminateHttpRequest;

class SocialAuthController extends Controller
{
    /**
     * Redirect the user to the OAuth Provider.
     *
     * @return IlluminateHttpResponse
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }

    /**
     * Obtain the user information from OAuth Provider.
     *
     * @return IlluminateHttpResponse
     */
    public function handleProviderCallback($provider)
    {
        $user = Socialite::driver($provider)->user();
        $existingUser = User::where('email', $user->getEmail())->first();
        if ($existingUser) { // If user already exists, login the user                
            auth()->login($existingUser, true);
        } else { // Register new user                    
            $newUser = new User();
            $newUser->name = $user->getName();
            $newUser->email = $user->getEmail();
            $newUser->google_id = $user->getId();
            $newUser->password = encrypt('amitthakur');
            $newUser->save();
            auth()->login($newUser, true);
        }
        return redirect()->to('/home');
    }
}

Gunakan fail reka letak di bahagian atas. Apabila pengguna mengklik pada mana-mana butang, kami mengubah hala mereka kepada pembekal kebenaran. Dalam tindak balas SocialController kami akan mendapat data pengguna dan pengesahan lengkap.

Langkah 5: Buat laluan baharu

Sekarang kita perlu mencipta laluan baharu untuk mengendalikan fail paparan di atas.

Ubah suai fail web.php seperti berikut:

@extends('layouts.app')
@section('content')
<main class="py-4">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ __('Login') }}</div>
                    <div class="card-body">
                        <a href="{{ route('social.oauth', ['provider' => 'google']) }}" class="btn btn-google">Sign in with google</a>
                        <a href="{{ route('social.oauth', ['provider' => 'facebook']) }}" class="btn btn-facebook">Sign in with Facebook</a>
                        <a href="{{ route('social.oauth', ['provider' => 'twitter']) }}" class="btn btn-twitter">Sign in with twitter</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

Kita harus ambil perhatian bahawa laluan di atas dikenal pasti mengikut nama supaya ia boleh dirujuk dalam kod pengawal.

Langkah 6: Uji

Sekarang kami telah menyediakan identiti media sosial kami, sebelum kami boleh menguji aplikasi, kami perlu mengkonfigurasi aplikasi kami melalui fail .env.

Untuk mengkonfigurasi fail .env, tambah kod berikut:

Route::get('social', 'SocialAuthController@index')->name('social.login');
Route::get('social/{provider}', 'SocialAuthController@redirectToProvider')->name('social.oauth');
Route::get('social/{provider}/callback', 'SocialAuthController@handleProviderCallback');

Ganti ID aplikasi sebenar dengan "xxxxxxxxxxxxxxxxx" pada baris ini. Selepas itu, kami boleh melancarkan aplikasi kami melalui baris arahan dan mengakses fail paparan di atas. Sebaik sahaja kami mengklik mana-mana butang dan membenarkan akaun kami melalui OAuth, kami disahkan dengan setiap pengguna yang dikenali.

Kesimpulan

Dalam artikel ini, kami mempelajari cara mengintegrasikan log masuk pihak ketiga menggunakan pustaka Laravel Socialite. Tujuan utama Socialite adalah untuk memudahkan proses log masuk media sosial untuk meningkatkan pengalaman pengguna. Kami belajar cara menyediakan Socialite untuk menyokong Google, Facebook dan Twitter. Kami juga mendapatkan semula kod kebenaran dalam pengawal dan melengkapkan pengesahan OAuth menggunakan data yang diminta. Proses ini sebenarnya akan membuat akaun baharu atau mengemas kini akaun sedia ada.

Atas ialah kandungan terperinci Pembangunan Laravel: Bagaimana dengan cepat mengintegrasikan log masuk pihak ketiga menggunakan Laravel Socialite?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!