Socialstream: Laravel Socialite dengan Jetstream / Breeze

¶Socialstream

"Socialstream" membawa kekuatan OAuth Laravel Socialite ke aplikasi Laravel Breeze, Jetstream, atau Filament Anda secara efisien dan mudah. Memulainya sangatlah mudah; tambahkan socialstream ke aplikasi Anda, jalankan perintah artisan install, pilih tumpukan dan fitur opsional Anda, duduklah dan santailah sementara kami menyiapkan aplikasi Anda untuk Anda!

¶Install Socialstream

Anda dapat menginstal Socialstream ke dalam proyek Anda melalui composer:

composer create-project laravel/laravel example-app

cd example-app

composer require joelbutcher/socialstream

Setelah menginstal Socialstream, Anda dapat menjalankan perintah Artisan socialstream:install. Perintah ini akan memandu Anda melalui berbagai tumpukan dan opsi untuk mengonfigurasi instalasi sesuai dengan kebutuhan aplikasi Anda.

Konfigurasi pertama dari ini adalah memutuskan kit pemula mana yang akan digunakan. Secara default, Socialstream terintegrasi langsung ke dalam Laravel Jetstream, Laravel Breeze, atau Filament. Manfaat dari masing-masing kit pemula ini, dan tumpukan mereka yang berbeda, tercantum di bawah ini: Laravel Jetstream

Jetstream adalah kit pemula komprehensif untuk para pengrajin Laravel, dibangun di atas Laravel Sactum dan Laravel Fortify, Jetstream menambahkan otentikasi dua faktor, manajemen sesi, manajemen token API, dan fungsionalitas Tim ke aplikasi Anda. Jetstream tersedia dalam tumpukan berikut:

inertia (Vue dengan Inertia) livewire (Livewire)

Instal Socialstream untuk Laravel Jetstream:

php artisan socialstream:install jetstream inertia

php artisan socialstream:install jetstream livewire

Untuk informasi lebih lanjut, silakan lihat dokumentasi resmi untuk Laravel Breeze.

¶Laravel Breeze

Laravel Breeze menawarkan implementasi minimal dan sederhana dari mekanisme otentikasi Laravel, termasuk login, registrasi, reset kata sandi, dan verifikasi email. Ini juga memberikan Anda halaman profil sederhana di mana pengguna Anda dapat memperbarui informasi nama, email, dan kata sandi mereka, serta menghapus akun mereka. Laravel Breeze tersedia dalam "tumpukan" berikut:

blade (Blade dengan Alpine) livewire (Livewire (Volt) dengan Alpine) livewire-functional (Livewire (fungsional) dengan Alpine) react (React dengan Inertia) vue (Vue dengan Inertia)

¶Instal Socialstream untuk Laravel Breeze:

php artisan socialstream:install breeze blade

php artisan socialstream:install breeze livewire

php artisan socialstream:install breeze livewire-functional

php artisan socialstream:install breeze react

php artisan socialstream:install breeze vue

Untuk informasi lebih lanjut, silakan lihat dokumentasi resmi untuk Laravel Breeze.

¶Dark Mode

Jika Anda ingin menyertakan dukungan "mode gelap" saat membangun frontend aplikasi Anda, berikan direktif --dark saat menjalankan perintah socialstream:install:

php artisan socialstream:install breeze livewire --dark

¶Typescript

Laravel Breeze dilengkapi dengan dukungan untuk typescript dengan React atau Vue. Untuk menyertakan dukungan typescript ke dalam kerangka kerja frontend aplikasi Anda, tambahkan direktif --typescript saat menjalankan perintah socialstream:install:

php artisan socialstream:install breeze react --typescript

php artisan socialstream:install breeze vue --typescript

¶SSR

Laravel Breeze dan Laravel Jetstream keduanya dilengkapi dengan dukungan untuk Server Side Rendering melalui Laravel Vite & Inertia. Untuk menginstal dukungan SSR, Anda dapat melakukannya dengan menambahkan direktif --ssr saat menjalankan perintah socialstream:install:

php artisan socialstream:install breeze react --ssr

php artisan socialstream:install breeze vue --ssr

php artisan socialstream:install jetstream inertia --ssr

¶Filament (beta)

Dukungan Filament saat ini berada dalam versi beta. Tidak disarankan untuk menjalankannya dalam lingkungan produksi karena Anda mungkin mengalami masalah.

Filament adalah paket tumpukan TALL yang memungkinkan pengembang Laravel untuk dengan cepat membangun UI menggunakan komponen yang mudah dikonfigurasi tanpa harus khawatir tentang membangun komponen. Socialstream akan terintegrasi dengan mudah ke dalam panel admin Filament dengan memublikasikan file Livewire yang diperlukan dan merendernya setelah panel login

¶Instal Socialstream untuk Filament

php artisan socialstream:install filament

¶Migrate

Untuk menyelesaikan instalasi Anda, Socialstream akan menjalankan perintah npm install yang diperlukan untuk menginstal dependensi tumpukan frontend dan membangun aplikasi Anda. Setelah ini, Anda perlu menjalankan migrasi secara manual untuk memastikan aplikasi Anda memiliki tabel yang diperlukan agar Socialstream berfungsi:

php artisan migrate

¶Provider

Tidak ada provider yang diaktifkan secara default (dan dengan demikian bagian Socialstream dari tampilan "Login" dan "Pendaftaran" tidak ditampilkan. Namun, Anda bebas untuk mengaktifkan sebanyak mungkin provider yang Anda inginkan.

¶Menambahkan Provider

Socialstream secara native hanya mendukung provider yang ditawarkan oleh Laravel Socialite #introduction. Jika Anda ingin menambahkan penyedia, Anda dapat melakukannya dengan salah satu dari tiga cara berikut:

Melalui Kelas Providers Statis

Socialstream dilengkapi dengan kelas Providers, dengan metode statis untuk masing-masing provider yang didukung oleh Socialite. Kelas ini diimpor dalam file konfigurasi default, dan dapat dipanggil seperti ini:

// config/socialstream.php

'providers' => [
    Providers::google(),
    Providers::github(),
    // provider lainnya
],

Anda cukup mengisi string ke dalam array providers dalam file konfigurasi Socialstream untuk menambahkan penyedia.

Harap dicatat bahwa nilai string juga harus sesuai dengan nilai layanan di file konfigurasi services.php aplikasi Anda karena inilah yang digunakan untuk mengambil credential penyedia. Sebagai Array

Penyedia tambahan dapat ditambahkan sebagai array:

// config/services.php

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

'github' => [
    'client_id' => env('GITHUB_CLIENT_ID'),
    'client_secret' => env('GITHUB_CLIENT_SECRET'),
    'redirect' => env('GITHUB_REDIRECT'),
],

 // yang lain...

lalu di bagian .env :

GOOGLE_CLIENT_ID="498678185596-xxxxxx" // client id di google ouath kamu
GOOGLE_CLIENT_SECRET="GOCSPX-xxxxxx" // client secret di google oauth kamu
GOOGLE_REDIRECT="/oauth/google/callback" // tetap sama kaya gini

untuk membuat ouath google pergi ke halaman berikut : google apis

Beberapa konfigurasi lainnya bisa langsung dilihat di website resmi socialstream.