카카오 로그인 시도 (1)

카카오 로그인은 카카오계정으로 다양한 서비스에 로그인할 수 있도록 OAuth 2.0 기반의 소셜 로그인 서비스이다.
카카오 로그인 API를 사용하면, 사용자는 카카오톡 또는 카카오 계정으로 손쉽게 로그인할 수 있다.
서비스는 사용자 ID와 비밀번호를 직접 인증하는 대신, 카카오 API 플랫폼이 인증한 결과를 안전하게 제공받을 수 있다.

 

🔗[https://developers.kakao.com/docs/latest/ko/getting-started/app#platform]

Kakao Developers

카카오 공식 문서를 참고하여 내가 작업한 내용을 순서대로 써보려고 한다.

 

먼저, 카카오 로그인 방식에 대해 이해하고 시작해야 한다.

로그인 시퀀스 다이어그램

[카카오 로그인]

사용자가 로그인을 요청하면 미리 설정해둔 client_id(REST API KEY) + Redirect URI가 설정된 링크로 들어간다.

카카오 로그인 창으로 redirect되며 사용자가 카카오 아이디로 로그인한다.

로그인이 완료되면 미리 설정해둔 Redirect URI로 돌아오며, 파라미터 code로 인가코드를 받는다.

[회원 확인 및 등록]

받은 인가코드를 카카오에 보내면 access token, refresh tocken을 받는다.

받은 access token을 카카오에게 보내서 사용자 정보를 요청한다.

[서비스 로그인]

받은 사용자 정보로 서버 내에서 회원가입, 로그인 처리를 한다.

---

 

카카오 로그인을 이용하기 위해서는 '카카오 개발자'사이트에서 내 애플리케이션을 추가해야 한다.

애플리케이션 생성

카카오 API는 카카오디벨로퍼스에 플랫폼 정보가 등록된 서비스에서만 사용 가능하다. [내 애플리케이션] > [플랫폼]에서 서비스의 각 플랫폼 정보를 등록할 수 있다.

필요한 기본적인 정보를 입력하면 여러 환경에서 사용할 수 있는 '앱 키'들이 생성되는데 이 중에서 'REST API'키를 사용할 것이다.

 

뒤에서 다시 테스트 앱을 생성하여 다시 애플리케이션을 추가한다.

동의 항목

nav바 에 [제품 설정] > [동의항목]을 눌러 카카오 로그인 과정에서 사용자로부터 받을 정보를 설정한다.

우리 프로젝트는

커뮤니티 사용을 위한 사용자 이름과,

임시 비밀번호 발급을 위한 이메일,

아이디 찾기를 위한 전화번호가 필요하다.

 

하지만 일부 항목(닉네임, 프로필 사진)만 동의항목으로 설정되어있어서 비즈 앱으로 전환해야 한다.

 

전환 방법

테스트 앱을 생성하기 위해 비즈 앱으로 전환해야 한다.

사업자등록번호가 없는 개인이나 단체가 제공하는 서비스의 앱도 아래 조건 만족 시 [내 애플리케이션] > [비즈니스] > [개인 개발자 비즈 앱]에서 비즈 앱 전환이 가능하다.
- 카카오디벨로퍼 로그인 후 상단 메뉴의 [계정 설정] > [본인인증]에서 앱 소유자의 본인인증 완료
- 카카오비즈니스 통합 서비스 약관 동의

 

테스트 앱

[내 애플리케이션] > [일반] > [테스트 앱 정보] 에서 [테스트 앱 생성]을 선택하여 생성한다. [테스트 앱] 항목에서 생성한 테스트 앱의 이름을 선택하면, 테스트 앱 설정 화면으로 이동한다. 원본 앱과 다른 별도의 앱 키, 독립된 설정값, 테스트 앱용 권한을 사용할 수 있다. 

 

지금은 실제 서비스가 없기 때문에 테스트 앱으로 사용하지만 배포를 하면 바꿔야 한다.

 

최종적으로 이메일, 이름, 전화번호를 동의 항목에 추가한 것을 확인할 수 있다.

활성화 설정

위처럼 활성화 설정 ON을 해준다.

 

카카오 로그인을 수행하는 플랫폼을 설정할 때는 Web을 선택한다.

Web 플랫폼 등록

서버 주소와 포트를 지정하는데

우선 로컬에서 확인하며 작업을 할 것이기 때문에 프론트 url로 Web 플랫폼 등록도 해준다.

배포를 하게되면 배포 주소도 넣어주어야 한다.

 

로그인 설정에서 가장 중요한 부분은 카카오의 인증 결과를 받는 'Redirect URI' 설정이다.

리액트쪽으로 인가 코드를 전달받을 것이므로 'http://localhost:3000/kakao로 설정한다.

Redirct URI

카카오 로그인에서 사용할 OAuth Redirect URI 설정한다. 프론트 측 도메인과 code를 받을 path를 적는다.

/oauth 로 작성했으니 oauth?code='인가코드'와 같이 나올 것이다.

 

비밀키 생성

[보안] > [코드 생성]을 이용해서 코드를 생성한다. 보안 코드는 API 서버에서 사용할 수 있는 코드값이다.

 

API 서버는 하나의 서버로 여러 종류의 서비스나 앱에서 호출이 가능하기 때문에 소셜 로그인에 대한 실행은 반드시 프론트에서 시작해야 한다. 

 

가장 먼저 동의 화면과 로그인 화면 인가코드를 처리해야 한다.

인가 코드를 받기 위한 경로는 'https://kauth.kakao.com/oauth/authorize' 이고 다음과 같은 쿼리스트링이 필요하다.

 

src/login/api/kakaoApi.js

const rest_api_key = `비밀`
const redirect_uri = `http://localhost:3000/login/kakao`

const auth_code_path = `https://kauth.kakao.com/oauth/authorize`

export const getKakaoLoginLink = () => {

    const kakaoURL = `${auth_code_path}?client_id=${rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`;

    return kakaoURL;
}

 

src/common/LoginJoinButton.jsx

import { Link } from "react-router-dom";
import { getKakaoLoginLink } from "../../../login/api/kakaoApi";

...
            ) : isKakaoMode ? (
                <div className="ljb_set">
                    <Link to={link}>
                        <img src={kakao} alt="카카오톡 로그인" />
                    </Link>
                    <span>카카오톡 로그인</span>
                </div>
            ) : isGoogleMode ? (
...

 

인가 코드의 페이지 처리

src/login/components/KakoRedirectPage.js

import { useSearchParams } from "react-router-dom";

const KakaoRedirectPage = () => {
    const [searchParams] = useSearchParams();

    const authCode = searchParams.get("code");

    return (
        <>
            <div>{authCode}</div>
        </>
    );
}

export default KakaoRedirectPage;

 

라우터 설정

src/App.js

...
function App() {
  return (
    <Router>
      <Routes>
        ...
        <Route path="/login/kakao" element={<KakaoRedirectPage/>}/>
        ...
      </Routes>
    </Router>
  );
}
...

 

브라우저에서 로그인을 시도하면 아래와 같이 전달된 code 값이 출력되는 것을 확인할 수 있다.

 

Access Tocken 받기

카카오 로그인 결과로 전달되는 인가 코드는 Access Tocken을 받기 위한 사전 작업이다.

Access Tocken을 받기 위해서는 'https://kauth.kakao.com/oauth/tocken' 을 호출해야 하고 전달해야 하는 값들은 REST key 값, Redirect Uri 값, grant_type(고정값), 인가 코드가 필요하다.

 

 

Access Token 호출

kakaoApi.js에 getAccessToken() 함수를 추가한다. 인가 코드는 매번 변경되므로 파라미터로 처리한다.

src/login/api/kakaoApi.js

import axios from "axios"

const rest_api_key = `비밀`
const redirect_uri = `http://localhost:3000/login/kakao`

const auth_code_path = `https://kauth.kakao.com/oauth/authorize`

const access_tocken_url = `https://kauth.kakao.com/oauth/tocken` //추가

export const getKakaoLoginLink = () => {

    const kakaoURL = `${auth_code_path}?client_id=${rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`;

    return kakaoURL;
}

// 추가
export const getAccessToken = async (authCode) => {

    const header = {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        }
    }
    const params = {
        grant_type: "authorization_code",
        client_id: rest_api_key,
        redirect_uri: redirect_uri,
        code: authCode
    }

    const res = await axios.post(access_tocken_url, params, header)

    const accessToken = res.data.accessToken

    return accessToken
}

 

src/login/components/KakoRedirectPage.js

import { useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import { getAccessToken } from "../api/kakaoApi";

const KakaoRedirectPage = () => {
    const [searchParams] = useSearchParams();

    const authCode = searchParams.get("code");

    useEffect(() => { // 추가
        getAccessToken(authCode).then(data => {
            console.log(data)
        })
    }, [authCode])

    return (
        <>
            <div>{authCode}</div>
        </>
    );
}

export default KakaoRedirectPage;

 

프론트 환경에서 Access Token까지 처리하고 API 서버에 이를 전달해서 API 서버 내에서 사용자와 관련된 처리를 하는 방식으로 구성할 것이다. 따라서, API 서버에 추가적인 기능을 개발해야 한다.

카카오 서비스에서 사용자 정보를 가져오기 위해서는 'https://kapi.kakao.com/v2/user/me'를 Access Token을 이용해서 호출해야 한다.

 

accessToken을 파라미터로 받아서 로그인 처리에 사용하는 getKakaoUser()를 추가한다.