Otentikasi Google NodeJS Menggunakan Paspor dan Ekspres

Jika Anda pernah menggunakan akun Google Anda untuk masuk ke suatu aplikasi, maka Anda mungkin telah memperhatikan betapa mudahnya itu. Anda hanya perlu mengklik satu tombol dan tidak perlu mengetikkan email atau kata sandi Anda. Meskipun ini tampak sederhana, apa yang terjadi di balik tenda cukup rumit. Namun, alat seperti Paspor membuatnya lebih mudah.

Dalam tutorial ini, Anda akan belajar bagaimana menerapkan otentikasi Google di Node menggunakan Passport dan Express.

Apa Itu Paspor?

Paspor (atau Passport.js) adalah middleware otentikasi Node yang menyediakan lebih dari 500 strategi untuk mengautentikasi pengguna termasuk otentikasi sosial menggunakan platform seperti Google dan Twitter.

Anda akan menggunakan paspor-google-oauth2 strategi untuk mengautentikasi pengguna di Google.

Membuat Sistem Otentikasi Google di Node

Ini adalah gambaran umum dari sistem otentikasi yang akan Anda buat:

• Ketika pengguna mengklik tombol login, mereka akan diarahkan ke halaman login Google tempat mereka akan login.
instagram viewer
• Google akan mengarahkan pengguna ke aplikasi Anda dengan token akses. Token akses memberi Anda izin untuk mengakses informasi profil pengguna tersebut.
• Kirim token akses ke Google untuk mendapatkan data profil.
• Buat pengguna baru atau ambil pengguna yang ada dari database.
• Gunakan JWT untuk melindungi rute sensitif.

Cara Mengatur Otentikasi Google di NodeJS Menggunakan Paspor

Ikuti langkah-langkah di bawah ini untuk mengotorisasi pengguna dengan Google OAuth,

Langkah 1: Buat ID Klien Google dan Rahasia Klien

Sebelum menggunakan Google untuk memasukkan pengguna ke aplikasi Anda, Anda harus mendaftarkan aplikasi Anda ke Google untuk mendapatkan ID klien dan rahasia klien untuk digunakan saat mengonfigurasi Paspor.

Masuk ke Konsol Google Cloud dan ikuti langkah-langkah berikut untuk mendaftarkan aplikasi Anda.

Buat proyek baru. Di bilah menu, pilih Kredensial dan pada daftar drop-down, pilih ID klien OAuth.

Untuk jenis aplikasi, pilih aplikasi web. Tambahkan nama pilihan untuk aplikasi Anda di bidang Nama.

Di bawah URI pengalihan resmi, gunakan http://localhost: 3000 dan http://localhost: 3000/auth/google/panggilan balik untuk URI pengalihan resmi.

Klik membuat untuk membuat klien OAuth. Karena kredensial aplikasi sensitif, Anda harus membuat .env file dan tambahkan ID klien dan rahasia klien ke dalamnya.

CLIENT_ID = 
CLIENT_SECRET = 

Langkah 2: Siapkan Server Node

Buat folder, pengguna-google-auth, dan arahkan ke sana.

mkdir pengguna-google-auth
cd pengguna-google-auth

Inisialisasi npm untuk membuat package.json.

npm init -y

Karena Anda akan menggunakan express untuk buat servernya, instal dengan menjalankan perintah berikut.

npm instal ekspres

Buka folder dengan editor teks pilihan Anda dan buat file baru app.js. Ini akan berfungsi sebagai titik masuk aplikasi Anda.

Buat server NodeJS di app.js.

const ekspres = membutuhkan("ekspres");
aplikasi const = ekspres();
const PORT = 3000;
app.listen (PORT, () => {
 console.log(`Mendengarkan pada port ${PORT}`);
});

Langkah 2: Siapkan MongoDB

Anda akan menyimpan data pengguna yang diterima dari Google di a Basis data MongoDB. Sebelum menyimpan informasi pengguna, Anda perlu menentukan struktur di mana data akan disimpan. Mongoose sangat cocok untuk ini. Ini menyediakan cara yang cukup mudah untuk membuat model data.

Install luwak.

npm instal luwak

Buat file baru penggunaModel.js, dan buat skema pengguna.

const luwak = membutuhkan("luwak");
const { Skema } = luwak.model;
const UserSchema = Skema baru({
 google: {
 pengenal: {
 jenis: Tali,
 },
 nama: {
 jenis: Tali,
 },
 surel: {
 jenis: Tali,
 },
 },
});
const Pengguna = luwak.model("Pengguna", SkemaPengguna);
module.exports = Pengguna;

Di dalam penggunaModel.js, Anda telah mengimpor luwak dan membuat skema baru.

Perhatikan bahwa Anda mengelompokkan informasi dari Google. Ini sangat berguna ketika Anda juga menggunakan metode otentikasi lain dan pengguna menggunakan lebih dari satu. Itu membuat mencegah pendaftaran ganda lebih mudah.

Selanjutnya, buat db.js.

const luwak = membutuhkan("luwak");
luwak. Janji = global. Janji;
const dbUrl = "mongodb://localhost/pengguna";
const terhubung = asinkron () => {
 mongoose.connect (dbUrl, { useNewUrlParser: true, useUnifiedTopology: true });
 const db = luwak.koneksi;
 db.on("kesalahan", () => {
 console.log("tidak dapat terhubung");
 });
 db.once("buka", () => {
 console.log(">Berhasil terhubung ke database");
 });
};
module.exports = { sambungkan };

Hubungkan ke database di app.js.

const ekspres = membutuhkan("ekspres");
aplikasi const = ekspres();
const PORT = 3000;
const db = membutuhkan("./db");
db.koneksi();
app.listen (PORT, () => {
 console.log(`Mendengarkan pada port ${PORT}`);
});

Langkah 3: Siapkan Paspor

Install paspor dan paspor-google-oauth2.

npm saya paspor paspor-google-oauth2

Buat file baru, pasporConfig.js, dan impor strategi Google dari paspor-google-oauth2 dan penggunaModel.js.

const GoogleStrategy = membutuhkan("passport-google-oauth2").Strategy;
const Pengguna = membutuhkan("./userModel");

Gunakan kredensial aplikasi Anda untuk mengonfigurasi paspor dengan Google OAuth.

module.exports = (paspor) => {
 passport.use (GoogleStrategy({
 clientID: proses.env. CLIENT_ID,
 rahasia klien: process.env. CLIENT_SECRET,
 URL panggilan balik: " http://localhost: 3000/auth/google/panggilan balik",
 passReqToCallback: benar
 },
 async (permintaan, accessToken, refreshToken, profil, selesai) => {
 mencoba {
 let existingUser = menunggu User.findOne({ 'google.id': profile.id });
// jika pengguna ada, kembalikan pengguna
 jika (Pengguna yang ada) {
 pengembalian selesai (null, existingUser);
 }
// jika pengguna tidak ada buat pengguna baru
 console.log('Membuat pengguna baru...');
 const pengguna baru = Pengguna baru ({
 metode: 'google',
 google: {
 id: profil.id,
 nama: profile.displayName,
 email: profile.emails[0].value
 }
 });
 tunggu newUser.save();
 kembali selesai (null, pengguna baru);
 } tangkap (kesalahan) {
 kembali selesai (kesalahan, salah)
 }
 }
 ));
}

Setelah Anda menerima informasi profil dari Google, periksa apakah pengguna ada di database. Jika ya, cukup kembalikan pengguna yang ditemukan. Jika pengguna baru, buat dokumen baru di database dan kembalikan pengguna yang dibuat.

Perhatikan bahwa Anda bekerja dengan env variabel jadi gunakan npm kemasan dotenv untuk mengaksesnya di aplikasi Anda.

Install dotenv.

npm instal dotenv

Menggunakan dotenv di dalam app.js.

membutuhkan("dotenv").config()

Di dalam app.js,lulus paspor ke pasporConfig.js

const paspor = membutuhkan("paspor");
membutuhkan("./passportConfig")(paspor);

Langkah 4: Buat Rute Otentikasi

Anda memerlukan tiga rute untuk:

• Arahkan pengguna ke halaman masuk Google untuk mendapatkan token akses.
• Ambil data pengguna menggunakan token akses yang diterima.
• Arahkan ulang pengguna ke halaman profil setelah otentikasi berhasil.

// Arahkan ulang pengguna ke halaman masuk Google
aplikasi.get(
 "/auth/google",
 passport.authenticate("google", { scope: ["email", "profile"] })
);
// Ambil data pengguna menggunakan token akses yang diterima
aplikasi.get(
 "/auth/google/panggilan balik",
 passport.authenticate("google", { sesi: false }),
 (permintaan, res) => {
 res.redirect("/profil/");
 }
);
// rute profil setelah berhasil masuk
app.get("/profile", (req, res) => {
 console.log (permintaan);
 res.send("Selamat datang");
});

Langkah 5: Lindungi Rute Pribadi

Sekarang setelah Anda masuk sebagai pengguna, bagaimana Anda bisa membatasi beberapa bagian aplikasi Anda hanya untuk pengguna yang diautentikasi? Salah satu cara untuk melakukannya adalah dengan menggunakan JSON Web Tokens (JWTs). JWT menawarkan cara yang aman untuk mengirimkan informasi. Ke otorisasi pengguna menggunakan JWT, aplikasi Anda akan:

• Hasilkan token menggunakan data pengguna.
• Berikan token kepada pengguna (pengguna akan mengirim kembali token dengan permintaan yang memerlukan otorisasi).
• Verifikasi token yang dikirim kembali.
• Berikan akses ke pengguna jika token yang disajikan valid.

Install jsonwebtoken untuk bekerja dengan JWT.

npm instal jsonwebtoken

Di dalam app.js, impor jsonwebtoken.

const jwt = membutuhkan("jsonwebtoken")

Ubah URL panggilan balik Google untuk menandatangani pengguna dan membuat token.

aplikasi.get(
 "/auth/google/panggilan balik",
 passport.authenticate("google", { sesi: false }),
 (permintaan, res) => {
 jwt.sign(
 { pengguna: req.user },
 "kunci rahasia",
 { kedaluwarsaDalam: "1 jam" },
 (kesalahan, token) => {
 jika (salah) {
 kembali res.json({
 tanda: nol,
 });
 }
 res.json({
 token,
 });
 }
 );
 }
);

Jika Anda masuk, Anda akan menerima token.

Selanjutnya, gunakan paspor-jwt, strategi JWT yang disediakan oleh Passport untuk memverifikasi token dan mengotorisasi pengguna.

npm instal paspor-jwt

Di dalam pasporConfig.js, tambahkan strategi JWT.

const JwtStrategy = membutuhkan("passport-jwt").Strategy;
const { EkstrakJwt } = membutuhkan("paspor-jwt");
module.exports = (paspor) => {
 passport.use (GoogleStrategy baru(
// strategi Google
 );
 paspor. gunakan(
 Strategi Jwt baru (
 {
 jwtFromRequest: ExtractJwt.fromHeader("otorisasi"),
 secretOrKey: "kunci rahasia",
 },
 async (jwtPayload, selesai) => {
 mencoba {
// Ekstrak pengguna
 const pengguna = jwtPayload.user;
 selesai (null, pengguna); 
 } tangkap (kesalahan) {
 selesai (kesalahan, salah);
 }
 }
 )
 );
}

Di sini, Anda mengekstrak token dari header otorisasi tempat token disimpan—yang jauh lebih aman daripada menyimpannya di badan permintaan.

Setelah token diverifikasi, objek pengguna dikirim kembali ke badan permintaan. Untuk mengotorisasi pengguna, tambahkan middleware otentikasi JWT paspor ke rute yang dilindungi.

aplikasi.get(
 "/Profil",
 passport.authenticate("jwt", { sesi: false }),
 (permintaan, res, selanjutnya) => {
 res.send("Selamat datang");
 }
);

Sekarang, hanya permintaan yang menyediakan token yang valid yang akan mendapatkan akses.

Langkah selanjutnya

Tutorial ini menunjukkan kepada Anda bagaimana Anda dapat menggunakan Paspor untuk memasukkan pengguna ke aplikasi Anda menggunakan akun Google mereka. Menggunakan Paspor jauh lebih sederhana daripada formulir lain, dan Anda akan menghemat banyak waktu dengan menggunakannya.

Passport juga menyediakan strategi otentikasi lain untuk digunakan dengan penyedia identitas lain, seperti Twitter dan Facebook. Jadi, ada baiknya memeriksa mereka juga.

Otentikasi Pengguna di NodeJS Menggunakan Paspor dan MongoDB

Baca Selanjutnya

Tentang Penulis