GitHub 認証をアプリに統合することで、ユーザーは GitHub アカウントを使用して Firebase での認証を行えます。GitHub 認証を統合するには、Firebase SDK を使用してログインフローを行うか、または GitHub OAuth 2.0 フローを手動で行って、取得したアクセス トークンを Firebase に渡します。
始める前に
- Firebase を JavaScript プロジェクトに追加します。
- Firebase コンソールで [Auth] セクションを開きます。
- [Sign-in method] タブで、[GitHub] プロバイダを有効にします。
- そのプロバイダのデベロッパー コンソールで取得したクライアント ID とクライアント シークレットをプロバイダ構成に追加します。
- GitHub でデベロッパー アプリケーションとしてアプリを登録し、アプリの OAuth 2.0 クライアント ID とクライアント シークレットを取得します。
- 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
import { GithubAuthProvider } from "firebase/auth"; const provider = new GithubAuthProvider();
Web
var provider = new firebase.auth.GithubAuthProvider();
- 省略可: 認証プロバイダにリクエストする追加の OAuth 2.0 スコープを指定します。スコープを追加するには、
addScope
を呼び出します。次に例を示します。Web
provider.addScope('repo');
Web
provider.addScope('repo');
- 省略可: OAuth リクエストと一緒に送信する追加のカスタム OAuth プロバイダ パラメータを指定します。カスタム パラメータを追加するには、OAuth プロバイダのドキュメントで指定されたキーと、対応する値を含むオブジェクトで初期化されたプロバイダで
setCustomParameters
を呼び出します。Web
provider.setCustomParameters({ 'allow_signup': 'false' });
Web
provider.setCustomParameters({ 'allow_signup': 'false' });
- 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); // ... });
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; // ... });
ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンス ドキュメントをご覧ください。
- ログインページにリダイレクトしてログインする場合は、
signInWithRedirect
を呼び出します。「signInWithRedirect」を使用する場合は、ベスト プラクティスに従ってください。Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
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); // ... });
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 アカウントを使用して Firebase での認証を行うために、GitHub OAuth 2.0 エンドポイントを呼び出してログインフローを処理することもできます。
- デベロッパー向けドキュメントに沿って GitHub 認証をアプリに統合します。GitHub のログインフローの最後で OAuth 2.0 アクセス トークンを受け取ります。
- Node.js アプリケーションにログインする必要がある場合は、OAuth アクセス トークンを Node.js アプリケーションに送信します。
- ユーザーが GitHub でのログインに成功したら、OAuth 2.0 アクセス トークンを Firebase 認証情報と交換します。
Web
import { GithubAuthProvider } from "firebase/auth"; const credential = GithubAuthProvider.credential(token);
Web
var credential = firebase.auth.GithubAuthProvider.credential(token);
- 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; // ... });
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; // ... });
Chrome 拡張機能で Firebase による認証を行う
Chrome 拡張機能アプリを作成する場合は、画面外ドキュメントのガイドをご覧ください。
次のステップ
ユーザーが初めてログインすると、新しいユーザー アカウントが作成され、ユーザーがログイン時に使用した認証情報(ユーザー名とパスワード、電話番号、または認証プロバイダ情報)にアカウントがリンクされます。この新しいアカウントは 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. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });