Google Login di Web

Pengantar

Dalam panduan ini, Anda akan mempelajari cara mengatur Google Login dengan Capgo Social Login untuk aplikasi web. Saya berasumsi bahwa Anda telah membaca panduan pengaturan umum.

Menggunakan login Google di web

Menggunakan login Google di web cukup sederhana. Untuk menggunakannya, Anda harus melakukan hal berikut:

1. Buat web client di Google Console

   Note

   Jika Anda telah mengonfigurasi Google Login untuk Android, Anda dapat melewati langkah ini karena Anda telah membuat web client. Anda dapat langsung ke langkah 2.

   1. Klik pada search bar

      

   2. Cari credentials dan klik opsi APIs and Services (nomor 2 pada screenshot)

      

   3. Klik pada create credentials

      

   4. Pilih OAuth client ID

      

   5. Pilih Application type sebagai Web application

      

   6. Beri nama client Anda dan klik Create

      

   7. Salin client ID, Anda akan menggunakan ini sebagai webClientId dalam aplikasi Anda

      

2. Konfigurasikan web client di Google Console

   1. Silakan buka halaman credentials dan klik pada web client Anda

      

   2. Sekarang, silakan tambahkan Authorized JavaScript origins. Ini harus mencakup semua alamat yang mungkin Anda gunakan untuk aplikasi Anda. Dalam kasus saya, saya akan HANYA menggunakan localhost, tetapi karena saya menggunakan port kustom, saya harus menambahkan http://localhost dan http://localhost:5173

      1. Silakan klik pada add URI

         

      2. Silakan ketik URL Anda

         

      3. Silakan ulangi sampai Anda menambahkan semua URL

      4. Ketika Anda selesai, layar Anda akan terlihat seperti ini

         

   3. Sekarang, silakan tambahkan beberapa Authorized redirect URIs. Ini akan bergantung pada halaman mana yang Anda putuskan untuk menggunakan plugin CapacitorSocialLogin. Dalam kasus saya, saya akan menggunakannya di http://localhost:5173/auth

      1. Silakan klik pada ADD URI

         

      2. Masukkan URL Anda dan klik ADD URL lagi

         

   4. Klik save

      

3. Sekarang, Anda seharusnya siap untuk memanggil login dari JavaScript seperti ini:

   1. Pertama, import SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';

   2. Kemudian, panggil initialize. Ini harus dipanggil HANYA sekali.

      // onMounted adalah spesifik Vue
      // webClientId adalah client ID yang Anda dapatkan dalam langkah pembuatan client web bukan client ID android.
      onMounted(() => {
       SocialLogin.initialize({
         google: {
           webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
         }
       })
      })

   Penanganan Redirect Web

   Saat menggunakan login Google di web, Anda HARUS memanggil fungsi apa pun dari plugin saat redirect terjadi untuk menginisialisasi plugin sehingga dapat menangani redirect dan menutup jendela popup. Anda dapat memanggil isLoggedIn() ATAU initialize() - keduanya akan memicu penanganan redirect:

   // Opsi 1: Panggil isLoggedIn saat halaman redirect dimuat
   SocialLogin.isLoggedIn({ provider: 'google' }).catch(() => {
     // Abaikan hasilnya, ini hanya untuk menginisialisasi plugin
   });
   
   // Opsi 2: Panggil initialize saat halaman redirect dimuat
   SocialLogin.initialize({
     google: {
       webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
     }
   }).catch(() => {
     // Abaikan error apa pun, ini hanya untuk menangani redirect
   });

   3. Buat tombol login yang memanggil SocialLogin.login saat diklik

      const res = await SocialLogin.login({
       provider: 'google',
       options: {}
      })
      // Tangani respons
      console.log(JSON.stringify(res));