[React] 카카오 계정 로그인 연결하기 테스트

 

728x90

 

투두메이트 클론 토이프로젝트를 진행하고 있는데 로그인으로 SNS 로그인 붙여보자고 주장한 사람 나야나...

우선 카페24가 제공하는 카카오 로그인이 너무 쉬워서 뚝딱 할 줄 알았는데 자체적으로 프론트 개발하고 서버 개발하고 데이터베이스 연결하는 것은 또 다른 문제였다.

 

 

실제 우리 서비스에 붙여보기 전에 테스트 해보려고 한다.

연결 내용은 아래 블로그를 참조하여 연습한 내용이고, 기본 앱은 내가 만들어 둔 앱을 사용한다.

 

React.js 카카오 로그인, 사용자 프로필 가져오기 - Vlee's Tale

 

 

 

이전에 만들었던 리액트 서비스를 하나 열어서 회원가입을 만들었다.

 

 

 

위의 화면 코드 보기 (Login 부분만)

 

 

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import '../css/Signin.scss';

 
function Signin() {

    const [userId, setUserId] = useState('');
    const [userPwd, setuserPwd] = useState('');

    // input-userId 변경
 
    const userIdEventHandler = (e) => {
        setUserId(e.target.value)
    }
 
    // input-userPwd 변경

    const userPwdEventHandler = (e) => {
        setuserPwd(e.target.value)
    }

    // login 버튼 클릭 이벤트
    const onClickLogin = () => {
        console.log('click login')
        console.log(KAKAO_AUTH_URL)

    }


    return ( 
        <div className='signin_form_wrap'>
        <form className='signin_form'>
            <h2 className='signin_form_header'>회원 로그인</h2>
            <div className='signin_input_wrap'>
                <p className="signin_id">
                <label htmlFor='userId'>ID </label>
                <input type='text' name='userId' value={userId} onChange={userIdEventHandler} />
                </p>
                <p className='signin_pwd'>
                <label htmlFor='userPwd'>PW </label>
                <input type='text' name='userPwd' value={userPwd} onChange={userPwdEventHandler} />
                </p>
            </div>
            <div>
                <button type='button' onClick={onClickLogin}>로그인</button>
            </div>

        </form>
        <div className='signin_with_kakao'>
                <a href="">카카오로 로그인하기</a>
        </div>
        </div>
    )
}


export default Signin;

 

 

 

DB 연결이나 이런것도 하려면 express로 라우터로 주소 만들고 해야하는데 이 부분도 나중에 한번 해보기로 하고

오늘은 우선 카카오 디벨로퍼스에서 계정을 연결해보자

 

 

 

1. 카카오 디벨로퍼스 (카카오 개발자센터) 가입하기

 

 

 

카카오 디벨로퍼스에서 카카오가 개발자(외부 서비스)에게 제공하는 기능들을 API나 SDK로 가져다 쓸 수 있게 되어있다.

 

 

Kakao Developers

 

 

 

 

메인 상단의 네비게이션에서 로그인을 클릭해 카카오 계정으로 로그인을 한다. 보통 개발자 개인의 카카오 계정을 사용하는 것 같다. (탈퇴할 때는 앱의 권한을 넘기고 가는 듯?)

 

나는 이미 계정을 생성해서 바로 로그인이 되지만 회원가입이 필요하다면 모바일 카카오톡을 통해 본인인증 을 진행하면 된다.

 

 

 

그리고 상단의 내 애플리케이션을 클릭하고 애플리케이션 추가하기 버튼을 누른다.

 

 

그러면 모달창이 하나 뜨는데, 여기서 사진은 등록할 필요 없고 앱 이름과 사업자 이름만 등록해주면 된다.

둘 다 크게 중요하지는 않아서 앱 이름과 닉네임 정도로 적당히 정해서 저장을 눌러주자.

 

 

 

 

 

 

2. 플랫폼 등록하기

 

 

 

위의 정보를 입력해서 저장을 누르면 내 앱의 정보를 볼 수 있다.

나는 웹에서 작동하는 리액트 앱을 만들고 있기 때문에 REST API를 이용할 계획이다.

 

 

 

 

 

현재 화면 왼편에 '플랫폼' 을 클릭한다. 그리고 아래로 내려 Web 플랫폼 등록 을 클릭한다.

 

 

 

 

그리고 나타나는 모달에서 http://localhost:포트번호 를 입력한다. 도메인을 구매해서 이미 연결한 상태면 해당 도메인을 연결하면 된다.

www. 는 빼라고 되어있다.

 

 

 

 

그리고 다시 우측의 제품 설정에서 카카오 로그인을 선택한 다음 활성화 설정의 상태를 클릭해 ON으로 만들어준다.

 

 

 

 

 

 

 

3. REST API Client Secret 발급

 

 

 

 

다시 우측의 제품 설정에서 보안을 클릭하고 코드 생성 - 생성 버튼을 눌러준다. REST API를 사용하기 위한 토큰을 발급받기 위한 Client Secret Code다.

 

 

 

 

생성을 누르고 나면 이렇게 코드를 받을 수 있다.

 

 

 

 

 

 

4. API 인증 코드 받기

 

 

 

컴포넌트에 인증을 위한 KakaoAuth.js 파일을 하나 생성해주고 아래 코드를 입력한다.

 

 

import React from 'react';

function KakaoAuth () {
    const code = new URL(window.location.href).searchParams.get("code");
    return (
        <div>
            { code }
        </div>
    );
};

export default KakaoAuth;

 

 

그리고 실제 로그인을 진행하는 Signin.js 에 인증을 위한 변수들을 추가해주고 아래 카카오로 로그인하기에 KAKAO_AUTH_URL 을 href로 전달해준다.

 

 

변수

 

const RESTAPI_KEY = "REST API 키"; //요약정보 - 앱 키 - REST API 키
const REDIRECT_URI = "http://localhost:3000/oauth/kakao/callback"; //인증 토큰을 받을 리다이렉트 주소
const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${RESTAPI_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

 

 

 

클릭을 통해 코드를 받을 /oauth/kakao/callback 이라는 주소를 App.js의 라우터를 통해 추가해준다.

 

 

 

라우터

 

<Route path="/oauth/kakao/callback" component={KakaoAuth} />

 

 

A 링크

(Link to 를 쓰지 않는 이유는 내 앱 안에서 화면을 이동시키는 것이 아니라 다른 도메인으로 이동했다가 returnUrl로 되돌아오는 것이기 때문에 그렇다)

 

 

<div className='signin_with_kakao'>
        <a href={KAKAO_AUTH_URL}>카카오로 로그인하기</a>
</div>

 

 

 

 

위와 같이 코드들을 각각 변경하고 '카카오로 로그인하기' 링크를 클릭하면 아래와 같은 오류가 나온다.

해당 오류 코드를 확인해보자

 

 

 

꾸엥

 

 

KOE006 오류

 

 

 

 

 

방금 이동한 페이지 URI로 보낸 Redirect URI 가 아직 카카오 개발자센터 앱에 등록되어 있지 않아서 그렇다.

해당 URI를 등록해보자

 

 

 

 

5. Redirect URI 등록하기

 

 

 

아까 카카오 로그인을 ON 으로 바꾼 제품 설정 - 카카오 로그인 하단에 보면 Redirect URI 설정이 있다. 

 

 

 

 

클릭하고 나타난 모달에 아까 설정한 REDIRECT_URL 주소를 입력해준다. 

 

 

 

저장을 누르면 아래와 같이 Redirect URI를 확인할 수 있다.

 

 

 

 

 

 

그리고 다시 '카카오로 로그인하기' 를 클릭해보면

 

 

 

 

 

 

이렇게 뭔가 정상적인 로그인이 진행되는 것처럼 보이는 화면이 뜬다.

 

 

 

 

그럼 상단에 URL 에 보면 code 부분이 나타나고, /oauth/kakao/callback 페이지로 리다이렉트 되면서 화면에 토큰이 나타나게 된다.

 

 

 

 

 

6. 사용자 정보 등록하기

 

 

이제 내 서버와 카카오톡의 서버가 통신하는 것을 확인하였으니 Access Token 이라는 OAuth2.0 인증에 중요한 토큰을 받아보자.

카카오톡으로 로그인을 했을 때 사용자에게 요청할 수 있는 사용자 정보는 아래와 같다.

 

 

 

 

이 동의 항목들 중 내 서비스에 반드시 필요한 부분은 필수 동의, 있으면 좋은 것은 선택 동의 로 설정해주면 된다.

 

회사에서는 닉네임(기본은 이름이고 카카오스토리에서 설정하면 별명으로 받아오는 것 같다), 이메일, 전화번호만 필수로 받고 있는데 나머지는 다 선택이다. 

전화번호 같은 권한 없음으로 뜨는 항목은 비즈니스 계정이면 열리는데 내 서비스는 로그인을 위해 카카오계정(이메일) 닉네임 만 우선 받아오면 된다.

 

항목 우측의 설정을 눌러 다음과 같이 동의 목적을 간략하게 작성하여 저장 버튼을 누른다.

 

 

 

7. index.html 페이지 수정

 

 

KaKao Javascript SDK를 public/index.html 에 넣어주어야 한다. REST API 를 이용해 액세스 토큰을 발급받는 것 까지는 SDK 없이 가능하지만 사용자 프로필을 가져오려면 CROS 에러가 발생한다.

 

자세한 내용은 아래 블로그 글을 참조.

 

React.js 카카오 로그인, 사용자 프로필 가져오기 - Vlee's Tale

 

 

 

index.html 의 헤더에 아래 스크립트 코드를 첨부한다.

 

 

<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>

 

 

 

 

8. Profile.js 컴포넌트 생성

 

 

KaKao Javascript SDK를 통해 사용자 정보를 받아올 Profile 컴포넌트를 만든다.

 

import React, { useEffect, useState } from "react";
import '../css/Profile.scss';

function Profile () {

  const [user_id, setUserId] = useState();
  const [nickName, setNickName] = useState();


  const getProfile = async () => {
    try {
      // Kakao SDK API를 이용해 사용자 정보 획득
      let userdata = await window.Kakao.API.request({
        url: "/v2/user/me",
      });
      // 사용자 정보 변수에 저장
      setUserId(userdata.id);
      setNickName(userdata.properties.nickname);
    } 
    catch (err) {
      console.log(err);
    }
  };

  //컴포넌트가 시작될 때 getProfile 함수 실행
  useEffect(() => {
    getProfile();
  }, []); //한 번만 실행하기 위해 [] 붙임


  return (
    <div className="profile_wrap">
    <h1 className="profile_header">유저 프로필</h1>
      <p className="profile_id">아이디  |  {user_id}</p>
      <p className="profile_nickname">닉네임  |  {nickName}</p>
    </div>
  );
};

export default Profile;

 

 

 

Profile 컴포넌트의 Path를 만들어 주기 위해 App.js 파일도 수정한다.

 

 

import React from 'react';
import { Switch, Route } from "react-router-dom";
import About from './routes/About';
import MovieList from './routes/MovieList';
import Home from './routes/Home';
import Detail from './routes/Detail'
import Navigation from './components/Navigation';
import Signin from './components/Signin';
import KakaoAuth from './components/KakaoAuth'
import Profile from './components/Profile';
import './css/App.css';

function App() {

  return (
    
    <section className="main_container">
    <h1 className="main_title">Cate Blanchett</h1>
    <Navigation />

      <Switch>
        <Route exact path="/"> <Home /> </Route>
        <Route exact path="/movielist"> <MovieList /></Route>
        <Route exact path="/about"> <About /> </Route>
        <Route exact path="/movie?movieCd=:id"> <Detail /> </Route>
        <Route exact path="/signin"> <Signin /> </Route>
        <Route exact path="/oauth/kakao/callback"> <KakaoAuth /> </Route>
        <Route exact path="/profile"> <Profile /> </Route>
        </Switch>
  </section>  
  )

}
export default App;

 

 

그리고 실제 값을 받아오는 KaKaoAuth 컴포넌트에서 비동기 통신 라이브러리인 axios를 통해 API에서 사용자 데이터를 가지고 온다.

 

여기서 qs라는 라이브러리를 또 설치하게 되는데 데이터를 받아왔을 때 파싱하는 라이브러리 인 것 같다.

 

 

npm install qs

 

 

REST API에 요청하는 헤더에 담을 payload에는 grant_type, client_id, redirect_uri, code, client_secret이 필요한데

grant_type은 authorization_code 라는 타입명을 넣어주고

client_id는 변수로 만들어 둔 RESTAPI_KEY를 넣어준다

redirect_uri는 변수로 만들어 둔 REDIRECT_URI를 넣어준다.

code 는 uri 로 받아온 코드를 변수로 만들어서 넣어주고 

마지막으로 client_secret은 3번에서 받은 secret 코드를 변수화 해 넣어준다.

 

 

 

 

그리고 useEffect를 통해 KaKaoAuth 컴포넌트가 로드 될 때 바로 토큰을 얻는 함수인 getAccessToken이 실행되도록 한다.

 

 

import React, { useEffect } from 'react';
import axios from 'axios';
import qs from 'qs';
import { useHistory } from 'react-router-dom';


function KakaoAuth () {

    const RESTAPI_KEY = "cd9ac574137c641f13202a079a93a96b"; //요약정보 - 앱 키 - REST API 키
    const REDIRECT_URI = "http://localhost:3000/oauth/kakao/callback"; //인증 토큰을 받을 리다이렉트 주소
    const CLIENT_SECRET = "nDyHQLsodd0xI80VXLhrh5NKcw2xPhvk";


    const code = new URL(window.location.href).searchParams.get("code");

    const history = useHistory();

    const getAcceseToken = async () => {
        const payload = qs.stringify({
            grant_type: "authorization_code",
            client_id: RESTAPI_KEY,
            redirect_uri: REDIRECT_URI,
            code: code,
            client_secret: CLIENT_SECRET
        });

        try{
            // token 받아오기
            const response = await axios.post(
                "https://kauth.kakao.com/oauth/token",
                payload
            )

             // Kakao Javascript SDK 초기화
            window.Kakao.init(RESTAPI_KEY);
            // access token 설정
            window.Kakao.Auth.setAccessToken(response.data.access_token);
            history.replace("/profile");

        }

        catch (err) {
            console.log(err);
        }
    }

    // 현재 컴포넌트 실행 시 바로 getAcceseToken 함수 실행
    useEffect(() => {
        getAcceseToken();
      }, []); //한번만 실행
    

    return NULL;
};
export default KakaoAuth;

 

 

 

그리고 다시 페이지에서 로그인 해보면 이렇게 정보를 받아오는 것을 볼 수 있다~!

 

 

 

 

 

이제 로그아웃과 간편가입도 구현해야 하는데...!

테스트 앱에서는 간편가입 연습을 해볼수가 없다ㅠㅠ

 

 

 

카카오 로그인 만들기 3