Membuka Kunci Kuasa Google OAuth dengan Passport.js: Panduan Langkah demi Langkah

Hai, rakan pembangun! ? Adakah anda bersedia untuk meningkatkan permainan pengesahan anda? Hari ini, kami menyelami dunia Google OAuth 2.0 dan cara melaksanakannya menggunakan Passport.js. Percayalah, pengguna anda akan berterima kasih atas pengalaman log masuk yang lancar dan selamat ini!

Mengapa Google OAuth 2.0? ?

Sebelum kita melangkah masuk, mari kita bincangkan tentang sebab Google OAuth 2.0 adalah masalah besar:

1. Mesra Pengguna: Tiada lagi sakit kepala "terlupa kata laluan"!
2. Fort Knox Security: Manfaatkan protokol keselamatan Google yang terkemuka.
3. Penggalak Kepercayaan: Pengguna berasa lebih selamat menggunakan akaun Google mereka.

Sedap bunyinya, kan? Jom mulakan!

Langkah 1: Bersiap! ?️

Perkara pertama dahulu, mari pasang alatan kami. Nyalakan terminal anda dan jalankan:

npm install passport passport-google-oauth2 express-session

Pakej ini ialah rakan baik baharu anda untuk melaksanakan Google OAuth 2.0.

Langkah 2: Pengembaraan Konsol Pembangun Google ?️

Masa untuk menyediakan projek anda dalam Konsol Pembangun Google. Inilah peta harta karun anda:

1. Pergi ke Konsol Pembangun Google.
2. Cipta projek baharu (berikan nama yang menarik!).
3. Navigasi ke "API & Perkhidmatan > Bukti kelayakan".
4. Klik "Buat Bukti Kelayakan" dan pilih "ID Klien OAuth 2.0".
5. Sediakan skrin persetujuan anda (jangan lupa senyum untuk ikon!).
6. Konfigurasikan ID Klien OAuth 2.0 anda (jenis aplikasi Web).
7. Tambahkan URI ubah hala anda (cth., http://localhost:3000/auth/google/callback).

Petua Pro: Pastikan ID Pelanggan dan Rahsia Pelanggan anda selamat. Mereka seperti kunci kerajaan OAuth anda!

Langkah 3: Sihir Konfigurasi Pasport ✨

Sekarang, mari taburkan beberapa keajaiban Passport.js ke dalam apl kami:

const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;

passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "http://localhost:3000/auth/google/callback"
  },
  function(accessToken, refreshToken, profile, done) {
    // Your user-saving logic goes here!
    User.findOrCreate({ googleId: profile.id }, function (err, user) {
      return done(err, user);
    });
  }
));

// Don't forget to serialize and deserialize your users!
passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  User.findById(id, (err, user) => {
    done(err, user);
  });
});

Langkah 4: Laluan Menuju Kejayaan ?️

Jom sediakan lebuh raya pengesahan kami:

const express = require('express');
const passport = require('passport');
const app = express();

app.use(passport.initialize());
app.use(passport.session());

// The gateway to Google OAuth
app.get('/auth/google',
  passport.authenticate('google', { scope: ['profile', 'email'] })
);

// Welcome back! Handle the callback
app.get('/auth/google/callback',
  passport.authenticate('google', { 
    successRedirect: '/auth/google/success', 
    failureRedirect: '/auth/google/failure' 
  })
);

// Success and failure destinations
app.get('/auth/google/success', (req, res) => { 
  res.send('Welcome aboard! ?'); 
});

app.get('/auth/google/failure', (req, res) => { 
  res.send('Oops! Something went wrong. ?'); 
});

app.listen(3000, () => {
  console.log('Server is up and running! ?');
});

Langkah 5: Masa Pelancaran! ?

Sediakan pembolehubah persekitaran anda (GOOGLE_CLIENT_ID dan GOOGLE_CLIENT_SECRET), dan anda sudah bersedia untuk berlepas!

node app.js

Navigasi ke http://localhost:3000/auth/google, dan saksikan keajaiban berlaku!

Membungkus ?

Dan begitulah, kawan-kawan! Anda baru sahaja melaksanakan Google OAuth 2.0 dengan Passport.js. Pengguna anda kini boleh log masuk dengan akaun Google mereka, menikmati pengalaman yang lancar dan selamat.

Ingat, ini baru permulaan. Dalam apl pengeluaran, anda ingin menambah lebih banyak ciri seperti:

• Pengendalian ralat yang betul
• Storan data pengguna dalam pangkalan data
• Pilihan pengesahan tambahan

Sudahkah anda cuba melaksanakan OAuth dalam projek anda? Apakah cabaran yang anda hadapi? Letakkan pendapat anda dalam ulasan di bawah – Saya ingin mendengar tentang pengembaraan anda di negara pengesahan!

Selamat pengekodan, dan semoga log masuk anda sentiasa lancar! ???‍?

Atas ialah kandungan terperinci Membuka Kunci Kuasa Google OAuth dengan Passport.js: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!