Pengaturan Login Google

Intro

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

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

1. Silakan pergi ke console.cloud.google.com
2. Pilih Project Selector Google Console
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, sehingga saya akan menggunakan jenis pengguna. external Pilih jenis pengguna yang sesuai dengan Anda dan klik create

      Klik pada create

      
5. Isi informasi tentang aplikasi Anda

   1. Mulai dengan bagian App Information

      
      • Silakan mengetikkan alamat email App Name

        Pertimbangan

        INI AKAN DITAMPILKAN KEPADA PENGGUNA

      • Masukkan user support email

        Perhatian

        Anda dapat mengetahui lebih lanjut tentang alamat email dukungan disini

      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 Publikasikan, tetapi saya sangat merekomendasikan untuk mengisi bagian ini.

      4. Anda Harus Berikan alamat surel pengembang

         

      5. Klik di save and continue

         
6. Konfigurasi ruang lingkup

   1. Klik di 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 ruang 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 akses offline

Ada beberapa cara untuk menggunakan Google Login dengan Capacitor. Berikut adalah tabel yang menyajikan perbedaan antara kedua 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 sedikit (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 pernah 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

As Anda dapat melihat:

Ideanya 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 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 dapat dengan mudah melihat apa saja API yang dapat dipanggil.Menggunakan akses offline dengan backend Anda sendiri

__CAPGO_KEEP_0__ dan __CAPGO_KEEP_1__

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 __CAPGO_KEEP_0__

As 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());
  }
}

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

Bab yang berjudul “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.