[쉘위헬스] 카카오로그인 기능구현

소셜로그인 카카오와 네이버를 구현하기로 하였는데
카카오를 먼저 구현하였다

index.html script 추가 (.env html사용)

kakao JS key를 삽입해놓아야했는데 .env에 입력해놓은 값을 사용해야했다.
js파일과는 다르게 % % 로 env 값을 사용 할 수 있었다.

<script>
  window.Kakao.init("%REACT_APP_KAKAO_JS_KEY%");
</script>

Kakao.js

window에 있는 kakao 메소드를 뽑아와서 필요한 유저정보를 가져올 수 있었다.
email과 nickname을 받아와서 inOauth 값을 1로 지정해주어서
kakao endpoint로 post 요청을 보낸 뒤
201(회원가입)으로 요청을 받아왔다면 handler를 한번 더 실행하여
로그인이 되도록 연결해주었다

로그인이 완료 된 뒤에는 home으로 reload 시켜주었다

import axios from "axios"

function KakaoLoginClickHandler() {

  const { Kakao } = window // 카카오 관련 method 사용가능하게(index.html head부분에도 추가된 부분있음)
  Kakao.Auth.login({
    scope: 'profile_nickname, account_email',
    success: (authObj) => {

      Kakao.API.request({
        url: '/v2/user/me',
        data: {
          property_keys: ["kakao_account.email", "kakao_account.profile.nickname"]
        },

        success: async function (res) {

          const email = res.kakao_account.email
          const nickname = res.kakao_account.profile.nickname
          const isOauth = 1

          await axios.post(`${process.env.REACT_APP_SERVER_API}/user/kakao`,
            { email, nickname, isOauth },
            { withCredentials: true })
            .then((res) => {
              if (res.status === 201) {
                KakaoLoginClickHandler()
              } else {
                /* 로그인 */
                axios.post(`${process.env.REACT_APP_SERVER_API}/user/kakao`, { email })
                  .then((res) => {
                    console.log(res, 'kakao/response/if/201/login')
                  })
                window.location.reload('/')
              }
            })
            .catch((err) => {
              console.log(err)
            })

        }
      }
      )
    }
  })
}

export default KakaoLoginClickHandler

참고자료

html .env 연결하는 방법 :
https://stackoverflow.com/questions/49375867/how-do-you-reference-a-process-env-variable-in-html-script-src-react