Web系エンジニアのアウトプット練習場スマートフォン用の表示で見るWeb系エンジニアのアウトプット練習場エンジニアリングと書評が中心。TypeScriptNuxt.jsプロジェクトの作成h-sakano.hatenablog.comFirebaseプロジェクトの作成https://console.firebase.google.comでFirebaseプロジェクトを作成することができます。Authenticationの「ログイン方法」タブでメール/パスワードによる認証とGoogleログインを有効にしておきます。SDKの準備プロジェクトにfirebaseパッケージを追加します。firebase次に、先程作成したプロジェクトページから接続情報を取得します。プロジェクトページ上段の画像のボタンをクリックすると認証情報が表示できます。これを使用して初期化処理を書きます。}他のファイルでfirebaseを使用したいときは、このファイルをimportするようにします。AuthenticationでGoogleログインを実装するための前準備です。詳細はhttps://firebase.google.com/docs/auth/web/google-signin?hl=jaを参照のこと。サインアップ/サインイン用のページ作成このページは以下のコンポーネントを含んでいます。Googleログイン次の章からは、これらのコンポーネントを実装していきます。今回はCSSフレームワークとしてMaterializeを使用しています。https://firebase.google.com/docs/auth/web/password-auth?hl=jafirebase.auth().createUserWithEmailAndPasswordにemailとpasswordを渡すだけでサインアップ処理が完了します。メールアドレスやパスワードが不正の場合など、何かエラーが出た場合はcatchで捕捉できます。EmailとPasswordによるサインインサインアップの時の似ていますが、clickした時の関数がサインイン用のものになっています。https://firebase.google.com/docs/auth/web/google-signin?hl=jaGoogleログイン用のボタンはhttps://developers.google.com/identity/branding-guidelinesから拾ってこれます。ログイン中のユーザー情報の保持サインアップ/サインイン機能に関してはここまでの内容で完了ですが、実際にユーザー情報を使用するためには、ユーザー情報をどこかに保持しておかなければなりません。今回はVuexストアを使って、ページ遷移のたびにユーザー情報を取得することにしました。Vuexストアの準備ユーザーを保持するためのVuexストアを作成します。モジュールモードで定義しています。handlersエラーを無効にするため、strictモードはオフにします。GitHubページ遷移時にユーザー情報をセットplugins/auth.tsを作成し、ページ遷移の際に、ユーザー情報をストアに設定するようにします。https://firebase.google.com/docs/auth/web/manage-users?hl=ja#get_the_currently_signed_in_userの通り、onAuthStateChangedを使用してログイン中のユーザー情報を取得します。上記の処理がロード時に読み込まれるように、nuxt.config.jsに以下の設定を追加します。falseを指定します。]また、以下の部分はサインインが完了しているのにサインインページにアクセスしようとした際に、トップページにリダイレクトする処理となっています。Authenticationで遊んでみました。Authenticationですが、実際のサービスを作るためにはFirestoreを使用してユーザーとデータを紐付ける必要があります。Authenticationは全貌は掴めたので、次回はFirestoreも触れたら良いなと思います。はじめまして、@h_sakanoと申します。月別アーカイブリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!h-sakanoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。