Google Login di Web

Pendahuluan

Dalam panduan ini, Anda akan belajar cara mengatur Login Google dengan Capgo Login Sosial untuk aplikasi web. Saya asumsikan bahwa Anda telah membaca panduan pengaturan umum sebelumnya. Pengaturan Umum.

Menggunakan login Google di web

Menggunakan login Google di web cukup sederhana. Untuk menggunakan fitur ini, Anda harus melakukan hal-hal berikut:

1. Membuat klien web di Console Google

   Catatan

   Jika Anda telah mengonfigurasi Google Login untuk Android, Anda dapat melewatinya karena Anda telah membuat klien web. Anda dapat melanjutkan langsung ke langkah 2.

   1. Klik pada bar pencarian

      

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

      

   3. Klik pada create credentials

      

   4. Pilih OAuth client ID

      

   5. Pilih Application type sebagai Web application

      

   6. Berikan nama klien dan klik Create

      

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

      

2. Konfigurasi klien Web di Console Google

   1. Silakan buka halaman kreditur dan klik pada klien web Anda

      

   2. Sekarang, silakan tambahkan Authorized JavaScript originsHal ini harus mencakup semua alamat yang mungkin Anda gunakan untuk aplikasi Anda. Dalam kasus saya, saya hanya HANYA menggunakan localhost, tetapi karena saya menggunakan porta khusus saya harus menambahkan baik 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 harus terlihat seperti ini

         

   3. Sekarang, silakan tambahkan beberapa Authorized redirect URIs. Ini akan tergantung pada halaman mana Anda ingin menggunakan plugin CapacitorSocialLogin. http://localhost:5173/auth

      1. Saya akan menggunakan ini pada ADD URI

         

      2. Bagian URIs pengalihan yang diizinkan dengan tombol Tambah URI ADD URL Masukkan URL Anda dan klik

         

   4. Dialog Tambah URI dengan URL pengalihan yang dimasukkan save

      

3. Simpan tombol di bagian bawah konfigurasi klien web ini dan Anda sekarang siap untuk memanggil login seperti ini:

   1. Pertama, import SocialLogin

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

   2. Lalu, panggil initialize. Ini harus dipanggil HANYA 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',
         }
       })
      })

   Pengaturan Pengalihan Web

   Ketika menggunakan login Google di web, Anda WAJIB menggilakan fungsi dari plugin ketika redirect terjadi untuk menginisialisasi plugin sehingga plugin dapat menghandle redirect dan menutup jendela popup. Anda dapat menggilakan salah satu isLoggedIn() ATAU initialize() - kedua-duanya akan mengaktifkan penghandlean 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 ketika menggunakan google.mode: 'online'. Jika Anda membutuhkan token Google yang segar di Web, panggil SocialLogin.login({ provider: 'google', ... }) lagi.

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

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

Teruskan dari Google Login di Web

Jika Anda menggunakan Google Login di Web untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan asli 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.