Google Auth Mudah untuk Node.js

5 Langkah mudah untuk diintegrasikan dengan Google - termasuk kod.

Mata saya membeku dengan air mata ketika saya menyedari bahawa 10 jam terakhir pengekodan adalah untuk apa-apa ... Pasport.j telah memberi saya, dan orang-orang dunia ini, harapan palsu.

Saya tidak pasti jika anda pernah melihat kod di dalam perpustakaan Passport.js tetapi tidak banyak, dan tidak begitu baik. Ia pada asasnya sedikit kod yang memastikan bahawa kelayakan pengesahan anda diletakkan di tempat yang betul. Tetapi kelemahan utama ini adalah bahawa ia membunuh fleksibiliti anda. Dengan pasport, anda mesti mengalihkan permintaan panggil balik anda ke pelayan. Sekiranya anda tidak tahu apa maksudnya; pada asasnya ia menyebalkan jika anda membuat apa-apa jenis apl selain aplikasi pelayan yang diberikan (seperti aplikasi halaman tunggal atau SPA).

Tetapi jangan risau! Berikut ialah tutorial cepat yang akan menunjukkan kepada anda cara menambah Google Auth dengan betul.

Sebelum Anda Memulakan ️

Tutorial ini mengandaikan anda mempunyai:

  1. Pemahaman yang baik tentang JavaScript dan Node.js
  2. Permohonan dengan pelayan

Awesome, mari pergi!

Langkah 1: Pasang Ketergantungan 🖥

Hanya satu - ia adalah di NPM jika anda tidak menganggapnya.

  • googleapis

Itu mudah!

Langkah 2: Konfigurasikan Google

Seterusnya anda perlu mengkonfigurasi perpustakaan dengan kelayakan anda supaya Google mengetahui siapa yang membuat permintaan.

Untuk mendapatkan bukti kelayakan - jika anda belum memilikinya - pergi ke Google Console anda dan buat projek baru. Sebaik sahaja anda mempunyai projek baru, minta beberapa kunci API. Berikut adalah pautan yang baik untuk bantuan lebih lanjut mengenai ini.

Fail: src / google-util.js

Fail di atas; mengimport perpustakaan, membuat objek konfigurasi dengan butir-butir kami, dan menambah fungsi yang akan menyambung ke Google apabila kami mahu.

Langkah 3: Dapatkan URL Masuk Google

Kenapa kita memerlukannya? ... Nah, agar kita dapat menandatangani seseorang ke Google, kita perlu menghantarnya ke halaman masuk Google. Dari sini, mereka akan log masuk ke akaun mereka dan kemudian mereka akan teruskan ke aplikasi kami dengan butiran tanda masuk mereka.

Fail: src / google-util.js

Kod di atas melakukan beberapa perkara; ia menentukan maklumat dan keizinan apa yang kita mahu dari pengguna apabila mereka log masuk, dan ia mewujudkan fungsi yang akan kami gunakan untuk menjana URL. Akhirnya kami buat fungsi yang menghasilkan URL yang anda perlu hantar kepada klien.

Langkah 4: Turn Anda - Mengarahkan Pengguna Anda ke URL Google

Langkah ini mengharuskan anda menghantar pengguna anda ke URL yang baru kami buat. Dalam aplikasi saya, saya menghasilkan URL dalam API dan menghantarnya ke hujung depan saya di mana saya menjadikan alamat href suatu butang misalnya.

 Log masuk dengan Google 

Ini akan membawa pengguna ke halaman masuk.

Menembak masalah: jika anda datang ke halaman yang memberitahu anda bahawa anda tidak mempunyai akses (atau sesuatu yang serupa), ini mungkin bermakna anda tidak mengkonfigurasi kelayakan projek Google anda dengan betul. Pastikan anda menetapkannya dengan betul dalam Google Console anda.

Langkah 5: Simpan Butiran Masuk

Mudah-mudahan, anda akan dapat log masuk ke akaun google anda dan Google akan mengarahkan anda kembali ke aplikasi anda (atau alamat redirect yang anda berikan untuk pergi ke). Sekarang semua yang perlu kita lakukan ialah memastikan akaun mereka masuk dengan padanan pengguna dalam pangkalan data kami (atau buat satu).

Untuk melakukan ini, Google telah memberikan kami parameter pada alamat redirect yang dipanggil "kod". Anda akan melihatnya sebagai:

https://yourwebsite.com/callback?code=a-bunch-of-random-characters

Anda perlu mengekstrak parameter "kod" ini dan memberikannya kembali ke perpustakaan api Google untuk memeriksa siapa pengguna log masuk. Berikut adalah pakej NPM yang baik yang boleh membantu anda mengekstrak parameter tetapi tidak kira bagaimana anda melakukan ini.

Sebaik sahaja anda mempunyai parameter "kod" dan anda telah menghantarnya ke pelayan anda, kami boleh mendapatkan e-mel dan id pengguna untuk digunakan dalam aplikasi kami.

Fail: src / google-util.js

Kini semua yang anda perlu lakukan ialah menyemak e-mel atau id terhadap pangkalan data anda dan log masuk pengguna atau mendaftar mereka - terpulang kepada anda!

Versi Penuh

Berikut adalah versi lengkap kod tanpa semua komen. Gunakan ini untuk gambaran yang baik. Sekiranya anda terjebak, periksa contoh di atas dengan penjelasan.

Yahoooo !!

Apl anda kini menyokong Google. Untuk mendapatkan akses kepada API Google yang lain, tambahkannya ke array "lingkup" anda dan apabila pengguna masuk, mereka akan diminta memberi anda akses ke data tersebut. Data kalendar Google.

Sekiranya anda menikmati artikel ini, sila berikan beberapa kepak (anda boleh meninggalkan sehingga 50) atau anda boleh memberi komen jika ada pertanyaan, saya akan melakukan yang terbaik untuk menjawabnya! ظ

Ikuti saya di Twitter.

Terima kasih!

Perkara yang dicipta oleh pengasas Authenticator - Autentikasi ringkas dan cepat untuk aplikasi anda.

Lebih banyak kiriman oleh Jack Scott.

  • Bagaimana Saya Melancarkan Permulaan dalam 4 Hari
  • Bina Pelayan GraphQL Penuh dengan Node.js
  • Selamat tinggal Redux