Google Login di Web

Pendahuluan

Dalam panduan ini, Anda akan belajar cara menyiapkan Google Login dengan Capgo Social Login untuk aplikasi web. Saya asumsikan Anda sudah membaca panduan setup umum.

Menggunakan Google login di web

Menggunakan google login di web cukup sederhana. Untuk menggunakannya, lakukan langkah berikut:

1. Buat web client di Google Console

   Catatan

   Jika Anda sudah mengonfigurasi Google Login untuk Android, Anda bisa melewati langkah ini karena web client sudah dibuat. Silakan lanjut ke langkah 2.

   1. Klik kolom pencarian

      

   2. Cari credentials dan klik pada APIs and Services opsi (nomor 2 di tangkapan layar)

      

   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 menggunakannya sebagai webClientId di aplikasi Anda

      

2. Konfigurasi 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 pakai localhost, tapi karena saya pakai port kustom, saya harus menambahkan keduanya http://localhost dan http://localhost:5173

      1. Silakan klik pada add URI

         

      2. Silakan ketik URL Anda

         

      3. Silakan ulangi sampai semua URL ditambahkan

      4. Setelah selesai, layar Anda akan terlihat seperti ini

         

   3. Sekarang, silakan tambahkan beberapa Authorized redirect URIs. Ini bergantung pada halaman mana yang Anda gunakan untuk 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 sudah siap untuk memanggil login dari JavaScript seperti ini:

   1. Pertama, import SocialLogin

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

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

      // onMounted is Vue specific
      // webClientId is the client ID you got in the web client creation step not the android client ID.
      onMounted(() => {
       SocialLogin.initialize({
         google: {
           webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
         }
       })
      })

   Penanganan Web Redirect

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

   // Option 1: Call isLoggedIn when the redirect page loads
   SocialLogin.isLoggedIn({ provider: 'google' }).catch(() => {
     // Ignore the result, this is just to initialize the plugin
   });
   
   // Option 2: Call initialize when the redirect page loads
   SocialLogin.initialize({
     google: {
       webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
     }
   }).catch(() => {
     // Ignore any errors, this is just to handle the redirect
   });

   Peringatan

   Di Web, SocialLogin.refresh({ provider: 'google' }) tidak diimplementasikan, bahkan saat menggunakan google.mode: 'online'. Jika Anda membutuhkan token Google baru di Web, panggil SocialLogin.login({ provider: 'google', ... }) lagi.

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

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

Lanjutkan dari Google Login di Web

Jika Anda menggunakan Google Login di Web untuk merencanakan alur autentikasi dan akun, hubungkan dengan Menggunakan @capgo/capacitor-social-login untuk kapabilitas native di Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi dua faktor untuk detail implementasi di autentikasi dua faktor.