아빠개발자의 노트

📢FaceBook 으로 로그인하기 (passport)

📋페이스북 로그인 인증 만들기

https://developers.facebook.com/support

FB_ID="facebook 앱 id"
FB_SECRET="facebook 앱 시크릿 코드"

npm install passport-facebook

📋passport - facebook 로그인하기

▼ passport.js 에 아래와 같이 저장

 import FacebookStrategy from "passport-facebook";

 passport.use(
    new FacebookStrategy({
        clientID: process.env.FB_ID,
        clientSecret: process.env.FB_SECRET,
        callbackURL: `http://localhost:4000${routes.facebookCallback}`
      },facebookLoginCallback));

▼ 컨트롤러

const facebookLogin = passport.authenticate('facebook'); 
//passport로 facebook 으로 보내서 인증 확인

const facebookLoginCallback = (accessToken, refreshToken, profile , cb) =>{
    console.log(accessToken, refreshToken, profile , cb);
}
//facebook 의 user가 있는지 확인하고 계정을 찾아내거나 새로생성

const postFacebookLogin = (req,res) => {
    res.redirect(routes.home);
};
// 마지막은 인증에 성공했을때 redirect 해주는것

▼요약

1. 먼저 passport.js 의 로그인에 맞는 strategy 를 생성

2. 해당 앱에 맞는 id,pw 를 할당해주고 콜백 url 주소와 성공적으로 실행했을경우 실행할 콜백 함수를 같이 준다.

📢NODE JS -ESlint

📋ESlint 설치법

▼ESLint

ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미합니다.ESLint가 뜬 이유는 바로 확장성 때문입니다. 다양한 플러그인을 사용할 수 있기 때문에 새로운 규칙을 추가할 수 있고, 손쉽게 다른 회사나 사람의 설정을 도입할 수 있습니다.

npm install eslint

eslint --init
// 또는
node node_modules\eslint\bin\eslint.js --init

////////////아래 질의문 선택////////////////////
? How would you like to use ESLint? 
To check syntax, find problems, and enforce code style

? What type of modules does your project use? 
JavaScript modules (import/export)

? Which framework does your project use? 
None of these

? Where does your code run? (Press  to select,  to toggle all,  to invert selection)
Browser

? How would you like to define a style for your project? 
Use a popular style guide

? Which style guide do you want to follow? 
Airbnb (https://github.com/airbnb/javascript)

? What format do you want your config file to be in? 
JavaScript

? Would you like to install them now with npm? 
Yes

  "devDependencies": {
    "eslint": "^5.16.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-import": "^2.16.0",
    "nodemon": "^1.18.10"
  },

//이렇게 추가가 되어있을것이다

npm uninstall eslint

npm install eslint-plugin-prettier
npm install eslint-config-prettier

package.json 에서  dependencies 에 
"eslint-plugin-prettier" : "^3.0.0", 이런게 잇을텐데
이걸 devDependencies객체로 넣자 그후 npm install prettier -D
이렇게 명령어를 쳐서 설치하면 된다.

.eslintrc.js
module.exports = {
  extends: ["airbnb-base", "plugin:prettier/recommended"],
  rules: {
    "no-console": "off"
 }
};
//이렇게 에러의 이름이있는데 rules 에 에러이름을넣고 off를 넣어주면된다.

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