[49일차] 20210524 javaScript 카카오 oauth 로그인 kakao login

session 추가 공부 / 비구조할당문 /switch문 /

session 담는 부분

    req.session.kakao=user.data;

구글,네이버,깃헙, 자체 로그인 등등..로그인이 4가지 방식 이상으로 되고 각각 사이트마다 주는 결과도 다르기 때문에 잘 모아서 처리해야함.

    // req.session.kakao=user.data;
    
    const authData = {
        ...token.data,
        ...user.data,    
    }

    res.redirect('/');
})

새로 배우는 문법 비구조 할당문

* 비구조 할당문이란,, 배열, 객체 모두 사용 가능

좋은 점. 객체를 내 마음대로 바꿔서 저장 가능

복사할 때 장점이 많음.

굳이 비구조 할당문 쓰는 이유? -> 깊은 복사를 위해 사용한다. (값을 가져오지만, 원본의 값이 바뀌더라도 내가 복사하는 시점의 값을 변함없이 이용하고 싶을 때 )

let arr2 = [1,2,3];
let copy = arr2; 
let copy2 = [...arr2];

arr2[0] = 'ingoo'

console.log(arr2)
console.log(copy)  //내용이 ㅂㅏ뀜  // 얕은 복사
console.log(copy2)  //원래 arr 내용.  // 깊은 복사

메모리를 창조했냐 안했냐

얕은 복사 : arr2 안에 있는걸 그대로 복사하겠다. 변수 값을 가져오겠다. 내용이 바뀌면 바뀐걸 가져옴

깊은 복사 : 해당 [1,2,3]의 값을 가져온 것. 변수 내용이 바뀌어도 그대로 원 요소를 가지고 있음.

    const authData = {
        ...token.data, //깊은 복사 
        ...user.data,    
    }

    res.redirect('/');
})

그래서 요것도 깊은 복사 한것.,.,

아래 req.session.authData 라는 속성에 아래처럼 쓰고 console.log로 한번 보기 !

    // req.session.kakao=user.data;
    
    const authData = {
        ...token.data, //깊은 복사 
        ...user.data,    
    }

    req.session.authData = {
        //해당 로그인한 내용으로다가
        ["kakao"]:authData,
    }
    console.log(req.session)

    res.redirect('/');
})

session안에는 cookie값이 존재

이제 ["kakao"] 부분처럼 네이버, local, google 등 의 공간을 따로 만들어 관리할 것

비구조할당문 + 내용 이쁘게 만들기

req 안에 있는 객체 session, query 변수에 담고

query안에 code 객체도 또 code 변수에 담아서 코드 줄이기

즉, req.session => session , req.query=>query / req.query.code => code

app.get('/auth/kakao/callback', async (req,res)=>{
    const {session,query} = req; //req안에 session,query라는 객체가 있는데 저기에 담음 
    const {code} = query; //req.query.code => code 변수에 넣은것뿐,,
    //req.session -> session 으로 줄임 

    let token;
    try{
        token=await axios({
            method:'POST',
            url:'https://kauth.kakao.com/oauth/token',
            headers:{
                'content-type':'application/x-www-form-urlencoded'
            },
            data:qs.stringify({
                grant_type:'authorization_code',
                client_id:kakao.clientID,
                client_secret:kakao.clientSecret,
                redirectUri:kakao.redirectUri,
                code, //이전것 : code:req.query.code,
            })
        })
    }catch(err){
        res.json(err.data)
    }

    let user;
    try{
        user=await axios({
            method:'GET',
            url:'https://kapi.kakao.com/v2/user/me',
            headers:{
                Authorization:`Bearer ${token.data.access_token}`
            }
        })
    }catch(err){
        res.json(err.data)
    }

    // req.session.kakao=user.data;
    
    const authData = {
        ...token.data, //깊은 복사 
        ...user.data,    
    }

    session.authData = {  //이전 것 : req.session.authData = {~}
        //해당 로그인한 내용으로다가
        ["kakao"]:authData,
    }
    console.log(session) //이전 것 : req.session

    res.redirect('/');
})

2교시에는 info 쪾 ~

=====================================2교시===================================

info 수정하기

session부분 console

저 kakao:{} 부분이 따로 kakao만 관리하는 거

kakao값 가져오기

app.get('/auth/info', (req,res)=>{
    const provider = Object.keys(req.session.authData)[0] //Object안에 keys()라는 매서드 사용 
    console.log(provider);

    res.render('info.html');
})

req.session.authData.kakao 도 가능

if vs switch

if 문 비교연산자 boolean 반드시 필요

switch 안에 드러간 값이 무엇 이 냐

server.js

app.get('/auth/info', (req,res)=>{
    const provider = Object.keys(req.session.authData)[0] //Object안에 keys()라는 매서드 사용 
    console.log(provider);

    let userinfo={}
    switch(provider){
        case "kakao" :
            userinfo={
                userid:req.session.authData[provider].properties.nickname,
            } 
        break;
    }

    res.render('info.html',{
        userinfo,
    });
})

provider 이 변수의 값이 kakao일 때 실행하고 나가라 ~

info.html

당신의 id는 {{userinfo.userid}}입니다. 
프로필 사진 
<!--<img src="{{profile_image}}">-->

server on -> localhost:3000 로그인 -> 회원정보 -> 내용이 뜸 !

req.session 안의 authData 객체를 변수에 담아서 코드 줄이기

app.get('/auth/info', (req,res)=>{
    const {authData}=req.session;
    const provider = Object.keys(authData)[0] //Object안에 keys()라는 매서드 사용 
    console.log(provider);

    let userinfo={}
    switch(provider){
        case "kakao" :
            userinfo={
                userid:authData[provider].properties.nickname,
            } 
        break;
    }

    res.render('info.html',{
        userinfo,
    });
})

Switch 문이란 ?

if 문에서 == 만 활용할 때, 같다 표현이 복수일 때

가독성이 좋음

기능적인 면에는 차이가 크게 없

console.log('switch문 이해하기');

let gender = '남자';

if(gender=='남자'){
    console.log(1);
}else if (gender=='여자'){
    console.log(2);
}


switch(gender){
    case '남자' :
        console.log(1);
        break;
    case '여자' :
        console.log(2);
}

break 용이함

default 값 : if문의 else{} 기능

If vs switch 조금 다른 점

switch 문은break으로 꼭 끊어야 아래쪽으로 더 안내려감

if 는 break; 쓸 수 있지만 굳이 안써도 continue; 되지 않음

let 과일 = '사과' 로 바꾸면 case : '사과' 인곳부터 쭉 출력됨

switch 문 설명 및 예제

https://blckchainetc.tistory.com/190

[JavaScript] Switch ...case 조건문과 if ...else 차이는? 예제로 알아보기 자바스크립트 switch문

switch 문 (swith... case : .... break;) switch문은 if문과 기능이 거의 비슷하다. switch 조건문은 if문으로 변형 가능하지만 if문 대신 switch문을 쓰는 이유는 간결성, 가독성이다. 보통 if문 == 같다를 표현..

blckchainetc.tistory.com

로그인 여부 체크

const authMiddleware = (req,res,next)=>{
    const {session} = req; 
    if(session.authData==undefined){
        console.log('로그인이 안되어 있음 ');
        res.redirect('/?msg=로그인 안되어 있음')
    }else{
        console.log('로그인 되어 있음 ')
        next();
    }
}

app.get('/auth/info',authMiddleware, (req,res)=>{
    
    const {authData}=req.session;
    const provider = Object.keys(authData)[0] //Object안에 keys()라는 매서드 사용

auth/info 들어오면 -> authMiddleware 로 감 -> session값 존재 안하면 돌려보내기 -> 있으면 console찍고 next() -> /auth/info아래쪽 다 실행

server on -> 로그인 안하고 회원정보 누르면 -> 로그인 안되어 있음 나옴

로그인 하고 회원정보 누르면 - > 로그인 되어 있음 console.log에 나옴.

카카오 회원 탈퇴 ? data를 통해

views - index.html 버튼 추가

<a href="/auth/kakao">카카오 로그인</a>
<a href="/auth/info">회원정보</a>
<a href="/auth/kakao/unlink">카카오 탈퇴</a>

위의 /auth/kakao/unlink를 받는 라우터 만들기

server.js

app.get('/auth/kakao/unlink',async(req,res)=>{
    const {session} = req;
    const {access_token} = session.authData.kakao;

    console.log(access_token);
    //요청 해야함 -> axios 이용해서 ! -> asynt & await 달아줘 
    //내용 담아서 kakao에 보내줘야해 ' 이제 회원 탈퇴 할거야~'
    //카카오가 응답 줄거야
    let unlink; 
    try{   //axios 요청 실패를 위해 try catch문 씀 
        unlink = await axios({ //unlink 변수에 요청값 담음 
        	//await : axios 의 값 Promise 값이 resolved 뜰 때까지 기다리겠다. 
            method:'POST',
            url:'https://kapi.kakao.com/v1/user/unlink',  //여기로 보낼거다 
            headers: {
                Authorization:`Bearer ${access_token}`
            }
        })
    }catch(err){
        res.json(err.data)
    }
    console.log(unlink)
})

access 토큰 활용하자 변수에 담아서 사용한것 !

<- 요 부분

server on -> 로그인 -> 탈퇴 눌러보기

우리가 필요한 값

-> data.id

data.id 값만 나오게 console.log 수정

console.log(unlink.data)

session 삭제 코드 추가

app.get('/auth/kakao/unlink',async(req,res)=>{
    const {session} = req;
    const {access_token} = session.authData.kakao;

    console.log(access_token);
    //요청 해야함 -> axios 이용해서 ! -> asynt & await 달아줘 
    //내용 담아서 kakao에 보내줘야해 ' 이제 회원 탈퇴 할거야~'
    //카카오가 응답 줄거야
    let unlink; 
    try{
        unlink = await axios({
            method:'POST',
            url:'https://kapi.kakao.com/v1/user/unlink',
            headers: {
                Authorization:`Bearer ${access_token}`
            }
        })
    }catch(err){
        res.json(err.data)
    }
    console.log(unlink.data)

    const {id} = unlink.data; //unlink안 data안의 객체 id를 변수 id에 담아 사용 
    // 요 값이 떨어진 이유 : kakao에서 이미 요청 아이디를 탈퇴 완료 시킨 것 (카카오 측에서) 
    // 우리쪽에서 할 일 : session 지워주기 
    if(session.authData["kakao"].id==id){
        delete session.authData;
    }

    res.redirect('/?msg=로그아웃 되었습니다.')
})

server on -> 로그인 -> 탈퇴 -> url 변화값 쳌

msg get 값으로 보낸거 보완해보기

server.js ('/') 부분 추가

app.get('/', (req,res)=>{
    const {msg} = req.query;
    res.render('index.html',{
        msg,
    })
})

index.html

<a href="/auth/kakao">카카오 로그인</a>
<a href="/auth/info">회원정보</a>
<a href="/auth/kakao/unlink">카카오 탈퇴</a>

{% if msg %}
<script type = "text/javascript">
    alert("{{msg}}")
</script>
{% endif %}

server on -> alert 뜸.

ㅇ

우리가 만든 middleware 방금 만든 unlink 쪽에 달기

app.get('/auth/kakao/unlink',authMiddleware ,async(req,res)=>{

->로그인 안된 상태에서 unlink 회원 탈퇴 누르면 '로그인 안되어 있씁니다' 나오도록

-> middleward 쓰면 js 로 일일이 안써도 됨 !

local login 만들기

views - index.html

<a href="/auth/kakao">카카오 로그인</a>
<a href="/auth/info">회원정보</a>
<a href ="/login">로그인</a>
<a href="/auth/kakao/unlink">카카오 탈퇴</a>

{% if msg %}
<script type = "text/javascript">
    alert("{{msg}}")
</script>
{% endif %}

server.js login 추가

app.get('/', (req,res)=>{
    res.render('login.html');
})

views - login.html 생성, 코드 추가

<form action ="/login" method="post">
    <input type="text" name="userid">
    <input type="password" name="userpw">
    <input type="submit" value="로그인">

</form>

server.js에 post로 받는 /login 작성 -> bodyparser 설치

$npm install body-parser

server.js bodyparser 가져오기

const bodyParser=require('body-parser');

app.use(bodyParser.urlencoded({extended:false,}));

server on -> 로그인 -> 아이디 'root', 비번 'root' -> 성공 / else 실패

이제 오류고치기

info 쪽에 아직 kakao 밖에 없음

로그인하고 회원정보 보기 하면 안나와 -> info 에 local 추가

app.get('/auth/info',authMiddleware, (req,res)=>{
    
    const {authData}=req.session;
    const provider = Object.keys(authData)[0] //Object안에 keys()라는 매서드 사용 

    let userinfo={}
    switch(provider){
        case "kakao" :
            userinfo={
                userid:authData[provider].properties.nickname,
            } 
        break;
        case "local" : 
            userinfo ={
                userid:authData[provider].userid,
            }
        break;
    }

    res.render('info.html',{
        userinfo,
    });
})

server on -> 로그인 -> 회원정보 들어가보면 이제 잘 뜸 !

로그인이 되었을 때 보이는 버튼들, session값이 없을 ㄸㅐ 보이는 버튼들 구분하기

server.js

app.get('/', (req,res)=>{
    const {msg} = req.query;
    console.log(req.session.authData);
    res.render('index.html',{
        msg,
        loginInfo:req.session.authData,
    })
})

server on -> 카카오 로그인 -> local 로그인 하면 login이 덮어씌워짐.

이런 경우 따로따로 (?) 뭔갈 하는게 좋다고 함. 근데 시간부족이면 다시 로그인 버튼 안보이게 만들기

index.html

{% if loginInfo ==undefined %}
<!--로그인 처리가 안됐을경우-->
<a href="/auth/kakao">카카오 로그인</a>
<a href ="/login">로그인</a>
{% else %}
<!--로그인 처리 됐을경우-->
<a href="/auth/info">회원정보</a>
<a href="/auth/kakao/unlink">카카오 탈퇴</a>
{% endif %}

{% if msg %}
<script type = "text/javascript">
    alert("{{msg}}")
</script>
{% endif %}

server on -> 로그인해서 check !

local 로그아웃 버튼 만들기 -> 하나의 로그아웃 버튼으로 둘다 가능하게 만들기

index.html

{% if loginInfo ==undefined %}
<!--로그인 처리가 안됐을경우-->
<a href="/auth/kakao">카카오 로그인</a>
<a href ="/login">로그인</a>
{% else %}
<!--로그인 처리 됐을경우-->
<a href="/auth/info">회원정보</a>
<a href="/auth/logout">로그아웃</a>
<!-- <a href="/auth/kakao/unlink">카카오 탈퇴</a> -->
{% endif %}

{% if msg %}
<script type = "text/javascript">
    alert("{{msg}}")
</script>
{% endif %}

server.js ('/auth/logout) kakao/ local 구분 하기

app.get('/auth/logout', (req,res)=>{
    const {session} = req;
    const {authData} = session;
    const provider = Object.keys(authData)[0];
    switch(provider){
        case "local" : 
            //local 로그아웃 redirecteh 되지만 간단하니까
            delete session.authData;
            res.redirect('/?msg=로그아웃 되었습니다.')

        break;
        case "kakao" :
            //카카오일 때 로그아웃
            res.redirect('/auth/kakao/unlink')
        break;
    } 
})

server on -> check !

전체 코드

server.js

const express=require('express');
const nunjucks=require('nunjucks');
const axios=require('axios');
const qs=require('qs');
const session=require('express-session');
const { urlencoded } = require('express');
const bodyParser=require('body-parser');
const app = express();

nunjucks.configure('views', {
    express:app,
})
app.set('view engine','html');
app.use(bodyParser.urlencoded({extended:false,}));

app.use(session({
    secret:'aa',
    resave:true,
    secure:false,
    saveUninitialized:false,
}))

const kakao={
    clientID : 'f219cecc72f1eb145e7aawedsfsdfzxbdfc0e323f',
    clientSecret : 'ucuZ7zI3KKaeMiXZsdcsfwdfbdfgdaefsdvsnGBvi',
    redirectUri : 'http://localhost:3000/auth/kakao/callback'
}   

app.get('/', (req,res)=>{
    const {msg} = req.query;
    console.log(req.session.authData);
    res.render('index.html',{
        msg,
        loginInfo:req.session.authData,
    })
})

app.get('/auth/kakao', (req,res)=>{
    const kakaoAuthURL = `https://kauth.kakao.com/oauth/authorize?client_id=${kakao.clientID}&redirect_uri=${kakao.redirectUri}&response_type=code&scope=profile,account_email`;
    res.redirect(kakaoAuthURL);
})

app.get('/auth/kakao/callback', async (req,res)=>{
    const {session,query} = req; //req안에 session,query라는 객체가 있는데 저기에 담음 
    const {code} = query; //req.query.code => code 변수에 넣은것뿐,,
    //req.session -> session 으로 줄임 

    let token;
    try{
        token=await axios({
            method:'POST',
            url:'https://kauth.kakao.com/oauth/token',
            headers:{
                'content-type':'application/x-www-form-urlencoded'
            },
            data:qs.stringify({
                grant_type:'authorization_code',
                client_id:kakao.clientID,
                client_secret:kakao.clientSecret,
                redirectUri:kakao.redirectUri,
                code, //이전것 : code:req.query.code,
            })
        })
    }catch(err){
        res.json(err.data)
    }

    let user;
    try{
        user=await axios({
            method:'GET',
            url:'https://kapi.kakao.com/v2/user/me',
            headers:{
                Authorization:`Bearer ${token.data.access_token}`
            }
        })
    }catch(err){
        res.json(err.data)
    }

    // req.session.kakao=user.data;
    
    const authData = {
        ...token.data, //깊은 복사 
        ...user.data,    
    }

    session.authData = {  //이전 것 : req.session.authData = {~}
        //해당 로그인한 내용으로다가
        ["kakao"]:authData,
    }
    console.log(session)

    res.redirect('/');
})


app.get('/login', (req,res)=>{
    res.render('login.html');
})


app.post('/login', (req,res)=>{
    console.log(req.body);
    const {session,body} =req;
    const {userid,userpw} = body;
    //userid, userpw 값 가지고 db 조회 -> 일단 가정 db처리 되었다고 가정
    //userid root userpw root일때 성공하는 시나리오 작성
    if(userid =='root' && userpw == 'root'){
        //로그인 성공 -> session 에 값을 담기 
        const data = {
            userid,
        }
        session.authData = { //session에 내용 담기 
            ["local"] : data,
        }
        
        res.redirect('/?msg = 로그인 성공!');

    }else{
        //로그인 실패 
        res.redirect('/?msg=아이디와 패스워드 확인해주세요')
    }
})


const authMiddleware = (req,res,next)=>{
    const {session} = req; 
    if(session.authData==undefined){
        console.log('로그인이 안되어 있음 ');
        res.redirect('/?msg=로그인 안되어 있음')
    }else{
        console.log('로그인 성공 ')
        next();
    }
}

app.get('/auth/info',authMiddleware, (req,res)=>{
    
    const {authData}=req.session;
    const provider = Object.keys(authData)[0] //Object안에 keys()라는 매서드 사용 

    let userinfo={}
    switch(provider){
        case "kakao" :
            userinfo={
                userid:authData[provider].properties.nickname,
            } 
        break;
        case "local" : 
            userinfo ={
                userid:authData[provider].userid,
            }
        break;
    }

    res.render('info.html',{
        userinfo,
    });
})

app.get('/auth/kakao/unlink',authMiddleware ,async(req,res)=>{
    const {session} = req;
    const {access_token} = session.authData.kakao;

    console.log(access_token);
    //요청 해야함 -> axios 이용해서 ! -> asynt & await 달아줘 
    //내용 담아서 kakao에 보내줘야해 ' 이제 회원 탈퇴 할거야~'
    //카카오가 응답 줄거야
    let unlink; 
    try{
        unlink = await axios({
            method:'POST',
            url:'https://kapi.kakao.com/v1/user/unlink',
            headers: {
                Authorization:`Bearer ${access_token}`
            }
        })
    }catch(err){
        res.json(err.data)
    }
    console.log(unlink.data)

    const {id} = unlink.data; //unlink안 data안의 객체 id를 변수 id에 담아 사용 
    // 요 값이 떨어진 이유 : kakao에서 이미 요청 아이디를 탈퇴 완료 시킨 것 (카카오 측에서) 
    // 우리쪽에서 할 일 : session 지워주기 
    if(session.authData["kakao"].id==id){
        delete session.authData;
    }

    res.redirect('/?msg=로그아웃 되었습니다.')
})

app.get('/auth/logout', (req,res)=>{
    const {session} = req;
    const {authData} = session;
    const provider = Object.keys(authData)[0];
    switch(provider){
        case "local" : 
            //local 로그아웃 redirecteh 되지만 간단하니까
            delete session.authData;
            res.redirect('/?msg=로그아웃 되었습니다.')

        break;
        case "kakao" :
            //카카오일 때 로그아웃
            res.redirect('/auth/kakao/unlink')
        break;
    } 
})

app.listen(3000,()=>{
    console.log('server start port: 3000')
})

views - index.html

{% if loginInfo ==undefined %}
<!--로그인 처리가 안됐을경우-->
<a href="/auth/kakao">카카오 로그인</a>
<a href ="/login">로그인</a>
{% else %}
<!--로그인 처리 됐을경우-->
<a href="/auth/info">회원정보</a>
<a href="/auth/logout">로그아웃</a>
<!-- <a href="/auth/kakao/unlink">카카오 탈퇴</a> -->
{% endif %}

{% if msg %}
<script type = "text/javascript">
    alert("{{msg}}")
</script>
{% endif %}

views - login.html

<form action ="/login" method="post">
    <input type="text" name="userid">
    <input type="password" name="userpw">
    <input type="submit" value="로그인">
</form>

views-info.html

당신의 id는 {{userinfo.userid}}입니다. 
프로필 사진 
<!--<img src="{{profile_image}}">-->

consle.log 다 지우기

axios 대신 js 내장 객체 fetch 로 해보기

fetch 의 결과값 promise

server.js

login2 새로 생성

app.get('/login2',(req,res)=>{
    console.log(req.headers);
    res.send('ok')
})

<form action ="/login" method="post">
    <input type="text" name="userid">
    <input type="password" name="userpw">
    <input type="submit" value="로그인">
</form>

<button id ="req" >요청테스트</button>
<span class="root">

</span>

<script type="text/javascript">
    const btn = document.querySelector('#req');
    btn.addEventListener('click',()=>{
        console.log('req check');
        //첫번째 인자값, 두번째 인자값 optional
        fetch('http://localhost:3000/login2',{
            method:'GET' ,
        }) //promise object 
        .then(data=>{
            console.log(data);
        })
    })

</script>

header란?

요청을 보낼 때 req -> headers / body 가 부분들이 있다.

req -> client -> server 보낸 요청

console.log 찍힌 data 내용에

accept : */* -> 모든 사용자 가능

referer : 내가 정확히 어떤 url인가

*HTTP 리퍼러를 정의한 RFC에서 'referrer'를 'referer'라고 잘못 친 것에서 기인하여 HTTP 리퍼러는 'HTTP referer'라고 불린다.

응답 내용을 바꿔서 보내는걸 해보기

app.get('/login2',(req,res)=>{
    console.log(req.headers);
    res.setHeader('Content-Type', 'application/x-www-form-urlencoded')
    res.send('ok')
})

-> 안됨

-> 아래처럼 ㄱ ㄱ

응답이 application json으로 바뀜

문서를 주고 받을 때는 content type이 무엇인지 header에서 내용을 정의해서 보내기

응답에서 보낸 body값이 저 'ok' 부분이다

header : 내가 너희한테 어떤 데이터들로 값을 줄거야 라고 정의body: 실질적인 값을 담는 곳

server.js

app.get('/login2',(req,res)=>{
    console.log(req.headers);
    //res.setHeader('Content-Type', 'application/x-www-form-urlencoded')
    console.log(req.get('user-agent'));
    res.json({
        test:'ok',
    })
})

header에서 내가 사용하고 있는 윈도우, 브라우저 정보를 줌

header에 내용 담겨서 body 를 조작한다 (?)

우리가 원하는 값은 boy 내용

status : 200 = 성공했어 뜻

console.log에는 조금 다른 정보 -> 잘 보면 body에 있긴함. 내용 꺼내오기 ->

요청 완료되면 처리결과에 대한 객체 반환 함

1. 요청에 대한 객체 반환

2. promise 로 반환

body에 있는 내용 확인 방법

<script type="text/javascript">
    const btn = document.querySelector('#req');
    btn.addEventListener('click',()=>{
        console.log('req check');
        //첫번째 인자값, 두번째 인자값 optional
        fetch('http://localhost:3000/login2',{
            method:'GET' ,
        }) //promise object 
        .then(data=>{ // 처리결과 객체를 반환
            console.log(data);
            return data.json()
        })
        .then(json=>{ // json 인자값 받고 그걸 console.log하는거 
            console.log(json);
        })
    })

</script>

console.log -> test ok 뜸

<script type="text/javascript">
    const btn = document.querySelector('#req');
    btn.addEventListener('click',()=>{
        console.log('req check');
        //첫번째 인자값, 두번째 인자값 optional
        fetch('http://localhost:3000/login2',{
            method:'GET' ,
        }) //promise object 
        .then(data=>{ // 처리결과 객체를 반환
            console.log(data);
            return data.json()
        })
        .then(json=>{ // json 인자값 받고 그걸 console.log하는거 
            console.log(json);
            json.test
            const root = document.querySelector('.root');
            root.innerHTML = json.test;
        })
    })

</script>

server on -> check

실패로 만들기

app.get('/login2',(req,res)=>{
    console.log(req.headers);
    //res.setHeader('Content-Type', 'application/x-www-form-urlencoded')
    console.log(req.get('user-agent'));
    //req.set('content-type','application/x-www-form-urlencoded');
    res.status(400).json({text:'error'});
})

상태 코드 header영역에서 status 값이 200대면 성공 300~400 대는 에러

다시 status - 200으로 바꾸면 console.log ok뜸

header정보를 우리가 임의대로 추가해서 넣기

post값 보내듯이 header도 우리가 변경해서 보낼 수 있다.

server.js

app.get('/login2',(req,res)=>{
    console.log(req.headers);
    //res.setHeader('Content-Type', 'application/x-www-form-urlencoded')
    console.log(req.get('user-agent'));
    //req.set('content-type','application/x-www-form-urlencoded');
    res.set('token','aa');
    res.status(200).json({text:'error'});
})

'aa' 라는 내용을 header에 담아서 보내면 ?

server on -> 요청 테스트 클릭 -> f12 네트워크 확인

-> aa 출력 됨.

이거 사용한 적이 있음

카카오에서 여기서 내용을 뽑아다 사용한 것

get값을 보내기 위해 url에다가 token보내기 위험하니 header에 넣은 거다! 더 정확한 이유는 낼..

위처럼 사용해보기

app.get('/login2',(req,res)=>{
    console.log(req.headers);
    //res.setHeader('Content-Type', 'application/x-www-form-urlencoded')
    console.log(req.get('user-agent'));
    //req.set('content-type','application/x-www-form-urlencoded');
    res.set('token','aa');
    res.set('Authorization', 'Bearer asklfasidh') //아무 글자 
    res.status(200).json({text:'error'});
})

server on -> networks -> response header에 내용 추가되어 있음

* header X -> headers O

이제 post로 해보기

server.js

login2 get -> post 변경 -> server.on -> check

post인 상태로 ㄱ ㄱ

두 번째 인자값 : body: { }

        fetch('http://localhost:3000/login2',{
            method:'POST' ,
            headers:{
                'Content-type' : 'application/json'
            },
            body:{
                a:1,b:2
            }

post 경우 form 을 받아서 보내는데 content type

받을 수 없어서 errer

fetch를 써서 post로 값 넘길 때 body 거쳐서 간다.

body에 내용을 넣어 요청보내고 요청을 받은 server는 header의 정보읽고, body 내용을 읽어서

get -> queryString으로 간다.

post경우

server.js (express) -> qs

js -> JSON

        fetch('http://localhost:3000/login2',{
            method:'POST' ,
            headers:{
                'Content-type' : 'application/json'
            },
            body:JSON.stringify({a:1,b:2})
        }) //promise object

        fetch('http://localhost:3000/login2',{
            method:'POST' ,
            /*headers:{
                'Content-type' : 'application/json'
            },*/
            body:{a:1,b:2}
        }) //promise object

headers 주석처리하고 보내봐 -> [Object Object]나옴

string으로 만들어야함. 그 역할이 JSON.stringify

        fetch('http://localhost:3000/login2',{
            method:'POST' ,
            /*headers:{
                'Content-type' : 'application/json'
            },*/
            body:JSON.stringify({a:1,b:2})
        }) //promise object

server.js

app.post('/login2',(req,res)=>{
    console.log(req.headers);
    //res.setHeader('Content-Type', 'application/x-www-form-urlencoded')
    console.log(req.get('user-agent'));
    //req.set('content-type','application/x-www-form-urlencoded');
    res.set('token','aa');
    res.set('Authorization', 'Bearer askldfasidh')
    res.json({text:'ok'})
})

?????????혼돈

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

[50일차] 20210525 HTTP post, get 공부 (0)	2021.05.26
[49일차 복습] JavaScript & Oauth 기능으로 kakao login 연결하기 (0)	2021.05.25
[48일차 복습] JavaScript, node.js, Oauth 로 카카오 로그인 연결해보기 kakao login (0)	2021.05.24
[48일차] 20210521 KAKAO Login Javascript node.js express 카카오 로그인 연결하기 (2)	2021.05.21
[47일차]20210520 팀프로젝트 리뷰 / oAuth 2.0 Passport 찍먹 / 내일 다시 정확하게 배우기로 함. (0)	2021.05.21

GOOD DAY

[49일차] 20210524 javaScript 카카오 oauth 로그인 kakao login

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

티스토리툴바

[49일차] 20210524 javaScript 카카오 oauth 로그인 kakao login

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' Related Articles

티스토리툴바