Passport.js로 Google OAuth의 강력한 기능 활용: 단계별 가이드-JS 튜토리얼-php.cn

Passport.js로 Google OAuth의 강력한 기능 활용: 단계별 가이드

WBOY

풀어 주다： 2024-08-12 18:36:35

원래의

980명이 탐색했습니다.

안녕하세요, 동료 개발자 여러분! ? 인증 게임을 한 단계 더 높일 준비가 되셨나요? 오늘 우리는 Google OAuth 2.0의 세계와 Passport.js를 사용하여 이를 구현하는 방법을 살펴보겠습니다. 저를 믿으세요. 사용자들은 원활하고 안전한 로그인 경험에 감사할 것입니다!

Unlocking the Power of Google OAuth with Passport.js: A Step-by-Step Guide

Google OAuth 2.0을 사용해야 하는 이유 ?

본론에 앞서 Google OAuth 2.0이 왜 중요한지 알아보겠습니다.

1. 사용자 친화적: 더 이상 "비밀번호 분실"로 인한 두통이 없습니다!
2. Fort Knox 보안: Google의 최고 수준 보안 프로토콜을 활용하세요.
3. 신뢰 강화: 사용자는 Google 계정을 사용하여 더욱 안전하다고 느낍니다.

좋죠? 시작해 보세요!

1단계: 장비를 갖추세요! ?️

먼저 도구를 설치해 보겠습니다. 터미널을 실행하고 다음을 실행하세요.

npm install passport passport-google-oauth2 express-session

로그인 후 복사

이 패키지는 Google OAuth 2.0 구현을 위한 새로운 최고의 친구입니다.

2단계: Google 개발자 콘솔 모험 ?️

Google 개발자 콘솔에서 프로젝트를 설정할 시간입니다. 여기 보물 지도가 있습니다:

1. Google 개발자 콘솔로 이동하세요.
2. 새 프로젝트를 만듭니다(멋진 이름을 지정하세요!).
3. "API 및 서비스 > 자격 증명"으로 이동합니다.
4. "자격 증명 만들기"를 클릭하고 "OAuth 2.0 클라이언트 ID"를 선택합니다.
5. 동의 화면을 설정하세요(아이콘을 보고 웃는 것을 잊지 마세요!).
6. OAuth 2.0 클라이언트 ID(웹 애플리케이션 유형)를 구성합니다.
7. 리디렉션 URI(예: http://localhost:3000/auth/google/callback)를 추가합니다.

프로 팁: 클라이언트 ID와 클라이언트 비밀번호를 안전하게 보관하세요. 이는 OAuth 왕국의 열쇠와 같습니다!

3단계: 여권 구성 매직 ✨

이제 Passport.js의 마법을 앱에 적용해 보겠습니다.

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);
  });
});

로그인 후 복사

4단계: 성공을 향한 길 ?️

인증 고속도로를 설정해 보겠습니다.

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! ?');
});

로그인 후 복사

5단계: 실행 시간! ?

환경 변수(GOOGLE_CLIENT_ID 및 GOOGLE_CLIENT_SECRET)를 설정하면 이륙 준비가 완료됩니다!