React로 블로그 만들기 #5
- 로그인 구현(2) Kakao -
1. 소셜로그인 구현
2) Kakao
- API 발급 받기 : https://developers.kakao.com/
- 패키지 설치 : yarn add react-kakao-login (https://www.npmjs.com/package/react-kakao-login)
- src/Components/Login.js에 카카오 로그인을 구현
- react-kakao-login에서 KakaoLogin 객체를 import함
- 백엔드에 정보를 저장하기 위해 state에 id, name, provider를 저장함
- id: 로그인하는 유저가 갖고 있는 고유번호
- name: 로그인 유저의 이름
- provider: 구글 로그인인지 카카오 로그인인지 확인 => 지금은 카카오 로그인이므로 'kakao'로 저장
- KakaoLogin 객체는 jsKey, buttonText, onSuccess, onFailure 등으로 구성
- jsKey : 카카오에서 발급받은 API KEY 값
- buttonText : 버튼에 보여질 텍스트
- onSuccess : 로그인 인증에 성공한 경우 실행할 함수 정의
- onFailure : 로그인 인증에 실패한 경우 실행할 함수 정의
- getProfile : 사용자 프로필에서 정보를 얻어옴
- 로그인/회원가입을 누르면 로그인페이지로 이동하고 구글 로그인 버튼아래 카카오 로그인이 생김
- 구글과 마찬가지로 버튼을 누르면 카카오계정 로그인 창이 뜨고 카카오계정을 통해 로그인을 진행할 수 있음
- 로그인에 성공하면 Json을 반환해줌 => responseKakao함수에서 state에 id, name을 저장
- 로그인에 실패한 경우에는 에러를 넘겨줌 => responseFail함수에서 error 출력
import React, { Component } from 'react';
import { GoogleLogin } from 'react-google-login';
import KakaoLogin from 'react-kakao-login';
import styled from 'styled-components';
class Login extends Component {
constructor(props) {
super(props);
this.state = {
id: '',
name: '',
provider: '',
}
}
// Google Login
responseGoogle = (res) => {
this.setState({
id: res.googleId,
name: res.profileObj.name,
provider: 'google'
});
}
// Kakao Login
responseKakao = (res) => {
this.setState({
id: res.profile.id,
name: res.profile.properties.nickname,
provider: 'kakao'
})
}
// Login Fail
responseFail = (err) => {
console.error(err);
}
render() {
return (
<Container>
<GoogleLogin
clientId={process.env.REACT_APP_Google}
buttonText="Google"
onSuccess={this.responseGoogle}
onFailure={this.responseFail}
/>
<KakaoButton
jsKey={process.env.REACT_APP_Kakao}
buttonText="Kakao"
onSuccess={this.responseKakao}
onFailure={this.responseFail}
getProfile="true"
/>
</Container>
);
}
}
const Container = styled.div`
display: flex;
flex-flow: column wrap;
`
const KakaoButton = styled(KakaoLogin)`
padding: 0;
width: 190px;
height: 44px;
line-height: 44px;
color: #783c00;
background-color: #FFEB00;
border: 1px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: bold;
text-align: center;
`
export default Login;