9/19 TIL : 자동 로그인(쿠키), DOTENV, OAuth(페이스북, 네이버, 카카오, 구글 로그인)

KDT/TIL

9/19 TIL : 자동 로그인(쿠키), DOTENV, OAuth(페이스북, 네이버, 카카오, 구글 로그인)

ebulsok 2022. 9. 20. 20:31

🔎 쿠키를 사용한 자동 로그인

로그인 하면 쿠키 발행(사용자 id 정도, 60초의 expires 설정, httpOnly 옵션 켜기, signed 옵션 켜기+서버의 cookie-parser에 암호화 키 설정)

router.post('/', (req, res, next) => {
  passport.authenticate('local', (err, user, info) => {
    if (err) throw err;
    if (!user) {
      return res.send(
        `${info.message}<br><a href="/login">로그인 페이지로 이동</a>`
      );
    }
    req.logIn(user, (err) => {
      if (err) throw err;
      res.cookie('user', req.body.id, {
        expires: new Date(Date.now() + 1000 * 60),
        httpOnly: true,
        signed: true,
      });
      res.redirect('/board');
    });
  })(req, res, next);
});

// app.js
app.use(cookieParser('ebulsok'));

로그인이 안 된 상태이므로 express session, passport session 둘 다 없는 상태
req.user가 undefined 상태인데 거기서 키 값을 참조하려고 하기 때문에 오류 발생
req.user가 있는 경우에 특정 키 값을 참조하도록 board.js 코드 수정

router.get('/', isLogin, async (req, res) => {
  const client = await mongoClient.connect();
  const cursor = client.db('KDT-1').collection('board');
  const ARTICLE = await cursor.find({}).toArray();

  const articleLen = ARTICLE.length;
  res.render('board', {
    ARTICLE,
    articleCounts: articleLen,
    userID: req.session.userID
      ? req.session.userID
      : req.user?.id
      ? req.user?.id
      : req.signedCookies.user,
  });
});

(session은 express 모듈을 실행시킬 때 자동으로 생성되기 때문에 ?을 추가할 필요 없음)

🔎 isLogin 함수 모듈화

isLogin 함수를 login.js에 이동
함수를 모듈로 뺄 수 있게 익명 함수 선언
isLogin을 module.exports에 추가

const isLogin = (req, res, next) => {
  if (req.session.login || req.user || req.signedCookies.user) next();
  else {
    res.status(300);
    res.send(
      '로그인이 필요합니다.<br><a href="/login">로그인 페이지로 이동</a>'
    );
  }
};

module.exports = { router, isLogin };

app.use('/login', loginRouter.router);

board.js에서 모듈 불러오기
기존의 isLogin을 login.isLogin으로 변경

const login = require('./login');

// 글 목록
router.get('/', login.isLogin, async (req, res) => { ... });

// 글 등록
router.get('/write', login.isLogin, (req, res) => { ... });

router.post('/write', login.isLogin, async (req, res) => { ... });

// 글 수정
router.get('/edit/postID/:postID', login.isLogin, async (req, res) => { ... });

// 글 삭제
router.delete('/delete/postID/:postID', login.isLogin, async (req, res) => { ... });

🔎 DOTENV

중요한 정보를 외부 코드에서 확인이 불가등하도록 도와주는 모듈

[터미널] npm i dotenv -s
app.js에서 모듈 호출하기

require('dotenv').config();

.env 파일을 최상단 폴더에 만들기

PORT = 4000
DB_URI = mongodb+srv://ebulsok:<password>@cluster0.mhxf9lp.mongodb.net/?retryWrites=true&w=majority

필요한 곳에서 process.env.저장명 으로 사용

// app.js
const PORT = process.env.PORT;

// mongo.js
const uri = process.env.DB_URI;

.gitignore에 추가

🔎 OAuth(Open Authorization)

인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여하기 위한 개방형 표준
보통 사용하는 sns 로그인!

🚩 3 참여자

resource server: 인증에 대한 자원을 실제로 보유하고 있으며, 인증을 실제적으로 처리해주는 서버(ex. 네이버, 구글 ...)
resource owner: 인증 정보의 주인, 즉 사용자
client: resource server에서 자원을 가져오고, 사용자가 접속하려는 서비스

🚩 OAuth Flow

resource server에 client 등록
resource server의 가이드에 따라 인증 구현
사용자가 client에서 인증 요청
resource server에서 인증 토큰 발행
사용자가 resource server에 로그인
resource server가 인증 토큰 검증
로그인 완료

🚩 Facebook 로그인 구현(https://developers.facebook.com/)

앱 만들기 - 소비자 - 앱에 제품 추가(facebook 로그인) - 웹 - 사이트 url 입력(http://localhost:4000/)
설정- 기본 설정 - URL 입력 란에 서버 작동되는 링크 걸기
앱 검수 - 권한 및 기능 - public_profile - 고급 액세스 이용하기
모듈 설치: [터미널] npm i passport-facebook -s
.env에 인증 정보 추가

FB_CLIENT = 
FB_CLIENT_SECRET =
FB_CB_URL =

모듈 추가, 전략 수립(facebook profile에서 id 값이 DB에 있나 찾아보고 로그인, 없다면 회원가입 후 로그인 처리)

// passport.js
const FacebookStrategy = require('passport-facebook').Strategy;

module.exports = () => {
  passport.use(
    new LocalStrategy( ...)
  );

  passport.use(
    new FacebookStrategy(
      {
        clientID: process.env.FB_CLIENT,
        clientSecret: process.env.FB_CLIENT_SECRET,
        callbackURL: process.env.FB_CB_URL,
      },
      async (accessToken, refreshToken, profile, cb) => {
        // console.log(profile);
        const client = await mongoClient.connect();
        const userCursor = client.db('KDT-1').collection('users');

        const result = await userCursor.findOne({ id: profile.id });
        if (result !== null) cb(null, result); // 회원가입 처리된 경우
        else {
          const newUser = {
            id: profile.id,
            name: profile.displayName
              ? profile.displayName
              : profile.emails[0].value,
            provider: profile.provider,
          };

          const dbResult = await userCursor.insertOne(newUser);
          if (dbResult.acknowledged) cb(null, newUser);
          else cb(null, false, { message: '회원 생성을 실패하였습니다.' });
        }
      }
    )
  );

  passport.serializeUser((user, cb) => { ... });

  passport.deserializeUser(async (id, cb) => { ... });
};

로그인 처리(성공 시 게시판으로, 실패 시 메인화면으로)

// login.js
router.get(
  '/auth/facebook',
  passport.authenticate('facebook', { scope: 'email' })
);

router.get(
  '/auth/facebook/callback',
  passport.authenticate('facebook', {
    successRedirect: '/board',
    failureRedirect: '/',
  })
);

글을 쓸 때 userName 키를 추가하도록 borad.js 수정

// 글 쓰기
const newArticle = {
      title: req.body.title,
      content: req.body.content,
      userID: req.session.userID
        ? req.session.userID
        : req.user.id
        ? req.user.id
        : req.signedCookies.user,
      postID: postID,
      userName: req.user?.name ? req.user.name : req.user?.id,
};

작성자 부분에서 해당 글이 userName 키를 가지고 있으면 userName, 없으면 userID를 띄우도록 board.ejs 수정

<p>작성자: <%= ARTICLE[i].userName ? ARTICLE[i].userName : ARTICLE[i].userID %></p>

🚩 네이버 로그인 구현(https://developers.naver.com/)

모듈 설치: [터미널] npm i passport-naver -s
.env에 인증 정보 추가

NV_CLIENT =
NV_CLIENT_SECRET =
NV_CB_URL =

모듈 추가, 전략 수립

// passport.js
const NaverStrategy = require('passport-naver').Strategy;

	passport.use(
        new NaverStrategy(
          {
            clientID: process.env.NV_CLIENT,
            clientSecret: process.env.NV_CLIENT_SECRET,
            callbackURL: process.env.NV_CB_URL,
          },
          async (accessToken, refreshToken, profile, cb) => {
            // console.log(profile);
            const client = await mongoClient.connect();
            const userCursor = client.db('KDT-1').collection('users');

            const result = await userCursor.findOne({ id: profile.id });
            if (result !== null) cb(null, result); // 회원가입 처리된 경우
            else {
              const newUser = {
                id: profile.id,
                name: profile.displayName
                  ? profile.displayName
                  : profile.emails[0].value,
                provider: profile.provider,
              };

              const dbResult = await userCursor.insertOne(newUser);
              if (dbResult.acknowledged) cb(null, newUser);
              else cb(null, false, { message: '회원 생성을 실패하였습니다.' });
            }
          }
        )
	);

로그인 처리

// login.js
router.get('/auth/naver', passport.authenticate('naver'));

router.get(
  '/auth/naver/callback',
  passport.authenticate('naver', {
    successRedirect: '/board',
    failureRedirect: '/',
  })
);

🚩 카카오 로그인 구현(https://developers.kakao.com/docs/latest/ko/kakaologin/common)

참고: passport-kakao (passportjs.org)

모듈 설치: [터미널] npm i passport-kakao -s
.env에 인증 정보 추가

KA_CLIENT =
KA_CB_URL =

모듈 추가, 전략 수립

// passport.js
const KakaoStrategy = require('passport-kakao').Strategy;

	passport.use(
        new KakaoStrategy(
          {
            clientID: process.env.KA_CLIENT,
            callbackURL: process.env.KA_CB_URL,
          },
          async (accessToken, refreshToken, profile, cb) => {
            // console.log(profile);
            const client = await mongoClient.connect();
            const userCursor = client.db('KDT-1').collection('users');

            const result = await userCursor.findOne({
              id: profile.id,
            });
            if (result !== null) cb(null, result); // 회원가입 처리된 경우
            else {
              const newUser = {
                id: profile.id,
                name: profile.displayName
                  ? profile.displayName
                  : profile.emails[0].value,
                provider: profile.provider,
              };

              const dbResult = await userCursor.insertOne(newUser);
              if (dbResult.acknowledged) cb(null, newUser);
              else cb(null, false, { message: '회원 생성을 실패하였습니다.' });
            }
          }
        )
      );

로그인 처리

// login.js
router.get('/auth/kakao', passport.authenticate('kakao'));

router.get(
  '/auth/kakao/callback',
  passport.authenticate('kakao', {
    successRedirect: '/board',
    failureRedirect: '/',
  })
);

🚩 구글 로그인 구현(https://console.cloud.google.com/)]

API 및 서비스 - OAuth 동의 화면 - 외부 - 만들기 - 링크 입력 - 테스트 사용자 추가
사용자 인증 정보 - OAuth 클라이언트 ID - 웹 어플리케이션 - 링크 입력 - 클라이언트 ID/PW 복사
모듈 설치: [터미널] npm i passport-google-oauth20
.env에 인증 정보 추가

GG_CLIENT = 
GG_CLIENT_SECRET = 
GG_CB_URL =

모듈 추가, 전략 수립

passport.use(
    new GoogleStrategy(
      {
        clientID: process.env.GG_CLIENT,
        clientSecret: process.env.GG_CLIENT_SECRET,
        callbackURL: process.env.GG_CB_URL,
      },
      async (accessToken, refreshToken, profile, cb) => {
        console.log(profile);
        const client = await mongoClient.connect();
        const userCursor = client.db('KDT-1').collection('users');

        const result = await userCursor.findOne({ id: profile.id });
        if (result !== null) cb(null, result); // 회원가입 처리된 경우
        else {
          const newUser = {
            id: profile.id,
            name: profile.displayName
              ? profile.displayName
              : profile.emails[0].value,
            provider: profile.provider,
          };

          const dbResult = await userCursor.insertOne(newUser);
          if (dbResult.acknowledged) cb(null, newUser);
          else cb(null, false, { message: '회원 생성을 실패하였습니다.' });
        }
      }
    )
  );

로그인 처리

router.get('/auth/google', passport.authenticate('google', { scope: 'email' }));

router.get(
  '/auth/google/callback',
  passport.authenticate('google', {
    successRedirect: '/board',
    failureRedirect: '/',
  })
);

🔎 .gitignore 가 안되는 경우: 캐시 삭제하기

git rm -r --cached .
git add .
git commit -m "clear git cache"
git push --all

저작자표시 비영리 변경금지

'KDT > TIL' 카테고리의 다른 글

9/23 TIL : koa, pug, 채팅 기능 구현 (0)	2022.09.26
9/21 TIL : multer, 암호화(crypto), 웹 소켓으로 채팅 서비스 구현 (0)	2022.09.22
9/16 TIL : cookie, HTTP session, passport (0)	2022.09.20
9/14 TIL : 게시판 기능에 MongoDB 적용, 서버 배포 (0)	2022.09.20
9/7 TIL : form 태그로 데이터 전달, fetch, MongoDB (0)	2022.09.18

현재글9/19 TIL : 자동 로그인(쿠키), DOTENV, OAuth(페이스북, 네이버, 카카오, 구글 로그인)

괴발개발

9/19 TIL : 자동 로그인(쿠키), DOTENV, OAuth(페이스북, 네이버, 카카오, 구글 로그인)

'KDT > TIL' 카테고리의 다른 글

'KDT/TIL'의 다른글

티스토리툴바

9/19 TIL : 자동 로그인(쿠키), DOTENV, OAuth(페이스북, 네이버, 카카오, 구글 로그인)

'KDT > TIL' 카테고리의 다른 글

'KDT/TIL'의 다른글

관련글

티스토리툴바