4 月 9～11 日の Cloud Next で Firebase が再登場します。今すぐご登録ください。

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

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

始める前に

Firebase を JavaScript プロジェクトに追加します。
Firebase コンソールで [Auth] セクションを開きます。
[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

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

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

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

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

GitHub プロバイダオブジェクトを使用して Firebase での認証を行います。ユーザーに GitHub アカウントでログインするよう促すために、ポップアップウィンドウを表示するか、ログインページにリダイレクトします。モバイルデバイスではリダイレクトすることをおすすめします。

ポップアップウィンドウでログインを行う場合は、signInWithPopup を呼び出します。

Web

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

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

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

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

Web

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

次に、ページが読み込まれたときに getRedirectResult を呼び出すことによって、GitHub プロバイダの OAuth トークンを取得することもできます。

Web

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

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 エラーを処理できます。

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  GitHubAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using GitHub.
  let result = await signInWithPopup(getAuth(), new GitHubAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending GitHub credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the GitHub credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

リダイレクトモード

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

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

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

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

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

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

Firebase 認証情報を使用して Firebase での認証を行います。

Web

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

// 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 拡張機能アプリを作成する場合は、画面外ドキュメントのガイドをご覧ください。

プロジェクトの作成時に、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 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

次のステップ

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

アプリでユーザーの認証ステータスを把握するには、Auth オブジェクトにオブザーバーを設定することをおすすめします。これによって、ユーザーの基本的なプロフィール情報を User オブジェクトから取得できます。ユーザーを管理するをご覧ください。
Firebase Realtime Database と Cloud Storage のセキュリティルールでは、ログイン済みユーザーの一意のユーザー ID を auth 変数から取得し、それを使用して、ユーザーがアクセスできるデータを制御できます。

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

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

Web

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

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

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

始める前に

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

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

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

ポップアップ モード

リダイレクト モード

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

Web

Web

Web

Web

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

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

次のステップ

Web

Web

ポップアップモード

リダイレクトモード

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