Login Google di Web

Pendahuluan

Dalam panduan ini, Anda akan belajar cara mengatur Login Google dengan Capgo Social Login untuk aplikasi web. Saya asumsikan bahwa Anda telah membaca panduan pengaturan umum. 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 ke langkah 2.

      

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

      

   3. Klik pada tombol create credentials

      

   4. Pilih OAuth client ID

      

   5. Pilih jenis Application type Pilih jenis aplikasi dengan opsi Web yang ditonjolkan Web application

      

   6. Form pembuatan klien Web dengan bidang nama yang ditonjolkan Create

      

   7. di aplikasi Anda webClientId Detail ID klien menampilkan ID klien Web untuk disalin

      

2. Konfigurasi klien web di Google Console

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

      

   2. Sekarang, silakan tambahkan Authorized JavaScript origins. Ini harus mencakup semua alamat yang Anda gunakan untuk aplikasi Anda. Dalam kasus saya, saya hanya akan SAJA gunakan localhost, tetapi karena saya menggunakan porta kustom 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. Saat Anda selesai, layar Anda seharusnya terlihat seperti ini

         

   3. Sekarang, silakan tambahkan beberapa Authorized redirect URIs Hal ini tergantung pada halaman mana yang Anda gunakan untuk mengaktifkan 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 seperti ini:

   1. Pertama, import SocialLogin

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

   2. Lalu, panggil initialize. Ini harus dipanggil HANYA SEKALI SAJA.

      // 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',
         }
       })
      })

   Pengelolaan Redirect Web

   Ketika menggunakan login Google di web, Anda MUST Menggunakan fungsi apa pun dari plugin ketika redirect terjadi untuk menginisialisasi plugin sehingga dapat menangani redirect dan menutup jendela popup. Anda dapat memanggil salah satu dari dua opsi berikut: isLoggedIn() ATAU initialize() - kedua-duanya akan menimbulkan 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

   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-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 Dua Faktor Autentikasi untuk detail implementasi di Dua Faktor Autentikasi.