2024 ソフトウェア設計及び演習用の班Wiki

ユーザ管理機能を提供するモジュールです。

• login.js
• signup.js

Google Firebaseの Authentication機能

Google Firebaseは、モバイルアプリやWebアプリのためのバックエンドプラットフォームです。

Firebase Authentication を使用すると、ユーザーがアプリにログインする際に、メールアドレスとパスワードのログイン、Google ログインや Facebook ログインなどのフェデレーション ID プロバイダなど、複数のログイン方法を使用できるようになります。

Firebase の CDN に保存されているauthライブラリを追加し、各メソッドをインポートした

• "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js"

※本モジュールはインポートしたメソッドで完結しています。

initializeApp

アプリで Firebase を初期化して、Firebase アプリ オブジェクトを作成します。Firebase アプリはコンテナに似たオブジェクトで、一般的な構成を保存し、Firebase サービス全体で認証を共有します。コードで Firebase アプリ オブジェクトを初期化すると、Firebase サービスを追加して使用できるようになります。

getAuth

Firebase Authentication JS SDK を追加して Firebase Authentication を初期化します。

createUserWithEmailAndPassword

新規ユーザーがメールアドレスとパスワードを使用してアプリに登録できるフォームを作成し,ユーザーがフォームに入力したら、ユーザーが指定したメールアドレスとパスワードを検証し,　それを引数としてcreateUserWithEmailAndPasswordメソッドに渡す。 ユーザ登録が成功すると自動的に作成したユーザーでログインされ、userCredential にユーザーオブジェクトが生成される。 userCredential.user で下記のようなユーザー情報が取得できる。

• userCredential.user.accessToken //トークンを取得
• userCredential.user.email //メールアドレスを取得
• userCredential.user.uid. //ユーザーIDを取得
• userCredential.user.metadata.createdAt //ユーザー作成日時を取得
• userCredential.user.metadata.lastLoginAt //最終ログイン日時を取得

signInWithEmailAndPassword

既存ユーザーがメールアドレスとパスワードをフォームに入力し、入力したメールアドレス、パスワードを signInWithEmailAndPassword メソッドに渡す。ログインもユーザ登録と同様、ログインが成功すれば userCredential にログインしたユーザーのオブジェクトが入る。

onAuthStateChanged

ログインしているユーザーに関する情報が必要なアプリのページごとに、グローバル認証オブジェクトにオブザーバーをアタッチします。このオブザーバーは、ユーザーのログイン状態が変わるたびに呼び出されます。 onAuthStateChanged メソッドを使用してオブザーバーをアタッチします。ユーザーが正常にログインしたら、オブザーバーでユーザーに関する情報を取得できます。 ※よってこのメソッドはinitializeApp同様に各画面で実行してログイン状態を監視する。

signInWithPopup

フェデレーション ID プロバイダでログイン時、ポップアップ ウィンドウを表示する

GoogleAuthProvider、 FacebookAuthProvider、GithubAuthProvider

Google、Facebook、Github プロバイダ オブジェクトのインスタンスを作成します。 ポップアップ ウィンドウでログインを行う場合は、signInWithPopupメソッドにこのインスタンスを渡します。

updateProfile

ユーザーのプロフィールを更新するメソッドです。createUserWithEmailAndPasswordメソッド実行時の処理の中で呼び出し、ユーザオブジェクトのuser.displayNameにユーザ名を登録する