Chrome 확장 프로그램용 Firebase 로그인

FirebaseUI를 사용하는 Chrome 확장 프로그램용 Firebase 로그인

이 튜토리얼에서는 사용자가 Google 크롬 확장 프로그램의 작동 방식을 알고 있다고 가정합니다. 더 알아보기 .

의 시작하자.

코드 라인을 만지기 전에 개발 환경을 설정해야 합니다.

https://console.firebase.google.com/으로 이동하여 로그인합니다.

'프로젝트 만들기'를 클릭하고 이름을 지정합니다.

'분석' 기능이 필요한 경우 선택하십시오.

프로젝트가 생성되면 웹 아이콘을 클릭하여 새 앱을 생성합니다.



앱 이름을 지정합니다.
Firebase 호스팅 기능이 필요한 경우 선택하세요.

개발자 콘솔로 돌아가서 '인증' 카드를 클릭합니다.
탐색 모음에서 '로그인 방법'을 클릭합니다.

여기에서 사용자에게 제공할 로그인 옵션을 선택합니다.

이 자습서에서는 Google과 GitHub를 사용합니다.



Google 옵션을 클릭하고 활성화한 다음 지원 이메일을 제공하고 저장합니다.
GitHub 옵션을 클릭하고 활성화합니다.
이 페이지에서 '콜백 URL'을 복사합니다.

GitHub의 개발자 "콘솔"에서 '클라이언트 ID' 및 '클라이언트 암호'를 검색해야 합니다.

GitHub로 이동하여 사용자 아이콘을 클릭하고 설정을 선택합니다.
개발자 설정 > OAuth 앱 > 새 애플리케이션 만들기를 클릭합니다.

원하는대로 응용 프로그램의 이름을 지정하십시오.

'홈페이지 URL'은 원하는 모든 것이 될 수 있습니다.
'인증 콜백 URL'은 Firebase에서 제공하는 '콜백 URL'입니다.
'응용 프로그램 등록'을 클릭합니다.
'클라이언트 ID'와 '클라이언트 암호'를 복사하여 Firebase GitHub 옵션에 붙여넣습니다.

'도메인 추가'까지 아래로 스크롤합니다. Chrome 확장 프로그램을 허용 목록에 추가해야 합니다.
Chrome 확장 프로그램 ID인 "chrome-extension://"도메인을 추가합니다.

이것은 브라우저에서 @ chrome://extensions/에서 찾을 수 있습니다.

'이메일 주소당 여러 계정'까지 아래로 스크롤합니다.
원하는 경우 이 기능을 활성화합니다.

이제 실제 코딩으로 시작할 수 있습니다.

실제 Chrome 확장 작업을 시작하기 전에 일부 웹 개발 작업을 수행해 보겠습니다.

세 페이지가 필요합니다.

사용자에게 '로그인' 옵션을 제공하는 데 사용할 'popup.html'입니다.

사용자에게 성공적으로 로그인했음을 알리기 위해 표시할 'welcome.html'입니다.

사용자에게 '로그아웃' 옵션을 제공하는 데 사용할 'main.html'입니다.

메모:
HTML 파일에 첨부된 모든 '스크립트'를 기록해 두십시오. 우리는 그것들을 채울 것입니다.

이제 Web Dev 부분이 끝났으니 'manifest.json'을 살펴보겠습니다.

메모:
"content_security_policy"는 이 앱에 필수적입니다. Firebase에서 필요한 파일을 다운로드할 수 있습니다.

실제 Chrome 확장 프로그래밍을 해봅시다.

앱의 기본 뼈대 논리 흐름을 코딩하는 것으로 시작하겠습니다.

'main-script.js' 스크립트에서 사용자가 다이아몬드를 클릭하면 'background.js' 스크립트에 "sign_out"을 요청하는 메시지를 보냅니다.

'background.js'에서 "성공"을 얻으면 페이지를 'popup.html' 페이지로 변경합니다.

// main-script.js

document.querySelector('#sign_out').addEventListener('click', () => {
    chrome.runtime.sendMessage({ message: 'sign_out' },
        function (response) {
            if (response.message === 'success') {
                window.location.replace('./popup.html');
            }
        }
    });
});

'popup-init.js' 스크립트에서 사용자가 현재 로그인되어 있는지 확인합니다.

그렇다면 'main.html' 페이지를 보여줍니다. 그렇지 않은 경우 'popup.html' 페이지를 표시합니다.

// popup-init.js

function init() {
    chrome.runtime.sendMessage({ message: 'is_user_signed_in' }, 
        function (response) {
            if (response.message === 'success' && response.payload) {
                window.location.replace('./main.html');
            }
        }
    });
}

init();

'popup-script.js'는 우리가 대부분의 코딩을 할 곳입니다.

그러나 그 전에 Firebase SDK를 다운로드해야 합니다.
그래서 'popup.html'에서 헤드에 일부 스크립트와 링크를 포함할 것입니다.

// popup.html

<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-auth.js"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />

popup-script.js로 이동해 보겠습니다.

에서 많은 코드를 복사하여 붙여넣을 것입니다.

https://firebase.google.com/docs/auth/web/firebaseui

Firebase 웹 앱의 설정으로 이동합니다.
'Firebase SDK 스니펫'을 찾을 때까지 아래로 스크롤합니다.
'구성'만 있으면 됩니다.

그것을 복사하여 'popup-script.js'에 붙여넣고 초기화하십시오.

// popup-script.js

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};

firebase.initializeApp(firebaseConfig);

다음으로:

'Firebase 인증 UI' 초기화

UI 옵션 설정

사용자가 '로그인' 버튼을 클릭하면 UI가 시작됩니다

.

메모:

'uiConfig''의 'signInSuccessWithAuthResult: function (authResult, redirectUrl)'에서 'background.js' 스크립트에 메시지를 전송하여
사용자가 성공적으로 로그인한 확장 프로그램입니다.

'uiShown: function()'에서 '로그인' 버튼을 숨겼는지 확인합니다.

Chrome에서 다시 리디렉션하는 것을 허용하지 않으므로 'signInSuccessUrl'에 대한 값이 필요하지 않습니다.

당신은 그것을 가지고 있습니다. Google Chrome 확장 프로그램에 Firebase 인증이 도입되었습니다.

보다 심층적인 가이드를 원하시면 YouTube에서 전체 비디오 자습서를 확인하십시오.

Chrome 확장 프로그램을 사용한 Firebase 로그인 시스템 | OAuth/OAuth2/OpenID 연결