Firebaseは、Googleが提供するモバイルとウェブアプリケーション開発のためのプラットフォームです。Firebase Authenticationを使用すると、Googleアカウントを含む多様な認証方法を簡単に実装できます。本記事では、Firebaseを使ってウェブアプリケーションにGoogleログイン機能を追加する手順を解説します。
ステップ1: Firebaseプロジェクトのセットアップ
1. Firebaseコンソールでプロジェクトを作成
Firebaseコンソールにアクセスし、Googleアカウントでログインします。
「プロジェクトを追加」をクリックし、プロジェクト名を入力して作成します。
2. ウェブアプリを追加
プロジェクトのダッシュボードで「>」アイコンをクリックしてウェブアプリを追加します。
アプリのニックネームを入力し(例: my-web-app)、必要に応じてFirebase Hostingを設定します。
作成後、Firebase SDKの設定スニペットが表示されます。これを後で使用するのでコピーしておきます。
ステップ2: 認証方法の有効化
1. 認証ページに移動
Firebaseコンソールの左側のメニューから「Authentication」を選択します。
2. サインイン方法を設定
「サインイン方法」タブで、「Google」を選択し、有効にします。
必要に応じてプロジェクトのサポートメールを設定します。
ステップ3: プロジェクトにFirebaseを追加
1. Firebase SDKのスクリプトを追加
HTMLファイルの
<!-- Firebase App(必須) -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<!-- Firebase Authentication(オプション) -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js"></script>
2. Firebaseの設定を初期化
先ほどコピーしたFirebase SDKの設定スニペットを追加します。
<script>
// Firebaseの設定
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
// 他の設定項目
};
// Firebaseの初期化
firebase.initializeApp(firebaseConfig);
</script>
ステップ4: Googleログイン機能の実装
- ログインボタンの作成
HTMLファイルの内にログインボタンを追加します。
<button id="login">Googleでログイン</button>
2. 認証処理の実装
タグ内に以下のコードを追加します。
// Firebase Authenticationの参照を取得
const auth = firebase.auth();
// Google認証プロバイダーのインスタンスを作成
const provider = new firebase.auth.GoogleAuthProvider();
// ログインボタンのクリックイベントを設定
document.getElementById('login').addEventListener('click', () => {
auth.signInWithPopup(provider)
.then((result) => {
// ログイン成功時の処理
const user = result.user;
console.log('ユーザー情報:', user);
alert(`ようこそ、${user.displayName}さん!`);
})
.catch((error) => {
// エラー処理
console.error('エラー:', error);
});
});
3. ログアウト機能の追加(オプション)
<button id="logout">ログアウト</button>
javascript
コードをコピーする
document.getElementById('logout').addEventListener('click', () => {
auth.signOut()
.then(() => {
alert('ログアウトしました。');
})
.catch((error) => {
console.error('エラー:', error);
});
});
ステップ5: ユーザーの認証状態を監視
ユーザーのログイン状態をリアルタイムで監視するには、onAuthStateChangedメソッドを使用します。
auth.onAuthStateChanged((user) => {
if (user) {
// ユーザーがログインしている場合の処理
console.log('ログイン中:', user);
} else {
// ユーザーがログアウトしている場合の処理
console.log('ログアウトしています。');
}
});
ステップ6: セキュリティ上の考慮事項
APIキーの保護: FirebaseのAPIキーは公開されても問題ないように設計されていますが、不必要に共有しないよう注意しましょう。
Firebaseルールの設定: データベースやストレージを使用する場合は、Firebaseのセキュリティルールを適切に設定してください。
#まとめ
これでFirebaseを使用したGoogleログイン機能の実装が完了しました。Firebase Authenticationを使うことで、複雑なバックエンドの設定なしに認証機能を追加できます。さらに、他の認証方法(メール/パスワード、Facebook、Twitterなど)も簡単に統合できます。
参考資料
Firebase公式ドキュメント - ウェブでのGoogleサインイン
Firebase Authenticationの概要
毎日更新していますので、@y-t0910をフォロー,いいねしていただけると嬉しいです。