Pengaturan Login Google

Pengenalan

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

• 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. Klik pada pilihan proyek
3. Jika Anda belum memiliki proyek, silakan buat proyek baru.
   1. Klik pada 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 bilah pencarian

      

   2. Cari OAuth consent screen dan klik di atasnya

      

   3. Konfigurasi 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. Marilah kita mulai dengan 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

         Hal ini tidak wajib dan saya akan melewatkan langkah ini

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

         

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

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

      4. __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Sediakan 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 mengirimkan aplikasi Anda untuk verifikasi. Ini berada di luar 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 cara:

	Akses online	Akses offline
Memerlukan backend	❌	✅
Token akses yang berlaku 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

Peringatan

Mode Offline MEMERLUKA server backend. Saat menggunakan mode offline, frontend menerima informasi minimal (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' }) bekerja tidak berfungsi dengan google.mode: 'offline'. 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. Menginginkan pengguna masuk, setelah itu Anda akan mengeluarkan JWT khusus untuknya. Aplikasi Anda TIDAK akan memanggil API Google

   Pada kasus ini, pilih akses online.

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

   Pada kasus ini, pilih akses online

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

   Pada kasus ini, pilih akses online

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

   Pada kasus ini, pilih akses offline

Contoh backend untuk akses online

In bagian ini dari tutorial, saya akan menunjukkan cara memvalidasi pengguna di backend Anda.

Contoh ini akan sangat sederhana dan akan berdasarkan pada teknologi berikut:

• TypeScript

• Hono

• Pemanggilan fetch Javascript Anda API

Anda dapat menemukan kode code untuk contoh ini di sini

Seperti yang Anda lihat:

Ideanya cukup sederhana. Anda mengirimkan permintaan sederhana ke GET dan ini akan mengembalikan apakah token Anda valid atau tidak dan jika ya, maka akan memberikan Anda alamat email pengguna. Bahkan, juga akan memberikan Anda beberapa informasi lain tentang token pengguna https://www.googleapis.com/oauth2/v3/tokeninfo and this returns you whether the token is valid or not and if it it is, it gives you the email of the user. It also gives you some other info about the user token

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

Jika Anda ingin memanggil Google API’, saya sangat merekomendasikan Anda untuk melihat Google’s OAuth 2.0 PlaygroundDi 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:

• 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 mengganti 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-login-sosial untuk kemampuan asli dalam Menggunakan @capgo/capacitor-login-sosial, @capgo/capacitor-login-sosial untuk detail implementasi dalam @capgo/capacitor-login-sosial, @capgo/capacitor-passkey untuk detail implementasi dalam @capgo/capacitor-passkey, @capgo/capacitor-biometrik-asli untuk detail implementasi dalam @capgo/capacitor-biometrik-asli, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.