[Sendbird를 활용한 웹 채팅] 5. 소셜 로그인 - 네이버, 카카오

1. 로그인 과정

기능 개발에 중점을 두고 제공받은 자체 로그인 API이기 때문에 현재는 보안에 취약한 상태이다.
그래서 토큰이 아닌 유저 id를 받아 로컬 스토리지에 저장한 방식으로 진행된다.

• 소셜 로그인
  • 소셜 로그인 -> 로그인 성공 시 받은 토큰을 자체 API로 넘기기 -> 인증 성공 시 유저 id 로컬 스토리지 저장 & 메인 페이지로 이동
• 자체 로그인
  • 이메일 & 비밀번호 입력 -> 자체 API -> 로그인 성공 시 유저 id 로컬 스토리지 저장 & 메인 페이지로 이동

 

2. 네이버 로그인

1. API 신청

https://developers.naver.com/products/login/userguide/userguide.md 접속 후 오픈 api 신청하기

• 로그인 오픈 API 서비스 환경 -> PC 웹
  • 서비스 URL: http://localhost:3000
  • Callback URL: http://localhost:3000/login
• Client ID 확인

 

2. SDK 추가

public/index.html

 

3. 컴포넌트 작성

Components/NaverLogin.js

const NaverLogin = () => {
  const location = useLocation();

  const getNaverToken = () => {
    if (!location.hash) return;
    const token = location.hash.split('=')[1].split('&')[0];

    //네이버에서 받은 토큰 자체 api로 넘겨서 유저 인증하기
    postdata(
      `/chat/member/info`,
      {
        loginType: 'naver',
        token,
      },
      (data) => {
        if (data.statusMessage !== '정상처리') {
          alert(`${data.statusMessage}`, (window.location.href = '/login'));
        } else {
          window.localStorage.setItem('id', data.data.id);
          window.localStorage.setItem('nickname', data.data.nick_name);
          window.location.href = '/';
        }
      }
    );
  };

  const initializeNaverLogin = () => {
    const naverLogin = new window.naver.LoginWithNaverId({
      clientId: process.env.REACT_APP_NAVER_CLIENT_ID,
      callbackUrl: "http://localhost:3000/login", //배포시 실제 도메인으로 변경하기
      isPopup: false,
      loginButton: { color: 'white', type: 3, height: '48' },
    });
    naverLogin.init();
  };

  useEffect(() => {
    initializeNaverLogin();
    getNaverToken();
  }, [getNaverToken]);

  //로그인 버튼 커스터마이징
  const handleNaverLogin = () => {
    if (
      document &&
      document?.querySelector('#naverIdLogin')?.firstChild &&
      window !== undefined
    ) {
      const loginBtn = document.getElementById('naverIdLogin')?.firstChild;
      loginBtn.click();
    }
  };

  return (
    <>
      <Div id='naverIdLogin' />
      <Btn onClick={handleNaverLogin}>
        <Icon />
        <Text>네이버 계정으로 로그인</Text>
      </Btn>
    </>
  );
};

export default NaverLogin;

 

3. 카카오 로그인

1. API 신청 및 앱 등록

• https://developers.kakao.com/docs/latest/ko/kakaologin/prerequisite 참고해 애플리케이션 등록
• redirectUri: http://localhost:3000/login
• javascript key 확인

 

2. 패키지 설치

• react-kakao-login

 

3. 컴포넌트 작성

const KakaoLogIn = () => {
  const onSuccess = (res) => {
    const userId = res.profile.id;
    postdata(
      `/chat/member/info`,
      {
        loginType: "kakao",
        token: userId,
      },
      (data) => {
        if (data.statusMessage !== "정상처리") {
          alert(`${data.statusMessage}`, (window.location.href = "/login"));
        } else {
          window.localStorage.setItem("id", data.data.id);
          window.localStorage.setItem("nickname", data.data.nick_name);
          window.location.href = "/";
        }
      }
    );
  };

  return (
    <KaKaoLogin
      token={process.env.REACT_APP_KAKAO_JS_KEY}
      onSuccess={onSuccess}
      onFail={(err) => console.log(err)}
      style={{ background: "none", border: "none", color: "inherit" }}
    >
      <Btn>
        <Icon />
        <Text>카카오 계정으로 로그인</Text>
      </Btn>
    </KaKaoLogin>
  );
};

export default KakaoLogIn;

 

Reference

• https://reference-m1.tistory.com/368
• https://velog.io/@he0_077/react-naver-sns-login-%EB%B2%84%ED%8A%BC-%EC%BB%A4%EC%8A%A4%ED%84%B0%EB%A7%88%EC%9D%B4%EC%A7%95
• https://velog.io/@taylorkwon92/TIL-%EB%84%A4%EC%9D%B4%EB%B2%84-%EB%A1%9C%EA%B7%B8%EC%9D%B8-API-in-React-TypeScript