Firebase Authentication によるログイン機能を試す - Web版
「Firebase Authentication」によるWebのログイン機能を試したのでまとめました。
1. Firebase Authentication
「Firebase Authentication」安全なログイン機能を提供するFirebaseのサービスです。メールアドレスとパスワードの組み合わせ、電話認証、Google、Twitter、Facebook、GitHubログインなどに対応しています。
2. アプリプロジェクトの準備
アプリプロジェクトの準備手順は、次のとおりです。
(1) 「Node.js」のセットアップ。
(2) アプリプロジェクトのセットアップ。
今回は、「React」を使います。
$ npx create-react-app my-react
プロジェクト構成は、次のようになります。
(3) アプリの動作確認。
$ npm start
ブラウザが起動し、アプリが表示されます。
3. Firebaseプロジェクトの準備
Firebaseプロジェクトの準備手順は、次のとおりです。
(1) Firebaseのコンソールでプロジェクトを作成。
(2) 「アプリを追加」ボタンを押し、「Web」を選択。
(3) 画面指示に従い、アプリプロジェクトにnpmをインストール。
$ npm install firebase
(4) 画面に表示されるFirebaseの初期化コードをもとに、アプリプロジェクトに「firebase.js」を追加。
・firebase.js
// 必要なSDKから必要な機能をインポート
import { initializeApp } from "firebase/app";
//import { getAnalytics } from "firebase/analytics";
// 使用するFirebaseのSDKを追加
// https://firebase.google.com/docs/web/setup#available-libraries
// WebアプリのFirebase構成
// Firebase JS SDK v7.20.0 以降の場合、measurementId はオプションです
const firebaseConfig = {
apiKey: "XXXX",
authDomain: "XXXX",
projectId: "XXXX",
storageBucket: "XXXX",
messagingSenderId: "XXXX",
appId: "XXXX",
measurementId: "XXXX"
};
// Firebaseの初期化
const firebaseApp = initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);
export default firebaseApp;
オブジェクト名を「app」から「firebaseApp」に変更し、「export default firebaseApp;」でエクスポートしています。
(4) アプリプロジェクトのApp.jsを以下のように編集。
・App.js
import logo from './logo.svg';
import './App.css';
import firebaseApp from './firebase';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Firebase name {firebaseApp.name}
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
「import firebaseApp from './firebase';」を追加し、テキスト表示を「Firebase name {firebaseApp.name}」に変更しています。
(5) アプリを実行して、「Firebase name [DEFAULT]」が表示されることを確認。
4. Firebaseコンソールでのログイン機能の準備
Firebaseコンソールでのログイン機能の準備の手順は、次のとおりです。
(1) 「Firebaseコンソール」で「Authentication」を選択し、「ログイン方法を設定」ボタンを押す。
(2) 追加するログイン方法として「Google」を選択。
(3) 有効化し、「プロジェクト公開名」と「プロジェクトサポートメール」を入力し、保存ボタンを押す。
5. Webアプリでのログイン機能の準備
Webアプリでのログイン機能の準備の手順は、次のとおりです。
(1) 「firebase.js」で認証オブジェクトとGoogle認証プロバイダを準備。
・firebase.js
// 必要なSDKから必要な機能をインポート
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
// WebアプリのFirebase構成
// Firebase JS SDK v7.20.0 以降の場合、measurementId はオプションです
const firebaseConfig = {
apiKey: "XXXX",
authDomain: "XXXX",
projectId: "XXXX",
storageBucket: "XXXX",
messagingSenderId: "XXXX",
appId: "XXXX",
measurementId: "XXXX"
};
// Firebaseの初期化
const firebaseApp = initializeApp(firebaseConfig);
// 認証オブジェクトの準備
const auth = getAuth(firebaseApp);
// Google認証プロバイダの準備
const googleProvider = new GoogleAuthProvider();
export { auth, googleProvider };
(2) 「AuthComponent.js」を追加。
・AuthComponent.js
import React, { useState, useEffect } from 'react';
import { signInWithPopup, signOut } from "firebase/auth";
import { auth, googleProvider } from './firebase';
const AuthComponent = () => {
const [user, setUser] = useState(null); // ログイン状態
// ログイン状態の監視
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((authUser) => {
if (authUser) {
// ログインしている場合
setUser(authUser);
} else {
// ログアウトしている場合
setUser(null);
}
});
// アンマウント時に監視解除
return () => {
unsubscribe();
};
}, []);
// ログイン
const handleSignIn = async () => {
try {
// Googleログインポップアップを表示
const result = await signInWithPopup(auth, googleProvider);
// ログイン成功時の処理
console.log('ログイン成功', result.user);
} catch (error) {
// エラーハンドリング
console.error('ログインエラー', error);
}
};
// ログアウト
const handleSignOut = async () => {
try {
await signOut(auth);
} catch (error) {
console.error('ログアウトエラー:', error);
}
};
return (
<div>
{user ? (
<div>
<p>ログインユーザー: {user.displayName}</p>
<button onClick={handleSignOut}>ログアウト</button>
</div>
) : (
<div>
<p>ログインしていません</p>
<button onClick={handleSignIn}>ログイン</button>
</div>
)}
</div>
);
};
export default AuthComponent;
(3) 「App.js」を以下のように編集。
・App.js
// App.js
import React from 'react';
import AuthComponent from './AuthComponent'; // AuthComponentをインポート
const App = () => {
return (
<div>
<h1>ログイン機能</h1>
<AuthComponent />
</div>
);
};
export default App;
(4) アプリを実行して、Googleアカウントのログイン・ログアウトができることを確認。
関連
この記事が気に入ったらサポートをしてみませんか?