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.

1. Untuk menggunakan fitur ini, Anda harus melakukan langkah-langkah berikut:

   Catatan

   Catatan

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

      

   2. Bar pencarian Google Console credentials Cari APIs and Services dan klik pada

      

   3. Hasil pencarian menampilkan opsi kredential dengan API dan Services yang ditebalkan create credentials

      

   4. Pilih OAuth client ID

      

   5. Pilihlah Application type sebagai Web application

      

   6. Berikan nama klien dan klik Create

      

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

      

2. Konfigurasi klien Web di Google Console

   1. Silakan buka halaman dan klik pada klien web Anda Daftar kunci akun menampilkan klien web untuk diklik

      

   2. Semua alamat yang mungkin Anda gunakan untuk aplikasi Anda. Dalam kasus saya, saya hanya Authorized JavaScript originsmenggunakan localhost, tetapi karena saya menggunakan porta khusus saya harus menambahkan kedua Silakan klik pada Bagian asal JavaScript yang diotorisasi dengan tombol Tambah URI http://localhost Silakan ketik URL Anda http://localhost:5173

      1. untuk mengizinkan akses ke aplikasi Anda add URI

         

      2. untuk mengizinkan akses ke aplikasi Anda

         

      3. Silakan ulangi sampai Anda menambahkan semua URL

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

         

   3. Sekarang, silakan menambahkan beberapa Authorized redirect URIsHal ini akan bergantung pada halaman mana yang Anda gunakan untuk menggunakan plugin CapacitorSocialLogin. Pada kasus saya, saya akan menggunakan plugin ini pada 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 harus sudah siap untuk memanggil login dari JavaScript 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 memanggil fungsi apa pun dari plugin ketika pengalihan terjadi untuk menginisialisasi plugin sehingga plugin dapat menghandle pengalihan dan menutup jendela popup. Anda dapat memanggil baik itu isLoggedIn() ATAU initialize() - baiknya akan mengaktifkan pengelolaan 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

   Pada Web, SocialLogin.refresh({ provider: 'google' }) belum diimplementasikan, bahkan ketika menggunakan google.mode: 'online'. Jika Anda membutuhkan token Google yang segar di Web, panggil SocialLogin.login({ provider: 'google', ... }) lagi.

   3. Buatlah 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-login-social untuk kemampuan asli di Menggunakan @capgo/capacitor-login-social, @capgo/capacitor-login-social untuk detail implementasi di @capgo/capacitor-login-social, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-biometrik-asli untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.