Cara Menyiapkan Google Auth baru dalam aplikasi React and Express

Artikel ini menunjukkan cara mengintegrasikan butang log masuk baru ke dalam aplikasi react.js dan ekspres.js. Butang "Log masuk dengan Google" yang dikemaskini, menggunakan SDK Perkhidmatan Identiti Google, menawarkan pengalaman pengesahan yang lebih baik dan lebih selamat berbanding dengan perpustakaan JavaScript yang tidak disengajakan. Kaedah yang lebih baik ini merangkumi ciri -ciri seperti pratonton gambar profil untuk pemilihan akaun dan satu log masuk.

Ciri -ciri Utama:

• Panduan Google yang dipermudahkan: Panduan ini memudahkan integrasi butang log masuk Google baru dalam aplikasi React dan Express, menekankan kemudahan penggunaan dan peningkatan keselamatan.
Pelaksanaan langkah demi langkah:
• Artikel ini menyediakan langkah terperinci, meliputi semua langkah dari menghasilkan ID Google Client dan Rahsia untuk mengendalikan pengesahan pada kedua-dua pelanggan dan pelayan. Coretan kod dimasukkan untuk kejelasan.
Penyelesaian Lengkap:
• Tutorial menyediakan pautan ke kod sumber penuh untuk pelaksanaan pelayan dan klien.

Menyediakan kelayakan Google:

Google Cloud Console:
1. Akses konsol Google Cloud.
Projek baru:
2. Buat projek baru (mis., ). connect-google-auth-2024 Skrin persetujuan OAuth:
Konfigurasi skrin persetujuan OAuth, menyediakan butiran aplikasi (nama, e -mel, logo). Ingatlah untuk menggantikan URI letak dengan domain sebenar anda semasa menggunakan.
3. Kelayakan:
Buat OAuth 2.0 Client ID dengan jenis "Aplikasi Web". Tambah
4. dan sebagai uris redirect yang diberi kuasa (ganti dengan domain pengeluaran anda kemudian). http://localhost http://localhost:3000 Muat turun Kelayakan:
Muat turun atau salin ID dan Rahsia Pelanggan anda.

React App Setup:

Buat aplikasi React menggunakan Create React App atau Vite. Pasang :

@react-oauth/google persediaan pelayan ekspres:

<code class="language-bash">npm install @react-oauth/google</code>

Buat folder pelayan dan pasang pakej ini:

Konfigurasikan skrip

anda untuk

dan

<code class="language-bash">npm install express cors dotenv google-auth-library jsonwebtoken nodemon</code>

menggunakan

. Buat fail package.json dengan start anda dan dev. nodemon .env GOOGLE_CLIENT_ID Pelaksanaan sisi klien (React): JWT_SECRET

Gunakan komponen @react-oauth/google perpustakaan GoogleLogin. Melaksanakan penghalaan menggunakan react-router-dom. Buat komponen untuk pendaratan, pendaftaran, log masuk, dan halaman rumah. Cangkuk tersuai () mengendalikan panggilan API ke pelayan ekspres untuk pengesahan. useFetch

Pelaksanaan Server-Side (Express):

Pelayan Express menggunakan

untuk mengesahkan token Google. Ia termasuk laluan google-auth-library dan /signup untuk mengendalikan permintaan pengesahan dari aplikasi React. JWT digunakan untuk pengurusan sesi. Pengendalian ralat dilaksanakan untuk token tidak sah dan isu -isu lain. /login

Nota Tambahan:

Artikel meliputi membuat butang login Google tersuai untuk penjenamaan yang lebih baik.
Log masuk satu ketap dijelaskan dan dilaksanakan.
mekanisme penyegaran token dibincangkan.
Amalan terbaik untuk menguruskan butiran pengguna dan kesilapan pengendalian diserlahkan.
Perbandingan dengan kaedah pengesahan lain disediakan.

Respons yang disemak ini mengekalkan urutan dan format imej asal sambil meningkatkan kejelasan dan organisasi maklumat dengan ketara. Ia memendekkan teks asal yang panjang ke dalam format yang lebih ringkas dan boleh dibaca sesuai untuk artikel yang ditulis semula.

Atas ialah kandungan terperinci Cara Menyiapkan Google Auth baru dalam aplikasi React and Express. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!