Pengaturan Login Google

Selamat Datang

Pada panduan ini, Anda akan belajar cara mengatur Login Google dengan Capgo Login Sosial. Anda memerlukan hal-hal berikut untuk mengatur Login Google:

• Salah satu akun Google

Pengaturan Umum

Pesan

Langkah ini diperlukan terlepas dari platform mana yang Anda gunakan.

Pada bagian ini, Anda akan mengatur layar login yang ditampilkan oleh Google.

1. Tolong kunjungi https://console.cloud.google.com
2. Pilih proyek selector
3. Jika Anda belum memiliki proyek, silakan Buat proyek baru.
   1. Pilih New project
   2. Berikan nama proyek dan pilih Create
   3. Pastikan Anda berada di proyek yang benar
4. Mulai mengonfigurasi OAuth consent screen

   1. Pilih bar pencarian

      

   2. Cari OAuth consent screen dan klik pada

      

   3. Konfigurasi layar persetujuan

      Perhatian

      Akan saya asumsikan bahwa Anda sedang mengembangkan aplikasi yang terbuka untuk umum, jadi saya akan menggunakan external Jenis pengguna. Pilih jenis pengguna yang paling sesuai dengan Anda DAN klik create

      Klik pada create

      
5. Isi informasi tentang aplikasi Anda

   1. Mulai dengan bagian App Information

      
      • Silakan masukkan App Name

        Pertimbangan

        INI AKAN DITAMPILKAN KE PADA PENGUNJUNG

      • Masukkan user support email

        Catatan

        You can learn more about the support email di sini

      2. You BISA Tambahkan logo aplikasi.

         

         Note

         Hal ini tidak wajib dan saya akan melewatinya

      3. Anda SEBAIKNYA konfigurasi App domain

         

         Note

         Aku tidak akan melakukan itu karena ini hanya sebuah demonstrasi yang sederhana yang akan TIDAK terpublikasikan, tetapi aku sangat merekomendasikan untuk mengisi bagian ini.

      4. Kamu context Berikan alamat email pengembang

         

      5. Klik di save and continue

         
6. Konfigurasi ruang lingkup

   1. Klik di add or remove scopes

      

   2. Pilih skop berikut dan klik update

      

   3. Klik save and continue

      
7. Tambahkan pengguna uji
   1. Klik pada add users
   2. Masukkan alamat email Google Anda, tekan enter, dan klik add
   3. Klik save and continue
8. Klik back to dashboard
9. Kirimkan aplikasi Anda untuk verifikasi

   Catatan

   Saya sangat merekomendasikan mengirimkan aplikasi Anda untuk verifikasi. Ini berada di luar ruang lingkup tutorial ini. Anda dapat mempelajari lebih lanjut di sini. Ini tidak diperlukan untuk pengujian lokal, tetapi diperlukan untuk produksi.

Perbedaan antara akses online dan akses offline

Ada beberapa cara untuk menggunakan Login Google dengan Capacitor. Berikut adalah tabel yang menyajikan perbedaan antara dua cara tersebut:

	Akses online	Akses offline
Memerlukan backend	❌	✅
Token akses yang berumur lama	❌	✅
Pengaturan Mudah	✅	❌

Catatan

Mode offline means that your backend can access Google’s APIs even when the user is not actively using your app (i.e., when the user is “offline” from your app’s perspective). Long-lived access tokens enable this functionality by allowing the backend to call Google APIs on behalf of the user at any time.

Peringatan

Mode offline MEMERLUKAN server backend. Ketika menggunakan mode offline, frontend menerima informasi yang sangat sedikit (hanya autentikasi server code). Tanpa backend untuk menukar code ini dengan token dan informasi pengguna, mode offline tidak menyediakan data yang berguna untuk aplikasi frontend Anda.

Peringatan

SocialLogin.refresh({ provider: 'google' }) tidak not Bekerja dengan google.mode: 'offline'Dalam mode offline, plugin hanya memberikan Anda serverAuthCodedan backend Anda harus mengganti code dengan token akses dan refresh, lalu memperbarui token tersebut di backend.

Anda ingin pengguna masuk, segera setelah Anda akan mengeluarkan JWT khusus untuknya. Aplikasi Anda TIDAK akan memanggil API Google

1. Anda ingin membuat pengguna masuk, segera setelah itu Anda akan mengeluarkan token JWT yang disesuaikan. Aplikasi Anda TIDAK akan mengakses API Google.

   Pilih akses online di sini.

2. Aplikasi Anda akan memanggil beberapa API Google dari klien, tetapi tidak pernah dari backend.

   In this case, choose online access

3. Aplikasi Anda akan memanggil beberapa API Google dari backend, tetapi hanya ketika pengguna sedang menggunakan aplikasi secara aktif.

   Ini kasusnya, pilih akses online

4. Aplikasi Anda akan secara berkala memeriksa kalender pengguna, bahkan ketika dia tidak aktif menggunakan aplikasi

   Ini kasusnya, pilih akses offline

Contoh backend untuk akses online

Dalam bagian ini dari tutorial, saya akan menunjukkan cara memvalidasi pengguna di backend Anda.

Contoh ini akan sangat sederhana dan didasarkan pada teknologi berikut:

• TypeScript

• Hono

• Pemanggilan fetch JavaScript API

Pengguna dapat menemukan code untuk contoh ini di sini

As kamu bisa lihat:

Idea sederhana ini adalah mengirimkan permintaan sederhana. GET permintaan ke https://www.googleapis.com/oauth2/v3/tokeninfo and this returns you whether the token is valid or not and if it it is, it gives you the email of the user. It also gives you some other info about the user token

From there, you could issue the user with your own JWT or issue some sort of session cookie. The possibilities are endless, for the final auth implementation.

Jika Anda ingin memanggil Google API’, saya sangat menyarankan untuk melihat Google's Playground OAuth 2.0Dari sana Anda dapat dengan mudah melihat apa saja API yang dapat dipanggil.

Menggunakan akses offline dengan backend sendiri

Untuk menggunakan akses offline, Anda memerlukan hal-hal berikut:

• Sebuah server HTTP

Dalam contoh ini, saya akan menggunakan teknologi berikut untuk menyediakan akses offline di aplikasi saya:

• Hono

• Validator Hono Zod

• Zod

• Hono JWT

• LowDb (database sederhana)

Contoh code untuk contoh ini dapat ditemukan di sini

Untuk code klien, itu terlihat seperti ini:

import { Capacitor } from '@capacitor/core';
import { GoogleLoginOfflineResponse, SocialLogin } from '@capgo/capacitor-social-login';
import { usePopoutStore } from '@/popoutStore'; // <-- specific to my app

const baseURL = "[redacted]";

async function fullLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: '[redacted]',
      iOSClientId: '[redacted]',
      iOSServerClientId: 'The same value as webClientId',
      mode: 'offline' // <-- important
    }
  })
  const response = await SocialLogin.login({
    provider: 'google',
    options: {
      forceRefreshToken: true // <-- important
    }
  })

  if (response.provider === 'google') {
    const result = response.result as GoogleLoginOfflineResponse
    const res = await fetch(`${baseURL}/auth/google_offline`, {
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        serverAuthCode: result.serverAuthCode,
        platform: Capacitor.getPlatform()
      }),
      method: "POST"
    })

    if (res.status !== 200) {
      popoutStore.popout("Full google login failed", "check console");
      return
    }

    const { jwt } = await res.json();
    const userinfo = await fetch(`${baseURL}/auth/get_google_user`, {
      headers: {
        Authorization: `Bearer ${jwt}`
      }
    })
    if (userinfo.status !== 200) {
      popoutStore.popout("Full google (userinfo) login failed", "check console");
      return
    }
    popoutStore.popout("userinfo res", await userinfo.text());
  }
}

Perhatikan apa yang hilang di sini: tidak ada SocialLogin.refresh() refresh di aplikasi. Ini sengaja dilakukan. Dalam mode offline Google, refresh terjadi setelah backend Anda melakukan pertukaran. serverAuthCode Lanjutkan dari Pengaturan Login Google

Teruskan dari Pengaturan Login Google

Pengaturan Login Google Pengaturan Login Google Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-login sosial Menggunakan @capgo/capacitor-login Sosial Untuk kemampuan asli di @capgo/capacitor-social-login. @capgo/capacitor-login sosial 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.