Vue.js) 네이버 로그인(네아로) api 구현하기

 

0. 클라이언트 코드

<script src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>

 

 

1. 클라이언트 코드 <script>

naverLoginBtn() {

      var client_id = 'ㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇ';
      var callbackUrl = 'https://locolhost/login';//서버 주소
      var url = 'https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=' + client_id + '&redirect_uri=' + callbackUrl + '&state=1234';
      window.location.replace(url);

    }

 

2. 클라이언트 코드 <script>

mounted() {
    var self = this;
    try{
      //네이버로 로그인할때만 실행
      if(this.$route.query.code.length !== undefined){
        var callbackFuc = async () => {

          const res = await fetch('https://locolhost/api/sns_login_naver', {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              code: `${self.$route.query.code}`,
              state: `${self.$route.query.state}`,

            }),
          })
          const data = await res.json();
          console.log(`네이버 로그인 : ${data.email}`)
          
          //네이버 로그인 인증 코드 (nodejs api)

        }
        callbackFuc();
      }
    }catch (e){
      console.log(e)
    }
 }

 

 

3. 서버코드

......

router.post('/', async function (req, res, next) {

    var code = req.body.code;
    var state = req.body.state;


    if (!code || !state) {
        res.send(JSON.stringify({result: 'false'}));
    } else {
        try {
            var client_id = 'ㅁㄴㅇㄹㅁㄴㄹㅁ';
            var client_secret = 'ㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴ';
            var api_url = null;
            api_url = 'https://nid.naver.com/oauth2.0/token?grant_type=authorization_code&client_id='
                + client_id + '&client_secret=' + client_secret + '&code=' + code + '&state=' + state;
            
            var request = require('request');
            
            var options = {
                url: api_url,
                headers: {'X-Naver-Client-Id': client_id, 'X-Naver-Client-Secret': client_secret}
            };
            
            //토큰검사 request
            request.get(options, function (error, response, body) {
                if (!error && response.statusCode == 200) {



                    const obj = JSON.parse(body);//body가 String이기 때문에 json으로 파싱
					//값이 궁금하면 body console 찍어보기
                    
                    
                    var api_url1 = 'https://openapi.naver.com/v1/nid/me';
                    var token = obj.access_token;
                    var header = "Bearer " + token; // Bearer 다음에 공백 추가
                    var options1 = {
                        url: api_url1,
                        headers: {'Authorization': header}
                    };
                    
                    var request1 = require('request');
                    
                    //토큰을 이용해 이용자 정보 가져오기 request
                    request1.get(options1, async function (error, response, body1) {
                        if (!error && response.statusCode == 200) {


                            const result = JSON.parse(body1);
                            console.log(typeof result.response)

                            if(result.message == 'success'){
								//success면 이용자 정보 가져오기 성공
                                var email = result.response.email;
                                

                            } else {
                                //result fail
                                res.send(JSON.stringify({result: `error`}));
                            }

                        } else {
                            console.log('error');
                            if(response != null) {
                                res.status(response.statusCode).end();
                                console.log('error = ' + response.statusCode);
                            }
                        }
                    });

                } else {
                    res.send(JSON.stringify({result: `error`}));
                }
            });

        } catch (err) {
            res.send(JSON.stringify({result: "error"}));
            console.log("Query Error : " + err);
            throw err;
        }
    }

});

module.exports = router;