[A project ] study(11) 소셜로그인 Provider

dev kyu·2025년 2월 13일

project

목록 보기
13/15

소셜 로그인Provider에 대해,

웹사이트나 앱에서 별도의 회원가입 없이 기존의 소셜 계정을 사용하여 로그인할 수 있게 하는 기능이야.

🔍 소셜 로그인 Provider의 개념

  1. 사용자(User) → 로그인 버튼 클릭
  2. 웹사이트(Client) → 해당 소셜 로그인 Provider로 인증 요청
  3. 소셜 로그인 Provider(Google, Facebook 등) → 사용자의 정보를 확인한 후, 액세스 토큰(access token) 발급
  4. 웹사이트(Client) → 발급된 토큰을 받아 사용자 인증을 완료하고, 로그인 처리

👉 소셜 로그인 Provider는 패스트푸드점의 키오스크 같은 역할이야!

  • 직접 주문(회원가입)하지 않고, 기존 계정(카드)로 바로 결제(로그인) 가능
  • 여러 브랜드(구글, 페이스북 등)를 지원
  • 인증이 끝나면 음식(로그인 정보)이 제공됨

🔍 소셜 로그인 Provider의 핵심 개념

  • OAuth 2.0 → 로그인 과정에서 토큰(Token) 을 이용한 인증 방식
  • Access Token → 로그인 후 발급되는 사용자 인증 정보
  • Refresh Token → Access Token이 만료되면 재발급하는 역할
  • Redirect URI → 로그인 후 사용자를 다시 보낼 웹사이트 주소
  • Scope(권한 요청) → 로그인 시, 사용자의 어떤 정보를 가져올지 결정

🔍 소셜 로그인 Provider의 동작 방식

(예) 구글 로그인, NextAuth 사용

  1. 구글 로그인 버튼 클릭
  2. OAuth 2.0 인증 요청 → 사용자가 로그인 허용하면, Google이 Access Token을 발급
  3. 발급된 Access Token을 서버로 전송
  4. 서버에서 토큰을 검증 후, 사용자 로그인 처리
  5. 로그인 완료 후, 홈페이지로 리디렉트

🔍 NextAuth에서 Provider 설정 예제

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.user.id = token.sub;
      return session;
    },
  },
});

✔️ clientId, clientSecret → 구글 콘솔에서 발급받은 키
✔️ callbacks.session → 로그인 후 세션 정보를 설정

profile
dev kyu

0개의 댓글