Chrome 확장 프로그램에서 사용자 로그인

이 문서에서는 Identity Platform을 사용하여 Chrome 확장 프로그램에서 사용자를 로그인 처리하는 방법을 보여줍니다.

시작하기 전에

  • Identity Platform을 사용 설정하고 ID 공급업체를 구성합니다. 자세한 방법은 빠른 시작을 참조하세요.

  • 다음 URL을 확장 프로그램의 content_security_policy 허용 목록에 추가합니다.

    • https://apis.google.com
    • https://www.gstatic.com
    • https://www.googleapis.com
    • https://securetoken.googleapis.com

    자세한 내용은 콘텐츠 보안 정책(CSP) 문서를 참조하세요.

확장 프로그램 ID 등록

Chrome 확장 프로그램에서 사용자를 로그인 처리하려면 확장 프로그램의 ID를 승인된 도메인으로 등록해야 합니다.

  1. Google Cloud Console에서 Identity Platform 설정 페이지로 이동합니다.

    설정 페이지로 이동

  2. 보안 탭을 선택합니다.

  3. 승인된 도메인에서 도메인 추가를 클릭합니다.

  4. 확장 프로그램의 URI를 입력합니다. 예를 들면 chrome-extension://CHROME_EXTENSION_ID와 같습니다.

  5. 추가를 클릭합니다.

사용자 로그인

Chrome 확장 프로그램에서 사용자를 로그인 처리하는 방법은 웹 앱과 유사하지만 다음과 같은 몇 가지 차이점이 있습니다.

  • 전화 및 다단계 인증이 지원되지 않습니다.

  • Chrome 확장 프로그램에서는 HTTP 리디렉션을 사용할 수 없으므로 팝업 작업(signInWithPopup() 및 linkWithPopup())을 사용하여 사용자를 로그인 처리해야 합니다.

  • 브라우저 작업에서 인증 메서드를 호출하면 브라우저 작업이 취소되므로 대신 백그라운드 스크립트에서 호출합니다.

  • Manifest V2를 사용하는 확장 프로그램에서만 팝업 메서드를 사용할 수 있습니다.

다음 예시에서는 Google로 사용자를 로그인 처리하는 방법을 보여줍니다.

자바스크립트

popup.js

// Get reference to background page.
const bgPage = chrome.extension.getBackgroundPage();
// Sign in with popup, typically attached to a button click.
bgPage.signInWithPopup();

background.js

const app = firebase.initializeApp(config);
const auth = app.auth();
const signInWithPopup = () => {
  const provider = new firebase.auth.GoogleAuthProvider();
  return auth.signInWithPopup(provider).catch((error) => {
    console.log(error);
  });
};

다음 단계