GitHub 認証をアプリに統合することで、ユーザーが GitHub アカウントを使用して Firebase で認証できるようにすることができます。 GitHub 認証を統合するには、Firebase SDK を使用してサインイン フローを実行するか、GitHub OAuth 2.0 フローを手動で実行して、結果のアクセス トークンを Firebase に渡します。
あなたが始める前に
- Firebase を JavaScript プロジェクトに追加します。
- Firebase コンソールで、 Authセクションを開きます。
- [サインイン方法] タブで、 GitHubプロバイダーを有効にします。
- そのプロバイダーの開発者コンソールからプロバイダー構成にクライアント IDとクライアント シークレットを追加します。
- アプリを開発者アプリケーションとして GitHub に登録し、アプリの OAuth 2.0 Client IDとClient Secretを取得します。
- 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
import { GithubAuthProvider } from "firebase/auth"; const provider = new GithubAuthProvider();
Web version 8
var provider = new firebase.auth.GithubAuthProvider();
- オプション: 認証プロバイダーから要求する追加の OAuth 2.0 スコープを指定します。スコープを追加するには、
addScope
を呼び出します。例えば:認証プロバイダーのドキュメントを参照してください。Web version 9
provider.addScope('repo');
Web version 8
provider.addScope('repo');
- オプション: OAuth 要求で送信する追加のカスタム OAuth プロバイダー パラメーターを指定します。カスタム パラメータを追加するには、OAuth プロバイダのドキュメントで指定されているキーと対応する値を含むオブジェクトを使用して、初期化されたプロバイダで
setCustomParameters
を呼び出します。例えば:予約済みの必須 OAuth パラメータは許可されておらず、無視されます。詳細については、認証プロバイダーのリファレンスを参照してください。Web version 9
provider.setCustomParameters({ 'allow_signup': 'false' });
Web version 8
provider.setCustomParameters({ 'allow_signup': 'false' });
- GitHub プロバイダー オブジェクトを使用して Firebase で認証します。ポップアップ ウィンドウを開くか、サインイン ページにリダイレクトすることで、GitHub アカウントでサインインするようにユーザーに促すことができます。モバイル デバイスではリダイレクト方式が推奨されます。
- ポップアップ ウィンドウでサインインするには、
signInWithPopup
を呼び出します。また、GitHub API を使用して追加データをフェッチするために使用できる GitHub プロバイダーの OAuth トークンを取得できることにも注意してください。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; // ... });
これは、エラーをキャッチして処理できる場所でもあります。エラー コードのリストについては、 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 トークンを取得することもできます。これは、エラーをキャッチして処理できる場所でもあります。エラー コードのリストについては、 Auth Reference Docsを参照してください。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; // ... });
- ポップアップ ウィンドウでサインインするには、
サインイン フローを手動で処理する
GitHub OAuth 2.0 エンドポイントを呼び出してサインイン フローを処理することにより、GitHub アカウントを使用して Firebase で認証することもできます。
- 開発者のドキュメントに従って、GitHub 認証をアプリに統合します。 GitHub サインイン フローの最後に、OAuth 2.0 アクセス トークンを受け取ります。
- Node.js アプリケーションにサインインする必要がある場合は、OAuth アクセス トークンを Node.js アプリケーションに送信します。
- ユーザーが 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);
- 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 を追加する必要があります。
- 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 プロジェクトの一部として保存され、ユーザーのサインイン方法に関係なく、プロジェクト内のすべてのアプリでユーザーを識別するために使用できます。
アプリでユーザーの認証ステータスを知るための推奨される方法は、
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. });