Mengintegrasikan Log Masuk Google dengan React: Panduan Mesra Pembangun

Masalah

Bayangkan dunia di mana pengguna perlu mengingati kata laluan untuk setiap tapak web yang mereka lawati.

Oh tunggu, itulah dunia ini!

Mari kita betulkan perkara itu untuk apl anda dengan menyepadukan Log Masuk Google, supaya pengguna boleh log masuk dengan bukti kelayakan Big G mereka tanpa berpeluh.

Penyelesaian

Mengintegrasikan Log Masuk Google ke dalam apl React anda adalah lebih mudah daripada menyahpepijat kesilapan kesilapan dalam useEffect.

Serius, ia hanya mengambil dua langkah untuk mengalu-alukan Big G ke dalam projek anda. Mari selami!

---

Langkah 1: Mendaftarkan Apl Anda dengan Google

Sebelum keajaiban berlaku, anda perlu memberitahu Google tentang apl anda. Begini caranya:

1. Pergi ke Google Cloud Console: https://console.cloud.google.com/.

2. Navigasi ke API & Perkhidmatan: Setelah masuk, klik pada API & Perkhidmatan dari papan pemuka.
   

3. Bar Sisi Bukti kelayakan: Di sebelah kiri, klik pada Butiliti.

1. Buat Bukti Kelayakan: Dalam bar navigasi atas, ketik Buat Bukti Kelayakan dan pilih ID Klien OAuth.

1. Konfigurasikan Klien OAuth:
   • Pilih Aplikasi Web sebagai Jenis Aplikasi.
   • Di bawah Asal usul JavaScript yang dibenarkan, tambahkan:
     • URL pelayan setempat anda (cth., http://localhost:3000).
     • Domain tempat anda merancang untuk menggunakan apl (cth., https://yourdomain.com/signup).

1. Klik Buat: Google kini akan menjana ID dan Rahsia Pelanggan anda.

2. Salin ID dan Rahsia Pelanggan: Simpan ini di tempat yang selamat (tetapi bukan dalam teks biasa, kerana kami lebih baik daripada itu).

Tahniah! Persediaan utama selesai. Kini tiba masanya untuk mengotorkan tangan kita dengan beberapa kod.

---

Langkah 2: Pengekodan Integrasi

Kami akan menggunakan pakej [@react-oauth/google](https://www.npmjs.com/package/@react-oauth/google). Mengapa mencipta semula roda apabila seseorang sudah membuatnya bergolek?

1. Pasang Pakej:

   npm install @react-oauth/google

1. Tulis Kod: Berikut ialah contoh mudah untuk anda bermula:

   // App.jsx
   import { useState } from "react";
   import { GoogleOAuthProvider, GoogleLogin } from "@react-oauth/google";

   function Homepage() {
     const [authData, setAuthData] = useState(null);

     const gContainer = {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
       marginTop: '50px'
     };

     return (
       <googleoauthprovider clientid='{"YOUR_GOOGLE_CLIENT_ID_HERE"}'>
         <div>



<ol>
<li>
<strong>Run Your App</strong>:
Fire up your app with npm start or yarn start, and you’re good to go!</li>
</ol>

<p>Now users can log in, and you’ll have access to their Google access token to authenticate them on your backend (or to marvel at in your console logs).</p>

<h2>
  
  
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173565247884217.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Integrating Google Sign-In with React: A Dev-Friendly Guide">
</h2>

<h2>
  
  
  What Just Happened?
</h2>

<p>You’ve successfully added Google Sign-In to your React app by following these steps. When users log in, you’ll receive their access token. </p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173565247990959.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Integrating Google Sign-In with React: A Dev-Friendly Guide"></p>

<p>You can call an API endpoint using this token to fetch user-related information. For example:<br>
</p>

<pre class="brush:php;toolbar:false">const userInfoEndpoint = `https://oauth2.googleapis.com/tokeninfo?id_token=${accessToken}`;

Permintaan ini akan mengembalikan data profil pengguna.

Adalah disyorkan untuk mengendalikan perkara ini di bahagian belakang untuk mengelakkan penyalahgunaan API anda untuk log masuk palsu.

Untuk ujian pantas, saya akan menggunakan LiveAPI untuk menghantar permintaan ke titik akhir ini dan mengesahkan sama ada saya boleh mendapatkan maklumat pengguna daripada token yang kami peroleh sebelum ini.

Dan itu sahaja! Anda kini mempunyai semua data yang anda perlukan daripada OAuth seperti gambar profil, nama dan e-mel.

---

TL;DR

1. Daftarkan apl anda dengan Google Cloud Console untuk mendapatkan ID Pelanggan.
2. Gunakan @react-oauth/google untuk menyepadukan Log Masuk Google dalam apl React anda.
3. Hubungi titik akhir API Google untuk mengambil maklumat pengguna dengan selamat dari hujung belakang anda.

Izinkan saya mengambil satu minit lagi masa anda.

Saya sedang mengusahakan alat penjanaan dokumen yang sangat mudah yang dipanggil LiveAPI.

LiveAPI mengambil repositori anda sebagai input dan output dokumentasi API yang cantik dan selamat untuk semua API yang anda miliki.

Mata bonus: Ia membolehkan anda melaksanakan API terus daripada dokumentasi dan menjana coretan permintaan dalam mana-mana bahasa.

Selamat pengekodan, dan semoga Big G sentiasa memihak kepada anda dan LiveAPI menjimatkan masa anda!