소셜 로그인 (SNS login - React)

소셜 로그인이란?

웹페이지를 보다 보면

네이버 로그인, 카카오 로그인, 구글 로그인 등 사용하는 웹 페이지에 맞게 일일이 양식을 입력하지 않아도 간편하게 로그인할 수 있게 도와주는 기능이다.

 

취준생 때 이미 firebase를 이용해서 로그인을 구현해봤지만 이번에는 firebase를 제외하고

네이버, 카카오톡에서 지원해주는 open API를 이용해서 구현해보았다.

 

 

Login

import React, { useContext, useEffect, useState } from "react";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
import { UserContext } from "../datas/User/UserContextAPI"
import { getKakaoProfile, initializeKakaoLogin, initializeNaverLogin } from "../API/login";

const Container = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

const LoginInput = styled.input`
  width: 50%;
  padding: 2rem;

  & + & {
    margin-top: 1rem;
  }
`;

const Button = styled.button`
  width: 10rem;
  height: 3rem;
  margin-top: 2rem;
`;

const Login = () => {
  const navigate = useNavigate();
  const { userAccountDatas, setUserData, userData } = useContext(UserContext);

  const [input, setInput] = useState({
    id: "",
    pw: "",
  });

  const onChange = (e) => {
    setInput({
      ...input,
      [e.target.name]: e.target.value,
    });
  };

  const handleLogin = () => {
    setUserData(
      userAccountDatas.filter((userData) => {
        if (userData.id === input.id) {
          navigate('/');
          return userData.pw === input.pw;
        }
      })
    );

  };

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

  return (
    <Container>
      <LoginInput
        name="id"
        onChange={onChange}
        value={input.id}
        placeholder="input your id"
      />
      <LoginInput
        name="pw"
        onChange={onChange}
        value={input.pw}
        placeholder="input your pw"
      />

      <Button onClick={handleLogin}>로그인!</Button>
      <Button onClick={() => getKakaoProfile(setUserData)}>카카오로그인!</Button>
      {userData}
      <div id="naverIdLogin"></div>
    </Container>
  );
};

export default Login;

사실 이미 기존에 대충 Login기능을 프런트로 구현해놔서 코드가 좀 지저분합니다.

양해 부탁드립니다.

 

저희가 봐야 할 건

 

정리한 Login컴포넌트

import React, { useContext, useEffect, useState } from "react";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
import { UserContext } from "../datas/User/UserContextAPI"
import { getKakaoProfile, initializeKakaoLogin, initializeNaverLogin } from "../API/login";

const Container = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

const Login = () => {
  const { userAccountDatas, setUserData, userData } = useContext(UserContext);

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

  return (
    <Container>
      <Button onClick={() => getKakaoProfile(setUserData)}>카카오로그인!</Button>
      {userData}
      <div id="naverIdLogin"></div>
    </Container>
  );
};

export default Login;

이 정도가 되겠네요.

 

login 관련 함수를 모아둔 login파일입니다.

 

login.js

const { naver, Kakao } = window;

export const initializeNaverLogin = () => {
  const naverLogin = new naver.LoginWithNaverId({
    clientId: "개인 네이버 값",
    callbackUrl: "http://localhost:3000/login",
    isPopup: false,
    loginButton: { color: "white", type: 1, height: "47", width: "200" },
    callbackHandle: true,
  });
  naverLogin.init();
};

export const initializeKakaoLogin = async () => {
  Kakao.init("개인 카카오 값");
  Kakao.Auth.login({
    success: (res) => Kakao.Auth.setAccessToken(res.access_token),
  });
};

export const getKakaoProfile = async (setKakaoName) => {
  try {
    const response = await Kakao.API.request({
      url: "/v2/user/me",
    });
    setKakaoName(response.properties.nickname);
  } catch (e) {
    console.error("실패", e);
  }
};

굉장히 간단하게 네이버와 카카오톡 SNS 로그인을 구현할 수 있습니다.

 

다만 헤맸던 점은 네이버에서는 유저의 정보를 클라이언트에 직접 주지 않습니다..

오로지 백엔드에 access 토큰을 넘기고 백엔드에서 따로 유저의 API를 만들어주면 다시 호출해야 합니다.

 

그것도 모르고 열심히 구글링을 했죠..

단, access 토큰은 줍니다.

이걸 이용해서 사용자 정보를 직접적으로 가져오지는 못하지만 해당 토큰을 이용해서 다른 API는 사용할 수 있습니다.

 

각 카카오, 네이버 Developer 사이트에 들어가면 API와 앱 등록하기를 통해 "개인키"를 발급받을 수 있습니다.

 

예시에서는 저의 프라이버시를 위해 지워놨지만 만약.. 예시를 보시고 따라 하시려면 각 Developer 사이트에 들어가서 localhost:3000으로 등록하 신다음 사용하셔도 쉽게 발급받을 수 있으니 해당 키로 접근해주시면 됩니다!