[nodejs] Node.Js 활용하기 - 섹션 5. 타사인증 (Federation authentication)

Federation authentication 1 : intro

Passportjs - local방식 ❌ -> Facebook, Google, Kakao 같이 많은 사람들이 이미 회원가입되어 있는 기관의 정보를 사용해서 인증을 하는 방식.

• 사용자가 회원가입을 위해 복잡한 절차를 거치지 않아도 됨
• 사용자의 정보를 보관하는 것은 서비스를 제공하는 입장에서 부담스러운 일 -> 거대 자본을 가진.. 기업들에게 맡기고..^^
• 해당 서비스에 종속되는 느낌이 드는 것이 단점.

Federation authentication 2 : facebook

https://www.passportjs.org/packages/passport-facebook/

passport-facebook

facebook이 meta로 바뀌고.. 아무튼 그 사이 많은 게 바뀌어서 강의에서 보여주는 developer페이지와는 조금 달랐다. 그래서 구글링 잔뜩했는데 결론적으로 app id랑 secret key만 알아내면 다른 건 딱히 안해도 괜찮은 것 같다..(?)

https://developers.facebook.com/

일단 등록을 하고 > 새로운 앱 만들기 까지는 동일한데, 여기서 웹 서비스를 선택하는 항목은 없고, 앱에 필요한 기능이라고해서 이것저것 있는데 나는 '연결된 환경 구축'을 선택했다. 그냥 이게 제일 맞는 것 같아서 했는데 딱히 뭘 선택하든 상관이 없는 것 같기도 하고 검색해보니 기타를 선택하는 경우가 많은 것 같았다.

 

그리고 나면 제품추가에 Facebook 로그인이라는 것이 있다. 이곳의 설정을 누르면 클라이언트 OAuth 설정이라는 페이지가 나오는데 여기서 유효한 OAuth 리디렉션 URI를 입력해야 한다고해서 localhost 주소를 넣었더니 'http://localhost 리디렉션은 개발 모드에 있는 동안만 자동으로 허용되며 여기에 추가하지 않아도 됩니다.' 라는 메시지가 떴고 어떻게 해야 되나.. 하다가 그냥 그대로 냅두고 사이드바의 설정 > 기본설정 을 들어갔다.

 

여기서 app ID와 secret key를 확인할 수 있다. 도메인이랑 이것저것 또 입력하라고 하는데 아무거나 넣으니 또 안돼서 일단 이것도 패스..했다^^

 

일단 facebook 설정은 이쯤하고, passportjs-facebook을 설치한다.

npm install --save passportjs-facebook

passportjs-facebook을 사용하려면 Strategy를 추가해야 한다.

var FacebookStrategy = require('passport-facebook').Strategy;

passport.use(new FacebookStrategy({
    clientID: '',
    clientSecret: 'secret key는 절대로 유출되면 안된다고 한다',
    callbackURL: "http://localhost:3003/auth/facebook/callback", //앞에 localhost는 빼도 무방하다.
    profileFields: ['id', 'email', 'gender', 'link', 'locale', 'name', 
                    'timezone', 'updated_time', 'verified', 'displayName'] //email과 같이 scope를 추가하려면 필요하다고 하다.
  },
  function(accessToken, refreshToken, profile, cb) { //profile이 중요하다.
    console.log(profile);
    var authId = 'facebook:'+profile.id; // 식별자를 따로 생성해준다. 앞으로 이것으로 user를 식별할 것이다.
    for (var i=0; i<users.length; i++){ // 이미 존재하는 사용자인지 체크
        var user = users[i];
        if (user.authId === authId){
            return cb(null, user); //로그인 성공
        }
    }
    var newUser = {
        'authId':authId,
        'displayName':profile.displayName,
        'email':profile.emails[0].value
    };
    users.push(newUser); //새로 가입
    cb(null, newUser); 
}
));

그리고 라우터를 연결해준다. 타사인증을 이용할때는 보통 라우터가 두 개 필요하다.

app.get('/auth/facebook',
    passport.authenticate(
        'facebook',
        {scope: 'email'} // facebook login scope 검색하면 다른 참조할 수 있는 정보들 확인 가능.
    )
);

app.get('/auth/facebook/callback',
    passport.authenticate('facebook', 
    { 
        failureRedirect: '/auth/login' 
    }),
    function(req, res) {
        // Successful authentication, redirect home.
        res.redirect('/welcome');
});

처음에 사용자가 Facebook 버튼을 누르면 /auth/facebook으로 연결되고 여기서 facebook으로 이동하여 redirect시킨다. 여기서 사용자가 동의를 하면, 그 결과는 /auth/facebook/callback으로 오게 되는 것이다. 그 이후에 작동하는 순서는 local과 동일하다.

 

그리고 authId로 식별자를 통일하기 위해 기존의 users 객체와 local 인증 부분에도 authId를 추가해서 코드를 수정했다.

앞에서 페이스북 설정을 제대로 안해서 오류가 날 것이라 생각했는데 warning은 있었으나 잘 동작하는 것을 확인할 수 있었다! 아마 실제 서비스에 구현을 하려면 그 설정들이 다 필요할 것이다. 지금은 개발환경에서 테스트해보는 거니까 여기서 만족!