Pengaturan Login Google

Pendahuluan

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

• Akun Google

Pengaturan Umum

targetLanguage

Langkah ini diperlukan terlepas dari platform mana pun yang Anda pilih.

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

1. Silakan pergi ke console.cloud.google.com
2. Klik pada pilihan proyek
3. Jika Anda belum memiliki proyek, silakan buat proyek baru.
   1. Klik pada New project
   2. Berikan nama proyek dan klik Create
   3. Pastikan Anda berada di proyek yang tepat
4. Mulai untuk mengonfigurasi OAuth consent screen

   1. Klik di bar pencarian

      

   2. Cari OAuth consent screen dan klik di atasnya

      

   3. Konfigurasi layar persetujuan

      Perhatian

      Aku akan asumsikan Anda sedang mengembangkan aplikasi yang terbuka untuk umum, jadi aku akan menggunakan external Tipe pengguna. Silakan pilih tipe pengguna yang paling sesuai untuk Anda DAN klik create

      Klik pada create

      
5. Isi informasi tentang aplikasi Anda

   1. Marilah kita mulai dengan bagian App Information

      
      • Silakan masukkan App Name

        Peringatan

        INI AKAN DITAMPILKAN KEPADA PENGGUNA

      • Masukkan user support email

        Catatan

        Anda dapat mengetahui lebih lanjut tentang alamat email dukungan di sini

      2. Anda DAPAT menambahkan logo aplikasi.

         

         Catatan

         Hal ini tidak wajib dan saya akan melewatkan langkah ini

      3. Anda SEHARUSNYA konfigurasi bagian domain aplikasi dengan bidang domain yang diotorisasi App domain

         

         Saya tidak akan melakukannya karena ini hanya demonstrasi sederhana yang akan

         __CAPGO_KEEP_0__ diterbitkan, tetapi saya sangat merekomendasikan mengisi bagian ini. Anda

      4. __CAPGO_KEEP_0__ harus menyediakan alamat email pengembang

         

      5. Klik pada save and continue

         
6. Konfigurasi ruang lingkup

   1. Klik pada add or remove scopes

      

   2. Pilih ruang lingkup berikut dan klik update

      

   3. Klik save and continue

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

   Perlu diingat

   Saya sangat merekomendasikan Anda untuk mengirimkan aplikasi Anda untuk verifikasi. Ini berada di luar lingkup tutorial ini. Anda dapat belajar 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 Google Login dengan Capacitor. Berikut adalah tabel yang menyajikan perbedaan antara dua cara tersebut:

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

Catatan

Modus offline berarti backend Anda dapat mengakses API Google bahkan ketika pengguna tidak aktif menggunakan aplikasi Anda (yaitu, ketika pengguna “offline” dari sudut pandang aplikasi Anda). Token akses yang berlaku lama memungkinkan fungsi ini dengan memungkinkan backend untuk memanggil API Google atas nama pengguna kapan saja.

Peringatan

Modus offline MEMBUTUHKAN server backend. Ketika menggunakan modus offline, frontend menerima informasi minimal (utamanya hanya autentikasi server code). Tanpa backend untuk menukar code dengan token dan informasi pengguna, modus offline tidak menyediakan data berguna untuk aplikasi frontend Anda.

Peringatan

SocialLogin.refresh({ provider: 'google' }) tidak bekerja dengan . Modus offline hanya memberikan Anda google.mode: 'offline', dan backend Anda harus menukar __CAPGO_KEEP_0__ dengan token akses dan refresh, kemudian refresh token tersebut di backend. serverAuthCode, and your backend must exchange that code for access and refresh tokens, then refresh those tokens on the backend.

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

1. does

   Dalam kasus ini, pilih akses online.

2. Aplikasi Anda akan memanggil beberapa API Google dari klien, tetapi tidak 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 secara berkala memeriksa kalender pengguna, bahkan ketika dia tidak aktif menggunakan aplikasi.

   Dalam kasus ini, 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 akan didasarkan pada teknologi berikut:

• Typescript

• Hono

• Pemanggilan fetch Javascript API

Anda dapat menemukan contoh code ini di sini

Seperti yang Anda lihat:

Gagasan ini cukup sederhana. Anda mengirimkan permintaan sederhana ke GET dan ini akan mengembalikan Anda apakah token tersebut valid atau tidak dan jika ya, maka akan memberikan Anda alamat email pengguna. Selain itu, juga akan memberikan Anda beberapa informasi lain tentang token pengguna https://www.googleapis.com/oauth2/v3/tokeninfo Google OAuth Playground menampilkan informasi respons token dengan detail pengguna

Jika Anda ingin memanggil Google __CAPGO_KEEP_0__’, saya sangat menyarankan Anda untuk melihat

API Lahan Google OAuth 2.0. Dari 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 ini dapat ditemukan di sini: code Di sini

Untuk klien code, ini adalah tampilannya:

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 panggilan di aplikasi. Itu sengaja. Di mode offline Google, refresh terjadi setelah backend Anda mengirim dan menyimpan token refresh secara aman. SocialLogin.refresh() Edit halaman serverAuthCode Sebelumnya