Konfigurasi Login Dengan Google Kitabantu

Kitabantu adalah situs galang dana online yang dikembangkan menggunakan PHP Laravel. Kitabantu terus dikembangkan sebagai platform galang dana online alternatif untuk digunakan oleh lembaga amal non profit, organisasi kemanusiaan dan berbagai yayasan. Kita bisa masuk dan mendaftar ke website kitabantu melalui akun yang sebelumnya dibuat. Selain itu fitur Kitabantu adalah bisa login dan daftar menggunakan akun Google dan Facebook.

Pada tutorial kali ini saya akan membahas panduan konfigurasi lanjutan kitabantu yaitu konfigurasi login via google. Namun sebelum melangkah ke konfigurasi lanjutan ini pastikan kalian sudah membaca konfigurasi dasar Kitabantu yang sudah saya posting sebelumnya.

Langkah 1 : Mendapatkan Client ID dan Client Secret Google

Untuk mendapatkan client id dan client secret, Kita perlu mendaftar dan melakukan pengaturan di halaman Google Console berikut ini https://console.cloud.google.com. Setelah halaman terbuka, silahkan buat project terlebih dahulu, ikuti instruksinya seperti gambar di bawah ini.

Tentukan nama project, untuk location biarkan apa adanya. Jika sudah, klik tombol CREATE untuk membuat project baru.

Setelah project berhasil dibuat, pastikan kalian berada di dalam project yang baru dibuat. Cara untuk memilih project adalah : klik nama project yang berada di sebelah kanan google cloud platform. Lalu klik panah bawah untuk memilih project setelah itu pilih APIs & Services.

Setelah jendela APIs & Services terbuka, Selanjutnya klik menu OAuth consent screen, lalu pilih External dan klik tombol CREATE.

Selanjutnya isi form seperti App name, User support email dan logo aplikasi, jika sudah klik save dan continue untuk melanjutkan.

Selanjutnya buka menu Credentials → Create Credentials → OAuth Client ID. 

Pilih Web application pada Application type, lalu scroll ke bawah pada bagian Authorized JavaScript origins klik ADD URI lalu tambahkan url baru. Sesuaikan url dengan aplikasi yang kalian buat misalnya https://kitabantu.imamdev.com. Jika menggunakan localhost maka isi dengan http://localhost/kitabantu.

Pada bagian Authorized redirect URIs klik ADD URI lalu tambahkan url callback Kitabantu. URL callback untuk aplikasi Kitabantu adalah https://domain-anda.com/oauth/google/callback. Ganti domain-anda.com sesuai domain masing-masing. Terakhir klik tombol CREATE.

Selanjutnya kita akan diberikan client id dan client secret. Silahakan copy client id dan client secret yang telah diberikan. Tapi jika sudah terlanjur menutup popup yang muncul, kita bisa melihatnya kembali dengan meng-klik icon pensil.

Langkah 2 : Salin Client ID dan Client scret ke services.php

Berikutnya kembali ke source code Kitabantu silahkan buka file config/services.php. Pada variabel array google, isi value client_id dan client_secret yang didapat dari google console. Jangan lupa untuk value redirect isi dengan URL callback dengan hanya mengganti domain saja. Terakhir simpan file.

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Third Party Services
    |--------------------------------------------------------------------------
    |
    | This file is for storing the credentials for third party services such
    | as Stripe, Mailgun, SparkPost and others. This file provides a sane
    | default location for this type of information, allowing packages
    | to have a conventional place to find your various credentials.
    |
    */

    'mailgun' => [
        'domain' => env('MAILGUN_DOMAIN'),
        'secret' => env('MAILGUN_SECRET'),
    ],

    'ses' => [
        'key' => env('SES_KEY'),
        'secret' => env('SES_SECRET'),
        'region' => env('SES_REGION', 'us-east-1'),
    ],

    'sparkpost' => [
        'secret' => env('SPARKPOST_SECRET'),
    ],

    'stripe' => [
        'model' => App\Models\User::class,
        'key' => env('STRIPE_KEY'),
        'secret' => env('STRIPE_SECRET'),
    ],

    'facebook' => [
      'client_id' => '483353572123456', // configure with your app id
      'client_secret' => 'f11b41708123456f1efa0a51905a087b', // your app secret
      'redirect' => 'https://kitabantu.imamdev.com/oauth/facebook/callback', // IMPORTANT NOT REMOVE /oauth/facebook/callback
      ],
'google'=> [
	         'client_id' => '123456789-mau1n1eq65qdffegcm600ifh7oov5gm5.apps.googleusercontent.com',
	         'client_secret' => 'GxEfDVdoeCeReiBCRabcdefg',
	         'redirect' => 'https://kitabantu.imamdev.com/oauth/google/callback', // IMPORTANT NOT REMOVE /oauth/google/callback
				 ],
			 ];

Langkah 3 : Aktifkan Login via Google di Panel Admin

Agar tombol login via google muncul di halaman login Kitabantu, kita perlu mengaktifkannya di halaman panel admin Kitabantu. Pergi ke menu Pengaturan Umum -> Umum. Posisikan On pada Google login.

Silahkan login ke Kitabantu menggunakan tombol Masuk dengan Google menggunakan email google aktif dan masukan password email google, maka secara otomatis akan masuk ke sistem Kitabantu sebagai pengguna.