Pengaturan Login Google

Copy untuk AI

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

• Suatu akun Google

Pengaturan umum

Catatan

Langkah ini diperlukan tanpa peduli platform mana yang Anda pilih.

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

1. Silakan pergi ke 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. Berikan nama proyek dan klik Create
   3. Pastikan Anda berada di proyek yang benar
4. Mulai untuk mengonfigurasi OAuth consent screen

   1. Klik pada bar pencarian

      

   2. Cari untuk OAuth consent screen dan klik pada itu

      

   3. Konfigurasi layar persetujuan

      Perlu diingat

      Saya akan asumsikan bahwa Anda sedang mengembangkan aplikasi yang terbuka untuk umum, jadi saya akan menggunakan external jenis pengguna. Silakan pilih jenis pengguna yang sesuai dengan Anda dan klik create

      Klik pada create

      
5. Isi informasi tentang aplikasi Anda

   1. Mari kita mulai dengan App Information

      
      • Silakan ketikkan App Name

        Peringatan

        INFORMASI INI AKAN DITAMPILKAN KE PENGUNA

      • Masukkan user support email

        Catatan

        Anda dapat mengetahui lebih lanjut tentang alamat email dukungan di sini

      2. Anda DAPAT tambahkan logo aplikasi.

         

         Catatan

         Hal ini tidak wajib dan saya akan melewatkan langkah ini

      3. Anda HARUS mengonfigurasi App domain

         

         Catatan

         Saya tidak akan melakukannya karena ini hanya demonstrasi sederhana yang akan saya lakukan TIDAK Tetapkan untuk dipublikasikan, tetapi saya sangat merekomendasikan mengisi bagian ini.

      4. Anda HARUS MELAKUKAN 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, 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 Anda untuk mengirimkan aplikasi Anda untuk verifikasi. Ini diluar lingkup tutorial ini. Anda dapat mengetahui 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 menyajikan perbedaan antara dua cara tersebut:

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

Peringatan

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

Peringatan

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

Peringatan

SocialLogin.refresh({ provider: 'google' }) tidak berfungsi dengan tidak berfungsi dengan . Dalam mode offline, plugin hanya memberikan Anda google.mode: 'offline'dan backend Anda harus menukar __CAPGO_KEEP_0__ untuk akses dan token 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 untuknya. Aplikasi Anda TIDAK akan memanggil API Google

1. Dalam kasus ini, pilih akses online.

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

2. Dalam kasus ini, pilih akses online

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

3. Dalam kasus ini, pilih akses online']}

   In this case, choose online access

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

   Pilih akses offline dalam kasus ini

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

• Pemanggilan fetch Javascript dengan API

Anda dapat menemukan code untuk contoh ini di sini

Seperti yang Anda lihat:

Idea ini cukup sederhana. Anda mengirimkan permintaan sederhana GET ke https://www.googleapis.com/oauth2/v3/tokeninfo dan ini kembali ke Anda apakah token tersebut valid atau tidak dan jika ya, maka memberikan Anda alamat email pengguna. Ini juga memberikan Anda beberapa informasi lain tentang token pengguna

Dari sana, Anda bisa mengeluarkan pengguna dengan JWT Anda sendiri atau mengeluarkan cookie sesi. Kemungkinan-kemungkinan sangat luas untuk implementasi autentikasi akhir.

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

Menggunakan akses offline dengan backend Anda 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, tampaknya 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() panggilan di aplikasi. Itu sengaja. Di mode offline Google, refresh terjadi setelah backend Anda mengirimkan serverAuthCode dan menyimpan token refresh secara aman.

Lanjutkan dari Pengaturan Login Google

Jika Anda menggunakan Pengaturan Login Google untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan 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.