JavaScript による GitHub を使用した認証

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

始める前に

Firebase を JavaScript プロジェクトに追加します。
Firebase コンソールで [Authentication] セクションを開きます。
[Sign-in method] タブで、[GitHub] プロバイダを有効にします。
そのプロバイダのデベロッパーコンソールで取得したクライアント ID とクライアントシークレットをプロバイダ構成に追加します。
1. GitHub でデベロッパーアプリケーションとしてアプリを登録し、アプリの OAuth 2.0 クライアント ID とクライアントシークレットを取得します。
2. GitHub アプリの構成にあるアプリ設定ページで、Firebase OAuth リダイレクト URI（my-app-12345.firebaseapp.com/__/auth/handler など）を認可コールバック URL として設定します。
[保存] をクリックします。

Firebase SDK を使用したログインフローの処理

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

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

GitHub プロバイダオブジェクトのインスタンスを作成します。
Web version 9

ツリーシェイキングが可能な Web version 9 のモジュラー SDK の詳細と、version 8 からのアップグレード方法をご確認ください。
```
import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();auth_github_provider_create.js
```
Web version 8
```
var provider = new firebase.auth.GithubAuthProvider();github.js
```
省略可: 認証プロバイダにリクエストする追加の OAuth 2.0 スコープを指定します。スコープを追加するには、addScope を呼び出します。次に例を示します。
Web version 9

ツリーシェイキングが可能な Web version 9 のモジュラー SDK の詳細と、version 8 からのアップグレード方法をご確認ください。
```
provider.addScope('repo');auth_github_provider_scopes.js
```
Web version 8
```
provider.addScope('repo');github.js
```
認証プロバイダ向けドキュメントをご覧ください。
省略可: OAuth リクエストと一緒に送信する追加のカスタム OAuth プロバイダパラメータを指定します。カスタムパラメータを追加するには、OAuth プロバイダのドキュメントで指定されたキーと、対応する値を含むオブジェクトで初期化されたプロバイダで setCustomParameters を呼び出します。
Web version 9

ツリーシェイキングが可能な Web version 9 のモジュラー SDK の詳細と、version 8 からのアップグレード方法をご確認ください。
```
provider.setCustomParameters({
  'allow_signup': 'false'
});auth_github_provider_params.js
```
Web version 8
```
provider.setCustomParameters({
  'allow_signup': 'false'
});github.js
```
予約済みの必須 OAuth パラメータは許可されず、無視されます。詳細については、認証プロバイダのリファレンスをご覧ください。

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;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).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);
    // ...
  });auth_github_signin_popup.js

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;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).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.js

また、GitHub プロバイダの OAuth トークンを取得することもできます。このトークンによって、GitHub API を使用して追加データをフェッチできます。

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

ログインページにリダイレクトしてログインする場合は、signInWithRedirect を呼び出します。「signInWithRedirect」を使用する場合は、ベストプラクティスに従ってください。

Web version 9

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_redirect.js

Web version 8

firebase.auth().signInWithRedirect(provider);index.js

次に、ページが読み込まれたときに 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;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).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);
    // ...
  });auth_github_signin_redirect_result.js

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;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).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.js

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

account-exists-with-different-credential エラーの処理

Firebase コンソールで [1 つのメールアドレスにつき 1 つのアカウント] 設定を有効にしている場合、Firebase ユーザーが、あるプロバイダ（Google など）用にすでに存在しているメールアドレスを使って別のプロバイダ（GitHub など）にログインしようとすると、AuthCredential オブジェクト（GitHub のアクセストークン）とともにエラー auth/account-exists-with-different-credential がスローされます。目的のプロバイダにログインするには、まず既存のプロバイダ（Google）にログインしてから、目的のプロバイダの AuthCredential（GitHub アクセストークン）にリンクする必要があります。

signInWithPopup を使用する場合、次のようなコードによって auth/account-exists-with-different-credential エラーを処理できます。


// Step 1.
// User tries to sign in to GitHub.
auth.signInWithPopup(new firebase.auth.GithubAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending GitHub credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // GitHub account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to GitHub credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // GitHub account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

リダイレクトモード

このエラーはリダイレクトモードでも同様の方法で処理されますが、ページをリダイレクトする間、保留された認証情報をキャッシュする必要がある点が異なります（セッションストレージなどを使用します）。

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

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

デベロッパー向けドキュメントに沿って GitHub 認証をアプリに統合します。GitHub のログインフローの最後で OAuth 2.0 アクセストークンを受け取ります。
Node.js アプリケーションにログインする必要がある場合は、OAuth アクセストークンを Node.js アプリケーションに送信します。
ユーザーが GitHub でのログインに成功したら、OAuth 2.0 アクセストークンを Firebase 認証情報と交換します。
Web version 9

ツリーシェイキングが可能な Web version 9 のモジュラー SDK の詳細と、version 8 からのアップグレード方法をご確認ください。
```
import { GithubAuthProvider } from "firebase/auth";

const credential = GithubAuthProvider.credential(token);auth_github_provider_credential.js
```
Web version 8
```
var credential = firebase.auth.GithubAuthProvider.credential(token);github.js
```

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;
    // ...
  });auth_signin_credential.js

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;
    // ...
  });index.js

Chrome 拡張機能での Firebase 認証

Chrome 拡張機能アプリを作成する場合は、Chrome 拡張機能 ID を追加する必要があります。

Firebase コンソールでプロジェクトを開きます。
[Authentication] セクションで、[Sign-in method] ページを開きます。
承認済みドメインのリストに URI を次のように追加します。
```
chrome-extension://CHROME_EXTENSION_ID
```

Chrome 拡張機能では HTTP リダイレクトを使用できないため、Chrome 拡張機能ではポップアップオペレーション（signInWithPopup、linkWithPopup、reauthenticateWithPopup）のみを使用できます。認証ポップアップはブラウザのアクションポップアップをキャンセルするため、ブラウザのアクションポップアップではなくバックグラウンドページスクリプトからこれらのメソッドを呼び出す必要があります。ポップアップメソッドは、Manifest V2 を使用する拡張機能でのみ使用できます。新しい Manifest V3 では、Service Worker 形式のバックグラウンドスクリプトのみが許可されます。そのため、ポップアップオペレーションは一切実行できません。

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

プロジェクトの作成時に、Firebase は次のようなプロジェクト固有のサブドメインをプロビジョニングします。https://my-app-12345.firebaseapp.com

これは、OAuth ログインのリダイレクトメカニズムとしても使用されます。このドメインは、サポートされているすべての OAuth プロバイダに許可される必要があります。この場合、ユーザーが GitHub にログインしている間、アプリケーションにリダイレクトする前に [Continue to: https://my-app-12345.firebaseapp.com] のようにドメインを含むメッセージが表示される可能性があります。

サブドメインが表示されないようにするには、Firebase Hosting でカスタムドメインを設定します。

Hosting 用にドメインを設定するの手順 1～3 を行います。ドメインの所有権を確認すると、Hosting はカスタムドメイン向けに SSL 証明書をプロビジョニングします。
Firebase コンソールで、認可済みドメインのリストにカスタムドメイン auth.custom.domain.com を追加します。
GitHub のデベロッパーコンソールまたは OAuth 設定ページで、リダイレクトページの URL（https://auth.custom.domain.com/__/auth/handler）をホワイトリストに登録します。これにより、カスタムドメインでアクセス可能になります。

JavaScript ライブラリを初期化するときに、authDomain フィールドにカスタムドメインを指定します。

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

次のステップ

ユーザーが初めてログインすると、新しいユーザーアカウントが作成され、ユーザーがログイン時に使用した認証情報（ユーザー名とパスワード、電話番号、または認証プロバイダ情報）にアカウントがリンクされます。この新しいアカウントは 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.
});auth_sign_out.js

Web version 8

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

JavaScript による GitHub を使用した認証

始める前に

Firebase SDK を使用したログインフローの処理

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

account-exists-with-different-credential エラーの処理

ポップアップ モード

リダイレクト モード

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

Web version 9

Web version 8

Web version 9

Web version 8

Chrome 拡張機能での Firebase 認証

GitHub ログインのリダイレクト ドメインのカスタマイズ

次のステップ

Web version 9

Web version 8

ポップアップモード

リダイレクトモード

GitHub ログインのリダイレクトドメインのカスタマイズ