#3 소셜 로그인 구현

들어가기에 앞서...

기초적인 회원로그인 기능은 이미 해봤던 기능이기에 별다른 어려움 없이 완료를 하였지만 

소셜로그인은 처음 시도해보는것이기도 하며 일반적으로 서칭을 해 나왔던 여타 일반적인 다른 프로젝트와는 조금 다른 부분이 있다고 생각하기에 포스팅을 하기로 했다...

 

소셜로그인의 구조 

 

일반적으로 진행하는 소셜로그인의 구조라고한다 리액트 (프론트 클라이언트) 측에서 카카오에 api키등이 포함된 url 로 푸쉬를 해 카카오측에서 보내주는 인가코드를 전달받고 

 

전달받은 인가코드를 백앤드 서버측에 보내줘 백앤드 서버가 토큰을 발행받아 우리서버의 엑세스토큰을 발행해 리액트 측에 전달해주는 과정이다. 

소셜로그인 구현에 대해 간단히 구글링을 해보았을때도 대부분의 사용자들이 이러한 구조방식을 사용하고있었다. 

 

하지만 우리 프로젝트는 조금 달랐다.

 

 

우리팀의 백앤드 기술자가 추가 라이브러리를 사용해(사실 잘모름...조금 무서움) 카카오(소셜로그인측) 과의

통신을 전부 전담하고 

우리는 통신이 끝난후 백앤드측에서 리디렉션 해준 페이지안에서 데이터를 전달받기만 하면되는 구조가 되어있었다. 

(백앤드의 기술블로그를 링크로 남기도록하겠음)

https://velog.io/@ncookie/IMAD-OAuth2-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84

 

구조상으로만 봤을땐 리액트(프론트 클라이언트)측에서 해야할일이 줄어 간단해졌지만 구글링 정보가 적기도 하며 처음보는 구조에 이미 개발되어 있던 기능에 웹서비스가 추가되어야 하는 것이라 프론트측도 백앤드측도 해매는 부분이 있었다.

 

 

1. 소셜로그인 선택부

//소셜로그인 선택부

 //카카오 로그인
  const onClickLoginKakao = async () => {
    window.location.href = `https://{baseurl}/kakao?redirect_uri={redirectionUrl}`;
  };

 //구글 로그인
  const onClickLoginGoogle = async () => {
    window.location.href = `https://{baseurl}/google?redirect_uri={redirectionUrl}`
  };
  
 //네이버 로그인
  const onClickLoginNaver = async () => {
    window.location.href = `https://{baseurl}/naver?redirect_uri={redirectionUrl}`
  };
  
 //애플 로그인
  const onClickLoginApple = async () => {
    window.location.href = `https://{baseurl}/apple?redirect_uri={redirectionUrl}`
  };

 

일단 로그인 페이지에 소셜로그인 버튼을 생성하고 

각함수들을 연결시켜 주었다. 

링크는 백앤드에서 준 url 을 사용한다. 하지만 위링크는 현재 개발되어있는 어플측도 똑같은 링크를 공유하기에 

 

우리서버는 모바일 접속과 웹 접속을 구분하기위해 웹접속의 경우 redirect_uri 를 쿼리로 붙여 구분짓기로 하였다.

 

 

2. 리디렉션 받을 페이지 생성하기

 

페이지 부분에 리디렉션 받을 어드레스구조로 페이지를 생성해주었다. 

소셜로그인이 성공하면 success 인덱스로 

실패하면 fail 인덱스로 리디렉션 되기로 백앤드측과 정했기에 해당구조에 맞게 페이지를 작성해준다.

 

import { useRouter } from "next/router";
import { setCookie, getCookie } from "../../../../src/commons/cookies/cookie";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";

export default function KakaoRedirect(): JSX.Element {
  const router = useRouter();

  // 유저 정보 불러오기
  const PATCHUSER = async () => {
    await axios
      .get("https://api.iimad.com/api/user", {
        headers: {
          Authorization: `Bearer ${getCookie("Authorization")}`,
        },
      })
      .then((res) => {
        if (res.status === 200) {
          if (res.data.data.role === "GUEST") {
            console.log(res.data.data.role);
            router.push("/user/edit");
          } else if (res.data.data.role === "USER") {
            console.log(res.data.data.role);
            router.push("/user");
          }
        }

        return res.data;
      })
      .catch((res) => {
        alert(res?.response.data.message);
        return;
      });
  };


  //페이지가 렌더링될때 URL의 쿼리를 읽어 토큰과 리프레쉬 토큰을 쿠키에 저장한다.
  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const refresh_token = params.get("refresh_token");
    const token = params.get("token");
    setCookie("Authorization_refresh", refresh_token, {
      path: "/",
      secure: true,
      sameSite: "none",
    });
    setCookie("Authorization", token, {
      path: "/",
      secure: true,
      sameSite: "none",
    });
    //쿠키에 저장된 토큰값으로 유저 정보 PATCHUSER 실행
    PATCHUSER();
  }, []);

  return (
    <div>
      <span>로그인중...</span>
    </div>
  );
}

 

redirect/success 인덱스의 전문이다. 

 

백앤드측에서 소셜로그인을 성공하고 다시 리액트 페이지로 리다이렉트 시켜줄때 

url 쿼리쪽에 엑세스토큰과 리프레쉬 토큰을 건네주기로 하였기에 

url 쿼리를 읽어 쿠키에 저장하고 

쿠키에 저장한 토큰을 사용해 유저정보를 불러와 

유저정보의 role 속성을 확인해 

유저가 신규유저 GUEST면 유저정보 수정페이지로 

유저가 기존유저 USER 이면 유저정보확인 페이지로 

다시한번 리디렉션 시켜주는 구조이다.

 

3. 결과 확인

 

카카오 로그인을 누르면 

 

카카오 로그인페이지로 이동하고 

 

 

리디렉션된페이지에서 신규유저임을 확인해 유저정보 수정페이지로 보내준다.

 

 

회원정보 수정이 완료되면 유저정보 페이지로 이동되어 자신의 정보를 확인 할수있는 

일련의 과정을 확인할 수 있었다.

 

어려웠던점과 느낀점

사실 이번 소셜로그인 구현에 있어서는 구현자체는 간단해 문제가 없었지만 

기존에 알고있던 소셜 로그인 방식과의 차이점이 조금 난해했던것같다. 

 

하지만 어느정도 이해를 하고 구현을 하다보니 

프론트쪽에서 해줘야 할일을 백앤드에서 전부 떠안고 가다보니 

막상 구현에서는 어려운점이 없었던것같다. 

 

 

다하고 보니까 살짝 이런느낌