[항해99] 62일차 & 63일차 패스포트 지긋지긋해요

---

항해99

 

 

62일차 : 

63일차:

 

개발자도구 tutorial 보기

https://opentutorials.org/course/580

크롬 개발자도구 - 생활코딩

 

사업적으로 생각하지말고 ,  완전 포트폴리용으로 생각해서

인증 ,보안 ,트래픽 부분에서  개선안 찾아서 적용하고  면접때 잘 어필하기 

 

문뜩 벌써 63일차인데 다끝나고 어디가서 개발자라고 해도될만한 수준이 될수있을지? 라는생각을했다.

그런데 갑자기  그럼 만약 이걸안했으면 ?? 그럼 또 어케됐을지 생각해보니 눈앞이 캄캄해졌다.

 

 

 bcrypt : blah blah  뭐라고쓸려고했는데 까먹엇어.

bcypt로 해싱에 관한것을 할수있는 라이브러리

npm install bcrypt
npm install --save @types/bcrypt

bcypt 라이브러리를사용해서

genSaltSyn  : salt만들기

hashSync: hash하기 

compareSync : hash 값 비교하기

 

salt가 hash하기전에  원래 hash  할값과 추가적으로 붙어서 hash가되는데 이렇게하면 

보안성이 높아진다.

해커들 멈춰✋

 

import * as bcrypt from 'bcrypt'

export function generateHash (password:string){
    const salt = bcrypt.genSaltSync(12);
    const hash = bcrypt.hashSync(password, salt)
    return hash
}

export function compareHash (password:string, hashed:string){
    return bcrypt.compareSync(password,hashed)
}
//console.log(generateHash("1q2w3e4r"))
//console.log(compareHash("1q2w3e4r", "$2b$12$26CTf6RN8twMcBPABU1Ni.SeEx6cc1ajeL/X6iZ/0vY2DJSHi.Qcu"))

passport가 처음 에 하는법을 배우는게 귀찮은데 나중에는 정말 유용하게쓰일것같다.

원래 reference 로삼았던, youtube 강의에서 쓰던 passport 방법이 안먹힌다.

머리싸매고 왜안돼는지 찾아봐도 해답이없기에 , 그냥 지워버리고 새로 다시찾아서 처음부터 하기로한다.

 

https://www.youtube.com/watch?v=BZwzWgLA0JA&list=PL4cUxeGkcC9jdm7QX143aMLAqyM-jTZ2x&index=13 

 

passport를 사용할때 , strategy.를 설정해서 소셜로그인 을 구현할수있다.

 

만약 예를 들어 google +를 이용한 소셜로그인이라면, 

 

 

 

큰 사진으로 봣을때,  일단 유저가 구글 소셜 로그인을 요청을 했을때,

1. 유저가 구글 로그인을 선택하면 handler가 /auth/google로 보내준다.

routers/auth.js

 

const router = require('express').Router()
const passport = require('passport')



router.get('/google', passport.authenticate('google', {
    scope: ["profile"]
}))

2. passport가 authenticate with google해서 profile을 가져온다. 

 

3. passport setup에서 google strategy를 찾아서  authenticate진행

 

router.get('/google/redirect', passport.authenticate('google'), (req, res) => {
    console.log(req.user)
    //res.send('you fucking reached here bitch ')
    res.redirect('/profile/')
})

4.  user profile을 가져와서  db확인 /저장 한다.

Passport/config/passport.setup 

const passport = require('passport')
const GoogleStrategy = require('passport-google-oauth20')
const keys = require('../../key')
const User = require('../../models/user')


//serialize
// get info -> put it in cookie
passport.serializeUser((user, done) => {
    done(null, user.id);
})

//deserialize
// get cookie and find the user 
passport.deserializeUser((id, done) => {
    User.findById(id).then((user) => {
        done(null, user)
    })
})

passport.use(
    new GoogleStrategy({
        //options for the google strategy
        callbackURL: '/auth/google/redirect',
        clientID: keys.google.clientID,
        clientSecret: keys.google.clientSecret
    }, async (accessToken, refreshToken, profile, done) => {
        //passport callback function

        // check if user already exist in our db 
        const foundUser = await User.findOne({ googleId: profile.Id })

        if (foundUser) {
            // already have user in our db
            console.log("user is", foundUser)
            done(null, foundUser)

        } else {
            // new user to create in our db
            new User({
                username: profile.displayName,
                googleId: profile.Id
            }).save().then((newUser) => {
                console.log(`new user created:   ${newUser}`)
                done(null, newUser)
            })
        }

    })
)

5.  serializeUser로 가져온 정보로 쿠키를만들어서 보내준다

 

6.  deserailze User 받은쿠키에서 user정보를 받는다.

 

나눠서 코드를 이쁘게설명할려고햇는데  더 조사놔서 보여주니깐 더헷갈리는것같다 그냥 궁금한사람은...

깃헙가서보샘. (어차피볼사람없겟지망...)

 

 

모자이크 하는법몰라서 그냥 저아저씨스티커로가림 그랫더니 동민님 생일이 생각이났음. 미리축하해요.

 

 

https://github.com/skylermbang/Lectures-/tree/master/youtube_lecture/Passport

GitHub - skylermbang/Lectures-

 

 

 

 

 

 

 

 

 

OAuth (Passport) Tutorial  

https://github.com/iamshaunjp/oauth-playlist

GitHub - iamshaunjp/oauth-playlist

OAuth :

 

Users log in to the website using social credentials :

Web Service --  OAuth -- Google + content Screen 

 

 

OAuth 2.0 구글 로그인 API 설정방법:

 

https://tyrannocoding.tistory.com/51

[자바스크립트] 구글 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp

Passport library :

 

insert passport in a different section in our code to use the OAuth 

 

 

 

 

백명이들어왓는데 0.01 불이 벌렸다.

백불 벌면 광고다빼버리고 인출해서 붕어싸만코 먹을려고했는데 언제먹을수있지...

 

멍때리면서... 몇번을본거지

https://www.youtube.com/watch?v=lAl837zxOXk