구글 / 카카오 로그인, 회원가입

공통

Flow

로그인

1) 구글 로그인 클릭

2) onSuccess되면 response로 받은 id를 우리서버로 보냄

  - 성공: response값(회원정보)을 store에 저장, returnUrl로 redirect

  - 회원가입이 안된 경우: 가입된 회원이 아닙니다.(alert), 회원가입 페이지로 리다이렉트

  - 실패: 로그인에 실패했습니다.(alert)

 

회원가입

1) 구글 회원가입 클릭
2) onSuccess되면 response로 받은 id를 우리서버로 보냄
  - 성공: response값(회원정보)을 store에 저장, returnUrl로 redirect
  - 기존에 있는 아이디일경우: 이미 가입되어있는 회원입니다. 로그인해주세요.(alert)
  - 실패: 회원 가입에 실패했습니다.(alert)

 

 

세션 관리

1) cookie에 로그인 후 tokenId와 access_token 저장

2) 페이지가 실행될 때(App.tsx의 mount시점) 우리서버에 회원 정보 api get

  - 서버쪽에서 전달받은 tokenId와 access_token이 유효하면 회원정보를 response

  - 유효하지 않으면 fail response

 

구글

Client Id 발급

https://velog.io/@yoju/2%EC%B0%A8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-React-Hook%EC%9C%BC%EB%A1%9C-%EA%B5%AC%EA%B8%80-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-1

 

import React from 'react';
import classNames from 'classnames/bind';
import styles from './GoogleLogin.scss';
import { GoogleLogin as Login } from 'react-google-login';
import { GOOGLE_CLIENT_ID } from '@src/constants/SNSLogin';
import { ELoginTabType } from '@src/constants/Login';

const cx = classNames.bind(styles);

interface IOwnProps {
  type: ELoginTabType;
  handleSuccess: (res: any) => void;
  handleFail: (res: any) => void;
};

const GoogleLogin: React.FC<IOwnProps> = ({ type, handleSuccess, handleFail }) => {
  const onSuccess = (res: any) => {
    handleSuccess(res)
  }

  const onFailed = (res: any) => {
    handleFail(res)
  }

  const text = type === ELoginTabType.LOGIN ? '로그인' : '가입';

  return (
    <div className={cx('google_login')}>
      <Login
        clientId={GOOGLE_CLIENT_ID}
        onSuccess={onSuccess}
        onFailure={onFailed}
        render={renderProps => (
          <button type="button" className={cx('btn', 'google')} onClick={renderProps.onClick} disabled={renderProps.disabled}>Google 로 {text}하기</button>
        )}
      />
    </div>
  )
}

export default GoogleLogin;

카카오

1) 내 애플리케이션 추가

https://developers.kakao.com/console/app

카카오계정 로그인

2) [내 애플리케이션] > [앱 설정] > [플랫폼] 에서 web 플랫폼 등록

http://localhost:8888

3) [내 애플리케이션] > [제품 설정] > [카카오 로근] 에서 활성화 On

 

import React from 'react';
import classNames from 'classnames/bind';
import styles from './KakaoLogin.scss';
import Login from 'react-kakao-login';
import { KAKAO_TOKEN_ID } from '@src/constants/SNSLogin';
import { ELoginTabType } from '@src/constants/Login';

const cx = classNames.bind(styles);

interface IOwnProps {
  type: ELoginTabType;
  handleSuccess: (res: any) => void;
  handleFail: (res: any) => void;
};

const KakaoLogin: React.FC<IOwnProps> = ({ type, handleSuccess, handleFail }) => {
  const onSuccess = (res: any) => {
    handleSuccess(res)
  }

  const onFailed = (res: any) => {
    handleFail(res)
  }

  const text = type === ELoginTabType.LOGIN ? '로그인' : '가입';

  return (
    <div className={cx('kakao_login')}>
      <Login
        token={KAKAO_TOKEN_ID}
        onSuccess={onSuccess}
        onFail={onFailed}
        useLoginForm
        render={({ onClick }) => {
          return (
            <button type="button" className={cx('btn', 'kakao')} onClick={onClick}>카카오 로{text}하기</button>
          );
        }}
      />
    </div>
  )
}

export default KakaoLogin;