아빠개발자의 노트

📢Github 으로 로그인하기 PASSPORT

📋Passport

▼Passport 란?

브라우저에서 쿠키를 저장하고 쿠키 캐시를 갖고와서 컨트롤러에 넘기게 도와주는 미들웨어다. facebook,google,인스타그램 등등 각종 유명대기업의 인증도 도와준다. 또한 다른모듈도 다 지원을 해준다.

▼설치법

브라우저에서 쿠키를 저장하고 쿠키 캐시를 갖고와서 컨트롤러에 넘기게 도와주는 미들웨어다. facebook,google,인스타그램 등등 각종 유명대기업의 인증도 도와준다. 또한 다른모듈도 다 지원을 해준다.

npm install passport passport-local

app.post('/login',
    passport.authenticate('local'),
    function(req,res) {
        res.redirect('/users/'+req.user.username);
    });

npm install passport-local-mongoose

▼mongoose model

Momgoose 의 model 인 user.js

import mongoose from "mongoose";

const UserSchema = new mongoose.Schema({
    name : String,
    email: String,
    avatarUrl : String,
    facebookId : Number,
    githubId : Number
})

const model = mongoose.Model("User",UserSchema);

export default model;

passport.js

import passport from "passport";
import User from "./models/User";

passport.use(User.createStrategy());
//strategy 라는건 로그인 방식

passport.serializeUser(User.serializeUser()); //쿠키에 user.id 를 담는다
//serialization 어떤 정보를 쿠키에게 주느냐를 의미 (어떤 field가 쿠키에 포함될것인지)

passport.deserializeUser(User.deserializeUser()); //그 id로 사용자를 식별한다
//deserialization 어느사용자인지 어떻게 찾는가? 쿠키에 저장되어있는 userid로 어떻게 사용자를찾느냐를 의미

UserController.js

import User from "../models/User";

const postjoin = async (req,res) => {
    const{
        body: {name, email, password, password2}
    } = req;
    if(password !== password2){
        res.status(400);
        res.render("join",{pageTitle: "Join"});
        console.log('비밀번호틀림2');
    } else{
        try {
            //const user = await User.create({
                //create는 생성시키고 db에 저장까지 해서
            const user = await User({
                name,
                email
            });
            await User.register(user,password); //회원가입
        } catch (error) {
            console.log(error);
        }
        res.redirect(routes.home);        
    }
};

npm install express-session

import session from "express-session";
app.use(session({
    secret: "ajhdfjdanfadf",
    resave: true,
    saveUninitialized : false
})
);

//공개키 암호화 기법

//resave 는 세션을 강제로 저장하게 합니다.
//saveUninitialized 는 초기화 되지 않은 (uninitialized) 세션을 저장소에 저장합니다.
//새로운 세션이지만 변경되지 않은 세션은 초기화 하지 않습니다.
//로그인 session에 이용하려면 false가 좋다

▼설치법

npm install passport-github

 

▼사용법

먼저 github에서 application 을 생성한다.

https://github.com/settings/applications/new .여기 링크에서 만들면 된다.

사용자가 github에 요청을 하면 github에서 사용자정보를 내가만든 웹에 정보를 줘도 되겠냐고 물어본다 그걸가지고 회원가입을 하는거다.

깃헙 아이디를 만들면 아래와 같이 화면이 뜬다. 비밀키와 아이디를 적어주자

▼ passport.js

import GithubStrategy from "passport-github";

//3번 authenticate("github") 을통해서 passport의 strategy 를 이용
passport.use(new GithubStrategy({
  clientID: (GITHUB_CLIENT_ID 을 적어주자),
  clientSecret: (GITHUB_CLIENT_SECRET 을 적어주자),
  callbackURL: (콜백 url 주소) // 4-2 깃헙페이지로 갔다가 돌아오면서 callbackURL 로 간다.
},githubLoginCallback   /*4-1번 콜백함수*/  
));

const githubLogin = passport.authenticate("github");

const githubLoginCallback = async (accessToken, refreshToken, profile, cb) => { // 5번
    const {_json : { id, avatar_url, name, email}} = profile;
    try {
        const user = await User.findOne({email}); //_json의 email과 몽고db의 email이 같은게 있는가를 찾는다
        console.log(user);
        if(user){
            user.githubId = id;  // 깃헙에서 가져온 ID를 몽고DB에 있는 ID로 바꿔준다
            user.save();
            return cb(null,user); //이걸 쿠키에 저장한다. 자동으로
        } 
            //mongo의 db와 같은게 없으면 새로 아이디를 만든다 github 내용으로 mongoDB 에
            const newUser = await User.create({
                email,                           
                name,
                githubId : id,
                avatar_url : avatar_url
            })
            return cb(null,newUser);

    } catch (error) {
        return cb(error);
    }
//passport 에서 제공하는 github 콜백햄수들을 그냥 콘솔출력
//cb는 passport로부터 제공되는것 함수인데 실행되면 passport에서
//사용자가 성공적으로 로그인되었다고 알려준다.

 

▼라우터.js

import {githubLogin, postGithubLogIn } from "../controllers/userController";

globalRouter.get(routes.github,githubLogin); // /github/login 들어오면  1번

globalRouter.get(routes.githubCallback, //callbackURL 5번
    passport.authenticate("github",{ failureRedirect: "/login"}), //실패시 6번 실패화면
    postGithubLogIn // 성공시 6번
);

▼컨트롤러.js

const githubLogin = passport.authenticate("github"); //2번

const postGithubLogIn = (req,res) =>{ //7번
    res.send(routes.home); //성공시 홈화면
};

req.logout(); // 만써주면 된다 passport에서 지원

📢NODE JS - pug(mixin) 사용법

📋MIXIN

▼mixin 은 pug의 함수의 일종이다. 반복적으로 사용되는 html 구조를 mixin의 정의하고 그값을 인자함수로 정의해줌으로써 반복되는 html 안에 변수를 설정해줄수있다. 아래 소스의 +는 mixin을 포함하여 실행한다는 뜻이다.

💻videoBlock.pug

mixin videoBlock(video ={})
    .videoBlock
        video.videoBlock__thumbnail(src=video.videoFile, controls=true)
        h4.videoBlock__title=video.title
        h6.videoBlock__views=video.views

💻home.pug

include mixins/videoBlock

each object in videos //for .. in 같은 pug 전용 반복문이다.
    +videoBlock({
        title: object.title,
        description:object.description
    })

💻videoController.js (단지 pug의 videos의 객체를 전달해주기 위함)

const videos = {title : '제목' , description : '내용'};
const home = (req,res) => {
    res.render('home',{videos});
};