[유튜브 클론코딩] 6.10 ~ 6.12 카카오로 로그인하기(페이스북x)

원래 해당 강의에서는 페이스북으로 로그인하는 방법을 알려주지만 페이스북은 보안이 강화되어있어서 여러가지 인증을 하는데 매우 불편하고 어려움이 있다. 우리 사이트는 http인데 페이스북에서는 https 방식의 사이트만 허용하고 있으므로 localtunnel이라는 것을 설치하여 우리의 사이트를 임시로 https처럼 보이게 하더라도 막혀있다.

 

그래서 카카오로 로그인 방식을 구현했다.

 

Kakao Developers 접속하여 로그인 해주기

developers.kakao.com/

Kakao Developers

 

내 애플리케이션 > 애플리케이션 추가하기

 

 

플랫폼 > Web > 사이트 도메인 등록하기

 

 

카카오 로그인 > Redirect URL 등록해주기 + 카카오 로그인 ON

 

 

카카오 로그인 > 동의항목 & 보안

🎃동의항목

동의항목에서 필요한 항목을 체크해준다. 예를 들면 나는 카카오톡 사용자의 프로필 사진과 이메일이 필요했으므로 그걸 체크했다. 필수항목으로 하면 좋겠지만 선택항목으로 체크하더라도 받아올 수 있으니까 그렇게 하면 된다. 사용자가 카카오로 로그인하기를 누르면 카카오 인증하는 곳으로 보내주고 거기서 동의를 하면 콜백함수가 실행되면서 profile같은 정보가 같이 전송되고, 그 정보를 가지고 사용자를 등록해야 하므로 여기서 필요한 항목을 잘 체크해주어야 필요한 정보를 받을 수 있다.

 

🎃보안

clientSecret이 필요한 경우 여기서 발급받는다.

 

kakao developers에서의 등록 및 설정이 끝났으면 우리 프로젝트에서 이제 코드를 작성한다.

깃허브 로그인 방식과 거의 유사하다.

 

passport-kakao 설치하기

설치: npm install passport-kakao

 

passport.js에서 KakaoStrategy 작성하기

import KakaoStrategy from "passport-kakao"; 

우선 이렇게 import 해준다.

 

passport.use(new KakaoStrategy({

  clientID : process.env.KAKAO_ID,

  clientSecret: process.env.KAKAO_SECRET, // clientSecret을 사용하지 않는다면 넘기지 말거나 빈 스트링을 넘길 것

  callbackURL : "http://localhost:4000/auth/kakao/callback"

}, kakaoLoginCallback)

);

clientID는 Kakao Developers의 내 애플리케이션 > 앱 설정 > 요약 정보 > 앱 키에서 REST API 키를 가져오면 되고

clientSecret은 위에서 말했듯이 보안에서 발급받아 가져오면 된다.

모두 보안이 지켜져야 하므로 .env 파일에 환경변수 형태로 만들고 process.env.KAKAO_ID 이런식으로 작성한다.

그리고 kakaoLoginCallback 이라는 함수를 담아준다.(뒤에서 작성할 것이다.)

 

kakaoLogin, kakaoLoginCallback, postKakaoLogin 함수 만들기 

export const kakaoLogin = passport.authenticate('kakao');

export const kakaoLoginCallback = async (accessToken, refreshToken, profile, cb) => {
    const {
        username: name,
        _json: {
            id : kakaoId,
            properties:{
                profile_image : avatarUrl
            },
            kakao_account:{
                email
            }
        }
    } = profile;
    console.log(name, email, avatarUrl, kakaoId);

    try{
        const user = await User.findOne({email});
        if(user){
            user.kakaoId = kakaoId;
            user.save();
            return cb(null, user);
        }
            const newUser = await User.create({
                email,
                name,
                kakaoId,
                avatarUrl
            });
            return cb(null, newUser);
    }catch(error){
        return cb(error);
    }
};

export const postKakaoLogin = (req, res) => {
    res.redirect(routes.home);
};

 

routes.js에서 필요한 경로 만들어주기

//KaKao
const KAKAO = "/auth/kakao";
const KAKAO_CALLBACK = "/auth/kakao/callback";

마찬가지로 const routes에도 kakao: KAKAO, kakaoCallback: KAKAO_CALLBACK을 추가해주는 것을 잊지 말자.

 

globalRouter.js에서 카카오 경로 만들어주기

globalRouter.get(routes.kakao, kakaoLogin);
globalRouter.get(
                routes.kakaoCallback,
                passport.authenticate('kakao', {failureRedirect: '/login'}),
                postKakaoLogin
                );