React로 블로그 만들기 #5

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;