[9.15(금) 북스탁 프로젝트] 카카오 소셜로그인 구현 | 카카오 간편로그인API연결하기(node.js)

 

 

짜잔 부트스트랩을 한땀한땀 수정해서 만든 회원가입페이지이다.

드디어 조금 웹사이트같아졌다ㅎㅎ

 

 

 

 

요렇게 마우스를 올리면 노랑이로 바뀐다.

네이버 간편로그인도 연결해야하는데 카카오부터 ...하하

 

 

 

Node.js(백엔드 부분)

const express = require('express');
const axios = require('axios');

1. Express와 axios 모듈을 import한다.

 

 

const app = express();
const port = 3000;

2. Express 애플리케이션을 생성하고 포트 번호를 설정한다.

 

 

const KAKAO_OAUTH_TOKEN_API_URL = "https://kauth.kakao.com/oauth/token";
const KAKAO_USER_PROFILE_API_URL = "https://kapi.kakao.com/v2/user/me";
const KAKAO_CLIENT_ID = "rest api 키"; // 카카오 개발자 사이트에서 발급받은 클라이언트 ID
const KAKAO_REDIRECT_URL = "http://localhost:3000/auth/kakao/callback"; // 카카오에 설정한 리디렉션 URI

3. 카카오 OAuth 인증 및 프로필 정보 요청에 필요한 URL과 클라이언트 ID, 리디렉션 URI를 설정한다.

 

 

app.get('/auth/kakao', (req, res) => {
  const authURL = `${KAKAO_OAUTH_TOKEN_API_URL}?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${KAKAO_REDIRECT_URL}&response_type=code`;

  res.redirect(authURL);
});

반응형

4. '/auth/kakao' 엔드포인트에서 카카오 로그인 요청을 처리한다.

사용자가 '/auth/kakao' 엔드포인트에 접속하면, 위에서 설정한 인증 URL로 리디렉션된다.

 

 

app.get('/auth/kakao/callback', async (req, res) => {
  const code = req.query.code;

  try {
    const tokenResponse = await axios.post(KAKAO_OAUTH_TOKEN_API_URL, null, {
      params: {
        grant_type: "authorization_code",
        client_id: KAKAO_CLIENT_ID,
        redirect_uri: KAKAO_REDIRECT_URL,
        code,
      },
    });

    const accessToken = tokenResponse.data.access_token;

    const userResponse = await axios.get(KAKAO_USER_PROFILE_API_URL, {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });

    const userInfo = userResponse.data;

    // 여기서 userInfo를 활용하여 사용자 인증 및 로그인 처리를 수행

    res.json(userInfo);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Internal Server Error" });
  }
});

5. '/auth/kakao/callback' 엔드포인트에서 액세스 토큰 요청과 사용자 프로필 정보 요청을 처리한다.

'/auth/kakao/callback' 엔드포인트는 카카오에서 전달받은 인증 코드(code)를 사용하여 액세스 토큰을 얻고, 그 토큰으로 사용자 프로필 정보를 요청한다. 이때 받은 사용자 정보(userInfo)를 활용하여 사용자 인증 및 로그인 처리 등을 수행할 수 있다.

 

 

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

6. 서버를 실행하고 지정된 포트 번호에서 들어오는 연결을 수신 대기한다.

 

 

 

---

 

 

 

카카오 버튼을 클릭하면 이런 화면으로 전환이 된다~!

 

 

내일은 네이버로그인 가즈아~!