카카오 로그인 연동하기

연동하기 전에는 Kakao Developers에서 가입후 진행해야합니다.

Kakao Developers

 

카카오 API인증 받기

가입후 내 애플리케이션 클릭.

 

애플리케이션 추가하기를 눌러줍니다.

 

현재 만드는 앱의 아이콘과 이름, 사업자명(본인이름)을 적어주고 저장을 합니다.

 

위에서 저장을 누르면 이렇게 앱키가 나오게 되는데 REST API 키를 저장해 놓습니다.

 

기억하기 - REST API키

 

 

이렇게 카카오 로그인 탭에가서 활성화를 ON상태로 바꿔줍니다.

 

기억하기 - Redirect URI(처음만들때는 비어져 있을텐데 이 부분은 서버에서 허가 받은다음 이동할 URL입니다.)

                  EX) http://localhost:3000/user/kakao/finish

                  ※주의 : 이 부분이 같지 않다면 페이지에서 에러가 뜹니다. 같은 경로를 사용해야합니다.

 

 

이 부분의 동의 항목도 사용할 부분들만 동의를 해줍니다. 저는 닉네임과 프로필을 동의 했습니다.

 

보안 탭으로 이동하여 Client Secret 코드를 기억해주고 활성화 상태도 사용함으로 바꿔줍니다.

 

기억해야 할것 정리 - REST API키, Redirect URI, Client Secret 코드

 

---

인가코드 받기

Kakao developers 공식사이트 로그인 구현 방법 안내

REST API를 사용한 카카오 로그인 과정을 나타낸 시퀀스 다이어그램(Sequence diagram)

 

카카오 로그인을 하기 위해선 위 1번째 step처럼 인가코드를 받아야 합니다.

위 링크를 들어가서 아래로 내리면 인가코드 받기, 토큰 받기등의 방법이 적혀있습니다.

 

요청을 이 경로로 해야하는 베이스 경로 입니다.

 

해당 파라미터로 보내야 하는 내용도 적혀있습니다.

 

이러한 내용들을 참고해서 카카오 로그인을 만들었습니다.

중요한건 해당 페이지에 나와있는 경로나 변수명에 오타가 있으면 안됩니다.

 

요청 예제

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}

홈페이지에 보면 이 경로로 요청을 보내도록 예제가 나와있습니다.

이러한 정보들을 토대로 로직을 짜겠습니다.

 

일단 동의 내역을 얻을수 있는 즉, 인가 내역을 받는 코드를 작성해야 합니다.

// 인가를 받기위한 로직
export const startKakaoLogin = (req, res) => {
  const baseUrl = "https://kauth.kakao.com/oauth/authorize"; // 인가 받는 베이스 url
  const config = {
    client_id: process.env.KAKAO_CLIENT, //REST API키
    redirect_uri: process.env.KAKAO_RIDIRECT_URL, // Redirect URI경로
    response_type: "code",
  };
  
  const params = new URLSearchParams(config).toString();
  // URLSearchParams 메서드는 객체에 나눠져 있는 문자열(config)을 URL 처럼 합쳐준다.
  // 오브젝트로 반환되기 때문에 toString()메서드를 사용하여 문자열로 바꿔줌
  
  // 최종 요청해야하는 URL
  // https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}

  const finalUrl = `${baseUrl}?${params}`; // 최종 생성되는 URL
  console.log(finalUrl);
  return res.redirect(finalUrl);
};

 

이렇게 받아오는 로직을 짠뒤 라우터에 경로를 지정해줍니다.

router.get("/kakao/start", startKakaoLogin);

그런뒤 브라우저에 localhost:3000/api/kakao/start 경로로 요청을 해보면 아래와 같은 동의 창이 뜹니다.

 

동의를 해주면

 

설정했던 Redirect URI 의 경로로 get방식을 통해 나오는걸 확인 할수 있습니다.

 

---

토큰 받기

일단 Node.js에서는 fetch()함수를 기본적으로 제공하지 않기 때문에 모듈을 설치해 주어야 합니다.

 

모듈 설치

저는 yarn패키지를 사용했기 때문에 yarn 명령어로 설치 했습니다.

// yarn 패키지
yarn add node-fetch

// npm 패키지
npm i node-fetch

 

그런뒤 fetch 함수를 사용하여 finish경로로 토큰 요청을 하고 토큰을 받아옵니다.

// 토큰발급 및 로그인
export const finishKakaoLogin = async (req, res) => {
  const baseUrl = "https://kauth.kakao.com/oauth/token"; // 토큰 받는 베이스 url
  const config = {
    client_id: process.env.KAKAO_CLIENT, // //REST API키
    client_secret: process.env.KAKAO_SECRET, // 카카오에서 받은 secret 키, 토큰 발급 시, 보안을 강화하기 위해 추가 확인하는 코드
    grant_type: "authorization_code",
    redirect_uri: process.env.KAKAO_RIDIRECT_URL, // 토큰을 받은뒤 리 다이렉트할 URI
    code: req.query.code, // startKakaoLogin이 끝나면 code=~~로 쿼리스트링으로 문자열이 들어옴.
  };

  const params = new URLSearchParams(config).toString(); // 마찬가지로 config를 한 url로 설정해준다.
  const finalUrl = `${baseUrl}?${params}`;
  // node.js에서는 fetch를 지원하지 않기 때문에 node-fetch를 install해야함.
  const kakaoTokenRequest = await fetch(finalUrl, {
      method: "POST", // 토큰을 받는것이기 때문에 post
      headers: {
        "Content-type": "application/json", // 이 부분을 명시하지않으면 text로 응답을 받게됨
      },
    });
  const json = await kakaoTokenRequest.json();
  console.log(json);
  res.send(JSON.stringify(json)); // 프론트엔드에서 정보 확인

마찬가지로 이렇게 받아오는 로직을 짠뒤 라우터에 경로를 지정해줍니다.

router.get("/kakao/finish", finishKakaoLogin);

 

이렇게 한뒤 다시 처음부터 요청을 보내게 되면

 

res.send()로 보낸 브라우저와 콘솔에서 받아온 토큰을 확인 할 수가 있습니다.

 

이제 이 액세스 토큰을 이용하여 카카오 로그인 정보를 가져오는 로직을 만들어 보면

// 토큰발급 및 로그인
export const finishKakaoLogin = async (req, res) => {
  const baseUrl = "https://kauth.kakao.com/oauth/token"; // 토큰 받는 베이스 url
  const config = {
    client_id: process.env.KAKAO_CLIENT, // //REST API키
    client_secret: process.env.KAKAO_SECRET, // 카카오에서 받은 secret 키, 토큰 발급 시, 보안을 강화하기 위해 추가 확인하는 코드
    grant_type: "authorization_code",
    redirect_uri: process.env.KAKAO_RIDIRECT_URL, // 토큰을 받은뒤 리 다이렉트할 URI
    code: req.query.code, // startKakaoLogin이 끝나면 code=~~로 쿼리스트링으로 문자열이 들어옴.
  };

  const params = new URLSearchParams(config).toString(); // 마찬가지로 config를 한 url로 설정해준다.
  const finalUrl = `${baseUrl}?${params}`;
  // node.js에서는 fetch를 지원하지 않기 때문에 node-fetch를 install해야함.
  const kakaoTokenRequest = await (
    await fetch(finalUrl, {
      method: "POST", // 토큰을 받는것이기 때문에 post
      headers: {
        "Content-type": "application/json", // 이 부분을 명시하지않으면 text로 응답을 받게됨
      },
    })
  ).json();

  if ("access_token" in kakaoTokenRequest) {
    // kakaoTokenRequest안에 access_Token이 있다면?
    // api진입
    const { access_token } = kakaoTokenRequest;
    const userRequest = await (
      await fetch("https://kapi.kakao.com/v2/user/me", {
        headers: {
          Authorization: `Bearer ${access_token}`, // 토큰 생성
          "Content-type": "application/json",
        },
      })
    ).json();
    console.log(userRequest);
    return res.status(200).json({ message: userRequest });
  } else {
    // access 토큰이 없다면 로그인
    return res.status(401).json({ message: "로그인이 필요합니다." });
  }
};

이렇게 json화 시켜주고 그 정보를 사용해서 액세스 토큰의 여부에 따라 리다이렉트를 해준뒤 확인해보면

 

정보를 잘 가져오는걸 확인할 수 있습니다.

 

 

 

참고 - 삐제제의 개발노트