Skip to content

GitLab

Commit 7b62eb2e authored by KangMin An's avatar KangMin An
Browse files

Update: Kakao OAuth Process를 위한 front와 back 코드 수정.

parent c5c2b1e1
Hide whitespace changes
Inline Side-by-side
client/src/Utils/Oauth.js
View file @ 7b62eb2e
import axios from 'axios';
import Swal from 'sweetalert2'
import '../App.css'
import { routesClient } from './../routesClient';
import axios from "axios";
import Swal from "sweetalert2";
import "../App.css";
import { routesClient } from "./../routesClient";
// export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
const { Kakao } = window;
// 해당 함수를 통해 카카오톡을 이용한 회원가입 혹은 로그인 처리
// isLogin : true - 카카오톡을 이용해 로그인 처리 || false - 카카오톡을 이용해 회원가입 처리
export function AuthWithKakao(isLogin) {
//authObj : response.data에 들어가 있는 부분 object 형식
Kakao.Auth.loginForm({
// 팝업 + 다른 아이디 로그인시
scope: "account_email, profile_nickname",
// 추가 동의 받을 동의 항목 ID 목록, 하나의 문자열에 여러 개의 ID를 쉼표(,)로 구분하여 전달
success: function (authObj) {
console.log(JSON.stringify(authObj));
export function LoginWithKakao() {
//authObj : response.data에 들어가 있는 부분 object 형식
Kakao.Auth.loginForm({
// 팝업 + 다른 아이디 로그인시
scope: 'account_email, profile_nickname',
// 추가 동의 받을 동의 항목 ID 목록, 하나의 문자열에 여러 개의 ID를 쉼표(,)로 구분하여 전달
success: function (authObj) {
console.log(JSON.stringify(authObj))
Kakao.API.request({
// 현재 로그인한 사용자의 카카오계정 정보 불러오기
url: "/v2/user/me",
// 사용자 정보 요청 주소
data: {
property_keys: ["kakao_account.profile", "kakao_account.email"],
// 파라미터를 통해 특정 사용자 정보만 지정해서 요청
},
success: async function (response) {
console.log(response);
console.log(response.kakao_account.profile);
Kakao.API.request({
// 현재 로그인한 사용자의 카카오계정 정보 불러오기
url: '/v2/user/me',
// 사용자 정보 요청 주소
data: {
property_keys: ["kakao_account.profile", "kakao_account.email"]
// 파라미터를 통해 특정 사용자 정보만 지정해서 요청
},
success: async function (response) {
console.log(response);
console.log(response.kakao_account.profile);
const nickValue = response.kakao_account.profile["nickname"];
const emailValue = response.kakao_account.email;
const nickValue = response.kakao_account.profile['nickname']
const emailValue = response.kakao_account.email
await axios
.post(
isLogin ? routesClient.login : routesClient.signup,
isLogin
? { email: emailValue, isOAuth: true }
: {
email: emailValue,
nick_name: nickValue,
isOAuth: true,
}
)
.then((res) => {
console.log("kakao", res);
await axios.post(routesClient.signup, { email: emailValue, nick_name: nickValue, isOauth: true })
.then((res) => console.log('kakao', res))
if (
(!isLogin && !res.data.contents.existing_user) ||
(isLogin && res.data.contents.existing_user)
) {
// 회원 가입 또는 로그인 성공
localStorage.setItem("login", true);
// localStorage.setItem('login', true)
Swal.fire({
title: '로그인 성공!',
text: '🙌 환영합니다 🙌',
icon: 'success',
customClass: 'swal-wide',
confirmButtonText: '확인',
}).then((res) => {
if (res.isConfirmed) {
// window.location.replace('/')
}
else {
// window.location.replace('/')
}
})
}
Swal.fire({
title: isLogin ? "로그인 성공!" : "회원가입 성공!",
text: "🙌 환영합니다 🙌",
icon: "success",
customClass: "swal-wide",
confirmButtonText: "확인",
}).then((result) => {
if (result.isConfirmed) {
window.location.replace(
isLogin ? "/" : "/first-local-code"
);
} else {
window.location.replace("/");
}
});
} else {
Swal.fire({
title: isLogin ? "로그인 실패!" : "회원가입 실패!",
text: isLogin
? "🙌 회원가입을 먼저 진행하세요! 🙌"
: "🙌 이미 존재하는 사용자 입니다! 🙌",
icon: "success",
customClass: "swal-wide",
confirmButtonText: "확인",
}).then((result) => {
if (result.isConfirmed) {
window.location.replace(isLogin ? "/signup" : "/login");
} else {
window.location.replace("/");
}
});
}
});
},
fail: function (err) {
alert(JSON.stringify(err))
console.log(JSON.stringify(err))
},
}
)
});
},
fail: function (err) {
alert(JSON.stringify(err));
console.log(JSON.stringify(err));
},
});
}
export function kakaoLogout() {
// 토큰을 만료시켜 더 이상 해당 액세스 토큰으로 카카오 API를 호출할 수 없도록
console.log('geAccesToken()', Kakao.Auth.getAccessToken())
if (!Kakao.Auth.getAccessToken()) {
alert('Not logged in.')
localStorage.clear();
return;
}
Kakao.Auth.logout(function () {
// 로그인 시 발급받은 토큰을 만료시키는 함수
localStorage.clear();
Swal.fire({
title: '로그아웃 성공!',
text: '🙏 안녕히 가세요 🙏',
icon: 'warning',
customClass: 'swal-wide',
confirmButtonText: '확인',
}).then((res) => {
if (res.isConfirmed) {
window.location.replace('/')
}
else {
window.location.replace('/')
}
})
})
}
\ No newline at end of file
// 토큰을 만료시켜 더 이상 해당 액세스 토큰으로 카카오 API를 호출할 수 없도록
console.log("geAccesToken()", Kakao.Auth.getAccessToken());
if (!Kakao.Auth.getAccessToken()) {
alert("Not logged in.");
localStorage.clear();
return;
}
Kakao.Auth.logout(function () {
// 로그인 시 발급받은 토큰을 만료시키는 함수
localStorage.clear();
Swal.fire({
title: "로그아웃 성공!",
text: "🙏 안녕히 가세요 🙏",
icon: "warning",
customClass: "swal-wide",
confirmButtonText: "확인",
}).then((res) => {
if (res.isConfirmed) {
window.location.replace("/");
} else {
window.location.replace("/");
}
});
});
}
client/src/components/LoginComp.js
View file @ 7b62eb2e
import React, { useState } from 'react';
import '../App.css'
import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
import { LoginWithKakao } from '../utils/Oauth';
import axios from 'axios';
import { routesClient } from '../routesClient';
import React, { useState } from "react";
import "../App.css";
import {
Form,
Button,
Row,
Col,
Card,
Alert,
FloatingLabel,
} from "react-bootstrap";
import { AuthWithKakao } from "../utils/Oauth";
import axios from "axios";
import { routesClient } from "../routesClient";
function LoginComp() {
const cardstyled = {
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
const cardstyled = {
margin: "auto",
padding: "1em",
display: "flex",
justifyContent: "center",
width: "100%",
borderWidth: "3px",
borderRadius: "20px",
borderColor: "rgb(110, 189, 142)",
color: "#04AB70",
};
const inboxstyled = {
display: "flex",
flexDirection: "column",
maxWidth: "80%",
justifyContent: "center",
margin: "auto",
padding: "0.5em",
color: "black",
};
const [alertShow, setAlertShow] = useState(false);
const [emailAddress, setEmailAddress] = useState("");
const [mailSend, setMailSend] = useState(false);
function addressUrl() {
const afterAt = emailAddress.split("@")[1];
if (afterAt) {
const newLink = "https://www." + afterAt;
window.location.replace(newLink);
}
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '80%',
justifyContent: 'center',
margin: 'auto',
padding: '0.5em',
color: 'black'
if (afterAt === "korea.ac.kr") {
window.location.replace("https://www.gmail.com");
}
const [alertShow, setAlertShow] = useState(false)
const [emailAddress, setEmailAddress] = useState('')
const [mailSend, setMailSend] = useState(false)
function addressUrl() {
const afterAt = emailAddress.split('@')[1]
if (afterAt) {
const newLink = 'https://www.' + afterAt;
window.location.replace(newLink);
}
if (afterAt === 'korea.ac.kr') {
window.location.replace('https://www.gmail.com');
}
}
function handleChange(event) {
setEmailAddress(event.target.value)
}
async function handleSubmit(event) {
event.preventDefault();
const res = await axios.post(routesClient.login, { email: emailAddress, isOauth: false })
console.log('mail_sending : ', res.data.contents.mail_sending)
setMailSend(res.data.contents.mail_sending)
setAlertShow(true)
localStorage.setItem('login', true)
}
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title id='impactTitle'>
로그인
</Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
이메일 또는 소셜미디어로 로그인하세요
</Card.Subtitle>
<hr />
<Card.Text>
<Row className='m-auto d-flex justify-content-center' style={{ width: '80%' }}>
{mailSend ?
<Alert show={alertShow} variant={'success'}>
<Col>
😍 이메일 전송이 완료 되었습니다.
</Col>
<Alert.Link href="" onClick={addressUrl} target='_blank' style={{ fontSize: '0.8em' }}>
이메일 확인 하러가기 ➞
</Alert.Link>
</Alert>
:
<Alert show={alertShow} variant={'danger'}>
<Col>
😭 이메일을 정확하게 적어주세요.
</Col>
<Alert.Link href="/signup" target='_blank' style={{ fontSize: '0.8em' }}>
회원가입 하러가기 ➞
</Alert.Link>
</Alert>
}
</Row>
<Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel label="Email">
<Form.Control type="email" placeholder="Email" onChange={handleChange} required />
</FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' type='submit'>
로그인
</Button>
</Form>
<Row className='d-flex align-items-center m-2'>
<Col>
<hr />
</Col>
OR
<Col>
<hr />
</Col>
</Row>
<Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
<a href="#;" onClick={LoginWithKakao} id='socialLink' >
{/* 세미콜론이 붙으면 최상단 이동 x */}
<img src='http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg' id='logpng' alt='KAKAO' />
</a>
</Row>
</Card.Text>
</Card>
</Row>
)
}
function handleChange(event) {
setEmailAddress(event.target.value);
}
async function handleSubmit(event) {
event.preventDefault();
const res = await axios.post(routesClient.login, {
email: emailAddress,
isOauth: false,
});
console.log("mail_sending : ", res.data.contents.mail_sending);
setMailSend(res.data.contents.mail_sending);
setAlertShow(true);
localStorage.setItem("login", true);
}
return (
<Row className="text-center w-100 my-2">
<Card style={cardstyled}>
<Card.Title id="impactTitle">로그인</Card.Title>
<Card.Subtitle style={{ fontWeight: "lighter" }}>
이메일 또는 소셜미디어로 로그인하세요
</Card.Subtitle>
<hr />
<Card.Text>
<Row
className="m-auto d-flex justify-content-center"
style={{ width: "80%" }}
>
{mailSend ? (
<Alert show={alertShow} variant={"success"}>
<Col>😍 이메일 전송이 완료 되었습니다.</Col>
<Alert.Link
href=""
onClick={addressUrl}
target="_blank"
style={{ fontSize: "0.8em" }}
>
이메일 확인 하러가기 ➞
</Alert.Link>
</Alert>
) : (
<Alert show={alertShow} variant={"danger"}>
<Col>😭 이메일을 정확하게 적어주세요.</Col>
<Alert.Link
href="/signup"
target="_blank"
style={{ fontSize: "0.8em" }}
>
회원가입 하러가기 ➞
</Alert.Link>
</Alert>
)}
</Row>
<Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel label="Email">
<Form.Control
type="email"
placeholder="Email"
onChange={handleChange}
required
/>
</FloatingLabel>
<Button variant="light" className="mt-3" id="formbtn" type="submit">
로그인
</Button>
</Form>
<Row className="d-flex align-items-center m-2">
<Col>
<hr />
</Col>
OR
<Col>
<hr />
</Col>
</Row>
<Row
style={{
margin: "auto",
marginBottom: "5px",
display: "flex",
justifyContent: "center",
}}
>
<a href="#;" onClick={() => AuthWithKakao(true)} id="socialLink">
{/* 세미콜론이 붙으면 최상단 이동 x */}
<img
src="http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg"
id="logpng"
alt="KAKAO"
/>
</a>
</Row>
</Card.Text>
</Card>
</Row>
);
}
export default LoginComp;
\ No newline at end of file
export default LoginComp;
client/src/components/SignupComp.js
View file @ 7b62eb2e
import React, { useState } from 'react'
import '../App.css'
import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
import { LoginWithKakao } from '../utils/Oauth';
import axios from 'axios';
import { routesClient } from './../routesClient';
import React, { useState } from "react";
import "../App.css";
import {
Form,
Button,
Row,
Col,
Card,
Alert,
FloatingLabel,
} from "react-bootstrap";
import { AuthWithKakao } from "../utils/Oauth";
import axios from "axios";
import { routesClient } from "./../routesClient";
function SignupComp() {
const cardstyled = {
margin: "auto",
padding: "1em",
display: "flex",
justifyContent: "center",
width: "100%",
borderWidth: "3px",
borderRadius: "20px",
borderColor: "rgb(110, 189, 142)",
color: "#04AB70",
};
const cardstyled = {
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
const inboxstyled = {
display: "flex",
flexDirection: "column",
maxWidth: "80%",
justifyContent: "center",
margin: "auto",
padding: "0.5em",
color: "black",
};
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '80%',
justifyContent: 'center',
margin: 'auto',
padding: '0.5em',
color: 'black'
}
const initValues = {
nick_name: "",
email: "",
isOAuth: false,
};
const initValues = {
nick_name: '',
email: '',
isOauth: false
}
const [formValues, setFormValues] = useState(initValues);
const [formValues, setFormValues] = useState(initValues)
const [userExist, setUserExist] = useState(false);
const [alertShow, setAlertShow] = useState(false);
const [userExist, setUserExist] = useState(false)
const [alertShow, setAlertShow] = useState(false)
function handleChange(event) {
const { name, value } = event.target;
setFormValues({ ...formValues, [name]: value });
}
function handleChange(event) {
const { name, value } = event.target
setFormValues({ ...formValues, [name]: value })
}
async function handleSubmit(event) {
event.preventDefault();
const res = await axios.post(routesClient.signup, formValues);
console.log("existing_user : ", res.data.contents.existing_user);
setUserExist(res.data.contents.existing_user);
setAlertShow(true);
}
async function handleSubmit(event) {
event.preventDefault();
const res = await axios.post(routesClient.signup, formValues)
console.log('existing_user : ', res.data.contents.existing_user)
setUserExist(res.data.contents.existing_user)
setAlertShow(true)
}
return (
<Row className="text-center w-100 my-2">
<Card style={cardstyled}>
<Card.Title id="impactTitle">계정 생성하기</Card.Title>
<Card.Subtitle style={{ fontWeight: "lighter" }}>
이메일 또는 소셜미디어로 계정을 생성하세요
</Card.Subtitle>
<hr />
<Card.Text>
<Row
className="m-auto d-flex justify-content-center"
style={{ width: "80%" }}
>
{!userExist ? (
<Alert show={alertShow} variant={"success"}>
<Col>😊 계정 생성이 완료 되었습니다.</Col>
<Alert.Link href="/login" style={{ fontSize: "0.8em" }}>
로그인 하러가기 ➞
</Alert.Link>
</Alert>
) : (
<Alert show={alertShow} variant={"danger"}>
<Col>🤔 이미 존재하는 계정입니다.</Col>
<Alert.Link href="/login" style={{ fontSize: "0.8em" }}>
로그인 하러가기 ➞
</Alert.Link>
</Alert>
)}
</Row>
return (
<Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel label="Nickname" className="mb-3">
<Form.Control
type="text"
name="nick_name"
placeholder="Nickname"
onChange={handleChange}
required
/>
</FloatingLabel>
<FloatingLabel label="Email Address">
<Form.Control
type="email"
name="email"
placeholder="Email Address"
onChange={handleChange}
required
/>
</FloatingLabel>
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title id='impactTitle'>
계정 생성하기
</Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
이메일 또는 소셜미디어로 계정을 생성하세요
</Card.Subtitle>
<hr />
<Card.Text>
<Row className='m-auto d-flex justify-content-center' style={{ width: '80%' }}>
{!userExist ?
<Alert show={alertShow} variant={'success'}>
<Col>
😊 계정 생성이 완료 되었습니다.
</Col>
<Alert.Link href='/login' style={{ fontSize: '0.8em' }}>
로그인 하러가기 ➞
</Alert.Link>
</Alert>
:
<Alert show={alertShow} variant={'danger'}>
<Col>
🤔 이미 존재하는 계정입니다.
</Col>
<Alert.Link href='/login' style={{ fontSize: '0.8em' }}>
로그인 하러가기 ➞
</Alert.Link>
</Alert>
}
</Row>
<Button variant="light" className="mt-3" id="formbtn" type="submit">
회원가입
</Button>
</Form>
<Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel
label="Nickname"
className='mb-3'
>
<Form.Control
type="text"
name="nick_name"
placeholder="Nickname"
onChange={handleChange}
required
/>
</FloatingLabel>
<FloatingLabel
label="Email Address"
>
<Form.Control
type="email"
name="email"
placeholder="Email Address"
onChange={handleChange}
required
/>
</FloatingLabel>
<Row className="d-flex align-items-center m-2">
<Col>
<hr />
</Col>
OR
<Col>
<hr />
</Col>
</Row>
<Button variant='light' className='mt-3' id='formbtn' type='submit'>
회원가입
</Button>
</Form>
<Row className='d-flex align-items-center m-2'>
<Col>
<hr />
</Col>
OR
<Col>
<hr />
</Col>
</Row>
<Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
<a href="#;" onClick={LoginWithKakao} id='socialLink' >
<img src='http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg' id='logpng' alt='KAKAO' />
</a>
</Row>
</Card.Text>
</Card>
</Row>
)
<Row
style={{
margin: "auto",
marginBottom: "5px",
display: "flex",
justifyContent: "center",
}}
>
<a href="#;" onClick={() => AuthWithKakao(false)} id="socialLink">
<img
src="http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg"
id="logpng"
alt="KAKAO"
/>
</a>
</Row>
</Card.Text>
</Card>
</Row>
);
}
export default SignupComp;
\ No newline at end of file
export default SignupComp;
client/src/components/UserInfo.js
View file @ 7b62eb2e
import React, { useState, useEffect } from 'react'
import { Row, Card, Button, Col } from 'react-bootstrap';
import '../App.css'
import { Link } from 'react-router-dom';
import { callUserInfo } from '../utils/CheckDB';
import { isLogined } from '../utils/Auth';
import React, { useState, useEffect } from "react";
import { Row, Card, Button, Col } from "react-bootstrap";
import "../App.css";
import { Link } from "react-router-dom";
import { callUserInfo } from "../utils/CheckDB";
import { isLogined } from "../utils/Auth";
function UserInfo() {
const cardstyled = {
margin: 'auto',
padding: '1em 0.5em 1em 0.5em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgba(195, 195, 195, 0.753)',
color: 'rgb(110, 189, 142)',
}
const btnstyled2 = {
background: 'white',
margin: 'auto',
borderWidth: '2px',
fontSize: '0.7em',
color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)',
width: '50%'
}
const [userNick, setUserNick] = useState('')
const [createdTime, setCreatedTime] = useState('')
useEffect(() => {
callUserInfo().then((res) => {
if (isLogined()) {
setUserNick(res[0]['nick_name'])
const dateStr = res[0]['created_at'].split('T')[0].split('-')
const now = new Date();
const year = now.getFullYear(); // 년
const month = now.getMonth() + 1; // 월 0부터 시작
const day = now.getDate(); // 일
const stDate = new Date(dateStr[0], dateStr[1], dateStr[2]) // 가입 날짜
const endDate = new Date(year, month, day) // 현재 시간
const btMs = endDate.getTime() - stDate.getTime() // 주어진 날짜 사이의 경과 시간 (밀리 초)
const btDay = btMs / (1000 * 60 * 60 * 24) // Ms -> 일
setCreatedTime(btDay)
}
})
}, [])
const [showState, setShowState] = useState('')
const [localState, setLocalState] = useState([])
useEffect(() => {
// user-info 에서 loc_code
callUserInfo().then((res) => {
if (isLogined()) {
const dbloc = res[0].loc_code
if (dbloc === null) {
setShowState('지역을 입력해주세요')
const localstyle = document.getElementById('local_state')
localstyle.style.display = 'none'
}
else {
const localName = res[0].loc_name
setLocalState(localName)
}
}
})
}, [])
return (
<Col className='text-center pb-2 px-0'>
<Card style={cardstyled} id='localName'>
<Card.Title>
<strong>
{isLogined() ?
<h3>
{`${userNick}`}
</h3>
:
<h3>
손 님
</h3>
}
</strong>
<p style={{ fontWeight: '300', margin: '0' }}>
환영합니다
</p>
</Card.Title>
<hr />
<Row style={{ alignItems: 'center', margin: 'auto', justifyContent: 'center' }}>
<Card.Subtitle>
{isLogined() ?
<div className='mb-2'>
<div>
{showState}
</div>
<div id='local_state'>
{`${localState['doe']}`}
<br />
{`${localState['sgg']}`}
<br />
{`${localState['emd']}`}
</div>
</div>
:
<div className='mb-2'>
로그인 후 이용 가능합니다
</div>
}
</Card.Subtitle>
{isLogined() &&
<Button variant='light' className='m-auto d-flex' style={btnstyled2}>
<Link to='/edit' className='w-100' style={{ textDecoration: 'none', color: 'rgb(110, 189, 142)' }}>
변경
</Link>
</Button>
}
</Row>
{isLogined() &&
<Card.Text>
<hr />
<Row style={{ color: 'black' }}>
<p style={{ fontWeight: '300', margin: '0' }}>
환경을 향한 노력
</p>
<h3 style={{ fontWeight: '300', color: '#2b90d9', margin: '0' }}>
<strong>{createdTime}</strong> 일차
</h3>
</Row>
</Card.Text>
}
</Card>
</Col>
)
const cardstyled = {
margin: "auto",
padding: "1em 0.5em 1em 0.5em",
display: "flex",
justifyContent: "center",
width: "100%",
borderWidth: "3px",
borderRadius: "20px",
borderColor: "rgba(195, 195, 195, 0.753)",
color: "rgb(110, 189, 142)",
};
const btnstyled2 = {
background: "white",
margin: "auto",
borderWidth: "2px",
fontSize: "0.7em",
color: "rgb(110, 189, 142)",
borderColor: "rgba(195, 195, 195, 0.753)",
width: "50%",
};
const [userNick, setUserNick] = useState("");
const [createdTime, setCreatedTime] = useState("");
useEffect(() => {
callUserInfo().then((res) => {
if (isLogined()) {
setUserNick(res[0]["nick_name"]);
const dateStr = res[0]["created_at"].split("T")[0].split("-");
const now = new Date();
const year = now.getFullYear(); // 년
const month = now.getMonth() + 1; // 월 0부터 시작
const day = now.getDate(); // 일
const stDate = new Date(dateStr[0], dateStr[1], dateStr[2]); // 가입 날짜
const endDate = new Date(year, month, day); // 현재 시간
const btMs = endDate.getTime() - stDate.getTime(); // 주어진 날짜 사이의 경과 시간 (밀리 초)
const btDay = btMs / (1000 * 60 * 60 * 24); // Ms -> 일
setCreatedTime(btDay);
}
});
}, []);
const [showState, setShowState] = useState("");
const [localState, setLocalState] = useState([]);
useEffect(() => {
// user-info 에서 loc_code
callUserInfo().then((res) => {
if (isLogined()) {
const dbloc = res[0].loc_code;
if (dbloc === null) {
setShowState("지역을 입력해주세요");
const localstyle = document.getElementById("local_state");
localstyle.style.display = "none";
} else {
const localName = res[0].loc_name;
setLocalState(localName);
}
}
});
}, []);
return (
<Col className="text-center pb-2 px-0">
<Card style={cardstyled} id="localName">
<Card.Title>
<strong>
{isLogined() ? <h3>{`${userNick}`}</h3> : <h3>손 님</h3>}
</strong>
<p style={{ fontWeight: "300", margin: "0" }}>환영합니다</p>
</Card.Title>
<hr />
<Row
style={{
alignItems: "center",
margin: "auto",
justifyContent: "center",
}}
>
<Card.Subtitle>
{isLogined() ? (
<div className="mb-2">
<div>{showState}</div>
<div id="local_state">
{`${localState["doe"]}`}
<br />
{`${localState["sgg"]}`}
<br />
{`${localState["emd"]}`}
</div>
</div>
) : (
<div className="mb-2">로그인 후 이용 가능합니다</div>
)}
</Card.Subtitle>
{isLogined() && (
<Button
variant="light"
className="m-auto d-flex"
style={btnstyled2}
>
<Link
to="/edit"
className="w-100"
style={{ textDecoration: "none", color: "rgb(110, 189, 142)" }}
>
변경
</Link>
</Button>
)}
</Row>
{isLogined() && (
<Card.Text>
<hr />
<Row style={{ color: "black" }}>
<p style={{ fontWeight: "300", margin: "0" }}>환경을 향한 노력</p>
<h3 style={{ fontWeight: "300", color: "#2b90d9", margin: "0" }}>
<strong>{createdTime}</strong> 일차
</h3>
</Row>
</Card.Text>
)}
</Card>
</Col>
);
}
export default UserInfo;
\ No newline at end of file
export default UserInfo;
server/src/controllers/userController.js
View file @ 7b62eb2e
......@@ -25,10 +25,13 @@ const postMail = async (email, token) => {
from: `EUE Auth Supply <${envs.api.nodemailer.user}>`,
to: email,
subject: "EUE 사용자 계정 확인용 메일.",
html: `<a href="${envs.server.protocol}://${envs.server.host}:${envs.server.port
}${routes.base + routes.confirm}?token=${token}">${envs.server.protocol
}://${envs.server.host}:${envs.server.port}${routes.base + routes.confirm
}?token=${token}</a>`,
html: `<a href="${envs.server.protocol}://${envs.server.host}:${
envs.server.port
}${routes.base + routes.confirm}?token=${token}">${
envs.server.protocol
}://${envs.server.host}:${envs.server.port}${
routes.base + routes.confirm
}?token=${token}</a>`,
};
try {
......@@ -58,7 +61,7 @@ export const getEditProfile = (req, res) => {
// 회원 가입 처리
export const postSignup = async (req, res) => {
const {
body: { email, nick_name },
body: { email, nick_name, isOAuth },
} = req;
const result = await db.User.findAll({
......@@ -66,18 +69,44 @@ export const postSignup = async (req, res) => {
logging: false,
});
if (result.length != 0) {
if (result.length !== 0) {
res.json({ msg: resForm.msg.err, contents: { existing_user: true } });
} else {
db.User.create({ email: email, nick_name: nick_name }, { logging: false });
res.json({ msg: resForm.msg.ok, contents: { existing_user: false } });
await db.User.create(
{ email: email, nick_name: nick_name },
{ logging: false }
);
const result = await db.User.findAll({
where: { email: email },
logging: false,
});
const user_info = result[0];
if (isOAuth) {
const payload = {
email: email,
};
const accessT = jwt.sign(payload, envs.secretKey.access_token, {
expiresIn: "14d",
issuer: "eue.com",
subject: "userInfo",
});
res
.cookie("acs_token", accessT)
.json({ msg: resForm.msg.ok, contents: { existing_user: false } });
} else {
res.json({ msg: resForm.msg.ok, contents: { existing_user: false } });
}
}
};
// 메일 확인용 토큰 발행 및 전송 처리
export const postLogin = async (req, res) => {
const {
body: { email },
body: { email, isOAuth },
} = req;
const result = await db.User.findAll({
......@@ -85,34 +114,50 @@ export const postLogin = async (req, res) => {
logging: false,
});
if (result.length != 0) {
try {
// token 발행
const mail_token = jwt.sign(
{
email: email,
},
envs.secretKey.mail,
{
expiresIn: 10 * 60,
issuer: "eue.com",
subject: "auth_checker",
}
);
if (result.length !== 0) {
if (isOAuth) {
const payload = {
email: email,
};
// 토큰이 포함된 로그인 링크 전송
postMail(email, mail_token);
res.json({
msg: resForm.msg.ok,
contents: { existing_user: true, mail_sending: true },
});
} catch (err) {
console.log(err);
res.json({
msg: resForm.msg.err,
contents: { existing_user: true, mail_sending: false, error: err },
const accessT = jwt.sign(payload, envs.secretKey.access_token, {
expiresIn: "14d",
issuer: "eue.com",
subject: "userInfo",
});
res
.cookie("acs_token", accessT)
.json({ msg: resForm.msg.ok, contents: { existing_user: true } });
} else {
try {
// token 발행
const mail_token = jwt.sign(
{
email: email,
},
envs.secretKey.mail,
{
expiresIn: 10 * 60,
issuer: "eue.com",
subject: "auth_checker",
}
);
// 토큰이 포함된 로그인 링크 전송
postMail(email, mail_token);
res.json({
msg: resForm.msg.ok,
contents: { existing_user: true, mail_sending: true },
});
} catch (err) {
console.log(err);
res.json({
msg: resForm.msg.err,
contents: { existing_user: true, mail_sending: false, error: err },
});
}
}
} else {
res.json({
......@@ -158,7 +203,6 @@ export const getConfirm = async (req, res) => {
`${envs.client.protocol}://${envs.client.host}:${envs.client.port}/first-local-code`
);
} catch (err) {
console.log('22', err);
res.json({ msg: resForm.msg.err, contents: { error: err } });
}
};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment