Pengaturan Login Google

Intro

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

• Suatu akun Google

Pengaturan umum

Catatan

Langkah ini diperlukan tanpa peduli platform mana yang Anda pilih.

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

1. Silakan pergi ke console.cloud.google.com
2. Pilih Console Google
3. Jika Anda belum memiliki proyek, silakan Buat Proyek Baru.
   1. Pilih New project
   2. Berikan nama proyek dan pilih Create
   3. Pastikan Anda berada di proyek yang benar
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

      Perhatian

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

      Klik pada create

      
5. Isi informasi tentang aplikasi Anda

   1. Mulai dengan bagian App Information

      
      • Silakan ketikkan alamat email dukungan pengguna Anda 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.

         

         ini tidak wajib dan saya akan melewatinya

         Anda

      3. HARUS mengonfigurasi Bagian pengaturan domain aplikasi dengan bidang domain yang diotorisasi App domain

         

         Catatan

         Saya tidak akan melakukan itu karena ini hanya sebuah demonstrasi sederhana yang akan TIDAK diterbitkan, 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. Hal ini berada di luar ruang lingkup tutorial ini. Anda dapat mengetahui lebih lanjut di sini. Hal ini tidak diperlukan untuk pengujian lokal, tetapi diperlukan untuk produksi.

Perbedaan antara akses online dan akses offline

Ada beberapa cara untuk menggunakan Login Google dengan Capacitor. Berikut adalah tabel yang menyajikan perbedaan antara dua hal tersebut:

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

Catatan

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

Peringatan

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

Peringatan

SocialLogin.refresh({ provider: 'google' }) tidak bekerja dengan . Dalam mode offline, plugin hanya memberikan Anda google.mode: 'offline', dan backend Anda harus mengganti __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 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

   __CAPGO_KEEP_0__

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

If you do want to call Google API’s, I would strongly recommend looking at Dari sana Anda bisa dengan mudah melihat apa saja API yang bisa dipanggil.Menggunakan akses offline dengan backend Anda sendiri

Using offline access with your own backend

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

As untuk klien code, tampak 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());
  }
}

Pesan perlu diingat: tidak ada SocialLogin.refresh() panggilan di aplikasi. Ini sengaja. Dalam mode offline Google, refresh terjadi setelah backend Anda mengalihkan dan menyimpan token refresh secara aman. serverAuthCode Teruskan dari Pengaturan Login Google

Judul bagian “Teruskan dari Pengaturan Login Google”

Pengaturan Login Google untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login untuk kemampuan native di Menggunakan @capgo/capacitor-social-login, for the native capability in Using @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 native untuk detail implementasi di @capgo/capacitor-biometrik native, dan Autentikasi dua faktor untuk detail implementasi di Autentikasi dua faktor.