2025 ソフトウェア設計及び演習用の班Wiki - 23::gr01::ユーザ管理モジュール

23::gr01::ユーザ管理モジュール

archive mode

>>{23::gr01::モジュールの仕様書}{戻る}
!!! 概要
ユーザ管理機能を提供するモジュールです。
*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にユーザ名を登録する

Tag:

Attachment

New: append-tag

(download: 1114 bytes, at 2023/06/30 14:52:51 <frozen> )
(download: 3643 bytes, at 2023/06/30 15:38:35 <frozen> )
(download: 3886 bytes, at 2023/06/30 15:59:36 <frozen> )
(download: 3951 bytes, at 2023/06/30 16:05:19 <frozen> )
(download: 3955 bytes, at 2023/06/30 16:29:16 <frozen> )
(download: 4115 bytes, at 2023/06/30 16:35:15 <frozen> )
(download: 4137 bytes, at 2023/06/30 16:36:26 <frozen> )
(download: 4166 bytes, at 2023/06/30 16:36:56 <frozen> )
(download: 4164 bytes, at 2023/06/30 16:45:21 <frozen> )
(download: 4206 bytes, at 2023/06/30 17:15:10 <frozen> )

Syntax Help

URL Link

[text|http://example.com//] http://example.com/to{text}

Page Link

[[PageName]] [[text|PageName]] >>{PageName} >>{PageName}{text}

Image or Attachment

<<{filename} <<{filename}{text}

Text Decoration

'' Italic '' ''' Bold ''' '''' Large-font '''' `` Typewriter `` `?` Preformatted `?` __ Underline __ == Strike == == DEL =={ INS } ((br)) line feed

Special Letter

((amp)) & ((bq)) ` ((lt)) < ((gt)) > ((lp)) ( ((rp)) ) ((lb)) [ ((rb)) ] ((ll)) (( ((rr)) ))

Headline

!!!! site-name !!! section-name !! subsection-name ! subsubsectino-name << section-name >> <<< subsection-name >>> <<<< subsubsection-name >>>> >> Centering and Large-font <<

Itemize

* item1 ** item1-1 ** item1-2

Enumerate

+ item1 + item2 ++ item2-1

Table

|| 1-1 | 1-2 | 1-3 || 2-1 | 2-2 | 2-3

Description

:item ::description

Quotation

6< quotation >9

Preformatted text

8< preformatted-text >8

Edit