소셜 로그인 -카카오

ujin·2022년 11월 20일

개발

목록 보기

5/5

카카오 로그인 API

카카오 API를 사용할 때는 sdk 방식과 REST API 방식이 있는데 프론트에서 모두 해결하는 것이 아니라 프론트에서 로그인 요청을 보내고 백엔드에서 토큰을 받아 처리 할 것이기 때문에 REST API 방식을 사용하기로 했다.

프론트엔드 : 카카오로부터 인가 코드를 받고 받은 인가 코드를 백엔드에 넘겨주는 역할 (마지막 리다이렉팅까지)
- 인가코드를 넘기면 백엔드로부터 우리 사이트 전용 토큰을 발급 받는다
백엔드 : 프론트로부터 인가 코드를 넘겨 받고 카카오로부터 토큰을 발급 받는다. 그리고 해당 토큰에 담긴 유저 정보를 활용해 프로젝트 전용 토큰으로 새롭게 발급 후 프론트에게 돌려준다

⇒ 카카오 토큰을 그대로 클라이언트에게 직접 넘겨주고 사용시키면 고소 당할 수 있음

간략하게 말하면 Redirect URI로 인가 코드를 받을 수 있고, 인가 코드로 요청을 보내면 토큰을 받을 수 있다. 이 과정에서 백엔드와 인가 코드까지만 전달할지, 토큰 까지만 전달할지 소통해야 한다

1. Kakao Devekopers에 등록하기

애플리케이션 등록하기

애플리케이션 추가하기로 본인의 서비스를 등록
1. 내 애플리케이션 → 제품 설정 → 카카오 로그인에서 카카오 로그인 활성화
등록한 서비스로 들어가서 플랫폼 설정 (내 애플리케이션 → 앱설정 → 플랫폼)
1. 웹 개발을 하기 때문에 나는 web으로 설정
2. 도메인을 `localhost` 주소로 설정 (http://localhost:3000)
내 애플리케이션 → 제품 설정 → 카카오 로그인에 들어가서 Redirect URI 를 등록

⇒ 본인 서비스에서 접근 가능한 도메인이여함 (http://localhost:3000/insta/src/component/Login.jsx)
내 애플리케이션 → 제품 설정 → 카카오 로그인 → 동의 항목에 들어가서 사용자에게 어떤 정보를 받아올지 설정

Rest API 사용법

2. 인가 코드 요청

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

사용자가 버튼을 클릭하면 서비스 클라이언트에서 서비스 서버로 카카오 로그인을 요청하면 서비스 서버에서 GET 방식으로 위의 주소로 요청하여 인증 코드를 받을 수 있다.

${REST_API_KEY} : 애플리케이션 추가할 때 발급 받은 REST API키
${REDIRECT_URI} : 내가 등록한 Redirect URI → 반드시 프론트엔드에서 접근 할 수 있는 Host로 지정해주어야 한다 ( Redirect URI에서 인가 코드를 전달 받고 넘기는 등의 작업이 이루어져야 하는데 프론트엔드가 접근 할 수 없는 Host로 지정하게 되면 접근 자체가 막히기 때문)

이렇게 모아 온 것들을 관리하기 위해 컴포넌트를 생성

const REST_API_KEY = "93d209ec2342bc5b64a35b93739b2729";
const REDIRECT_URI = "http://localhost:3000/insta/src/App.js";

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

→ 여기서 나는 URI를 계속 URL로 써서 꽤 고생 했다. 그리고 인데 " "도... 이런 작은 실수들 조심하자 !!

인가 코드를 발급해주는 경로로 이동하는 버튼을 생성해서 해당 버튼을 클릭하면 인가 코드를 발급 받을 수 있도록 한다

import React from 'react'
import styled from '@emotion/styled'
import btn from "../img/kakoBtn.png";
import {KAKAO_AUTH_URL} from "../data/LoginData"

function Login() {
    const handleLogin = () => {
        window.location.href = KAKAO_AUTH_URL;
    }
    return (
        <ImgBtn src={btn} onClick={handleLogin} alt="kakoBtn" />
    )
}

export default Login;

const ImgBtn = styled.img`
        width: 100px;
`

Redirect URL로 이동하기 전에 인가 코드를 redirect 해주는 주소 페이지로 들어오면 로그인 로직을 작성하기 위해 App.js 파일을 생성하고 Router를 설정해둔다

import "./App.css";
import Login from "./component/Login";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

위의 동의 하고 계속하기를 누르면 빈화면 (카키오가 리다이렉팅) 시킨 화면이 나온다.

주소창을 보면 Redirect_URI 뒤에 파라미터로 ?code=@@@@@ 인가 코드가 넘어 온 것을 볼 수 있다

그러면 인가 코드 요청은 끝이다 !!

3. 백엔드로 인가 코드 넘겨주기

파라미터의 값 꺼내오기

window.location.href로 현재 주소창의 주소값을 불러 올 수 있다

new URL 객체에 매개변수로 현재 주소값을 넣으면 아래와 같은 값을 얻을 수 있다.

search에 보면 파라미터인 코드 값이 들어있는 것을 확인할 수 있다.

위에서 사용한 new URL 객체에서 searchParams객체의 get메소드를 사용하여 ‘code’키의 값을 얻어 올 수 있다 (key ‘code’의 value 값)

코드로 작성하면

// 현재 윈도우 창의 주소값을 불러옴
const href = windows.location.href;

// 현재 url의 파라미터를 가져옴
let params = new URL(window.location.href).searchParams;

// params에 저장된 파라미터 안에서 'code'의 값을 가져옴
let code = params.get("code");

3. 토큰 받아오기

인가 코드로 토큰 발급을 요청 → 인가 코드 받기만 하는 것은 로그인이 완료 X, 토큰까지 마쳐야 함

토큰은 POST방식으로 카카오에서 얻을 수 있으며, 파라미터에 인가 코드가 필요한 것을 확인 할 수 있다. 요청 성공시 액세스 토큰, 리프레시 토큰 정보를 포함한 JSON 객체를 받는다.

ujin

개발공부일기

이전 포스트