[React] 카카오 로그인(로그인, 사용자 정보 가져오기)

로그인 및 사용자 토큰 획득

Kakao.Auth.login는 사용자 정보 수집 동의 팝업을 띄운다. 수집 항목에 동의 후 계속할 시 인가 코드를 획득하는 인증 과정을 알아서 처리해준다. 이후 success call back 함수에 인자로 사용자 토큰이 포함된 응답을 받아준다.

App.js

import React from 'react';

class App extends React.Component {
    state = {
    loginResult: false,// 로그인 여부에 따라 페이지를 편집하기 위해 추가
  };

componentDidMount() {
    	/*
	**  scope는 수집할 사용자 정보를 명시한다.
	**  Kakao.Auth.login함수의 인자로 쓴다.
	**  사용자 동의 후 수집할 수 있다. 
	*/
    const scope = "profile, age_range"; 
    const home = this;
    let loginResult = false;
// Kakao.Auth.login는 인증에 성공하면 success call back이 실행된다.
    window.Kakao.Auth.login({
      scope,
      // success는 인증 정보를 응답(response)으로 받는다. 
      success: function (response) {
       //카카오 SDK에 사용자 토큰을 설정한다.
        window.Kakao.Auth.setAccessToken(response.access_token);
        console.log(`is set?: ${window.Kakao.Auth.getAccessToken()}`);
        loginResult = true;
        // 성공 사항에 따라 페이지를 수정하기 위한 setState
        home.setState({ loginResult });
      },
      fail: function (error) {
        console.log(error);
      },
    });
  };

  render() {
        // 등록된 앱의 JavaScript key
    const jsKey = "f803730b31a04aa1ffd90e1fbd5db921";

    // SDK는 한 번만 초기화해야 한다.
    // 중복되는 초기화를 막기 위해 isInitialized()로 SDK 초기화 여부를 판단한다.
    if (!window.Kakao.isInitialized()) {
      // JavaScript key를 인자로 주고 SDK 초기화
      window.Kakao.init(jsKey);
      // SDK 초기화 여부를 확인하자.
      console.log(window.Kakao.isInitialized());
    }
    return (
      return <h1>kakologin{loginResult ? " success" : " not yet"}</h1>;
    )
  }
export default App;

아래와 같이 동의 항목 팝업이 뜬다. 동의 항목에 연령대 항목을 추가했다.

동의 후 계속하면 웹 페이지가 수정된 걸 볼 수 있다.

사용자 정보 가져오기

사용자 정보를 가져올 컴포넌트를 하나 작성한다. 이 컴포넌트를 App.js에서 사용해서 로그인에 성공하면 프로필 이미지를 띄우도록 할 것이다.

App.js

import React from 'react';
import GetUser from "./GetUser";// GetUser를 사용하므로 import 추가

class App extends React.Component {
    state = {
    loginResult: false,// 로그인 여부에 따라 페이지를 편집하기 위해 추가
  };

componentDidMount() {
    	/*
	**  scope는 수집할 사용자 정보를 명시한다.
	**  Kakao.Auth.login함수의 인자로 쓴다.
	**  사용자 동의 후 수집할 수 있다. 
	*/
    const scope = "profile, age_range"; 
    const home = this;
    let loginResult = false;
// Kakao.Auth.login는 인증에 성공하면 success call back이 실행된다.
    window.Kakao.Auth.login({
      scope,
      // success는 인증 정보를 응답(response)으로 받는다. 
      success: function (response) {
       //카카오 SDK에 사용자 토큰을 설정한다.
        window.Kakao.Auth.setAccessToken(response.access_token);
        console.log(`is set?: ${window.Kakao.Auth.getAccessToken()}`);
        loginResult = true;
        // 성공 사항에 따라 페이지를 수정하기 위한 setState
        home.setState({ loginResult });
      },
      fail: function (error) {
        console.log(error);
      },
    });
  };

  render() {
        // 등록된 앱의 JavaScript key
    const jsKey = "f803730b31a04aa1ffd90e1fbd5db921";

    // SDK는 한 번만 초기화해야 한다.
    // 중복되는 초기화를 막기 위해 isInitialized()로 SDK 초기화 여부를 판단한다.
    if (!window.Kakao.isInitialized()) {
      // JavaScript key를 인자로 주고 SDK 초기화
      window.Kakao.init(jsKey);
      // SDK 초기화 여부를 확인하자.
      console.log(window.Kakao.isInitialized());
    }
    return (
      // success 대신에 GetUser 컴포넌트를 반환하자
      return <h1>kakologin{loginResult ? <GetUser/> : " not yet"}</h1>;
    )
  }
export default App;

GetUser.js

import React from "react";

class GetUser extends React.Component {
  // 사용자 정보를 가져온다면 갱신한다.
  state = {
    age_range: 0,
    profile_image_url: "",
  };

  componentDidMount(){
    const GetUser = this;

    // login함수와 비슷하다. 사용자 정보를 가져오면 success콜백
    window.Kakao.API.request({
      url: "/v2/user/me",
      success: function ({ kakao_account }) {
        const { age_range, profile } = kakao_account;
        console.log(age_range);
        console.log(`responsed img: ${profile.profile_image_url}`);
        // 수집한 사용자 정보로 페이지를 수정하기 위해 setState
        GetUser.setState({
          age_range,
          profile_image_url: profile.profile_image_url,
        });
      },
      fail: function (error) {
        console.log(error);
      },
    });
  };

  render() {
    const { age_range, profile_image_url } = this.state;

    return (
      <div>
        <h1>{age_range ? age_range : "" }</h1>
        <img src={profile_image_url} alt="profile_img" title="img_title" />
      </div>
    );
  }
}

export default GetUser;

참고:
https://developers.kakao.com/docs/latest/ko/kakaologin/js
https://developers.kakao.com/docs/latest/ko/kakaologin/common#profile