Pengaturan Login Google

Pendahuluan

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

• Akun Google

Pengaturan umum

Catatan

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. Pilih selector proyek
3. Jika Anda belum memiliki proyek, silakan buat proyek baru.
   1. Pilih New project
   2. Berikan nama proyek Anda 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. Mengonfigurasi layar persetujuan

      Catatan

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

      Klik pada create

      
5. Isi informasi tentang aplikasi Anda

   1. Mari kita mulai dengan bagian App Information

      
      • Silakan ketikkan App Name

        Peringatan

        Ini akan ditampilkan kepada pengguna

      • Masukkan user support email

        Perlu diingat

        Anda dapat mengetahui lebih lanjut tentang alamat email dukungan di sini

      2. Anda DAPAT menambahkan logo aplikasi.

         

         Perlu diingat

         Ini tidak wajib dan saya akan melewatkan langkah ini

      3. Anda HARUS mengonfigurasi bagian pengaturan domain aplikasi dengan bidang domain yang diizinkan App domain

         

         Saya tidak akan melakukannya karena ini hanya demonstrasi sederhana yang tidak akan

         DIPUBLIKASIKAN, tapi saya sangat merekomendasikan mengisi bagian ini. Anda HARUS

      4. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ Berikan alamat surel 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 Dalam bahasa IndonesiaTidak 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:

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

Catatan

Mode Offline Artinya backend Anda dapat mengakses API Google bahkan ketika pengguna tidak aktif menggunakan aplikasi Anda (yaitu, ketika pengguna dalam

Peringatan

Peringatan When using offline mode, the frontend receives minimal information (primarily just a server auth code). Without a backend to exchange this code for tokens and user information, offline mode provides no useful data to your frontend application.

Peringatan

SocialLogin.refresh({ provider: 'google' }) Peringatan bekerja tidak google.mode: 'offline'berfungsi dengan",". Dalam mode offline, plugin hanya memberikan Anda serverAuthCodedan backend Anda harus mengganti code dengan token akses dan refresh, lalu refresh token tersebut di backend.

Jika Anda masih tidak tahu mana yang harus dipilih, silakan pertimbangkan skenario-skenario berikut:

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

   Pilih akses online.

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

   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 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

• Javascript’s fetch API

Anda dapat menemukan code untuk contoh ini di sini

Seperti yang Anda lihat:

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

Dari sana, Anda dapat mengeluarkan token JWT sendiri atau mengeluarkan cookie sesi. Kemungkinan-kemungkinan sangatlah banyak, untuk implementasi autentikasi akhir.

Jika Anda ingin memanggil Google API’, saya sangat menyarankan Anda untuk melihat Google’s OAuth 2.0 PlaygroundDari sana Anda dapat dengan mudah melihat apa saja API yang dapat dipanggil.

Menggunakan akses offline dengan backend sendiri

Untuk menggunakan akses offline, Anda memerlukan:

• 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, ini terlihat 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 serverAuthCode mengganti 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.