passport-github

GitHub으로 로그인(GitHub strategy) 저번 포스터에서는 passport-loacl를 통한 로그인에 대한 자세한 과정을 다뤄봤다. local이랑 구현하는 방법이 어느정도 차이가 있어서 이렇게 블로그를 작성해본다.

설치:

npm install --save passport-github

구현

GitHub OAuth페이지에서 애플리케이션을 등록 후 받은 clientID, clientSecret값을 보안을 위해 환경변수로 설정하여 입력한다.
OAuth페이지에 입력한 callback URL(인증 후 받을 request URL)을 입력한다.

module.exports = ()=>{
    passport.use(new GithubStrategy({
        clientID: process.env.GITHUB_CLIENT_ID,
        clientSecret: process.env.GITHUB_CLIENT_SECRETS,
        callbackURL:"http://localhost:3065/user/github/callback"
    },async (accessToken, refreshToken, profile, done)=>{
        try{
            const { name, id, email } = profile._json;
            const user = await User.findOne({
                where:{
                    githubId:id,
                }
            })
            if(!user){
                const newUser = await User.create({
                    email:email?email:null,
                    githubId:id,
                    nickname:name,
                    password:null,
                })
                return done(null,newUser);
            }
            return done(null,user);
        }catch(error){
            console.error(error);
            return done(error);
        }
    }
    ))
}

userRouter.js

router.get('/github',passport.authenticate('github'));
router.get('/github/callback',
           passport.authenticate('github',{successRedirect:'http://localhost:3000'}));

passport/index.js

module.exports = () =>{
    passport.serializeUser((user,done)=>{
        done(null, user.id);
    });

    passport.deserializeUser(async(id, done)=>{
        try{
            const user = await User.findOne({
                where:{
                    id,
                },
            });
            done(null, user);
        }catch(error){
            console.error(error);
            done(error);
        }
    });
    github();
    local();
};

🛠구현하면서 생긴문제:

github 로그인은 성공적으로 되나 로그인한뒤로 유저정보 가져오기를 구현하기가 너무 힘들었다.
local 전략이랑 다른점이 github 전략은 이처럼 OAuth페이지에 입력한 callback URL(인증 후 받을 request URL)을 입력한다. callback url 에서 유저정보를 보내준다 그래서 똑같이 axios 요청으로 해서 다시유저정보를 클라이언트로 돌려받을려하면 callback 출저랑 클라이언트 출저가 달라서 cors에러가 뜬다 사실상 서버에서는 로그인이 성공했는데 해당 유저를 바로 callbackURL 에서 클라이언트로 보내는데에 문제가 생기니깐

router.get('/github/callback',
           passport.authenticate('github',{successRedirect:'http://localhost:3000'}));

이렇게 로그인이 성공하면 그냥 다시 클라이언트 주소로 리다이렉트를 시키고
다시 페이지가 렌더링이 될때 useEffect를 통해서 다시 클라이언트에서 서버로 유저정보 담김 쿠키정보와 같이 보내준다. 로그인이 되있다면 유저정보를 가져오는 절차를 추가해서 유저정보를 가져오는걸 구현했습니다.

export default function Home() {
  const dispatch = useDispatch();
  const {mainEffects,loadEffectsLoading,hasMoreEffects} = useSelector((state)=>state.effect);
  useEffect(()=>{
    dispatch({
      type:LOAD_MY_INFO_REQUEST 
      // 요청을 보내서 유저정보를 가져온다
    })
	.....
  },[])
  ....
  )
}

느낀점

이번 문제해결를 통해서 cookie, session 에대해서 한층 더 깊게 이해하게 되었다. 하지만 아직도 accessToken, refreshToken 에 대해서 잘 알지 못하기 때문에 추가적으로 알아봐서 다른 해결방안을 고민해봐야겠다.