인증 vs. 인가

보안시스템에서 중요한 두 가지 개념

인증 (Authentication)

• 목적
  • 사용자가 자신이 주장하는 사람인지 확인
  • 시스템 접근을 허용하기 전에 사용자 신원 검증
• 방법
  • 사용자 ID/PW
  • 인증 애플리케이션 (ex. Google Authenticator)
  • OAuth 토근

인가 (Authorization)

• 목적
  • 사용자가 특정 자원이나 기능에 접근할 수 있는 권한이 있는지 확인
  • 접근 제어를 통해 자원 보호
• 방법
  • 역할 기반 접근 제어 (RBAC)
  • 접근 제어 목록 (ACL)
  • 정책 기반 접근 제어
  • 권한 부여 토큰 (ex. JWT)

소셜 로그인 과정

1. 클라이언트 - 인증 (Authentication)
   1. 구글 로그인 버튼 UI 생성
   2. 버튼을 클릭시 구글 로그인 창 띄워줌
   3. 로그인 끝 → 구글에서 access token 전송
   4. redirect_url에 code 라는 부분이 생성
   5. 해당 부분 추출해서 서버에 전송
2. 서버 - 인가 (Authorization)
   1. 유효한 token인지 검증
   2. access token과 가입 여부 클라이언트에 전송
3. 클라이언트 - 로그인

   1. localstorage에 access token 저장

   2. 가입 여부에 따라 회원가입 or 메인 페이지로 redirect

   3. 처음 access token을 localstorage에 저장하는 경우: setItem이 잘 작동되지 않는 문제 발생

      → window.location.reload() 로 새로고침

클라이언트 인증 구현 방법

Firebase 사용

1. Firebase 프로젝트 설정

   • Firebase 콘솔에서 새로운 프로젝트 생성
   • Authentication 탭 > Sign-in method 에서 Google 활성화

2. Firebase 라이브러리 설치

   npm install firebase
   

3. Firebase 초기화

   // src/firebase.js
   import firebase from 'firebase/app';
   import 'firebase/auth';
   
   const firebaseConfig = {
     apiKey: "YOUR_API_KEY",
     authDomain: "YOUR_AUTH_DOMAIN",
     projectId: "YOUR_PROJECT_ID",
     storageBucket: "YOUR_STORAGE_BUCKET",
     messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
     appId: "YOUR_APP_ID",
   };
   
   firebase.initializeApp(firebaseConfig);
   
   export const auth = firebase.auth();
   export const googleProvider = new firebase.auth.GoogleAuthProvider();
   
   

4. React 컴포넌트에서 로그인 구현

   // src/App.js
   import React from 'react';
   import { auth, googleProvider } from './firebase';
   
   const App = () => {
     const signInWithGoogle = async () => {
       try {
         const result = await auth.signInWithPopup(googleProvider);
         console.log(result.user);
       } catch (error) {
         console.error(error);
       }
     };
   
     return (
       <div>
         <button onClick={signInWithGoogle}>Sign in with Google</button>
       </div>
     );
   };
   
   export default App;
   

react-google-login 사용