Chrome 확장앱 Extension ID(앱 ID) 고정 및 OAuth 인증 문제 해결

1. 문제 상황

최근 팀 프로젝트에서 Chrome 확장앱을 개발하며,구글 OAuth 인증을 연동하는 과정에서 예상치 못한 문제가 발생했다

 

문제 증상은 다음과 같았다

• 내 확장앱에서는 구글 로그인이 “bad client id” 오류로 실패
• 협업자는 정상적으로 로그인 가능
• manifest.json, client_id, 구글 콘솔 설정 등은 모두 동일하게 맞췄는데도 불구하고, 내 환경에서만 인증이 되지 않음

 

2. 원인 분석

1) Extension ID(앱 ID) 불일치

Chrome 확장앱의 Extension ID(앱 ID)는 구글 클라우드 콘솔의 “Chrome 앱” OAuth 클라이언트 등록시 반드시 일치해야 한다

하지만, 내 확장앱의 ID와 협업자의 ID가 달랐다

클라우드 콘솔에 등록된 앱 ID가 달랐다

2) manifest.json의 key 필드 미설정

Chrome 확장앱의 Extension ID는 manifest.json의 "key" 필드(공개키)의 해시값으로 결정된다

key 필드가 없으면, Chrome은 각자 다른 환경에서 임의의 ID를 부여한다

즉, git으로 같은 manifest.json을 써도 key가 없으면 팀원마다 ID가 달라질 수 있었던 것이다

 

3. 해결 과정

1) 문제 재현 및 진단

크롬 확장앱에서 구글 로그인을 시도했을 때, 아래와 같은 에러 로그가 발생했다

  [GoogleLoginButton] 로그인 실패 응답
  error: "OAuth2 request failed: Service responded with error: 'bad client id: 910...(생략)'"
  success: false

 

위 에러를 바탕으로, 다음과 같은 체크리스트를 하나씩 점검하며 원인을 좁혀나갔다.

• dist/manifest.json의 client_id가 올바른지
• Chrome 확장앱 Extension ID가 구글 콘솔의 앱 ID와 일치하는지
• Chrome 확장앱을 재로드했는지
• OAuth 클라이언트가 “Chrome 앱” 타입인지
• 테스트 사용자에 본인 계정이 포함되어 있는지
• 브라우저 캐시/쿠키를 완전히 삭제했는지

체크리스트를 따라가며 확인한 결과, 내 확장앱의 Extension ID와 구글 콘솔의 앱 ID가 일치하지 않는 것이 문제의 핵심임을 파악했다

2) key(공개키) 생성 및 추가

Extension ID가 왜 다를까를 더 깊이 파고들면서, Chrome 확장앱의 Extension ID는 manifest.json의 "key" 필드(공개키)의 해시값으로 결정된다는 사실을 알게 되었다.

 

즉, key 필드가 없으면 각자의 환경에서 임의의 ID가 생성되어 팀원마다, 혹은 내 로컬과 협업자의 환경에서 서로 다른 ID가 나올 수밖에 없었다

따라서, Extension ID를 고정하려면 manifest.json에 key(공개키)를 명시적으로 추가해야 한다는 결론에 도달했다. 

 

이를 위해 OpenSSL을 사용해 임의의 key(공개키)를 생성하고, 아래와 같이 manifest.json에 추가했다.

  openssl genrsa 2048 | openssl pkcs8 -topk8 -nocrypt -outform DER | openssl base64 -A

 

생성된 base64 문자열을 extension/public/manifest.json의 "key" 필드에 추가

   {
     ...
     "key": "생성한 base64 문자열",
     ...
   }

 

이렇게 key를 추가하면,누구든지 이 manifest.json으로 확장앱을 빌드/설치할 때 항상 같은 Extension ID가 부여된다

3) 팀 전체 동기화

git에 커밋/푸시 후, 모든 팀원이 pull 받아서 동일한 key를 사용하도록 하였고

확장앱을 빌드하고 Chrome에 재로드 → 모두 동일한 Extension ID로 고정됨을 확인하였다

4) 구글 클라우드 콘솔의 앱 ID도 일치시킴

구글 콘솔의 “Chrome 앱” OAuth 클라이언트의 “앱 ID”를 위에서 고정된 Extension ID로 변경하였다

 

4. 결론 및 교훈

manifest.json의 key 필드는 팀 확장앱 개발에서 필수이다!

 

key가 없으면 Extension ID가 달라져 OAuth 인증, 배포, 유지보수에 혼선이 생긴다. 따라서 팀 전체가 동일한 key를 사용하면, Extension ID도 항상 동일하게 고정시킬 수 있다

 

앞으로는 확장앱 프로젝트를 시작할 때 반드시 key 필드를 manifest.json에 추가하고,팀원과 공유하는 습관을 들여야겠다

이 경험을 통해, 확장앱 개발에서의 작은 설정 하나가 팀 전체의 생산성과 서비스 안정성에 얼마나 큰 영향을 미치는지 다시 한 번 깨달았다. 비슷한 문제를 겪는 분들께 도움이 되길!

---

Reference

key 필드 - Chrome 공식 문서