Feat: 카카오 인증 추가

- KakaoForm 컴포넌트를 이용하여 auth url 받음
- dotenv 사용하여 환경변수 지정
- 토큰 이용하여 카카오에 프로필 요청

ref: #67

package.json

@@ -29,6 +29,8 @@
     "@reduxjs/toolkit": "^1.9.5",
     "@tanstack/react-query": "^4.32.5",
     "@tanstack/react-query-devtools": "^4.32.5",
+    "axios": "^1.5.0",
+    "dotenv": "^16.3.1",
     "firebase": "^10.1.0",
     "framer-motion": "^10.15.0",
     "react-hook-form": "^7.45.4",

packages/apps/user/src/components/KakaoLoginButton/KaKaoLoginButton.js

@@ -0,0 +1,18 @@
+import { Button } from '@chakra-ui/react';
+import { useCallback } from 'react';
+
+const KakaoForm = function(){
+  const redirect_uri = 'http://localhost:3000/auth/login/kakao-callback';
+  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.REACT_APP_KAKAO_CLIENT_ID}&redirect_uri=${redirect_uri}&response_type=code`;
+
+  const onLoginClick = useCallback(() => {
+    window.location.href = KAKAO_AUTH_URL;
+  }, [KAKAO_AUTH_URL]);
+
+  return (
+    <Button onClick={onLoginClick}>카카오 로그인</Button>
+  )
+
+};
+
+export default KakaoForm;

packages/apps/user/src/views/Auth/LogIn/LogIn.js

@@ -26,6 +26,7 @@ import {
 } from '@chakra-ui/react';
 
 import { logIn, googleLogin, auth, provider } from '../../../../firebase';
+import KakaoForm from '../../../components/KakaoLoginButton/KaKaoLoginButton';
 
 function LogIn() {
   const [showPassword, setShowPassword] = useState(false);
@@ -108,9 +109,7 @@ function LogIn() {
                 <Button bgColor="white" onClick={googleClick}>
                   <Icon as={AiFillGoogleCircle} boxSize="30px" />
                 </Button>
-                <Button bgColor="white">
-                  <Icon as={AiFillTwitterCircle} boxSize="30px" />
-                </Button>
+                <KakaoForm />
               </HStack>
               <FormControl isInvalid={errors.email}>
                 <InputGroup>

packages/server/index.js

@@ -1,5 +1,7 @@
 const express = require('express');
 const cors = require('cors');
+const axios = require('axios')
+require('dotenv').config();
 
 const app = express();
 const port = process.env.PORT || 3000;
@@ -9,8 +11,34 @@ app.use(express.urlencoded({ extended: true }));
 
 app.use(cors());
 
-app.get('/', (req, res) => {
-  console.log('get /');
+app.get('/auth/login/kakao-callback', async (req, res) => {
+  const {code} = req.query
+  const REDIRECT_URI = 'http://localhost:3000/auth/login/kakao-callback'
+
+  const API_URI =
+  'https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id=' +
+  process.env.REACT_APP_KAKAO_CLIENT_ID +
+  '&redirect_uri=' +
+  REDIRECT_URI +
+  '&code=' +
+  code +
+  '&ClientSecret=' +
+  process.env.REACT_APP_KAKAO_CLIENT_SECRET;
+
+  const {data: {access_token}} = await axios.post(API_URI, {
+    headers: {
+      "content-type": "application/x-www-form-urlencoded"
+    },
+  });
+
+  const profile = await axios.get('https://kapi.kakao.com/v2/user/me', {
+    headers: {
+      "Authorization": `Bearer ${access_token}`,
+      "Content-type": "application/x-www-form-urlencoded;charset=utf-8"
+    },
+  });
+
+  console.log(profile)
 });
 
 app.listen(port, () => {

yarn.lock

@@ -4510,6 +4510,15 @@ axe-core@^4.6.2:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.7.2.tgz"
   integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==
 
+axios@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.5.0.tgz#f02e4af823e2e46a9768cfc74691fdd0517ea267"
+  integrity sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^3.1.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz"
@@ -5703,6 +5712,11 @@ dotenv@^10.0.0:
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz"
   integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
 
+dotenv@^16.3.1:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
+  integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
+
 duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
@@ -6555,6 +6569,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
 
+follow-redirects@^1.15.0:
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
+  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz"
@@ -6590,6 +6609,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 [email protected]:
   version "0.2.0"
   resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
@@ -9735,6 +9763,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz"