React Web アプリケーションで Firebase パスワードレス認証を設定する方法

導入 このガイドは の補足です。このガイドの導入部分で、Firebase が基本的なメール/パスワード認証以外の認証スキームを提供していることに注意しました。それらの代替手段の 1 つは、 です。 、「React Web アプリケーションで Firebase Authentication を設定する方法」 パスワードレス認証 パスワードレス認証は、アプリケーションを構築する際の魅力的なオプションです。ユーザーはパスワードを覚えておく必要がなく、パスワードを紛失することを心配する必要もないため、ユーザー エクスペリエンスが簡素化されます。また、パスワードのキャプチャや管理ロジックを設計する必要がないため、開発エクスペリエンスも容易になります。 このガイドでは、Firebase のパスワードなしの認証を実装する、単純なログイン/確認/プロファイル/ログアウト ワークフローを構築します。 あなたが始める前に Google は Firebase Authentication のさまざまな を設定しています。無料の プランを使用している場合は、サインイン リンク メールが 1 日あたり 5 通に されることに注意してください。 Spark プランはテスト目的には十分かもしれませんが、この制限を超えるには従量課金制の プランにアップグレードする必要があります。 制限 Spark 制限 Blaze 前提条件 このガイド全体を通じて、 ガイドを として参照し、関連するプロジェクトを として参照します。 「React Web アプリケーションで Firebase Authentication を設定する方法」 前提条件ガイド 前提条件プロジェクト このガイドを完了するには、次のものが必要です。 すべての前提条件を含む前提条件ガイドを完了している。 ステップ 1 - Firebase プロジェクトでパスワードレス認証を有効にする 前提条件ガイドでは、基本的なメール/パスワード認証用の新しい Firebase プロジェクトを作成しました。次に、同じプロジェクトでパスワードなしの認証を有効にします。 にログインし、 をクリックします。 Firebase アカウント [コンソールに移動] Firebase プロジェクト ダッシュボードにリストされている認証プロジェクトをクリックします。このガイドでは、プロジェクト名 を使用します。 my-auth-test 左側のパネルメニューで をクリックします。 「認証」 メイン ウィンドウで タブをクリックします。 [サインイン方法] 前提条件ガイドでの作業により、 テーブルの 列の下に すでに のステータスで表示されているはずです。鉛筆アイコンをクリックして、 プロバイダーの構成パネルを開きます。 「サインイン プロバイダー」 「プロバイダー」 「電子メール/パスワード」が 「有効」 電子メール/パスワード トグルをクリックして、 を有効にします。 電子メール リンク (パスワードなしのサインイン) をクリックします。 「保存」 これで、Firebase プロジェクトがパスワードなしの認証をサポートするように構成されました。 ステップ 2 - 新しい React プロジェクトの作成とパッケージのインストール ステップ 2a - 新しい React プロジェクトの作成 希望のアプリケーション名を使用して新しい React プロジェクトを作成します。このガイドでは、 を使用します。 passwordless-auth npx create-react-app passwordless-auth ステップ 2b - パッケージのインストール このガイドでは、3 つの Node.js パッケージのインストールが必要です。 : Firebase SDK。 Firebase : ルーティング用。 React Router DOM ：スタイリング用。 ブーツストラップ 上記の 3 つのパッケージをそれぞれ 経由でインストールします。 npm npm install firebase npm install react-router-dom npm install bootstrap ステップ 3 - 前提条件プロジェクトから をコピーする firebase.js 前提条件プロジェクトでは、Firebase プロジェクト構成データを使用して Firebase Authentication サービスのインスタンスを作成する ファイルを作成しました。 ファイルは、Firebase プロジェクト 設定値を含む次の構造になっている必要があります。 firebase.js firebase.js の import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { apiKey: "AIzaSyDiUlY68W9Li_0EIkmdGdzD7nvqCT9kHnY", authDomain: "my-auth-test-fbd48.firebaseapp.com", projectId: "my-auth-test-fbd48", storageBucket: "my-auth-test-fbd48.appspot.com", messagingSenderId: "1078604952662", appId: "1:1078604952662:web:5d0b908439cfb5684ab7f7" } const app = initializeApp(firebaseConfig); const auth = getAuth(app); export { auth } 新しい React プロジェクト フォルダーにコピーします。 firebase.js Firebase プロジェクトの構成を確認する必要がある場合は、左側のパネル メニューで の横にある歯車アイコンをクリックします。 タブがすでに選択されているはずです。 パネルを含む セクションまで下にスクロールします。 パネル内の オプションはすでに選択されているはずです。プロジェクトの構成値が、表示されたコード ブロックにリストされます。 [プロジェクトの概要] [全般] [Web アプリ] [アプリ] Web アプリ npm ステップ 4 - React アプリケーションの構築 ステップ 4a - React アプリケーション コンポーネントの概要 React アプリケーションは、 、 、 、 、 の 5 つのコンポーネントで構成されます。 App Layout Login Confirm Profile App コンポーネントは、ルーティングを含むアプリケーション全体の構造を定義します。 App Layout コンポーネントは、すべてのルートにわたって一貫性を保つアプリケーション マークアップを指定します。 Layout Login アプリケーションへのユーザーのエントリ ポイントはログイン フォームです。 ユーザーが自分の電子メール アドレスを使用してログインしようとすると、サインイン リンクが記載された電子メールがその電子メール アドレスに送信されます。 Confirm ユーザーがサインイン リンクをクリックすると、 ページにルーティングされます。 Confirm このページでは、ユーザーがログイン時に使用した電子メール アドレスを確認するように求められます。 Profile ユーザーは、電子メール アドレスを確認した後、 ページにルーティングされます。 Profile ユーザーは、 ページのログアウト ボタンをクリックして、自分のアカウントからログアウトできます。 Profile 最終的な ディレクトリには次のファイルが含まれます。 src src |__ index.js |__ firebase.js // Copied from prerequisite project in Step 3. |__ App.js |__ Layout.jsx |__ Login.jsx |__ Confirm.jsx |__ Profile.jsx ステップ 4b - React プロジェクト テンプレートをクリーンアップし、前提条件プロジェクトからファイルをコピーする 前提条件ガイドのステップ 5b.1 で説明されているように、React プロジェクト テンプレートから同じファイルを削除できます。 React プロジェクトから次のファイルを削除します。 reportWebVitals.js setupTests.js logo.svg index.css App.css App.test.js 前提条件プロジェクトから新しいプロジェクト フォルダーに をコピーします。このガイドでは同じファイルを使用します。 を再構築する必要がある場合は、前提条件ガイドのステップ 5b.2 を参照するか、以下のコード ブロックをコピーしてください。 index.js index.js 前提条件プロジェクトから新しいプロジェクト フォルダーにコピーします。このガイドでは同じファイルを使用します。 を再構築する必要がある場合は、前提条件ガイドのステップ 5d を参照するか、以下のコード ブロックをコピーしてください。必要に応じて、 の タグ内のプロジェクト テキストを または任意のタイトルに更新することができます。 Layout.jsx Layout.jsx Layout.jsx React With Firebase Passwordless Authentication および ファイルは次のようになります。 index.js Layout.jsx // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import "bootstrap/dist/css/bootstrap.min.css"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // Layout.jsx import { Outlet } from "react-router-dom"; const Layout = () => { return( React With Firebase Passwordless Authentication

) } export default Layout ステップ 4c - の構築 App.js ファイルは前提条件プロジェクトのファイルとほぼ同じですが、変更点は 2 行のみです。ファイルの構築を容易にするために、前提条件プロジェクトから新しいプロジェクト フォルダーに をコピーします。 App.js App.js ファイルから次の 行を削除し、以下のように置き換えます。 import // Delete this line: import Signup from "./Signup"; // Replace it with: import Confirm from "./Confirm"; ファイルから次の を削除し、以下のように置き換えます。 // Delete this line: } > // Replace it with: } > を保存します。 App.js 完全なファイルは次のようになります。 import Layout from "./Layout"; import Login from "./Login"; import Confirm from "./Confirm"; import Profile from "./Profile"; import { BrowserRouter, Routes, Route } from "react-router-dom"; const App = () => { return ( }> }> } > } > ) } export default App 前提条件プロジェクトの場合と同様に、 コンポーネントが再びアプリケーションのホーム ルートになることに注意してください。 Login ステップ 4d - のビルド Login.jsx パスワードレス認証の場合、明らかにパスワード フィールドを含める必要はなく、パスワード入力の状態を管理する必要もありません。したがって、ログイン フォームはユーザーの電子メール アドレスを取得するだけで済みます。 ディレクトリに新しい ファイルを作成します。 src Login.jsx 次のコードを追加します。 import { useState } from "react"; import { auth } from "./firebase"; import { sendSignInLinkToEmail } from "firebase/auth"; const Login = () => { const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const actionCodeSettings = { url: "http://localhost:3000/confirm", handleCodeInApp: true } const callSendSignInLinkToEmail = (e) => { e.preventDefault(); sendSignInLinkToEmail(auth, email, actionCodeSettings) .then(() => { setNotice("An email was sent to your email address. Click the link in the email to login."); }) .catch((error) => { setNotice("An error occurred when sending a login link to your email address: ", error.name); }) } return( { "" !== notice && { notice } } setEmail(e.target.value) }> Email address callSendSignInLinkToEmail(e)}>Submit ) } を保存します。 Login.jsx ユーザーのメール アドレスを取得すると、 フォームは、Firebase の メソッドを介して、サインイン リンクを含むメールをユーザーのアドレスに送信します。成功すると、電子メールが送信されたことがユーザーに通知されます。 オブジェクトはパラメーターとして メソッドに渡され、ユーザーが電子メールで送信されたサインイン リンクをクリックしたときにルーティングされる URL が含まれていることに注意してください。この場合、URL は で指定された ルートにマップされます。 Login.jsx sendSignInLinkToEmail actionCodeSettings sendSignInLinkToEmail App.js /confirm ステップ 4e - をビルドする Confirm.jsx Firebase の メソッドは、サインイン リンクをクリックしたユーザーをサインインするために使用されます。すぐにわかるように、このメソッドは パラメーターを受け取り、 の値は、ユーザーがログイン フォーム経由でログインするときに使用した電子メール アドレスと一致する必要があります。 、ユーザーに電子メール アドレスを確認するためのフォームを表示し、その後ユーザーのサインインを試みます。 signInWithEmailLink email email Confirm.jsx ディレクトリに新しい ファイルを作成します。 src Confirm.jsx 次のコードを追加します。 import { useState } from "react"; import { auth } from "./firebase"; import { isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Confirm = () => { const navigate = useNavigate(); const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const callSignInWithEmailLink = (e) => { e.preventDefault(); if (isSignInWithEmailLink(auth, window.location.href)) { signInWithEmailLink(auth, email, window.location.href) .then(() => { navigate("/profile"); }) .catch((error) => { setNotice("An occurred during sign in: ", error.name); }) } } return( { "" !== notice && { notice } } setEmail(e.target.value) }> Please confirm your email address callSignInWithEmailLink(e)}>Confirm ) } export default Confirm を保存します。 Confirm.jsx メソッドは、まずユーザーが使用しているサインイン リンクが有効かどうかを確認します。有効である場合、 メソッドが呼び出され、ユーザーがサインインします。繰り返しになりますが、 メソッドに渡される 値は、ユーザーがログイン フォームで使用した電子メール アドレスと一致する必要があります。ユーザーが新規ユーザー（つまり、初めてサインインする）の場合、Firebase は Firebase Authentication ストアにユーザーを自動的に作成することに注意してください。これは、パスワードなしの認証によって提供される簡素化されたエクスペリエンスのもう 1 つの例です。新しいユーザーのアカウント作成は自動的に処理されます。 isSignInWithEmailLink signInWithEmailLink signInWithEmailLink email ステップ 4f - の構築 Profile.jsx 最後に構築するコンポーネントは です。ユーザーは、 経由でサインインに成功すると、このコンポーネントにルーティングされます。ルートはユーザーを電子メール アドレスで歓迎し、ログアウトするボタンを提供します。ログアウトすると、ユーザーは コンポーネントに戻されます。 Profile.jsx Confirm.jsx Login ディレクトリに新しい ファイルを作成します。 src Profile.jsx 次のコードを追加します。 import { auth } from "./firebase"; import { signOut } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Profile = () => { const navigate = useNavigate(); const logoutUser = async (e) => { e.preventDefault(); await signOut(auth); navigate("/"); } return( Welcome { auth.currentUser.email } . You are logged in!

logoutUser(e)}>Logout ) } export default Profile を保存します。 Profile.jsx ステップ 5 - アプリケーションのテスト React アプリケーションを起動します。 npm start ブラウザが自動的に起動しない場合は、ブラウザで に移動します。 フォームが表示されるはずです。 locahost:3000 Login サインインに使用する電子メールを入力し、 をクリックします。送信が成功すると、サインイン リンクを含む電子メールが電子メール アドレスに送信されたという通知が表示されます。 [送信] メール アカウントにログインし、Firebase サインイン リンクのメールを探します。件名は のようなものにする必要があります。ここで、13 桁の数字シーケンスは Firebase プロジェクトの を表します (このガイドのステップ 3 を参照)。以下の セクションでは、Firebase プロジェクト名を変更して、サインイン リンク メールに「ユーザー フレンドリーな」名前を表示する方法を説明します。ここでは、サインイン リンク電子メールを開いて、サインイン リンクをクリックします。 フォームに移動します。 Sign in to project-1078604952662 messagingSenderId 「オプション」 Confirm サインイン時に使用した電子メール アドレスを フォームに入力します。 をクリックします。確認が成功すると、 ページに移動します。 Confirm 「確認」 Profile サインアウトするには、 ページの ボタンをクリックします。サインアウトが成功すると、 フォームに戻ります。 Profile 「ログアウト」 Login 上記の手順は、アプリケーションのワークフローをキャプチャします。 オプション: プロジェクト名の変更 Firebase から送信されるサインイン リンク メールに、 などの代わりに「ユーザー フレンドリーな」名前が表示されるように、プロジェクト名を変更できます。 にログインし、 をクリックします。 project-1078604952662 Firebase アカウント [コンソールに移動] Firebase プロジェクト ダッシュボードにリストされている認証プロジェクトをクリックします。 左側のパネル メニューで、 の横にある歯車アイコンをクリックします。 タブがすでに選択されているはずです。 [プロジェクトの概要] [全般] セクションの オプションまで下にスクロールします。 「プロジェクト」 「公開名」 鉛筆アイコンをクリックし、必要に応じてプロジェクト名を変更します。 をクリックします。サインイン リンクの電子メールには、更新されたプロジェクト名が表示されます。 「保存」 結論と次のステップ パスワードレス認証は、アプリケーション開発者の間でますます一般的な選択肢になっているようで、当然のことです。パスワードを管理する必要がないという明らかな利点に加えて、サインイン リンクを送信するプロセス自体が検証であるため、電子メールによる検証も必要ありません。 前提条件のプロジェクトと同様に、ここでの実装は基本的なものです。次のような単純な機能拡張を検討することもできます。 特定の電子メール アドレス ドメイン (つまり、一般的なスパム電子メール ドメイン) をブロック/ブラックリストに登録します。 ページでユーザーが入力した電子メール アドレスをローカルに保存し、 ページで電子メール アドレスの存在を確認します。このアプローチでは、ユーザーが ページにアクセスしたのと同じデバイスでサインイン リンクをクリックした場合、電子メール アドレスは回復されるため、 ページで再度入力する必要がなくなります。ローカルストレージから。これにより、さらにスムーズなユーザー エクスペリエンスが提供されます。 Login Confirm Login Confirm Firebase Passwordless Authentication の詳細については、 を参照してください。 公式ドキュメント