Pengaturan Google Login

Pendahuluan

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

• Akun Google

Pengaturan umum

Note

Langkah ini diperlukan terlepas dari platform mana yang Anda putuskan untuk gunakan.

Dalam 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 dan klik Create
   3. Pastikan bahwa Anda berada di proyek yang benar
4. Mulai mengonfigurasi OAuth consent screen

   1. Klik pada bilah pencarian

      

   2. Cari OAuth consent screen dan klik padanya

      

   3. Konfigurasikan layar persetujuan

      Note

      Saya akan menganggap bahwa Anda mengembangkan aplikasi yang terbuka untuk publik, jadi saya akan menggunakan jenis pengguna external. Silakan pilih jenis pengguna yang paling sesuai untuk Anda DAN klik create

      Klik pada create

      
5. Isi informasi tentang aplikasi Anda

   1. Mari kita mulai dengan App Information

      
      • Silakan ketik App Name Anda

        Caution

        INI AKAN DITAMPILKAN KEPADA PENGGUNA

      • Masukkan user support email

        Note

        Anda dapat mempelajari lebih lanjut tentang email dukungan di sini

      2. Anda DAPAT menambahkan logo aplikasi.

         

         Note

         Ini tidak wajib dan saya akan melewati langkah ini

      3. Anda SEBAIKNYA mengonfigurasi App domain

         

         Note

         Saya tidak akan melakukan itu karena ini hanya demonstrasi sederhana yang TIDAK akan dipublikasikan, tetapi saya sangat merekomendasikan mengisi bagian ini.

      4. Anda HARUS menyediakan email pengembang

         

      5. Klik pada save and continue

         
6. Konfigurasikan scope

   1. Klik pada add or remove scopes

      

   2. Pilih scope berikut dan klik update

      

   3. Klik save and continue

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

   Note

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

Perbedaan antara akses online dan offline

Ada beberapa cara untuk menggunakan Google Login dengan Capacitor. Berikut adalah tabel yang merangkum perbedaan antara keduanya:

	Akses online	Akses offline
Memerlukan backend	❌	✅
Token akses jangka lama	❌	✅
Pengaturan mudah	✅	❌

Note

Mode offline berarti bahwa backend Anda dapat mengakses API Google bahkan ketika pengguna tidak aktif menggunakan aplikasi Anda (yaitu, ketika pengguna “offline” dari perspektif aplikasi Anda). Token akses jangka lama memungkinkan fungsionalitas ini dengan mengizinkan backend untuk memanggil API Google atas nama pengguna kapan saja.

Caution

Mode offline MEMERLUKAN server backend. Saat menggunakan mode offline, frontend menerima informasi minimal (terutama hanya kode autentikasi server). Tanpa backend untuk menukar kode ini dengan token dan informasi pengguna, mode offline tidak memberikan data yang berguna untuk aplikasi frontend Anda.

Jika Anda masih tidak tahu mana yang harus Anda pilih, pertimbangkan skenario berikut:

1. Anda ingin pengguna login, segera setelah itu Anda akan mengeluarkan JWT kustom kepadanya. Aplikasi Anda TIDAK akan memanggil API Google

   Dalam kasus ini, pilih akses online.

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

   Dalam kasus ini, pilih akses online

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

   Dalam kasus ini, pilih akses online

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

   Dalam kasus ini, pilih akses offline

Contoh backend untuk akses online

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

Contoh ini akan sangat sederhana dan akan didasarkan pada teknologi berikut:

• Typescript

• Hono

• Javascript’s fetch API

Anda dapat menemukan kode untuk contoh ini di sini

Seperti yang Anda lihat:

Idenya cukup sederhana. Anda mengirim permintaan GET sederhana ke https://www.googleapis.com/oauth2/v3/tokeninfo dan ini mengembalikan apakah token valid atau tidak dan jika valid, memberikan Anda email pengguna. Ini juga memberikan Anda beberapa informasi lain tentang token pengguna

Dari sana, Anda dapat mengeluarkan JWT Anda sendiri kepada pengguna atau mengeluarkan semacam cookie sesi. Kemungkinannya tidak terbatas, untuk implementasi autentikasi akhir.

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

Menggunakan akses offline dengan backend Anda sendiri

Untuk menggunakan akses online, Anda akan memerlukan hal berikut:

• Server HTTP

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

• Hono

• Hono Zod validator

• Zod

• Hono JWT

• LowDb (database sederhana)

Kode untuk contoh ini dapat ditemukan di sini

Adapun kode klien, 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());
  }
}