[Node.js] 사이트에서 네이버 아이디로 로그인 구현 (passport-naver)

이번 포스팅에서는 Node.js 기반 웹에서 Passport 모듈을 사용해 소셜 아이디 로그인을 구현하는 법을 포스팅 하려 한다.

#네아로 서비스

 

1. 네이버 개발자 센터 등록

먼저, 네이버 아이디로 로그인을 구현하기 위해서는 네이버 개발자 센터에서 API 신청을 먼저 해야 한다. 

https://developers.naver.com/main/

NAVER Developers

해당 사이트에서 빨간색으로 표시된 네이버 로그인으로 들어가야 한다.

 

그럼 다음과 같은 사이트가 나올텐데 여기서 open api신청으로 들어가주자.

 

해당 페이지에는 어플리케이션의 이름 (서비스 이름) 과 API 사용종류를 선택할 수 있다.

사용가능한 API의 종류는 여러가지가 있는데

우리는 로그인 기능만 사용할 것 이므로 기존에 선택되어있는 네이버 로그인만 채워주면 된다.

각각의 상황에 맞춰서 사용할 데이터들을 취사선택 해주시면 된다.

필자의 경우에는 아이디, 이메일, 닉네임 정도만 있으면 되서 3개를 필수로 줬고 나머지는 수집하지 않았다.

 

연령대 데이터나 프로필 사진이 꼭 필요한 경우라면 추가해도 좋을 것 같다.

 

이후에는 

API환경을 선택해 주어야 하는데, 이것 역시 취사선택을 하시고

필자는 PC웹을 선택했다.

해당화면이 나오게 되면 위에는 본인이 서비스 하는 페이지의 url을 입력해주면 된다.

예를들어 

http://localhost:8080 같이 말이다.

포트번호는 80기본이라면 입력을 안해도 되고, https 환경이라면 443을 따로 입력하지 않아도 된다.

 

그리고 그 다음인 callback url인데 이는 로그인 성공여부결과를 받는 url이다.

 

필자의 경우에는 http://localhost:8080/auth/naver/callback 의 형태로 입력했다.

 

다 입력해주고 하단의 등록버튼을 누르면 

좌측 내 애플리케이션탭에 등록이 된것을 확인할 수 있다.

여기서 저 scoreloader을 눌러 접근하면, 

이런 창이 나오는데 이 두개의 값을 꼭 저장해주어야 한다. 웹서버 상에서 사용해야 한다.

 

 

2. node.js 상에서 준비

node상에서는 프로젝트 폴더에 들어간 뒤, npm install passport-naver 을 실행시켜 주자.

http://www.passportjs.org/packages/passport-naver/

passport-naver

해당 사이트는 예제를 소개해주는 사이트인데

 

코드를 잠깐 살펴보면

var NaverStrategy = require('passport-naver').Strategy;

passport.use(new NaverStrategy({
        clientID: config.naver.clientID,
        clientSecret: config.naver.clientSecret,
        callbackURL: config.naver.callbackURL
    },
    function(accessToken, refreshToken, profile, done) {
        User.findOne({
            'naver.id': profile.id
        }, function(err, user) {
            if (!user) {
                user = new User({
                    name: profile.displayName,
                    email: profile.emails[0].value,
                    username: profile.displayName,
                    provider: 'naver',
                    naver: profile._json
                });
                user.save(function(err) {
                    if (err) console.log(err);
                    return done(err, user);
                });
            } else {
                return done(err, user);
            }
        });
    }
));

이 코드에서 clientID와 clientSecret를 요구하는 부분이 4번째줄에 존재한다. 해당 값이 아까 기억하라고 했던 값이다.

값을 하드코딩하는것보단 저렇게 파일을 만들어서 접근하게 하는 편이 좋다. 

 

모든 소스코드를 설명하기에는 너무 양이 많으니 위에 올린 사이트를 따라 적절하게 수정하여 사용하면 될 듯하다.

추가로  profile의 내용을 설명하면 

내용 출력은 다음과 같이 된다.

해당 내용은 위의 코드의 7번째줄 profile의내용을 콘솔출력한 내용이다. 

다음과 같이 나와있으니 필요한 내용을 본인의 DB에 맞춰 입력해주면 된다.