Pengaturan Login Google

Pendahuluan

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

• Akun Google

Pengaturan Umum

Catatan

Langkah ini diperlukan tanpa peduli platform mana yang Anda gunakan.

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

1. Silakan pergi ke console.cloud.google.com
2. Klik pada selector 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 pada bar pencarian

      

   2. Cari OAuth consent screen dan klik pada itu

      

   3. Konfigurasi layar persetujuan

      Catatan

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

      Klik pada create

      
5. Isi informasi tentang aplikasi Anda

   1. Mulai dengan bagian App Information

      
      • Silakan ketikkan App Name

        Peringatan

        INFORMASI INI AKAN DITAMPILKAN KEPADA PENGGUNA

      • Masukkan user support email

        Catatan

        Anda dapat mengetahui lebih lanjut tentang alamat email dukungan di sini

      2. Anda BISA menambahkan logo aplikasi.

         

         Catatan

         Hal ini tidak wajib dan saya akan melewatkan langkah ini

      3. Anda HARUS mengonfigurasi App domain

         

         Catatan

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

      4. Anda HARUS memberikan 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

   Catatan

   Saya sangat merekomendasikan Anda untuk mengirimkan aplikasi Anda untuk verifikasi. Ini berada di luar 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 Google Login dengan Capacitor. Berikut adalah tabel yang menyajikan perbedaan antara kedua metode:

	Akses online	Akses Offline
Memerlukan Backend	❌	✅
Token Akses yang Berumur Panjang	❌	✅
Pengaturan Mudah	✅	❌

Catatan

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 panjang memungkinkan fitur ini dengan memungkinkan backend untuk memanggil API Google atas nama pengguna kapan saja.

Peringatan

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

Peringatan

SocialLogin.refresh({ provider: 'google' }) 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, lalu 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 itu Anda akan mengeluarkan JWT khusus. 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.

   Dalam kasus ini, pilih akses online.

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

   Pilih akses online

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

   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

• Pemanggilan fetch Javascript API

Anda dapat menemukan code untuk contoh ini As kamu bisa lihat:

VS __CAPGO_KEEP_0__ menampilkan autentikasi Google __CAPGO_KEEP_1__ yang memeriksa token

dan ini akan mengembalikan kamu apakah token tersebut valid atau tidak dan jika ya, maka akan memberikan kamu email pengguna. Selain itu, juga akan memberikan kamu beberapa informasi lain tentang token pengguna GET Google OAuth Playground menampilkan informasi respons token dengan detail pengguna https://www.googleapis.com/oauth2/v3/tokeninfo Dari sana, kamu bisa mengeluarkan pengguna dengan JWT milikmu sendiri atau mengeluarkan cookie sesi. Kemungkinan-kemungkinannya sangat luas, untuk implementasi autentikasi akhir.

Google’s OAuth 2.0 Playground

If you do want to call Google API’s, I would strongly recommend looking at Menggunakan akses offline dengan backend milikmu sendiriAs you can see:

VS __CAPGO_KEEP_0__ showing Google authentication __CAPGO_KEEP_1__ that verifies tokens

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)

The code for this example can be found di sini

Untuk klien code, 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 bertukar 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-login Sosial Untuk detail implementasi di @capgo/capacitor-login Sosial, @capgo/capacitor-passkey Untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-biometrik Nativ Untuk detail implementasi di @capgo/capacitor-biometrik Nativ, dan Autentikasi Dua Faktor Untuk detail implementasi di Autentikasi Dua Faktor.