kakao 로그인 구현 방법

250x250

Notice

Recent Posts

Recent Comments

Link

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

박주니 개발 정리

kakao 로그인 구현 방법 본문

react

kakao 로그인 구현 방법

박주니 2023. 1. 31. 18:06

728x90

1. https://developers.kakao.com/ 에 접속하셔서 내 애플리케이션 클릭하시고 애플리케이션 추가하기를 합니다.

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

2. 추가를 완료하셨으면 내 애플리케이션>앱설정>플랫폼 으로 접속해주시길 바랍니다.

추가설명) 제 기준에서는 web으로 설정했기 때문에 Web 플랫폼 등록만 진행했지만 적용하고자하는 대상이 android 및 ios라면 구분해서 등록해주시길 바랍니다.
사이트 도메인 설정 방법) 먼저 react에서 npm start 실행시켰을 때 접속되는 url을 입력해주시면 됩니다. 기본적인 url은 http://localhost:3000입니다. 하단에 있는 이미지에 사이트 도메인은 제가 별도로 추가해서 url 설정한 것입니다.

3. 사이트 도메인 하단에 보이는 카카오 로그인 사용 시 Redirect URI를 입력해야 합니다. 등록하러 가기를 클릭해주시길 바랍니다.(내 애플리케이션>제품 설정>카카오 로그인)

주의 사항) 활성화 설정에 사태가 on으로 되어있는 지 확인해주시길 바랍니다.
Redirect URI 설정 방법) 먼저 설정하는 이유는 카카오 로그인 후 그 사용자 정보를 받기 위함입니다. 해당 url은 카카오 로그인을 넣을 url을 넣으시면 됩니다. 예를 들어서 저는 http://localhost:3001/nomalAdmin 여기에다가 카카오 로그인을 넣을 것이기 때문에 하단 이미지에 Redirect URI를 보시면 입력되어 있는 것을 볼 수 있을 것입니다.

4. index.html에 kakao sdk를 설정합니다.

추가한 부분) <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
추가 설명) sdk를 설정하지 않으면 kakao 설정 자체를 할 수 없습니다. 꼭 설정해주셔야 합니다. index.html 위치는 public에 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Test</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root" class="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

5. 먼저 해당 페이지에 button을 생성해서 함수는 createKakaoButton으로 설정해주시고 kakao.init 을 설정합니다.

추가 설명) kakao.init에 들어갈 내용은 javascript 키 입니다. 그 키 정보를 확인하는 위치는 kakao developer 사이트에서 내 애플리케이션>앱설정>요약정보에 앱 키를 보면 확인하실 수 있습니다. kakao.init("javascript 키 입력")

  const createKakaoButton = () => {
    const kakao = window.Kakao;
    kakao.init(`${process.env.REACT_APP_KAKAO_KEY}`);
  };

6. kakao login 진행시 api 전달 전 셋팅을 합니다.

scope 설정 방법) kakao developer 사이트 들어가서 내 애플리케이션>제품 설정>카카오 로그인> 동의항목 들어가서 개인정보에 동의한 부분에 ID를 확인하시면 됩니다. 하단에 이미지처럼 저는 닉네임이랑 카카오 계정을 동의했기 때문에 코드를 보면 그 id에 해당하는 profile_nickname, account_email이 작성된 것을 볼 수 있을 것입니다.
추가 설명) javascript key 및 scope를 정상적으로 입력을 하셨으면 카카오 로그인 진행시 하단에 내용처럼 console을 통해 값을 볼 수 있고 필요한 정보는 kakao_account에 있으니 그것을 value로 해서 api로 전달하시면 됩니다.

  const createKakaoButton = () => {
    const kakao = window.Kakao;
    kakao.init(`${process.env.REACT_APP_KAKAO_KEY}`);
    try {
      kakao.Auth.login({
        scope: "profile_nickname, account_email",
        success: function (authObj) {
          window.Kakao.API.request({
            url: "/v2/user/me",
            success: (res) => {
              console.log(res);
            },
          });
        },
      });
    } catch (err) {
      console.log(err);
    }
  };