Nextjs 카카오 소셜 로그인(REST API 방식)

개요

이번 프로젝트를 진행하면서, 내가 해보고 싶었던 기능은 소셜 로그인 기능이다.

소셜로그인을 사용하게 된다면, 다양한 방법이 있는데 나는 2가지 방식을 비교해봤다.

REST API 방식 vs Javascript SDK 방식( 소프트웨어 개발 키트)

 

1. REST API 방식
   • 서버 측에서 소셜 로그인 업체의 서버와 직접 통신합니다.
   • 사용자 인증 후, 엑세스 토큰 및 필요한 사용자 정보를 서버에서 처리하고 저장합니다.
   • 백엔드 언어와 프레임워크에 관계없이 사용할 수 있습니다.
   • 프론트엔드에서 백엔드로의 추가 요청을 줄일 수 있습니다.
   • 서버-서버 간의 통신은 클라이언트 측에서 통신보다 일반적으로 보안이 더 강력합니다.
2. Javascript 방식
   • 클라이언트 측에서 소셜 로그인 업체의 서버와 직접 통신합니다.
   • 사용자 인증 후, 엑세스 토큰 및 필요한 사용자 정보를 클라이언트 측에서 처리하고 서버에 전달합니다.
   • 웹 프론트엔드에서 소셜 로그인 처리를 담당하므로, 백엔드 구성이 간소화 됩니다.
   • 클라이언트 측에서 즉시 사용자 정보를 사용할 수 있어 별도의 서버 요청을 줄일 수 있습니다.
   • JavaScript 성능이 좋은 웹 브라우저에서 빠른 사용자 인증이 가능합니다. 

우리는 프론트과 백엔드가 협업하는 구조의 프로젝트를 진행하고 있었고, 무엇보다 돈과 관련된 프로젝트를 진행하고 있었기에 보안에 더 힘을 주고 싶었다. 그렇기에 보안에 더 힘을 줄 수 있는 REST API 방식을 사용했다.

CHAT GPT

REST API 방식이 소셜 로그인에서 보안 측면에서 더 좋은 이유

1. 클라이언트에 중요한 데이터 노출 최소화: REST API 방식에서는 중요한 정보(예: 애플리케이션 비밀 키, 엑세스 토큰)가 서버 내에서 처리되므로, 클라이언트에 노출되지 않습니다. 이로 인해 외부로 정보가 유출되거나 취약점이 발생하는 가능성이 줄어듭니다.
2. 서버에서 인증 및 사용자 데이터 처리: 서버에 중요한 인증 절차와 사용자 데이터 처리가 집중되면, 구성 변경이나 보안 업데이트를 적용하기에 통제가 높아 집니다. 또한, 보안 정책 변경이나 로그 관리를 일관되게 관리할 수 있습니다.
3. 요청에 대한 보안 확인: REST API 방식에서는 서버 측에서 모든 요청의 정당성을 검증할 수 있습니다. 요청에 대한 보안 서명 및 임시 토큰의 사용으로 추가적인 정당성 확인을 통해 에러, 조작 및 중간자 공격을 방지할 수 있습니다.
4. 통신 경로 및 접근 제한: 서버-서버 간 통신에서는 특정 IP 주소나 도메인 간의 접근을 제한하여서 의도하지 않은 접근을 차단할 수 있습니다. 이 제한은 지정된 클라이언트와 서버 간의 통신만을 허용해 외부 공격의 위험을 줄일 수 있습니다.
5. 강력한 암호화 프로토콜 사용: REST API 서버 간 통신에서는 일반적으로 SSL/TLS와 같은 강력한 암호화 프로토콜을 사용하여 정보를 안전하게 전송합니다. 이는 통신 중 개인 정보의 누출을 예방합니다.

이런 이유로 REST API 방식이 소셜 로그인에서 클라이언트-서버 통신보다 보안 측면에서 더 좋은 선택일 수 있습니다. 하지만 프로젝트의 요구 사항, 사용자 경험 및 구축된 시스템에 따라 적절한 방법을 선택해야 합니다.

카카오 로그인 과정

Kakao Developers

Kakao Developers

소셜로그인에 대한 정보는 보통 해당 웹사이트에서 확인할 수 있다.

자세한 내용은 위 홈페이지에 들어가서 읽어보면되고, 진행 내용은 다음과 같다.

<aside> ❓ 우리가 해야될일은 카카오 서버에 인가 요청을 보내야 하는데, 여기서 궁금한 게 있었다.

아니 위 로드맵을 보면 백엔드에서 인가처리하고 프론트에서는 백엔드한테 로그인 요청을 보내는데,

왜 내가 하려는 방식은 프론트에서 인가처리를하지? 라는 생각?

백엔드에서 인가를 처리하면 중요 데이터들이 노출되지 않는 보안이 이점이 있고,

프론트엔드에서 처리를 하면 사용자 경험 개선(소셜 로그인 버튼을 누르는 즉시 인증 과정이 시작되기 때문)이 되고

백엔드 서버의 부하 감소된다고한다. 대신 프론트 측에서 처리를 하게 되면 보안에 취약할 수 있다고 하는데 무엇에 취약하고 어떤 방법이 있을까 찾아봤다.

CSRF, 중간자 공격, XSS 등의 다양한 공격을 받을 수 있고, 이를 해결하기 위해서는 인가 코드 암호화를 하거나, HTTPS 프로토콜을 사용하거나 보안 토큰을 이용해야 된다고 한다.

</aside>

카카오 로그인/인가코드 받기/예제

<https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}>

예제를 보면 우리가 지금 필요한 정보가 나온다.

1. REST_API_KEY
2. REDIRECT_KEY

두 키의 대한 값을 알려면, 애플리케이션을 생성하고 난뒤

1. REST_API_KEY 는 내 애플리케이션 / 앱 설정 / 앱키 로 들어가서 REST API 키를 이용하면된다.
2. REDIRECT_KEY는 내 애플리케이션 / 제품 설정 / 카카오 로그인 에 들어가서 Redirect URI를 설정하면 된다.

프로젝트 구성

나는 Nextjs 13.2 버전 이상을 사용하고 있고, app 디렉토리 기반으로 프로젝트를 구성하고 있다.

키관리

---

나는 일단 내가 사용할 소셜 로그인에 대한 키값들을 관리할 곳을 만들었다.

app/lib/SocialLoginData.ts 파일을 만들고

// kakao_login
const REST_API_KEY = process.env.NEXT_PUBLIC_KAKAO_CLIENT_KEY;
const KAKAO_REDIRECT_URI = "";
export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}`;

// google_login
const GOOGLE_CLIENT_ID = process.env.NEXT_PUBLIC_GOGGLE_CLIENT_KEY;
const GOOGLE_REDIRECT_URI = "";
export const GOOGLE_AUTH_URL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${GOOGLE_CLIENT_ID}&response_type=code&redirect_uri=${GOOGLE_REDIRECT_URI}&scope=openid <https://www.googleapis.com/auth/userinfo.email> <https://www.googleapis.com/auth/userinfo.profile`>;

// naver_login
const NAVER_CLIENT_ID = process.env.NEXT_PUBLIC_NAVER_CLIENT_KEY;
const NAVER_REDIRECT_URL = "";
const STATE = "false";
export const NAVER_AUTH_URL = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${NAVER_CLIENT_ID}&state=${STATE}&redirect_uri=${NAVER_REDIRECT_URL}`;

다음과 같이 적용을 했다.

REST_API_KEY같은 경우, 보안을 위해서 .env로 관리하는 편이 좋다.

로그인 페이지 만들기

---

app / login / page.tsx

import SocialLogin from "../components/SocialLogin/SocialLogin";

export default async function Login() {
  return (
    <div className="m-4">
      <div>
        <p>로그인</p>
      </div>
      <div>
        <form>
          <div>id</div>
          <input type="text" />
          <div>password</div>
          <input type="password" />
          <div>
            <button type="submit">로그인</button>
          </div>
        </form>
      </div>
      <SocialLogin />
    </div>
  );
}

app / component / Social / Login / SocialLogin.tsx

"use client";
import Link from "next/link";
import {
  GOOGLE_AUTH_URL,
  KAKAO_AUTH_URL,
  NAVER_AUTH_URL,
} from "../../lib/SocialLoginData";
import Image from "next/image";

export default function SocialLogin() {
  const style = {
    width: "200px",
    height: "30px",
    backgroundColor: "tomato",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: "3px",
  };

  return (
    <div>
      <Link href={GOOGLE_AUTH_URL}>
        <div style={style}>
          <label>Google 로그인</label>
        </div>
      </Link>
      <Link href={NAVER_AUTH_URL}>
        <div style={style}>
          <label>Naver 로그인</label>
        </div>
      </Link>
      <Link href={KAKAO_AUTH_URL}>
        <div style={style}>
          <Image src="/kakao.png" width={300} height={30} alt="카카오 로그인" />
        </div>
      </Link>
    </div>
  );
}

 

이런식으로 간단하게 만들었다. 카카오 로그인처럼 관련 이미지는 각 홈페이지 디벨로퍼에서 얻을 수 있으니 참고하기 바란다.

이제 로그인 버튼을 누르면, Link를 통해서 해당 브라우저로 이동이 된다.

이걸하기전에 reDirect 될 페이지를 만들어놔야한다.

redirect Page

---

app / login / kakao / page.tsx

import Redirect from "../../components/Social/Redirect/Redirect";

export default function kakao() {
  return <Redirect />;
}

app / component / Social / Redirect / Redirect.tsx

"use client";

export default function Redirect() {
  const KAKAO_CODE = new URL(window.location.href).searchParams.get("code");
  console.log(KAKAO_CODE);

  return (
    <div className="LoginHandeler">
      <div className="notice">
        <p>로그인 중입니다.</p>
        <p>잠시만 기다려주세요.</p>
        <div className="spinner"></div>
      </div>
    </div>
  );
}

위에서 로그인을 하면 다음과 같이, url에 있는 code 값을 읽어와 사용할 수 있다. 이제 이 코드를 서버에 전달해주면 끝이 난다.

 

참조

https://developers.kakao.com/console/app/933250/product/login

카카오계정

https://velog.io/@cloud_oort/Next.js-%EC%86%8C%EC%85%9C%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8%EC%9D%84-%EC%A0%95%EB%A7%90-%EC%89%BD%EA%B2%8C-%EA%B5%AC%ED%98%84%EC%9D%B4%EB%9D%BC%EB%8F%84-%ED%95%B4%EB%B3%B4%EA%B3%A0%EC%8B%B6%EB%8B%A4%EB%A9%B4-%ED%95%84%EB%8F%85

[Next.js 소셜로그인] 카카오 로그인 구현이라도 해보고싶다면 필독! 정말 쉽게 알려드림(프론트