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

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

準備

  1. Firebase を JavaScript プロジェクトに追加します
  2. GitHub でデベロッパー アプリケーションとしてアプリを登録し、アプリの OAuth 2.0 クライアント IDクライアント シークレットを取得します。
  3. GitHub 認証を有効にします。
    1. Firebase コンソールで [Auth] セクションを開きます。
    2. [ログイン方法] タブで [GitHub] を有効にし、GitHub から取得した OAuth 2.0 の [クライアント ID] と [クライアント シークレット] を指定します。
    3. 次に、Firebase OAuth リダイレクト URImy-app-12345.firebaseapp.com/__/auth/handler など)を、GitHub アプリの設定にあるアプリ設定ページで [認証コールバック URL] として設定します。

Firebase SDK を使用してログインフローを処理する

ウェブアプリをビルドしている場合に、GitHub アカウントを使用して Firebase でユーザーを認証する最も簡単な方法は、Firebase JavaScript SDK でログインフローを処理することです(Node.js または他の非ブラウザ環境でユーザーを認証する場合、ログインフローを手動で処理する必要があります)。

Firebase JavaScript SDK でログインフローを処理する手順は次のとおりです。

  1. GitHub プロバイダ オブジェクトのインスタンスを作成します。
    var provider = new firebase.auth.GithubAuthProvider();
    
  2. 省略可: 認証プロバイダにリクエストする追加の OAuth 2.0 スコープを指定します。スコープを追加するには、addScope を呼び出します。次に例を示します。
    provider.addScope('repo');
    
    認証プロバイダ向けドキュメントをご覧ください。
  3. 省略可: OAuth リクエストと一緒に送信したい追加のカスタム OAuth プロバイダ パラメータを指定します。カスタム パラメータを追加するには、OAuth プロバイダのドキュメントで指定されたキーと対応する値を含むオブジェクトで初期化されたプロバイダで setCustomParameters を呼び出します。次に例を示します。
    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    
    予約済みの必須 OAuth パラメータは許可されず、無視されます。詳細については、認証プロバイダのリファレンスをご覧ください。
  4. GitHub プロバイダ オブジェクトを使用して Firebase での認証を行います。ユーザーに GitHub アカウントでログインするよう促すために、ポップアップ ウィンドウを表示するか、ログインページにリダイレクトします。モバイル端末ではリダイレクトすることをおすすめします。
    • ポップアップ ウィンドウでログインを行う場合は、signInWithPopup を呼び出します。
      firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a GitHub Access Token. You can use it to access the GitHub API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }).catch(function(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 プロバイダの OAuth トークンを取得することもできます。このトークンによって、GitHub API を使用して追加データをフェッチできます。

      ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンス ドキュメントをご覧ください。

    • ログインページにリダイレクトしてログインを行う場合は、signInWithRedirect を呼び出します。
      firebase.auth().signInWithRedirect(provider);
      
      次に、ページが読み込まれたときに getRedirectResult を呼び出すことによって、GitHub プロバイダの OAuth トークンを取得することもできます。
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // This gives you a GitHub Access Token. You can use it to access the GitHub API.
          var token = result.credential.accessToken;
          // ...
        }
        // The signed-in user info.
        var user = result.user;
      }).catch(function(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 のリファレンス ドキュメントをご覧ください。

手動でログインフローを処理する

GitHub アカウントを使用して Firebase での認証を行うために、GitHub OAuth 2.0 エンドポイントを呼び出してログインフローを処理することもできます。

  1. デベロッパー向けドキュメントに沿って GitHub 認証をアプリに統合します。GitHub のログインフローの最後で OAuth 2.0 アクセス トークンを受け取ります。
  2. Node.js アプリケーションにログインする必要がある場合は、OAuth アクセス トークンを Node.js アプリケーションに送信します。
  3. ユーザーが GitHub でのログインに成功したら、OAuth 2.0 アクセス トークンを Firebase 認証情報と交換します。
    var credential = firebase.auth.GithubAuthProvider.credential(token);
    
  4. Firebase 認証情報を使用して Firebase での認証を行います。
    firebase.auth().signInWithCredential(credential).catch(function(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;
      // ...
    });

Chrome 拡張機能で Firebase 認証を行う

Chrome 拡張アプリを作成する場合は、Chrome 拡張 ID をホワイトリストに登録する必要があります。

  1. Firebase コンソールでプロジェクトを開きます。
  2. [Authentication] セクションで、[ログイン方法] ページを開きます。
  3. OAuth リダイレクト ドメインのリストに次のような URI を追加します。
    chrome-extension://CHROME_EXTENSION_ID

Chrome 拡張機能では HTTP リダイレクトを使用できないため、Chrome 拡張機能ではポップアップ オペレーション(signInWithPopuplinkWithPopup)のみを使用できます。認証ポップアップはブラウザのアクション ポップアップをキャンセルするため、ブラウザのアクション ポップアップではなくバックグラウンド スクリプトからこれらのメソッドを呼び出す必要があります。

次のステップ

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

  • アプリでユーザーの認証ステータスを把握するには、Auth オブジェクトにオブザーバーを設定することをおすすめします。これによって、ユーザーの基本的なプロフィール情報を User オブジェクトから取得できます。ユーザーの管理についての記事をご覧ください。

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

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

ユーザーのログアウトを行うには signOut を呼び出します。

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

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。