Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

JavaScriptでGitHubを使用して認証する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

GitHub 認証をアプリに統合することで、ユーザーが GitHub アカウントを使用して Firebase で認証できるようにすることができます。 GitHub 認証を統合するには、Firebase SDK を使用してサインイン フローを実行するか、GitHub OAuth 2.0 フローを手動で実行して、結果のアクセス トークンを Firebase に渡します。

あなたが始める前に

  1. Firebase を JavaScript プロジェクトに追加します
  2. Firebase コンソールで、 Authセクションを開きます。
  3. [サインイン方法] タブで、 GitHubプロバイダーを有効にします。
  4. そのプロバイダーの開発者コンソールからプロバイダー構成にクライアント IDクライアント シークレットを追加します。
    1. アプリを開発者アプリケーションとして GitHub に登録し、アプリの OAuth 2.0 Client IDClient Secretを取得します。
    2. GitHub アプリの configにあるアプリの設定ページで、Firebase OAuth リダイレクト URI (例: my-app-12345.firebaseapp.com/__/auth/handler ) が認証コールバック 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 リダイレクトを使用できないため、ポップアップ操作 ( signInWithPopuplinkWithPopup 、およびreauthenticateWithPopup ) のみが Chrome 拡張機能で使用できます。認証ポップアップはブラウザ アクション ポップアップをキャンセルするため、ブラウザ アクション ポップアップではなく、バックグラウンド ページ スクリプトからこれらのメソッドを呼び出す必要があります。 popup メソッドは、 Manifest V2を使用する拡張機能でのみ使用できます。新しいマニフェスト V3では、ポップアップ操作をまったく実行できない Service Worker の形式のバックグラウンド スクリプトのみが許可されます。

Chrome 拡張機能のマニフェスト ファイルで、必ずhttps://apis.google.com URL をcontent_security_policy許可リストに追加してください。

次のステップ

ユーザーが初めてサインインすると、新しいユーザー アカウントが作成され、サインインに使用したユーザーの資格情報 (ユーザー名とパスワード、電話番号、または認証プロバイダー情報) にリンクされます。この新しいアカウントは Firebase プロジェクトの一部として保存され、ユーザーのサインイン方法に関係なく、プロジェクト内のすべてのアプリでユーザーを識別するために使用できます。

  • アプリでユーザーの認証ステータスを知るための推奨される方法は、 Authオブジェクトにオブザーバーを設定することです。その後、 Userオブジェクトからユーザーの基本的なプロファイル情報を取得できます。ユーザーの管理を参照してください。

  • Firebase Realtime Database と Cloud Storageセキュリティ ルールでは、サインインしているユーザーの一意のユーザー ID をauth変数から取得し、それを使用してユーザーがアクセスできるデータを制御できます。

認証プロバイダーの資格情報を既存のユーザー アカウントにリンクすることで、ユーザーが複数の認証プロバイダーを使用してアプリにサインインできるようにすることができます。

ユーザーをサインアウトするには、 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.
});