Setup Google Login

Pendahuluan

Dalam panduan ini, Anda akan mempelajari cara setup Google Login dengan Capgo Social Login. Anda memerlukan hal berikut untuk setup Google Login:

• A Google account

Setup Umum

Catatan

Langkah ini wajib dilakukan apa pun platform yang Anda gunakan.

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

1. Silakan buka console.cloud.google.com
2. Klik pada pemilih proyek
3. Jika Anda belum memiliki proyek, silakan buat proyek baru.
   1. Klik pada New project
   2. Beri nama proyek Anda lalu klik Create
   3. Pastikan Anda berada di proyek yang benar
4. Mulai konfigurasi OAuth consent screen

   1. Klik kolom pencarian

      

   2. Cari OAuth consent screen dan klik pada item tersebut

      

   3. Konfigurasi consent screen

      Catatan

      Saya berasumsi Anda sedang mengembangkan aplikasi publik, jadi saya akan menggunakan external tipe user. Silakan pilih tipe user yang paling sesuai DAN klik create

      Klik pada create

      
5. Isi informasi tentang aplikasi Anda

   1. Mari kita mulai dengan App Information

      
      • Please type in your App Name

        Peringatan

        INI AKAN DITAMPILKAN KEPADA PENGGUNA

      • Masukkan user support email

        Catatan

        Anda dapat mempelajari lebih lanjut tentang email dukungan di sini

      2. Anda BISA tambahkan logo aplikasi.

         

         Catatan

         Ini tidak wajib dan saya akan melewati langkah ini

      3. Anda HARUS mengonfigurasi bagian App domain

         

         Catatan

         Saya tidak akan melakukan itu karena ini hanyalah demonstrasi sederhana yang akan TIDAK akan dipublikasikan, tapi saya sangat menyarankan untuk mengisi bagian ini.

      4. Anda WAJIB masukkan email developer

         

      5. Klik pada save and continue

         
6. Konfigurasi scope

   1. Klik pada add or remove scopes

      

   2. Pilih scope berikut dan klik update

      

   3. Klik save and continue

      
7. Tambah user testing
   1. Klik pada add users
   2. Masukkan email Google, tekan enter, lalu klik add
   3. Klik save and continue
8. Klik back to dashboard
9. Submit aplikasi Anda untuk verifikasi

   Catatan

   Saya sangat menyarankan Anda mengajukan aplikasi untuk verifikasi. Ini di luar cakupan tutorial ini. Anda dapat mempelajari lebih lanjut di sini. Ini tidak wajib untuk testing lokal, tapi wajib untuk produksi.

Perbedaan antara akses online dan akses offline

Ada beberapa cara untuk menggunakan Google Login dengan Capacitor. Berikut adalah tabel ringkasan perbedaannya:

	Akses online	Akses offline
Membutuhkan backend	❌	✅
Token akses berumur panjang	❌	✅
Setup mudah	✅	❌

Catatan

Mode offline berarti backend Anda dapat mengakses API Google bahkan saat pengguna tidak aktif menggunakan aplikasi Anda (yaitu, saat pengguna “offline” dari sudut pandang aplikasi Anda). Long-lived access token memungkinkan hal ini karena backend dapat memanggil API Google atas nama pengguna kapan saja.

Peringatan

Mode offline MEMERLUKAN server backend. Saat menggunakan mode offline, frontend hanya menerima informasi minimal (terutama hanya code auth server). Tanpa backend untuk menukarkan code ini dengan token dan informasi pengguna, mode offline tidak memberikan data berguna apa pun ke aplikasi frontend Anda.

Peringatan

SocialLogin.refresh({ provider: 'google' }) memang tidak bekerja dengan google.mode: 'offline'. Dalam mode offline, plugin hanya memberikan serverAuthCode, dan backend Anda harus menukar code tersebut dengan access dan refresh token, lalu melakukan refresh token tersebut di backend.

Jika Anda masih bingung harus memilih yang mana, pertimbangkan skenario berikut:

1. Anda ingin user login, lalu segera memberikan custom JWT kepada mereka. Aplikasi Anda TIDAK AKAN memanggil Google APIs

   Dalam kasus ini, pilih online access.

2. Aplikasi Anda akan memanggil beberapa Google APIs dari client, tetapi tidak pernah dari backend

   Dalam kasus ini, pilih online access

3. Aplikasi Anda akan memanggil beberapa Google APIs dari backend, tetapi hanya saat user sedang aktif menggunakan aplikasi

   Dalam kasus ini, pilih online access

4. Aplikasi Anda akan mengecek kalender user secara berkala, bahkan saat user tidak sedang aktif menggunakan aplikasi

   Dalam kasus ini, pilih offline access

Contoh backend untuk online access

Di bagian tutorial ini, saya akan menunjukkan cara memvalidasi user di backend Anda.

Contoh ini sangat sederhana dan akan menggunakan teknologi berikut:

• Typescript

• Hono

• fetch API dari Javascript

Anda dapat menemukan code untuk contoh ini di sini

Seperti yang Anda lihat:

Konsepnya cukup sederhana. Anda mengirimkan sebuah GET request ke https://www.googleapis.com/oauth2/v3/tokeninfo dan ini akan mengembalikan status validitas token, serta email pengguna jika valid. Ini juga memberikan informasi lain terkait token pengguna tersebut

Dari sana, Anda bisa menerbitkan JWT sendiri atau membuat session cookie. Kemungkinannya tak terbatas untuk implementasi auth akhir Anda.

Jika Anda ingin memanggil API milik Google, saya sangat menyarankan untuk melihat Google OAuth 2.0 Playground. Dari sana Anda bisa melihat dengan mudah API mana saja yang bisa dipanggil.

Menggunakan offline access dengan backend Anda sendiri

Untuk menggunakan offline access, Anda akan membutuhkan hal berikut:

• HTTP server

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

• Hono

• Validator Hono Zod

• Zod

• Hono JWT

• LowDb (database sederhana)

code untuk contoh ini dapat ditemukan di sini

Untuk code sisi client, tampilannya 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 tidak ada di sini: tidak ada SocialLogin.refresh() call di dalam app. Ini disengaja. Dalam mode offline Google, refresh terjadi setelah backend Anda melakukan exchange serverAuthCode dan menyimpan refresh token dengan aman.

Lanjutkan dari Setup Google Login

Jika Anda menggunakan Setup Google Login 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.