このページは Cloud Translation API によって翻訳されました。

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

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

あなたが始める前に

Firebase を JavaScript プロジェクトに追加します。
Firebase コンソールで、 Authセクションを開きます。
[サインイン方法] タブで、 GitHubプロバイダーを有効にします。
そのプロバイダーの開発者コンソールからプロバイダー構成にクライアント IDとクライアントシークレットを追加します。
1. アプリを開発者アプリケーションとして GitHub に登録し、アプリの OAuth 2.0 Client IDとClient Secretを取得します。
2. GitHub アプリの configにあるアプリの設定ページで、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 v9 モジュラー SDK とバージョン 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 v9 モジュラー SDK とバージョン 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 v9 モジュラー SDK とバージョン 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;
    // ...
  }).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;
    // ...
  }).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 API を使用して追加データをフェッチするために使用できる GitHub プロバイダーの OAuth トークンを取得できることにも注意してください。

これは、エラーをキャッチして処理できる場所でもあります。エラーコードのリストについては、 Auth Reference Docsを参照してください。

サインインページにリダイレクトしてサインインするには、 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;
  }).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;
  }).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 Reference Docsを参照してください。

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

Firebase コンソールで [メールアドレスごとに 1 つのアカウント] 設定を有効にした場合、ユーザーが別の Firebase ユーザーのプロバイダー (Google など) 用に既に存在するメールアドレスを使用してプロバイダー (GitHub など) にサインインしようとすると、エラーauth/account-exists-with-different-credentialがAuthCredentialオブジェクト (GitHub アクセストークン) と共にスローされます。目的のプロバイダーへのサインインを完了するには、ユーザーはまず既存のプロバイダー (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 OAuth 2.0 エンドポイントを呼び出してサインインフローを処理することにより、GitHub アカウントを使用して Firebase で認証することもできます。

開発者のドキュメントに従って、GitHub 認証をアプリに統合します。 GitHub サインインフローの最後に、OAuth 2.0 アクセストークンを受け取ります。
Node.js アプリケーションにサインインする必要がある場合は、OAuth アクセストークンを Node.js アプリケーションに送信します。
ユーザーが GitHub で正常にサインインしたら、OAuth 2.0 アクセストークンを Firebase 資格情報と交換します。
Web version 9
ツリーシェーク可能な Web v9 モジュラー SDK とバージョン 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 コンソールでプロジェクトを開きます。
[認証]セクションで、[サインイン方法] ページを開きます。
次のような URI を承認済みドメインのリストに追加します:
```
chrome-extension://CHROME_EXTENSION_ID
```

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

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

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

これは、OAuth サインインのリダイレクトメカニズムとしても使用されます。そのドメインは、サポートされているすべての OAuth プロバイダーに対して許可する必要があります。ただし、これは、アプリケーションにリダイレクトする前に、ユーザーが GitHub にサインインしているときにそのドメインが表示される可能性があることを意味します。

サブドメインが表示されないようにするには、Firebase 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

Firebase SDK でログインフローを処理する

リダイレクトモード

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

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