Pada artikel ini, saya akan memandu Anda menerapkan google OAuth dengan passportjs dan JWT dalam aplikasi React, Node , Express , Sequelize, dan PostgreSQL . Alur yang sama juga dapat digunakan pada aplikasi Next.js.

Awalnya diterbitkan di https://awadieudonne.com .

Apa itu Google Oauth?

Oauth adalah singkatan dari Otorisasi Terbuka. Ini memungkinkan layanan pihak ketiga seperti Google dan Facebook untuk bertukar informasi Anda tanpa Anda harus memberikan kata sandi Anda. Ini membantu mencegah kata sandi Anda disusupi. Pelajari lebih lanjut tentang Google Oauth di sini .

Bagaimana cara kerja Google Oauth?

Setelah pengguna mengklik tombol login Oauth, frontend kami mengirimkan permintaan ke server otorisasi Google melalui pengalihan browser dan memperoleh token akses yang akan memberikan akses ke Google API. Selama permintaan token akses, aplikasi kita mengirimkan satu atau lebih nilai dalam parameter cakupan yang mengontrol kumpulan sumber daya dan operasi yang diizinkan oleh token akses.

Setelah mendapatkan token akses, apa yang terjadi selanjutnya?

Aplikasi kita melakukan panggilan ke Google API, menyetel token di header permintaan Otorisasi HTTP . Token akses hanya akan valid untuk rangkaian operasi dan sumber daya yang dijelaskan dalam cakupan permintaan token.

Permintaan kami diautentikasi menggunakan autentikasi passport.js dan mengirimkan info profil pengguna. Kami akan menerima info profil pengguna di dalam panggilan balik verifikasi paspor yang tujuannya adalah untuk menemukan pengguna yang memiliki set kredensial.

Setelah otentikasi berhasil, sesi dibuat dan dipelihara melalui cookie yang ditetapkan di browser pengguna. Setiap permintaan berikutnya tidak akan berisi kredensial, melainkan cookie unik yang mengidentifikasi sesi. Passport menggunakan fungsi serialize dan deserialize untuk menyimpan ID pengguna ke dan dari sesi.

Diagram Alur Google Oauth

Memahami fungsi Serialize dan Deserialisasi paspor

• serializeUser: Menentukan data objek pengguna mana yang harus disimpan dalam sesi. Hasil dari metode serializeUser dilampirkan ke sesi sebagai req.session.passport.user
• Dalam kasus kami hanya ID pengguna yang akan diserialkan ke sesi, menjaga jumlah data yang disimpan dalam sesi tetap kecil.
• deserializeUser: Digunakan untuk mengambil id yang disimpan dalam sesi oleh fungsi serializeUser. Di sinilah kami membuat panggilan backend untuk mendapatkan instance pengguna dengan ID itu dan melampirkannya ke objek permintaan sebagai req.user .

Setelah deserializing, handler berikutnya menerima kontrol, menghasilkan token JWT dari kredensial di req.user , dan mengirimkan respons yang berisi objek pengguna dan JWT.

Jangan sungkan untuk berkomentar jika ada yang kurang dipahami dari penjelasan di atas.

Menerapkan Google Oauth di Nodejs, express, sekuel, dan Postgres

1. Buat ID klien Google dan rahasia klien

Kunjungi Google API Console dan dapatkan kredensial OAuth 2.0 seperti ID klien dan rahasia klien yang akan diketahui oleh Google dan aplikasi kita.

Di bawah ini adalah langkah-langkah yang harus diikuti:

• Dari drop-down proyek, buat yang baru dengan mengklik Proyek baru.
• Di bilah sisi di bawah "API & Layanan", pilih Kredensial
• Di tab Kredensial, klik daftar tarik-turun Buat kredensial , dan pilih ID klien OAuth .
• Konfigurasikan layar persetujuan dan atur cakupannya. Setelah selesai, kembali ke dasbor.
• Klik lagi pada daftar tarik-turun Buat kredensial , dan pilih ID klien OAuth, tetapi kali ini Anda akan dibawa ke halaman tempat Anda akan memilih jenis aplikasi. Pilih aplikasi Web.
• Di bawah Asal JavaScript yang Diotorisasi, masukkan URL API backend, yang dalam kasus kami akan menjadihttp://localhost:3000
• Di bawah Authorized redirect URI, masukkan URL frontend yang akan menjadi :http://localhost:4000, dan klik simpan.

Buat folder kosong dan buka di editor favorit Anda. Jalankan yang berikut ini untuk menginisialisasi proyek Nodejs.

npm init

npm i body-parser cors dotenv express jsonwebtoken passport passport-google-token pg sequelize

npm i --save-dev @babel/cli @babel/core @babel/node @babel/plugin-proposal-optional-chaining @babel/plugin-transform-runtime @babel/preset-env @babel/register @babel/runtime babel-node nodemon sequelize-cli

// api/server.js
import cors from 'cors';
import logger from 'morgan';
import express from 'express';
import bodyParser from 'body-parser';
const app = express();
app.use(cors({ origin: true }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(logger('dev'));
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server running on http://localhost:${port}`));

Langkah 1: Buat file .sequelizerc dengan kode berikut

Langkah 2: Inisialisasi sekuel

sequelize init

• config.js, yang memberi tahu Sequelize CLI cara terhubung ke database
• model berisi semua model untuk proyek Anda
• migrasi berisi semua file migrasi
• seeder berisi semua file seed

Mari kita mulai dengan membuat file .env untuk menyimpan variabel lingkungan kita seperti kunci klien google, rahasia JWT, URL koneksi database, ...dll

Salin Id Klien Google dan Id Rahasia dari dasbor Konsol API Google Anda dan simpan di dalam file .env.

DATABASE_DEV=postgres: 
GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= JWT_SECRET=

File ini seharusnya mengatur koneksi ke database kami, tetapi kami belum memilikinya. Jadi jalankan perintah sekuel berikut untuk membuat database untuk API kami

sequelize db:create

Sekarang setelah kita selesai dengan konfigurasi, mari buat file migrasi pengguna dengan semua kolomnya dengan menjalankan perintah berikut:

sequelize model:generate --name User --attributes name:string,email:string,password:string,goodleId:string,provider:string

sequelize db:migrate

Langkah 1: Konfigurasikan passport.js dan strategi google:

Buat folder controller di direktori /api dan buat folder baru lainnya untuk authController dengan index.js dan passport.js di dalamnya.

Salin dan tempel kode berikut ke dalam file passport.js yang baru saja Anda buat.

Jadi kami mengimpor strategi google kami dan membuat turunannya di dalam fungsi use() . Di dalam panggilan balik verifikasi, kami mendapatkan profil pengguna yang berasal dari google untuk memeriksa apakah pengguna itu sudah mendaftar melalui Google Oauth, jika tidak, kami mendaftarkannya dan menelepon selesai (null, pengguna).

Langkah 2: Buat fungsi pengontrol untuk menyelesaikan alur OAuth:

Di dalam file controller/index.js kami, salin dan tempel kode berikut:

Apa yang dilakukan google OAuth ini adalah menerima pengguna yang diautentikasi dari objek req menghasilkan token JWT dan mengembalikan respons pengguna dan token loginnya.

Langkah 3: Hubungkan konfigurasi passport.js ke server dan tambahkan rute:

Impor konfigurasi dari controllers/passport.js di dalam server ekspres kami dan buat titik akhir untuk Google OAuth. Server sekarang akan terlihat seperti ini:

Dan kemudian kita selesai dengan Menerapkan Google Oauth di Nodejs, express, sekuel, dan Postgres. Mari lanjutkan dan konsumsi titik akhir OAuth di frontend.

Menerapkan Google Oauth di ReactJs

1. Inisialisasi create-react-app:

Inisialisasi proyek reaksi baru dengan menjalankan yang berikut dalam istilah Anda

npx create-react-app google-oauth-client

npm i --save axios react-google-login js-cookie

Mari kita pertama-tama mengatur variabel lingkungan kita.

Buat file .env di direktori root aplikasi dan tambahkan variabel berikut ke dalamnya.

REACT_APP_API_BASE_URL=http: REACT_APP_GOOGLE_CLIENT_ID=

Anda harus memiliki sesuatu seperti ini sebagai hasil akhirnya

Ujilah, jika Anda menghadapi masalah, beri tahu saya di bagian komentar, saya tersedia 24/7 untuk menjawab pertanyaan Anda.

Kesimpulan

Jadi itu saja untuk mengatur google OAuth. Sekarang saya ingin mendengar apa yang Anda katakan.

Sudahkah Anda mempelajari sesuatu yang baru? Letakkan di bagian komentar, kami tidak pernah tahu berapa banyak orang yang akan belajar dari kami. Apakah itu membantu? Sebarkan berita, bagikan dengan teman bahkan di media sosial.

terima kasih

Awalnya diterbitkan di https://awadieudonne.com .