Passport.js 를 이용한 페이스북 소셜 로그인

rkdghwnd·2023년 6월 3일

페이스북 소셜 로그인 구현 전 환경 세팅

passport, cookie-parser, express-session 등의 세팅에 대한 내용은 로컬 로그인 참고

passport.js 이용한 페이스북 소셜 로그인 구현하기

페이스북 로그인 전략에 대한 공식문서

npm install --save passport-facebook

페이스북 로그인 API 작성하기

routes/user.js

...
// 페이스북 로그인
router.get("/facebook/auth", isNotLoggedIn, passport.authenticate("facebook"));

router.get(
  "/facebook/callback",
  passport.authenticate("facebook", { failureRedirect: "/" }),
  function (req, res) {
    res.redirect(process.env.FRONT_END_DOMAIN);
  }
);
...

passport 페이스북 소셜 로그인은 두개의 API가 필요하다

페이스북 서버로 인증요청을 보내는 API
페이스북 서버로부터 인증정보를 받아 facebookStrategy를 실행하는 API

facebookStrategy 작성하기

passport/facebookStrategy.js

const passport = require("passport");
const FacebookStrategy = require("passport-facebook").Strategy;
const { User } = require("../models");
const dotenv = require("dotenv");
dotenv.config();

module.exports = () => {
  passport.use(
    new FacebookStrategy(
      {
        clientID: process.env.FACEBOOK_APP_ID,
        clientSecret: process.env.FACEBOOK_APP_SECRET,
        callbackURL: `${process.env.BACK_END_DOMAIN}/user/facebook/callback`,
        profileFields: ["id", "displayName", "email"],
      },
      async (accessToken, refreshToken, profile, done) => {
        console.log("facebook profile", profile);
        try {
          const exUser = await User.findOne({
            where: { snsId: profile.id },
          });
          if (exUser) {
            done(null, exUser);
          } else {
            const newUser = await User.create({
              email: profile._json && profile._json.email,
              password: "",
              nickname: profile.displayName,
              introduce: "",
              provider: "facebook",
              snsId: profile.id,
            });
            done(null, newUser);
          }
        } catch (error) {
          console.error(error);
          done(error);
        }
      }
    )
  );
};

공식문서에 의거해 facebookStrategy를 작성한다

clientID : facebook developers로 부터 발급받은 facebook app ID
clientSecret : facebook developers로 부터 발급받은 facebook app secret code
callbackURL : 페이스북 서버가 인증정보를 보낼 URL
profileFields : 페이스북 서버로부터 가지고 올 계정정보

facebook developers에 내 앱 등록하기

facebook에 로그인한 후 facebook developers에 앱을 등록한다.

앱 모드는 개발 -> 라이브로 바꾼다

페이스북 로그인은 개발모드에서 작동하지 않는다. 구현 후에 배포환경에서 확인해야하니 미리 라이브로 바꿔주자

설정 -> 기본설정 클릭
아래의 웹사이트 항목에 사이트URL을 적어준다.

설정 -> 고급설정 클릭
리디렉션 공유 허용 리스트를 활성화 시킨다.

Facebook 로그인 -> 설정 클릭
클라이언트 OAuth 로그인, 웹 OAuth 로그인 항목을 활성화 시킨다
프로젝트가 HTTPS를 적용했다면 HTTPS 적용또한 활성화 시킨다.
마지막으로 유효한 OAuth 리디렉션 URI에 Redirection URI를 적는다.
URI는 프로토콜까지 정확하게 기입해야 한다.

앱 검수 -> 권한 및 기능 클릭
대부분의 계정정보는 권한이 허용되어있지만 추가 권한을 사용하는경우 권한 허용을 해주어야 한다.

페이스북 로그인 버튼 만들기

페이스북 로그인은 href로 연결해야 정상적으로 작동한다.
a 태그를 이용해 구현할 수 있다.

...
	 <a href={`${process.env.NEXT_PUBLIC_BACK_END_DOMAIN}/user/google/auth`}>
        <img
          src={`${process.env.NEXT_PUBLIC_FRONT_END_DOMAIN}/images/google-auth-image.png`}
        ></img>
      </a>
...