Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기

JavaScript로 GitHub를 사용하여 인증

GitHub 인증을 앱에 통합하여 사용자가 GitHub 계정을 사용하여 Firebase에 인증하도록 할 수 있습니다. Firebase SDK를 사용하여 로그인 흐름을 수행하거나 GitHub OAuth 2.0 흐름을 수동으로 수행하고 결과 액세스 토큰을 Firebase에 전달하여 GitHub 인증을 통합할 수 있습니다.

시작하기 전에

  1. JavaScript 프로젝트에 Firebase를 추가합니다 .
  2. Firebase 콘솔 에서 인증 섹션을 엽니다.
  3. 로그인 방법 탭에서 GitHub 공급자를 활성화합니다.
  4. 해당 공급자의 개발자 콘솔에서 공급자 구성에 클라이언트 ID클라이언트 암호 를 추가합니다.
    1. GitHub에서 앱을 개발자 애플리케이션으로 등록 하고 앱의 OAuth 2.0 클라이언트 ID클라이언트 암호 를 가져옵니다.
    2. Firebase OAuth 리디렉션 URI (예: my-app-12345.firebaseapp.com/__/auth/handler )가 GitHub 앱 구성의 앱 설정 페이지에서 승인 콜백 URL 로 설정되어 있는지 확인합니다.
  5. 저장 을 클릭합니다.

Firebase SDK로 로그인 흐름 처리

웹 앱을 빌드하는 경우 GitHub 계정을 사용하여 Firebase에서 사용자를 인증하는 가장 쉬운 방법은 Firebase JavaScript SDK로 로그인 흐름을 처리하는 것입니다. (Node.js 또는 기타 비 브라우저 환경에서 사용자를 인증하려면 로그인 절차를 수동으로 처리해야 합니다.)

Firebase JavaScript SDK로 로그인 흐름을 처리하려면 다음 단계를 따르세요.

  1. GitHub 공급자 개체의 인스턴스를 만듭니다.

    Web version 9

    import { GithubAuthProvider } from "firebase/auth";
    
    const provider = new GithubAuthProvider();

    Web version 8

    var provider = new firebase.auth.GithubAuthProvider();
  2. 선택 사항 : 인증 공급자에게 요청할 추가 OAuth 2.0 범위를 지정합니다. 범위를 추가하려면 addScope 를 호출하십시오. 예를 들어:

    Web version 9

    provider.addScope('repo');

    Web version 8

    provider.addScope('repo');
    인증 공급자 설명서 를 참조하십시오.
  3. 선택 사항 : OAuth 요청과 함께 보낼 추가 사용자 지정 OAuth 공급자 매개변수를 지정합니다. 사용자 정의 매개변수를 추가하려면 OAuth 제공자 문서에 지정된 키와 해당 값을 포함하는 객체를 사용하여 초기화된 제공자에서 setCustomParameters 를 호출하십시오. 예를 들어:

    Web version 9

    provider.setCustomParameters({
      'allow_signup': 'false'
    });

    Web version 8

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    예약된 필수 OAuth 매개변수는 허용되지 않으며 무시됩니다. 자세한 내용은 인증 공급자 참조 를 참조하세요.
  4. GitHub 공급자 개체를 사용하여 Firebase에 인증합니다. 팝업 창을 열거나 로그인 페이지로 리디렉션하여 사용자에게 GitHub 계정으로 로그인하라는 메시지를 표시할 수 있습니다. 리디렉션 방법은 모바일 장치에서 선호됩니다.
    • 팝업 창으로 로그인하려면 signInWithPopup 을 호출하십시오.

      Web version 9

      import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a GitHub Access Token. You can use it to access the GitHub API.
          const credential = GithubAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          // The signed-in user info.
          const user = result.user;
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a GitHub Access Token. You can use it to access the GitHub API.
          var token = credential.accessToken;
      
          // The signed-in user info.
          var user = result.user;
          // ...
        }).catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });
      또한 GitHub API를 사용하여 추가 데이터를 가져오는 데 사용할 수 있는 GitHub 공급자의 OAuth 토큰을 검색할 수 있습니다.

      여기에서 오류를 포착하고 처리할 수도 있습니다. 오류 코드 목록은 Auth Reference Docs 를 참조하십시오.

    • 로그인 페이지로 리디렉션하여 로그인하려면 signInWithRedirect 를 호출하십시오.

      Web version 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web version 8

      firebase.auth().signInWithRedirect(provider);
      그런 다음 페이지가 로드될 때 getRedirectResult 를 호출하여 GitHub 공급자의 OAuth 토큰을 검색할 수도 있습니다.

      Web version 9

      import { getAuth, getRedirectResult, GithubAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          const credential = GithubAuthProvider.credentialFromResult(result);
          if (credential) {
            // This gives you a GitHub Access Token. You can use it to access the GitHub API.
            const token = credential.accessToken;
            // ...
          }
      
          // The signed-in user info.
          const user = result.user;
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a GitHub Access Token. You can use it to access the GitHub API.
            var token = credential.accessToken;
            // ...
          }
      
          // The signed-in user info.
          var user = result.user;
        }).catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });
      여기에서 오류를 포착하고 처리할 수도 있습니다. 오류 코드 목록은 Auth Reference Docs 를 참조하십시오.

수동으로 로그인 흐름 처리

GitHub OAuth 2.0 엔드포인트를 호출하여 로그인 흐름을 처리하여 GitHub 계정을 사용하여 Firebase에 인증할 수도 있습니다.

  1. 개발자 설명서 에 따라 GitHub 인증을 앱에 통합합니다. GitHub 로그인 흐름이 끝나면 OAuth 2.0 액세스 토큰을 받게 됩니다.
  2. Node.js 애플리케이션에 로그인해야 하는 경우 OAuth 액세스 토큰을 Node.js 애플리케이션에 보냅니다.
  3. 사용자가 GitHub에 성공적으로 로그인한 후 OAuth 2.0 액세스 토큰을 Firebase 자격 증명으로 교환합니다.

    Web version 9

    import { GithubAuthProvider } from "firebase/auth";
    
    const credential = GithubAuthProvider.credential(token);

    Web version 8

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. Firebase 자격 증명을 사용하여 Firebase에 인증합니다.

    Web version 9

    import { getAuth, signInWithCredential } from "firebase/auth";
    
    // Sign in with the credential from the user.
    const auth = getAuth();
    signInWithCredential(auth, credential)
      .then((result) => {
        // Signed in 
        // ...
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.customData.email;
        // ...
      });

    Web version 8

    // Sign in with the credential from the user.
    firebase.auth()
      .signInWithCredential(credential)
      .then((result) => {
        // Signed in 
        // ...
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.email;
        // ...
      });

Chrome 확장 프로그램에서 Firebase로 인증

Chrome 확장 프로그램 앱을 빌드하는 경우 Chrome 확장 프로그램 ID를 추가해야 합니다.

  1. Firebase 콘솔 에서 프로젝트를 엽니다.
  2. 인증 섹션에서 로그인 방법 페이지를 엽니다.
  3. 승인된 도메인 목록에 다음과 같은 URI를 추가합니다.
    chrome-extension://CHROME_EXTENSION_ID

Chrome 확장 프로그램은 HTTP 리디렉션을 사용할 수 없으므로 팝업 작업( signInWithPopup , linkWithPopupreauthenticateWithPopup )만 Chrome 확장 프로그램에서 사용할 수 있습니다. 인증 팝업이 브라우저 작업 팝업을 취소하므로 브라우저 작업 팝업이 아닌 배경 페이지 스크립트에서 이러한 메서드를 호출해야 합니다. 팝업 메서드는 Manifest V2 를 사용하는 확장에서만 사용할 수 있습니다. 최신 Manifest V3 에서는 팝업 작업을 전혀 수행할 수 없는 서비스 워커 형태의 백그라운드 스크립트만 허용합니다.

Chrome 확장 프로그램의 매니페스트 파일에서 https://apis.google.com URL을 content_security_policy 허용 목록에 추가해야 합니다.

다음 단계

사용자가 처음으로 로그인하면 새 사용자 계정이 생성되어 사용자가 로그인한 자격 증명(즉, 사용자 이름 및 암호, 전화 번호 또는 인증 공급자 정보)에 연결됩니다. 이 새 계정은 Firebase 프로젝트의 일부로 저장되며 사용자 로그인 방식에 관계없이 프로젝트의 모든 앱에서 사용자를 식별하는 데 사용할 수 있습니다.

  • 앱에서 사용자의 인증 상태를 알 수 있는 권장 방법은 Auth 개체에 관찰자를 설정하는 것입니다. 그런 다음 User 개체에서 사용자의 기본 프로필 정보를 가져올 수 있습니다. 사용자 관리 를 참조하십시오.

  • Firebase 실시간 데이터베이스 및 Cloud Storage 보안 규칙 에서 auth 변수에서 로그인한 사용자의 고유 사용자 ID를 가져와 사용자가 액세스할 수 있는 데이터를 제어하는 ​​데 사용할 수 있습니다.

인증 공급자 자격 증명을 기존 사용자 계정에 연결하여 사용자가 여러 인증 공급자를 사용하여 앱에 로그인하도록 허용할 수 있습니다.

사용자를 로그아웃하려면 signOut 을 호출합니다.

Web version 9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});