Panduan Langkah demi Langkah untuk Google OAuthuthentication dengan JavaScript dan Bun

Panduan ini menunjukkan pelaksanaan JavaScript dan Express Server Express Pengesahan Pengguna Google OAuth2. Walaupun perpustakaan memudahkan proses, pendekatan tangan ini menjelaskan konsep teras. Kami akan menggunakan bun, runtime JavaScript yang cepat.

---

persediaan Google OAuth2

Sebelum pengekodan, konfigurasikan projek Google Cloud anda:

Langkah 1: Buat projek Google Cloud

1. Akses konsol Google Cloud.
2. Buat projek baru (atau gunakan yang sedia ada).

Langkah 2: Konfigurasikan skrin persetujuan oAuth

1. Navigasi ke API & Services & GT; Skrin persetujuan OAuth .
2. Sediakan nama aplikasi, e -mel sokongan, dan butiran lain yang diperlukan.
3. (Pilihan) Sesuaikan penjenamaan untuk skrin persetujuan yang lebih bermaklumat.

Langkah 3: Tentukan Scopes

1. di bawah Scopes , tambah:
   • email: akses e -mel pengguna.
   • openid: OpenID Connect untuk pengesahan identiti.
   • profile: Akses data profil asas (nama, gambar).

Langkah 4: Menjana ID Pelanggan OAuth

(Benarkan beberapa minit untuk diproses.)

1. pergi ke kelayakan & gt; Buat kelayakan & gt; OAuth Client ID .
2. Pilih Aplikasi Web sebagai jenis aplikasi.
3. set asal -usul JavaScript yang diberi kuasa to http://localhost:3000.
4. Tentukan uri redirect : http://localhost:3000. Ingatlah untuk mengemas kini URI ini untuk penggunaan pengeluaran. Google mengalihkan pengguna ke URI yang mengalihkan selepas pengesahan, termasuk kod kebenaran dan keadaan. Untuk kesederhanaan, kami menggunakan halaman yang sama.

Langkah 5: Tambah Pengguna Ujian

Untuk ujian, tambahkan alamat e -mel pengguna ujian anda. Terbitkan aplikasi anda selepas ujian menyeluruh.

---

Pelaksanaan kod Google OAuth2

Struktur Projek

<code>project/
├── public/
│   └── index.html
├── src/
│   └── index.js
├── .env
└── bun.lock</code>

kami menggunakan versi bun 1.2.

index.html

HTML ini menyediakan antara muka mudah untuk Google Log masuk dan OAuth Callback Handling. (Kod yang ditinggalkan untuk keringkasan, tetapi termasuk dalam prompt asal)

(logik sisi pelayan) index.js

(kod yang ditinggalkan untuk keringkasan, tetapi termasuk dalam prompt asal)

menjalankan projek

Pasang BUN (arahan yang tersedia di laman web BUN).
1. 3
Jalankan pelayan:
2. .env GOOGLE_CLIENT_ID menguji aliran: akses GOOGLE_CLIENT_SECRET, log masuk dengan Google, dan periksa konsol untuk token. GOOGLE_REDIRECT_URI
3. bun run index.js
Kesimpulan
4. http://localhost:3000
Pelaksanaan manual ini memberikan pemahaman yang kuat tentang Google OAuth2. Walaupun perpustakaan seperti Pasport atau NextAuth menawarkan kemudahan, pendekatan ini menerangi mekanisme pengesahan yang mendasari.

Atas ialah kandungan terperinci Panduan Langkah demi Langkah untuk Google OAuthuthentication dengan JavaScript dan Bun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!