Federation authentication(타사인증) ③

이제 본격적으로 페이스북 타사인증을 진행해보자.

 

우선, 로그인할 때 사용할 페이스북 링크 html 을 추가한다.

 

app.get('/auth/login', function(req, res){
  // 페이스북 링크를 추가한다.
  var output = `
  <h1>Login</h1>
  <form action="/auth/login" method="post">
    <p>
      <input type="text" name="username" placeholder="username">
    </p>
    <p>
      <input type="password" name="password" placeholder="password">
    </p>
    <p>
      <input type="submit">
    </p>
  </form>
  <a href="/auth/facebook">facebook</a>
  `;
  res.send(output);
});

페이스북 링크를 누르면, 이동할 /auth/facebook 라우터를 만들어준다.

해당 라우터는, Passport.js 홈페이지에서 facebook 타사인증을 할 때 추가해야하는 라우터를 가져다가 붙인다.

 

(/auth/facebook 라우터)

app.get(
  '/auth/facebook',
  passport.authenticate(
    'facebook',
  )
);

 

기본 라우터를 만들었다면, 이제 페이스북 타사인증을 할 때, 새롭게 만들어야할 새로운 페이스북 전략을 만든다.

페이스북 개발자 로그인을 통해서 얻은 client ID 와 clientSecret 을 입력하고, callbackURL 을 정의해준다.

 

(new facebookstrategy)

passport.use(new FacebookStrategy({
    // 페이스북 새로운 ID 를 입력한다.
    clientID: ?,
    // 시크릿 코드를 입력.
    clientSecret: ?,
    // 페이스북을 활용할 때는, 콜백 URL 을 사용해야한다.
    callbackURL: "/auth/facebook/callback",
  }

 

callback 을 통해서 다시 돌아가는 URL 을 적어주고, 다시 돌아오는 URL 을 위해서 새로운 라우터를 만들어준다.

callback 의 기본적인 라우터 형식은 passport.js 홈페이지를 참고한다.

 

app.get(
  '/auth/facebook/callback',
  passport.authenticate(
    'facebook',
    {
      //성공했을 때
      successRedirect: '/welcome',
      //실패했을 때
      failureRedirect: '/auth/login'
    }
  )
);

 

페이스북으로 부터 정보를 제대로 전달받았다면, /welcome 으로 이동하고, 실패했다면, /auth/login 으로 다시 이동하게 한다.

 

타사인증을 진행할 때는, local에서 인증하는 것과는 다르게 2개의 라우터가 필요하다.

 

첫 번째 단계의 라우터는, 타사인증을 진행할 페이지로 이동하는 데 사용하는 라우터이다. (/auth/facebook)

두 번째 단계의 라우터는, 페이스북으로부터 받은 정보를 나의 local로 받아오는 데 사용하는 라우터이다. (/auth/facebook/callback)

 

이렇게 두 개의 라우터가 있어야 타사로부터 인증을 처리할 수 있게 된다.

passport-facebook

passport-facebook