Skip to content

GitLab

Commit 8503f806 authored by Spark's avatar Spark
Browse files

Kakao Login API

parent 1b314e20
Hide whitespace changes
Inline Side-by-side
client/public/index.html
View file @ 8503f806
......@@ -34,39 +34,8 @@
redirectUri: 'http://localhost:3000/oauth'
})
}
// 아래는 데모를 위한 UI 코드입니다.
displayToken()
function displayToken() {
const token = getCookie('authorize-access-token')
if (token) {
Kakao.Auth.setAccessToken(token)
Kakao.Auth.getStatusInfo(({ status }) => {
if (status === 'connected') {
document.getElementById('token-result').innerText = 'login success. token: ' + Kakao.Auth.getAccessToken()
} else {
Kakao.Auth.setAccessToken(null)
}
})
}
}
function getCookie(name) {
const value = "; " + document.cookie;
const parts = value.split("; " + name + "=");
if (parts.length === 2) return parts.pop().split(";").shift();
}
</script>
<script type="text/javascript">
function loginWithKakaoPOP() {
Kakao.Auth.login({
success: function (authObj) {
alert(JSON.stringify(authObj))
},
fail: function (err) {
alert(JSON.stringify(err))
},
})
}
</script>
</script>
</head>
<body>
......
client/src/App.css
View file @ 8503f806
......@@ -5,10 +5,12 @@ body {
}
.a:hover {
color: white;
#btnlink {
color: white !important;
text-decoration: none !important;
}
.btn-primary:active {
outline: white !important;
border-color: white !important;
......@@ -20,8 +22,11 @@ body {
}
.card .card-subtitle {
display: flex;
color: rgb(129, 129, 129);
font-size: 0.8em;
height: 2em;
align-items: center;
}
.form-group .form-control {
......
client/src/App.js
View file @ 8503f806
......@@ -2,19 +2,21 @@ import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';
import Home from './pages/Home';
import Oauth from './components/Oauth';
import Oauth from './utils/Oauth';
import SignupPage from './pages/SignupPage';
function App() {
return (
<Router>
<>
<Route exact path='/' component={Home} />
<Route path='/oauth' component={Oauth}/>
<Route exact path='/' component={Home} />
<Route exact path='/signup' component={SignupPage} />
<Route path='/oauth' component={Oauth} />
</>
</Router>
);
}
......
client/src/Utils/Auth.js
View file @ 8503f806
import axios from 'axios';
import { useState } from 'react';
import Oauth from './Oauth';
export function handleLogin({ userId, role, name, tel, email }) {
localStorage.setItem('id', userId)
......@@ -31,3 +33,9 @@ export function isAdmin() {
return false
}
}
export function isOauth(value) {
const TFoauth = value
return TFoauth;
}
\ No newline at end of file
client/src/Utils/Oauth.js 0 → 100644
View file @ 8503f806
import axios from 'axios';
import { Spinner, Button, Col, Row } from 'react-bootstrap';
import { useHistory } from 'react-router-dom';
// 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;
export function LoginWithKakao() {
//authObj : response.data에 들어가 있는 부분 object 형식
Kakao.Auth.loginForm({
scope: 'account_email',
success: function (authObj) {
alert('로그인 되었습니다. @@@@@@@@@')
console.log(JSON.stringify(authObj))
const accToken = authObj.access_token
localStorage.setItem('Kakao_token', accToken)
console.log('accT ;;', authObj.access_token)
console.log(typeof (localStorage))
console.log(Object.keys(localStorage)[0])
Kakao.API.request({
url: '/v2/user/me',
data: {
property_keys: ["kakao_account.email"]
},
success: function (response) {
console.log(response);
console.log(response.kakao_account.email);
const userEmail = response.kakao_account.email.split('@')[0];
console.log(userEmail)
localStorage.setItem('user_email',userEmail)
}
});
// window.location.replace('/' + '?kakaoemail=', userEmail)
},
fail: function (err) {
alert(JSON.stringify(err))
}
})
}
export function kakaoLogout() {
if (!Kakao.Auth.getAccessToken()) {
alert('Not logged in.')
localStorage.clear();
window.location.replace('/')
return
}
Kakao.Auth.logout(function () {
alert('logout ok\naccess token -> ' + Kakao.Auth.getAccessToken())
localStorage.clear();
window.location.replace('/')
})
}
export function unlinkApp() {
Kakao.API.request({
url: '/v1/user/unlink',
success: function (res) {
alert('success: ' + JSON.stringify(res))
window.location.replace('/')
},
fail: function (err) {
alert('fail: ' + JSON.stringify(err))
window.location.replace('/')
},
})
}
function Oauth() {
const history = useHistory()
const REST_API_KEY = 'a564b730d6339b084ecf7775a9a09284';
const REDIRECT_URI = 'http://localhost:3000/oauth';
const LOGOUT_REDIRECT_URI = 'http://localhost:3000/logout'
const url = new URL(window.location.href)
const authorizationCode = url.searchParams.get('code')
console.log('인가 코드', authorizationCode);
const kakaoAuthURl = `https://kauth.kakao.com/oauth/token`
// const kakaoAuthURl = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`
// const payload = {
// grant_type: "authorization_code",
// client_id: `${REST_API_KEY}`,
// redirect_uri: `${REDIRECT_URI}`,
// code: `${authorizationCode}`
// }
const params = new URLSearchParams();
// PAYLOAD
params.append('grant_type', 'authorization_code')
params.append('client_id', `${REST_API_KEY}`)
params.append('redirect_uri', `${REDIRECT_URI}`)
params.append('code', `${authorizationCode}`)
axios.post(kakaoAuthURl, params).then(response => {
console.log('RES_DATA ;;;', response.data);
console.log('acc_token ;;', response.data.access_token);
const accToken = response.data.access_token;
if (accToken) {
console.log('YES login!!!!!!!!!!!!!');
localStorage.setItem('Kakao_token', accToken)
history.push('/')
}
})
// const res = axios.post(kakaoAuthURl, params)
// console.log(res)
// const accessToken = res.data
// console.log(accessToken)
// setTimeout(window.location.replace('/'), 3000)
// const ischecked = () => {
// if (checkAuth) {
// return true;
// }
// else {
// return false;
// }
// }
// console.log(ischecked())
// const isOauthChecked = () => {
// if (checkAuth.access_token) {
// console.log(true)
// return true;
// }
// }
// {
// console.log('accccc', response.data.access_token);
// console.log('%%%', response.data);
// if (response.data.access_token) {
// console.log('YES login!!!!!!!!!!!!!');
// isOauth(true)
// console.log('@@@12', isOauth(true))
// setTimeout(window.location.replace('/'), 3000)
// }
// else {
// isOauth(false)
// }
// })
return (
<Row className='d-block'>
<Col className='text-center m-auto' style={{ fontSize: '5px' }} >
{/* 인가코드 : {authorizationCode}
<br />
Params : {params} */}
</Col>
<Button id='formbtn' className='d-flex justify-content-center align-items-center m-auto' style={{ width: '200px', height: '200px', flexDirection: 'column' }} disabled>
<Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
<br />
Loading...
</Button>
</Row>
)
}
export default Oauth;
\ No newline at end of file
client/src/components/Footer.js
View file @ 8503f806
......@@ -31,13 +31,13 @@ function Footer() {
const HandleClose = () => setDonateShow(false);
function clickAndCopy() {
function clickAndTwoSec() {
return new Promise((resolve) => setTimeout(resolve, 2000))
}
useEffect(() => {
if (isCopyshow) {
clickAndCopy().then(() => {
clickAndTwoSec().then(() => {
setCopyShow(false);
});
}
......
client/src/components/LocalCode.js
View file @ 8503f806
import React from 'react'
import React, { useState } from 'react'
import { Container, Row, Card, Table, Button, Col, Modal } from 'react-bootstrap';
import '../App.css'
import { LoginWithKakao } from '../utils/Oauth';
function LocalCode() {
const kakao_accToken = localStorage.getItem('Kakao_token')
const cardstyled = {
margin: 'auto',
padding: '1em',
......@@ -26,24 +30,38 @@ function LocalCode() {
borderRadius: '20px',
}
const [localChange, setLocalChange] = useState(false)
return (
<>
<Col className='text-center pt-3 pb-2 px-0'>
<Card style={cardstyled} id='localName'>
<Card.Title>
GUEST
{LoginWithKakao.userEmail}
</Card.Title>
<Row style={{ alignItems: 'center', margin: 'auto', whiteSpace: 'nowrap' }}>
<Card.Subtitle>
지역이름
지역코드
</Card.Subtitle>
<Button variant='light' className='ml-1' style={btnstyled2}>
변경
</Button>
{kakao_accToken &&
<Button variant='light' className='ml-1' onClick={() => setLocalChange(true)} style={btnstyled2}>
변경
</Button>
}
</Row>
<Modal>
gd
<Modal
show={localChange}
onHide={() => setLocalChange(false)}
>
<Modal.Header className='d-block text-center'>
<Modal.Title>
마이페이지
</Modal.Title>
</Modal.Header>
<Modal.Body>
지역이름 (지역코드)
</Modal.Body>
</Modal>
환경을 향한 노력 <br />
......
client/src/components/MainLayer.js
View file @ 8503f806
import React from 'react'
import { useState } from 'react';
import { Button, Form, Image, Row, ButtonGroup, Modal, Dropdown, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { Link, useHistory } from 'react-router-dom';
import '../App.css'
import SignUp from '../pages/SignUp'
import LoginwithSocial from '../pages/LoginwithSocial';
import { isLogined } from './../Utils/Auth';
import { isLogined, isOauth } from '../utils/Auth';
import LocalCode from '../components/LocalCode';
// import { isOauthChecked } from './../utils/Auth';
import Oauth, { checkAuth, kakaoLogout, unlinkApp } from './../utils/Oauth';
function MainLayer() {
const history = useHistory()
const boxstyled = {
border: 'solid',
......@@ -36,25 +38,8 @@ function MainLayer() {
color: 'white'
}
// const loginstyled = {
// margin: 'auto',
// padding: '2px',
// diplay: 'flex',
// justifyContent: 'center',
// borderRadius: '20px'
// }
// const titlesty = {
// display: 'flex',
// justifyContent: 'center',
// background: 'rgb(110, 189, 142)',
// text: 'center'
// }
const [logshow, setLogshow] = useState(false);
const [signshow, setSignshow] = useState(false);
const user = isLogined()
const kakao_accToken = localStorage.getItem('Kakao_token')
return (
<>
......@@ -69,11 +54,13 @@ function MainLayer() {
</Row>
<Row className='d-flex justify-content-center align-items-center my-2 mx-auto w-100'>
<ButtonGroup vertical className='m-auto' style={{ width: '100%', flexDirection: 'column' }}>
{user ?
<Button variant='light' style={btnstyled} onClick={() => setLogshow(true)}>
{kakao_accToken ?
//true
<Button variant='light' style={btnstyled} onClick={kakaoLogout}>
로그아웃
</Button>
:
//false
<Button variant='light' style={btnstyled} onClick={() => setLogshow(true)}>
로그인
</Button>
......@@ -86,16 +73,21 @@ function MainLayer() {
>
<LoginwithSocial />
</Modal>
<Button variant='light' style={btnstyled} onClick={() => setSignshow(true)}>회원가입</Button>
<Modal
size="md"
show={signshow}
onHide={() => setSignshow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<SignUp />
{!kakao_accToken ?
<Button variant='light' style={btnstyled}>
<Link to='/signup' id='btnlink'>
회원가입
</Link>
</Button>
:
<Button variant='light' style={btnstyled} onClick={unlinkApp}>
연결끊기
</Button>
}
</Modal>
</ButtonGroup>
</Row>
<Row className='m-auto justify-content-center w-100' id='contour'>
......
client/src/components/OAuth.js deleted 100644 → 0
View file @ 1b314e20
import axios from 'axios';
import { Spinner, Button, Col, Row } from 'react-bootstrap';
import { KAKAO_AUTH_URL } from './Oauth';
import { Link, Redirect } from 'react-router-dom';
// export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
function Oauth() {
const REST_API_KEY = 'a564b730d6339b084ecf7775a9a09284';
const REDIRECT_URI = 'http://localhost:3000/oauth';
const url = new URL(window.location.href)
const authorizationCode = url.searchParams.get('code')
console.log('인가 코드', authorizationCode);
const kakaoAuthURl = `https://kauth.kakao.com/oauth/token`
// const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`
const payload = {
grant_type: "authorization_code",
client_id: `${REST_API_KEY}`,
redirect_uri: `${REDIRECT_URI}`,
code: `${authorizationCode}`
}
const params = new URLSearchParams();
params.append('grant_type', 'authorization_code')
params.append('client_id', `${REST_API_KEY}`)
params.append('redirect_uri', `${REDIRECT_URI}`)
params.append('code', `${authorizationCode}`)
axios.post(kakaoAuthURl, params).then(response => console.log(response))
function locateHome() {
window.location.replace('/')
};
setTimeout(locateHome, 3000)
return (
<Row className='d-block'>
<Col className='text-center m-auto' style={{ fontSize: '5px' }} >
인가코드 : {authorizationCode}
<br />
Params : {params}
</Col>
<Button id='formbtn' className='d-flex justify-content-center align-items-center m-auto' style={{ width: '200px', height: '200px', flexDirection: 'column' }} disabled>
<Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
<br />
Loading...
</Button>
</Row>
)
}
export default Oauth;
\ No newline at end of file
client/src/components/SignupComp.js 0 → 100644
View file @ 8503f806
import React, { useEffect, useState } from 'react'
import '../App.css'
import { Form, Modal, Button, Row, Col, Image, DropdownButton, ButtonGroup, Dropdown, Card } from 'react-bootstrap';
// import { KAKAO_AUTH_URL } from '../components/Oauth';
import { handleLogin } from '../utils/Auth';
import { isOauth } from '../utils/Auth';
function SignupComp() {
const noticestyled = {
display: 'flex',
justifyContent: 'center',
color: 'gray',
margin: 'auto',
fontSize: '0.8em',
visibility: 'hidden',
}
const cardstyled = {
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
const btnstyled2 = {
background: 'white',
margin: '1px',
maxWidth: 'fit-content',
borderWidth: '2px',
color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px'
}
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '100%',
justifyContent: 'center',
margin: 'auto',
padding: '1rem'
}
const aftershow = {
display : 'none'
}
function loginWithKakao() {
window.Kakao.Auth.authorize({
redirectUri: 'http://localhost:3000/oauth'
})
}
const initValues = {
email: '',
authNumber: '',
}
const [formValues, setFormValues] = useState(initValues)
const [formError, setFormError] = useState({})
const [validated, setValidated] = useState(false)
function submitForm() {
console.log('formValues', formValues);
console.log(!formValues['username']);
console.log(!formValues['email']);
console.log('Error', formError)
}
function handleChange(event) {
const { name, value } = event.target
setFormValues({ ...formValues, [name]: value })
}
function handleSubmit(event) {
const form = event.currentTarget;
console.log('formValues', formValues);
console.log('formValues.values', Object.values(formValues)[0].length);
// console.log(form)
// if (Object.values(formValues)[0].length !== 0) { //form.checkValidity() === false
// event.preventDefault();
// event.stopPropagation();
// }
console.log(validated)
setValidated(true);
// const form = event.current
// setFormError(validate(formValues))
// setIsSubmit(true)
}
// if (success) {
// alert('회원가입 되었습니다.')
// return <Redirect to='/user' />
// }
const [emailSubm, setEmailSubm] = useState(false)
const [authCodecheck, setAuthCodecheck] = useState(false)
const [locCodeShow, setLocCodeShow] = useState(false)
function handleClickSubm() {
// setEmailSubm(true);
const subm = document.getElementById("subm-mailSent");
subm.style.visibility = 'visible'
const aftermail = document.getElementById('AftermailSent');
aftermail.style.display = ''
}
function handleClickAuth() {
var authToInt = parseInt(formValues.authNumber, 10)
if (authToInt == 0) {
setAuthCodecheck(true);
const auth = document.getElementById('auth-check')
auth.style.visibility = 'visible'
}
else {
setAuthCodecheck(false);
}
console.log(typeof (authToInt))
console.log(authToInt)
}
function handleClickLoc() {
setLocCodeShow(true);
const auth = document.getElementById('loc-code')
auth.style.visibility = 'visible'
}
console.log(emailSubm);
// console.log
// const [isOauth, setIsOauth] = useState(false)
const iiiiioauthhh = true
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title>
Create an Account
</Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
Sign up with your social media account or email address
</Card.Subtitle>
<hr />
<Card.Text>
<Form style={inboxstyled}
onSubmit={handleSubmit}>
{/* isOauth */}
{iiiiioauthhh ?
<>
<Form.Group controlId="userEmail" className='mb-1'>
<Row className='m-auto d-flex justify-content-center'>
<Col md={9} xs={9}>
<Form.Control
type="email"
name="email"
placeholder="Email Address"
value={formValues.email}
onChange={handleChange}
readOnly={emailSubm}
required
/>
</Col>
<Col md={3} xs={3} className='p-0 d-flex justify-content-center'>
<Button variant='light' type='submit' style={btnstyled2} onClick={!emailSubm && handleClickSubm} disabled={emailSubm}>{emailSubm ? '제출완료' : '제출'}</Button>
</Col>
</Row>
<Row style={noticestyled} id="subm-mailSent">
메일이 발송되었습니다.
</Row>
</Form.Group>
<Form.Group controlId="authNumber" className='mb-1' style={aftershow} id='AftermailSent'>
<Row className='m-auto d-flex justify-content-center'>
<Col md={9} xs={9}>
<Form.Control
type="text"
name="authNumber"
placeholder="인증코드"
value={formValues.authNumber}
onChange={handleChange}
// readOnly={authCodecheck}
required
/>
</Col>
<Col md={3} xs={3} className='p-0 d-flex justify-content-center'>
<Button variant='light' style={btnstyled2} onClick={!authCodecheck && handleClickAuth}>확인</Button>
</Col>
</Row>
<Row style={noticestyled} id='auth-check'>
인증이
</Row>
</Form.Group>
</>
:
<Row>
암것도안나와~
</Row>
}
<Row className='m-auto w-100 d-flex justify-content-center'>
<Col md={12} xs={12} style={{ padding: '0', display: 'flex', justifyContent: 'center', width: '100%' }}>
{['도', '시군구', '읍면동'].map((localname) => (
<DropdownButton
variant='light'
style={btnstyled2}
title='지역코드'
as={ButtonGroup}
title={` ${localname} `}
>
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>Separated link</Dropdown.Item>
</DropdownButton>
))}
<Button variant='light' style={btnstyled2} onClick={!locCodeShow && handleClickLoc}>확인</Button>
</Col>
<Col md={6} xs={4} id='loc-code' style={{
margin: '5px',
border: 'solid',
borderColor: 'rgb(110, 189, 142)',
display: 'flex',
justifyContent: 'center',
padding: '2px',
visibility: 'hidden',
transition: 'all 4s'
}}>
지역코드
</Col>
</Row>
<Button variant='light' className='mt-2' type="submit" id='formbtn'>
Sign Up
</Button>
</Form>
<hr />
<Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
<a href="#" onClick={loginWithKakao} id='socialLink' >
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAO
</a>
<a href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/google.png' id='logpng' />
GOOGLE
</a>
<a href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/facebook.png' id='logpng' />
FACEBOOK
</a>
</Row>
</Card.Text>
</Card>
</Row>
)
}
export default SignupComp;
\ No newline at end of file
client/src/pages/Home.js
View file @ 8503f806
......@@ -7,6 +7,8 @@ import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine';
import ChartDoughnut from '../components/ChartDoughnut';
import Footer from './../components/Footer';
import { isOauth } from './../utils/Auth';
function Home() {
......@@ -30,17 +32,15 @@ function Home() {
flexDirection: 'column',
padding: '0'
}
useEffect(() => {
console.log('마운트 될때마다 실행');
}, []);
// const [isLogin, setIsLogin] = useState(false)
return (
<Container fluid className='d-flex justify-content-center position-relative'>
<Row style={constyled}>
<Col xs={12} md={5} className='d-flex justify-content-center' id='stickyy'>
<Container fluid className='m-auto d-flex justify-content-center position-relative'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
......@@ -49,9 +49,10 @@ function Home() {
<Col md={6} style={col2sty}>
<Row style={constyled} className='d-flex mb-2 w-100'>
{/* <KakaoLogin/> */}
{/* <TimeNow /> */}
{/* <TimeNow /> */}
<EueSuggest />
<ChartLine />
<ChartDoughnut />
......
client/src/pages/LoginwithSocial.js
View file @ 8503f806
import React from 'react'
import '../App.css'
import { Form, Modal, Button, Row, Col, Image, Alert } from 'react-bootstrap';
import Oauth from '../components/Oauth';
import Oauth, { LoginWithKakao } from '../utils/Oauth';
import { useEffect } from 'react';
import axios from 'axios';
import { useState } from 'react';
......@@ -15,15 +15,19 @@ function LoginwithSocial() {
justifyContent: 'center',
margin: 'auto',
padding: '10px'
}
function loginWithKakao() {
function loginWithKakao2() {
window.Kakao.Auth.authorize({
redirectUri: 'http://localhost:3000/oauth'
})
}
const [isLogin, setIsLogin] = useState(false)
redirectUri: 'http://localhost:3000/oauth'
})
}
// useEffect(()=> {
// window.location.replace('/')
// },[localStorage.getItem('Kakao_token')])
return (
<Row className='m-auto'>
......@@ -47,26 +51,16 @@ function LoginwithSocial() {
</Form>
<hr />
<Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
<a href="#" onClick={loginWithKakao} id='socialLink' >
<a href="#" onClick={loginWithKakao2} id='socialLink' >
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAO
</a>
<a href="javascript:loginWithKakao()" id='socialLink' >
<a href="#;" onClick={LoginWithKakao} id='socialLink' >
{/* 세미콜론이 붙으면 최상단 이동 x */}
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAOHTML
</a>
<a href="javascript:loginWithKakaoPOP()" id='socialLink' >
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAOPOP
</a>
<a as='button' href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/google.png' id='logpng' />
GOOGLE
</a>
<a as='button' href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/facebook.png' id='logpng' />
FACEBOOK
</a>
</Row>
</Modal.Body>
</Row>
......
client/src/pages/SignUp.js deleted 100644 → 0
View file @ 1b314e20
import React, { useState } from 'react'
import '../App.css'
import { Form, Modal, Button, Row, Col, Image } from 'react-bootstrap';
// import { KAKAO_AUTH_URL } from '../components/Oauth';
import { Redirect } from 'react-router-dom';
import axios from 'axios';
import catchErrors from './../Utils/CatchError';
function SignUp() {
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '80%',
justifyContent: 'center',
margin: 'auto',
padding: '1rem'
}
function loginWithKakao() {
window.Kakao.Auth.authorize({
redirectUri: 'http://localhost:3000/oauth'
})
}
const INIT_USER = {
username: '',
email: '',
password: '',
password2: '',
}
const [user, setUser] = useState(INIT_USER)
const [error, setError] = useState('')
const [success, setSuccess] = useState(false)
const [validated, setValidated] = useState(false);
function handleChange(event) {
const { name, value } = event.target
setUser({ ...user, [name]: value })
}
async function handleSubmit(event) {
event.preventDefault()
const form = event.currentTarget;
// 이벤트핸들러가 부착된 것을 의미
console.log(form)
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
try {
setError('')
const response = await axios.post('/api/users/signup', user)
setSuccess(true)
} catch (error) {
catchErrors(error, setError)
}
}
function checkPassword(event) {
const p1 = user.password
const p2 = user.password2
if (p1 !== p2) {
event.preventDefault();
//기본적으로 정의된 이벤트 작동 제한
event.stopPropagation();
//부모태그로부터 이벤트의 전파 멈춤
alert('비밀번호가 일치하지 않습니다.')
return false
} else {
return true
}
}
if (success) {
alert('회원가입 되었습니다.')
return <Redirect to='/user' />
}
return (
<>
<Modal.Header className='d-block text-center'>
<Modal.Title>
Create an Account
</Modal.Title>
<p style={{ color: 'gray', margin: '10px', fontSize: '0.5em' }}>
Sign up with your social media account or email address
</p>
</Modal.Header>
<Modal.Body>
<Form style={inboxstyled}
noValidate validated={validated}
onSubmit={handleSubmit}
>
<Form.Group controlId="formBasicEmail">
<Form.Control
type="text"
name="username"
placeholder="Username"
value={user.username}
onChange={handleChange}
/>
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Control
type="email"
name="email"
placeholder="Email Address"
value={user.email}
onChange={handleChange}
/>
</Form.Group>
<Form.Group controlId="formBsicPassword">
<Form.Control
type="password"
name="password"
placeholder="Password"
value={user.password}
onChange={handleChange}
/>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control
type="password"
name="password2"
placeholder="Confirm Password"
value={user.password2}
onChange={handleChange}
/>
</Form.Group>
<Button variant='light' type="submit" id='formbtn' onClick={checkPassword}>
Sign Up
</Button>
</Form>
<hr />
<Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
<a href="#" onClick={loginWithKakao} id='socialLink' >
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAO
</a>
<a href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/google.png' id='logpng' />
GOOGLE
</a>
<a href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/facebook.png' id='logpng' />
FACEBOOK
</a>
</Row>
</Modal.Body>
</>
)
}
export default SignUp;
\ No newline at end of file
client/src/pages/SignupPage.js 0 → 100644
View file @ 8503f806
import React, { useState, useEffect } from 'react'
import { Container, Row, Col, Button } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import '../App.css'
import SignupComp from '../components/SignupComp';
function SignupPage() {
const constyled = {
display: 'flex',
justifyContent: 'space-evenly',
width: '100%',
position: 'relative'
}
const col1sty = {
display: 'flex',
justifyContent: 'start',
alignItems: 'center'
}
const col2sty = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
padding: '0'
}
useEffect(() => {
console.log('마운트 될때마다 실행');
}, []);
return (
<Container fluid className='m-auto d-flex justify-content-center position-relative'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<Row style={constyled} className='d-flex mb-2 w-100'>
<SignupComp />
</Row>
</Col>
</Row>
</Container>
);
}
export default SignupPage;
\ No newline at end of file
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