Panduan untuk Menambahkan Google Login ke Aplikasi React Anda

Dropbox adalah perusahaan berbagi file dan sinkronisasi file yang berbasis di San Francisco. Klien lintas platformnya memungkinkan pengguna untuk mengunggah file ke server dropbox. Dropbox sekarang menggunakan React.JS untuk meningkatkan sinkronisasi file sehingga pengguna dapat menyimpan dan membagikan jumlah file dan folder yang tidak terbatas.

Expo-Go React-asli aplikasi yang menggunakan otentikasi google di firebase

Saya sedang membangun aplikasi reaksi asli dengan Expo dan mengujinya dengan Expo-Go. Saya perlu mengotentikasi pengguna ke Firebase menggunakan Google. Saya berhasil mengotentikasi pengguna di firebase dengan email+kata sandi, tetapi tidak dengan google. Saya telah menghabiskan beberapa hari mencari solusi di web (dan stack-overflow) dan tidak dapat menemukan sesuatu yang pasti atau contoh yang benar-benar berfungsi. Metode yang diusulkan adalah: ‘SigninWithRedirect’ dan ‘SigninWithPopup’ (keduanya tidak bekerja dalam reaksi-asli), ‘Expo-Google-SIGN-IN’ (sudah usang) dan ‘Expo-Auth-Session’ (tampaknya merupakan metode terbaru, tetapi banyak yang mengklaim itu tidak bekerja dengan Expo-Go). Adalah apa yang saya coba lakukan bahkan mungkin? Apakah ada contoh yang berfungsi di mana saja? Kalau tidak, apa yang akan menjadi cara yang disarankan untuk mengotentikasi pengguna dengan Google di Firebase di aplikasi saya (E.G., Gunakan build alih-alih Expo-go, atau gunakan klien Expo Dev untuk meningkatkan Expo, dll.) – Contoh kerja apa pun? Terima kasih banyak sebelumnya, saya menjadi putus asa 🙂

Arie Livshin

Ditanya 4 Apr di 1:34

Arie Livshin Arie Livshin

845 1 1 Lencana Emas 12 12 Lencana Perak 26 26 Lencana Perunggu

2 Jawaban 2

Saya berhasil mendapatkan firebase google auth bekerja melalui expo go menggunakan expo sdk 47. Dengan rilis Expo SDK 48 pada bulan Februari 2023, saya yakin tidak mungkin lagi untuk membuatnya bekerja dengan Expo Go. Lihat Penjelasan Pembaruan SDK 48 di sini.

Saya enggan bermigrasi ke klien Expo Dev, tetapi berjalan lebih halus dari yang diantisipasi, jadi saya akan merekomendasikan menggigit peluru dan bergerak maju dengan klien Expo Dev. Saya yakin Anda akan memerlukan akun pengembang apel berbayar untuk membuat bangunan. Masalah lain yang saya alami dengan metode ini, adalah bahwa saya sepertinya tidak bisa membuat aliran otentikasi bekerja dalam pratinjau build, meskipun berfungsi dengan baik dalam pembangunan pengembangan. Lihat pertanyaan saya di sini yang memiliki sampel kode saya tertanam, yang bekerja dengan pembangunan pembangunan.

Panduan untuk Menambahkan Google Login ke Aplikasi React Anda

Ada kalanya kami hanya ingin menggunakan aplikasi dan tidak memiliki kesabaran untuk mendaftar dan masuk dengan email dan kata sandi kami terlebih dahulu. Kami mungkin juga hanya ingin mencoba aplikasi dan tidak ingin beban karena harus membuat akun baru hanya untuk itu.

Pada saat yang sama, pemilik aplikasi perlu mengetahui berapa banyak pengguna yang dimiliki aplikasi mereka, dan ingin mendapatkan umpan balik tentang siapa yang menggunakan aplikasi dan bagaimana. Untuk mendapatkan statistik ini, mereka membutuhkan pengguna untuk mendaftar dengan email mereka.

Dua situasi ini menempatkan pengguna dan pemilik aplikasi dalam sedikit acar. Di sinilah memiliki fitur login Google memainkan peran yang sangat vital.

Karena Google adalah platform email paling populer di dunia, memungkinkan pengguna untuk menggunakan Google Login dengan aplikasi React Anda menghilangkan gesekan antara pengguna dan pemilik aplikasi. Pengguna dapat mulai menggunakan aplikasi segera tanpa harus membuat akun yang sama sekali baru.

Dalam artikel ini, kami akan mempelajari cara kerja Google Login dan bagaimana kami dapat menambahkannya ke aplikasi React kami menggunakan SDK Layanan Identitas Google baru yang disebut @React-OAuth/Google.

Ringkasan:

Menambahkan Google Login ke Aplikasi React Anda dapat sangat meningkatkan pengalaman pengguna dengan memungkinkan mereka untuk dengan mudah masuk menggunakan akun Google mereka. Ini menghilangkan kebutuhan bagi pengguna untuk membuat akun baru dan menyediakan proses login yang mulus. Di artikel ini, kami akan mengeksplorasi cara menerapkan login Google di aplikasi React menggunakan paket @react-oauth/google.

Poin -Poin Kunci:

1. Google Login adalah fitur populer yang memungkinkan pengguna masuk ke aplikasi menggunakan akun Google mereka.
2. Ini menghilangkan kebutuhan pengguna untuk membuat akun baru dan memberikan pengalaman login yang mulus.
3. Paket @react-oauth/Google adalah SDK layanan identitas google yang memungkinkan pengembang untuk mengintegrasikan Google Login ke dalam aplikasi reaksi mereka.
4. Sebelum menambahkan Google Login ke aplikasi React Anda, Anda perlu mendapatkan ID Klien Google untuk proyek Anda.
5. ID klien adalah pengidentifikasi unik yang terkait dengan aplikasi yang membantu dengan klien dan server oAuth 2.0 otentikasi.
6. Untuk memperoleh ID Klien Google, Anda perlu membuat proyek baru di Google Cloud Console.
7. Setelah Anda memiliki ID klien, Anda dapat menginstal paket @react-oauth/google di aplikasi React Anda.
8. Setelah menginstal paket, Anda dapat mengkonfigurasi layar Google Login Consent untuk aplikasi React Anda.
9. Selanjutnya, Anda perlu membuat ID klien web di google cloud console.
10. Akhirnya, Anda dapat menyatukan semuanya dengan menggunakan paket @react-oauth/google untuk mengimplementasikan login google di aplikasi reaksi Anda.

Pertanyaan:

1. T1: Mengapa menambahkan Google Login ke aplikasi React yang bermanfaat?

A1: Menambahkan Google Login ke Aplikasi React memberikan pengalaman login yang mulus bagi pengguna dengan memungkinkan mereka masuk menggunakan akun Google mereka alih -alih membuat akun baru.

2. T2: Apa paket @react-oauth/google?

A2: Paket @React-OAuth/Google adalah SDK Layanan Identitas Google yang memungkinkan pengembang untuk mengintegrasikan Google Login ke dalam aplikasi reaksi mereka. Ini menyediakan alat dan fungsionalitas yang diperlukan untuk mengimplementasikan login Google di aplikasi React.

3. T3: Bagaimana cara memperoleh ID klien google untuk proyek saya?

A3: Untuk memperoleh ID Klien Google, Anda perlu membuat proyek baru di Google Cloud Console. Setelah Anda membuat proyek, Anda dapat menghasilkan ID klien, yang akan digunakan untuk mengotentikasi pengguna selama proses login Google.

4. T4: Apa itu ID Klien?

A4: ID klien adalah pengidentifikasi unik yang terkait dengan aplikasi. Ini digunakan selama proses otentikasi untuk memverifikasi identitas aplikasi dan mengesahkan aksesnya ke Google API.

5. T5: Bagaimana cara menginstal paket @react-oauth/google?

A5: Anda dapat menginstal paket @react-oauth/google di aplikasi React Anda dengan menjalankan perintah “npm install @react-oauth/google” atau “benang add @react-oauth/google” di direktori root proyek Anda.

6. T6: Apa itu layar persetujuan Google Login?

A6: Layar Google Login Consent adalah layar yang muncul ketika pengguna mencoba masuk ke aplikasi menggunakan akun Google mereka. Ini memberi tahu pengguna tentang izin yang diminta aplikasi dan memungkinkan mereka untuk memberikan atau menolak akses.

7. T7: Bagaimana cara membuat ID klien web di google cloud console?

A7: Untuk membuat ID klien web, Anda harus pergi ke halaman kredensial di google cloud console, pilih proyek Anda, dan klik tombol “Buat kredensial”. Kemudian, pilih opsi “OAuth Client ID” dan ikuti petunjuk untuk membuat ID Klien Web.

8. T8: Bagaimana cara menerapkan login Google di aplikasi React saya menggunakan paket @react-oauth/google?

A8: Untuk mengimplementasikan Google Login di aplikasi React Anda, Anda dapat menggunakan paket @React-Oauth/Google. Pertama, instal paket di proyek Anda. Kemudian, konfigurasikan layar Google Login Consent dan buat ID Klien Web. Akhirnya, gunakan paket @react-oauth/Google untuk menangani aliran otentikasi dan mengambil token akses untuk mengakses Google API.

9. T9: Apa manfaat menggunakan Google Login di aplikasi React?

A9: Menggunakan Google Login di Aplikasi React memberikan pengalaman login yang mulus bagi pengguna, menghilangkan kebutuhan untuk membuat akun baru, dan memungkinkan pemilik aplikasi untuk mengumpulkan statistik pengguna dan umpan balik dengan lebih mudah. Ini juga memanfaatkan popularitas dan kepercayaan Google sebagai platform email.

10. T10: Dapatkah saya menggunakan Expo Go untuk mengotentikasi pengguna dengan Google di Firebase?

A10: Dengan rilis Expo SDK 48 pada bulan Februari 2023, tidak mungkin lagi menggunakan Expo Go untuk mengotentikasi pengguna dengan Google di Firebase. Namun, Anda dapat mempertimbangkan bermigrasi ke klien Expo Dev untuk fungsi ini.

Dengan mengikuti langkah-langkah ini dan menggunakan paket @react-oauth/google, Anda dapat dengan mudah menambahkan login google ke aplikasi reaksi Anda dan meningkatkan pengalaman pengguna. Ingatlah untuk memperoleh ID Klien Google, konfigurasikan layar persetujuan, dan buat ID klien web sebelum menerapkan fungsi login. Happy Coding!

Panduan untuk Menambahkan Google Login ke Aplikasi React Anda

Dropbox adalah perusahaan berbagi file dan sinkronisasi file yang berbasis di San Francisco. Klien lintas platformnya memungkinkan pengguna untuk mengunggah file ke server dropbox. Dropbox sekarang menggunakan React.JS untuk meningkatkan sinkronisasi file sehingga pengguna dapat menyimpan dan membagikan jumlah file dan folder yang tidak terbatas.

Expo-Go React-asli aplikasi yang menggunakan otentikasi google di firebase

Saya sedang membangun aplikasi reaksi asli dengan Expo dan mengujinya dengan Expo-Go. Saya perlu mengotentikasi pengguna ke Firebase menggunakan Google. Saya berhasil mengotentikasi pengguna di firebase dengan email+kata sandi, tetapi tidak dengan google. Saya telah menghabiskan beberapa hari mencari solusi di web (dan stack-overflow) dan tidak dapat menemukan sesuatu yang pasti atau contoh yang benar-benar berfungsi. Metode yang diusulkan adalah: ‘SigninWithRedirect’ dan ‘SigninWithPopup’ (keduanya tidak bekerja dalam reaksi-asli), ‘Expo-Google-SIGN-IN’ (sudah usang) dan ‘Expo-Auth-Session’ (tampaknya merupakan metode terbaru, tetapi banyak yang mengklaim itu tidak bekerja dengan Expo-Go). Adalah apa yang saya coba lakukan bahkan mungkin? Apakah ada contoh yang berfungsi di mana saja? Kalau tidak, apa yang akan menjadi cara yang disarankan untuk mengotentikasi pengguna dengan Google di Firebase di aplikasi saya (E.G., Gunakan build alih-alih Expo-go, atau gunakan klien Expo Dev untuk meningkatkan Expo, dll.) – Contoh kerja apa pun? Terima kasih banyak sebelumnya, saya menjadi putus asa 🙂

Arie Livshin

Ditanya 4 Apr di 1:34

Arie Livshin Arie Livshin

845 1 1 Lencana Emas 12 12 Lencana Perak 26 26 Lencana Perunggu

2 Jawaban 2

Saya berhasil mendapatkan firebase google auth bekerja melalui expo go menggunakan expo sdk 47. Dengan rilis Expo SDK 48 pada bulan Februari 2023, saya yakin tidak mungkin lagi untuk membuatnya bekerja dengan Expo Go. Lihat Penjelasan Pembaruan SDK 48 di sini.

Saya enggan bermigrasi ke klien Expo Dev, tetapi berjalan lebih halus dari yang diantisipasi, jadi saya akan merekomendasikan menggigit peluru dan bergerak maju dengan klien Expo Dev. Saya yakin Anda akan memerlukan akun pengembang apel berbayar untuk membuat bangunan. Masalah lain yang saya alami dengan metode ini, adalah bahwa saya sepertinya tidak bisa membuat aliran otentikasi bekerja dalam pratinjau build, meskipun berfungsi dengan baik dalam pembangunan pengembangan. Lihat pertanyaan saya di sini yang memiliki sampel kode saya tertanam, yang bekerja dengan pembangunan pembangunan.

Panduan untuk Menambahkan Google Login ke Aplikasi React Anda

Ada kalanya kami hanya ingin menggunakan aplikasi dan tidak memiliki kesabaran untuk mendaftar dan masuk dengan email dan kata sandi kami terlebih dahulu. Kami mungkin juga hanya ingin mencoba aplikasi dan tidak ingin beban karena harus membuat akun baru hanya untuk itu.

Pada saat yang sama, pemilik aplikasi perlu tahu berapa banyak pengguna yang dimiliki aplikasi mereka, dan ingin mendapatkan umpan balik tentang siapa’s Menggunakan aplikasi dan bagaimana. Untuk mendapatkan statistik ini, mereka membutuhkan pengguna untuk mendaftar dengan email mereka.

Dua situasi ini menempatkan pengguna dan pemilik aplikasi dalam sedikit acar. Di sinilah memiliki fitur login Google memainkan peran yang sangat vital.

Karena Google adalah platform email paling populer di dunia, memungkinkan pengguna untuk menggunakan Google Login dengan aplikasi React Anda menghilangkan gesekan antara pengguna dan pemilik aplikasi. Pengguna dapat mulai menggunakan aplikasi segera tanpa harus membuat akun yang sama sekali baru.

Dalam artikel ini, kami’LL Pelajari cara kerja login Google dan bagaimana kami dapat menambahkannya ke aplikasi React kami menggunakan layanan Google Identity Layanan baru yang disebut @react-oauth/google .

• Menginstal paket yang diperlukan untuk menambahkan login Google ke aplikasi React Anda
• Memperoleh ID Google Klien untuk proyek Anda
• Mengkonfigurasi Layar Persetujuan Login Google untuk Aplikasi React Anda
• Membuat ID Klien Web Anda
• Menyatukan semuanya dengan @react-oauth/google
• Membuat profil pengguna di aplikasi React Anda berdasarkan pengguna’Profil Google

Untuk mengikuti tutorial ini, Anda harus bereaksi diinstal di komputer lokal Anda dan terbiasa dengan cara menggunakannya. Jika Anda telah menginstal reaksi, maka Anda seharusnya sudah memiliki node.JS, NPM, dan benang terpasang juga.

Menginstal paket yang diperlukan untuk menambahkan login Google ke aplikasi React Anda

Untuk menggunakan login google, kami’LL perlu menginstal paket @react-oauth/google. Ini Google’S Layanan Identitas Baru SDK; Ini memungkinkan kami untuk mengintegrasikan fitur login Google ke dalam aplikasi React kami. Selain itu, @react-oauth/google memungkinkan kami mendapatkan token akses yang perlu kami akses semua API Google dengan cepat dan aman.

Tapi, sebelum kami menginstal dan mulai mengintegrasikan login Google ke dalam aplikasi React kami, kami’pertama harus mendapatkan ID klien google.

Memperoleh ID Google Klien untuk proyek Anda

ID klien adalah pengidentifikasi unik yang terkait dengan aplikasi yang membantu dengan klien dan server oAuth 2.0 otentikasi.

Untuk mendapatkan ID klien dari Google, buka Google Cloud Console Anda dan buat proyek baru. Untuk artikel ini, saya’ve menamai proyeknya “Google Masuk,” Tapi Anda bisa menamainya apa pun yang Anda suka:

Setelah membuat proyek, klik nama proyek dan Anda’ll lihat dasbor yang terlihat seperti yang ditunjukkan di bawah ini. Nama proyek Anda saat ini harus terlihat di kiri atas dasbor, di sebelah logo Google Cloud:

Sekarang, biarkan’S Tinjau Cara Mengkonfigurasi Layar Persetujuan Anda Sebelum Membuat Kredensial Anda.

Mengkonfigurasi Layar Persetujuan Login Google untuk Aplikasi React Anda

Layar persetujuan, seperti namanya, adalah halaman persetujuan yang meminta pengguna untuk menggunakan perpustakaan eksternal atau pihak ketiga untuk masuk. Langkah ini mengingatkan pengguna bahwa mereka meninggalkan aplikasi Anda’s root page dan memungkinkan akses ke halaman pihak ketiga.

Sederhananya, saat Anda menggunakan OAuth 2.0 Untuk otorisasi, aplikasi Anda meminta agar pengguna mengesahkan satu atau lebih lingkup akses dari akun Google. Lingkup akses mencakup informasi atau aktivitas apa pun yang diizinkan oleh aplikasi Anda untuk mengakses atau berolahraga pada pengguna’akun s.

Lebih dari 200 ribu pengembang menggunakan Logrocket untuk menciptakan pengalaman digital yang lebih baik

Pelajari lebih lanjut →

Layar Google Login Consent Aplikasi Anda ditampilkan kepada pengguna dapat menyertakan deskripsi singkat tentang proyek Anda, kebijakannya, dan cakupan akses yang diminta.

Halaman persetujuan sederhana bisa terlihat seperti ini:

Untuk mengonfigurasi halaman Google Consent untuk aplikasi React Anda, buka “Layar persetujuan OAuth” Tab di menu sisi kiri google cloud console Anda.

Setelah Anda berada di tab ini, pilih Eksternal-yang sebenarnya merupakan satu-satunya opsi yang dapat Anda pilih kecuali Anda menggunakan organisasi atau aplikasi yang diverifikasi Google-dan klik Membuat Tombol untuk membuat layar persetujuan Anda:

Selanjutnya, di tab yang sama, pilih nama untuk aplikasi Anda dan alamat email untuk mendapatkan pemberitahuan tentang perubahan apa pun pada proyek Anda. Anda dapat menjaga persyaratan dan opsi lain kosong untuk saat ini. Jika Anda memiliki detail yang siap, Anda dapat menambahkannya selama langkah ini jika Anda mau:

Anda juga dapat melewati bagian pendaftaran lainnya untuk saat ini. Cukup gulir ke bawah di setiap bagian dan klik Simpan dan Lanjutkan sampai Anda dikembalikan ke dasbor setelah selesai.

Membuat ID Klien Web Anda

Selanjutnya, pada menu sisi kiri, klik Kredensial tab untuk pergi ke halaman tempat Anda dapat membuat ID klien web Anda.

Di halaman ini, klik Buat kredensial di bagian atas halaman, lalu pilih ID klien OAuth pilihan:

Anda akan diminta untuk memilih jenis aplikasi, seperti yang ditunjukkan di bawah ini. Jika Anda mengikuti langkah -langkah ini untuk aplikasi React, pilih aplikasi web (sejak kita’Menggunakan ID Google Klien untuk Web):

Jika Anda mengintegrasikannya dalam aplikasi React Native, Flutter, atau Swift, Anda dapat memilih opsi Android atau iOS untuk dua sistem operasi masing -masing.

Selanjutnya, kami akan memilih nama untuk ID klien kami. Nama ini hanya digunakan untuk mencatat atau mendefinisikan ID tertentu yang kami buat. Jadi misalnya, jika kami membuat ID web, iOS, dan android, kami dapat menyertakan “ID web,” “ID Android,” “ID iOS,” dan seterusnya dalam konvensi penamaan mereka untuk membedakan mereka.

Selanjutnya kita’LL juga menambahkan dua jenis URL: asal Javascript resmi dan URL pengalihan resmi.

URL asal Javascript resmi adalah URL dari mana aplikasi Anda berasal dari login; Saya.e., localhost dan localhost: 3000 untuk pengembang bereaksi, atau url yang Anda hosting jika Anda’ve host aplikasi Anda.

URL Redirect Resmi adalah tautan bahwa Google akan mengarahkan kembali pengguna setelah login berhasil. Misalnya, Anda mungkin ingin membawa pengguna kembali ke tautan asli Anda, atau mungkin mengarahkan ulang pengguna ke tautan lain. Either way, Anda harus memasukkan URL di sini.

Untuk asal Javascript resmi dan URL pengalihan resmi, tambahkan URL LocalHost: http: // localhost: 3000 dan http: // localhost, seperti demikian:

Terakhir, klik Membuat Tombol untuk Membuat ID Klien Web Anda. Anda’akan dibawa kembali ke beranda, di mana Anda’ll lihat kredensial Anda yang baru dibuat. Klik ikon salin untuk menyalin ID klien web baru Anda:

Sekarang kami telah berhasil membuat ID klien web kami, biarkan’S masuk ke aplikasi reaksi kami, instal, dan kemudian mengintegrasikan login google.

Menyatukan semuanya dengan @react-oauth/google

Untuk menggunakan paket login Google, pertama -tama kita harus menginstalnya. Jalankan salah satu dari perintah di bawah ini untuk menginstal paket:

// NPM NPM Instal @React-OAuth/[Email Dilindungi] // YARN YARN Tambahkan @react-oauth/[Email Dilindungi] 

Setelah instalasi, kami’LL Bungkus aplikasi kami dengan GoogleOAuthProvider dan kemudian berikan ID klien web Google kami. Ini agar seluruh aplikasi React kami dapat mengakses penyedia Google Auth sekali.

Di dalam indeks kami.file js, kami’LL membungkus aplikasi seperti itu;

/*indeks.js*/ impor bereaksi dari 'bereaksi'; reactdom impor dari 'react-dom'; impor < GoogleOAuthProvider >dari '@react-oauth/google'; Impor aplikasi dari './Aplikasi'; Reactdom.memberikan(    , dokumen.getElementById ('root'));

Sama seperti dengan setiap paket yang diinstal di React, pertama -tama kita harus mengimpor modul sebelum kita dapat menggunakannya. Jadi di dalam aplikasi React Anda, buka aplikasi.file js dan salin kode berikut;

/*Aplikasi.js*/ impor bereaksi dari 'bereaksi'; impor < GoogleLogin >dari '@react-oauth/google'; function app () < const responseMessage = (response) =>< console.log(response); >; const errormessage = (error) => < console.log(error); >; kembali (

Bereaksi Google Login
 
 
 onError = />
)> aplikasi default ekspor;

Kode di atas adalah cara yang sangat sederhana untuk menampilkan cara menggunakan login google. Kami mengimpor modul googlelogin dari @react-oauth/google dan menyebutnya di komponen kami. Selanjutnya, kami membuat dua fungsi yang konsol mencatat respons jika login berhasil dan kesalahan jika itu’t berhasil.

Anda juga dapat menggabungkan kedua fungsi menjadi satu dan menggunakan kondisional untuk membuatnya.

Di Sini’s bagaimana kode di atas terlihat saat kita mengujinya di browser:

Mengklik Masuk dengan Google Tombol akan meminta layar atau modal persetujuan yang akan terlihat seperti ini:

Sekarang kita telah melihat cara menambahkan login google ke aplikasi reaksi kita, biarkan’S ambil langkah lebih jauh dan dapatkan pengguna’detail untuk membuat profil pengguna di aplikasi kami. Kami hanya akan mengarahkan kembali pengguna ke beranda dan kemudian mendapatkan pengguna’S Email, Nama, dan Gambar.

Membuat profil pengguna di aplikasi React Anda berdasarkan pengguna’Profil Google

Mengintegrasikan Google Login dengan aplikasi kami memberi kami akses ke pengguna’profil S, yang termasuk pengguna’Nama S, Alamat Email, Gambar, AccessToken, dan sebagainya. Kami’LL Gunakan informasi ini untuk membuat profil pengguna kami.

Tetap saja, di aplikasi kami.Komponen JS, biarkan’S Ganti kode kami yang ada dengan yang ini di bawah ini:

/*Aplikasi.JS*/ Impor Bereaksi, < useState, useEffect >dari 'bereaksi'; impor < googleLogout, useGoogleLogin >dari '@react-oauth/google'; Impor Axios dari 'Axios'; function app () < const [ user, setUser ] = useState([]); const [ profile, setProfile ] = useState([]); const login = useGoogleLogin(< onSuccess: (codeResponse) =>setuser (coderesponse), onError: (error) => konsol.log ('login gagal:', kesalahan)>); useEffect (() => < if (user) < axios .get(`https://www.googleapis.com/oauth2/v1/userinfo?access_token=$`, < headers: < Authorization: `Bearer $`, Accept: 'application/json' > >) .kemudian ((res) => < setProfile(res.data); >) .Catch ((err) => konsol.log (err)); >>, [pengguna]); // Fungsi Log Out untuk mencatat pengguna keluar dari Google dan mengatur array profil ke null const logout = () => < googleLogout(); setProfile(null); >; kembali (

Bereaksi Google Login
 
 
  alt = "gambar pengguna" /> 
Pengguna masuk
 
Nama: 
Alamat email: 
 
> Keluar 
): ( Login () >> Masuk dengan Google &#55357;&#56960; )>