Firebase Authentication에서 카카오 로그인 OIDC 설정

 

Firebase Authentication에서 카카오 로그인 OIDC(OpenID Connect) 프로바이더 설정 방법을 설명하겠습니다.

 

1. 카카오 OIDC 클라이언트 설정

1.1 카카오 개발자 콘솔에서 애플리케이션 생성

1. 카카오 개발자 콘솔에 로그인
2. 애플리케이션 생성 후 필요한 정보 입력
3. 생성된 앱의 앱 키 확인

1.2 OIDC 설정

1. [카카오 로그인] 활성화
2. Redirect URI 설정
3. OIDC 설정 메뉴에서 발급한 클라이언트 ID, 클라이언트 Secret 확인

2. Firebase Authentication OIDC 설정

2.1 Firebase 프로젝트 생성 및 Authentication 활성화

1. Firebase Console에서 프로젝트 선택
2. Authentication → 로그인 방법 → 새 제공업체 추가
3. OpenID Connect (OIDC) Provider 선택

2.2 OIDC 프로바이더 등록

• Provider ID: Kakao
• Client ID: 카카오에서 발급한 클라이언트 ID 입력
• Client Secret: 카카오에서 발급한 클라이언트 Secret 입력
• Issuer URL (발급자 URL) : https://kauth.kakao.com
  
   

3. 클라이언트 (React/JavaScript)에서 로그인 구현

3.1 Firebase SDK 설정

프로젝트 > 일반에서 SDK 설정 방법 확인

 

const signInWithKakao = async () => {
  const provider = new OAuthProvider("Kakao");
  try {
    const result = await signInWithPopup(auth, provider);
    console.log("User Info:", result.user);
  } catch (error) {
    console.error("Error logging in with Kakao:", error);
  }
};