【Nuxt.js,Firebase】ユーザー登録、ログイン実装①

はじめに

こんにちは！
今回はNuxt.js,Firebaseを使って、ユーザ登録〜ログイン機能実装までをアウトプットしていきます！

前提

・Nuxt.jsのプロジェクトが立ち上がっている
・Firebaseのアカウントが制作してあり、連携までしてある方。
（していない方、こちらの記事参考）

nuxt.jsの立ち上げ、Firebaseのアカウント制作は省きます。

対象

・ユーザー登録、ログイン機能の実装を行いたい方
・firebaseを使用したい方

使用環境

使用技術	バージョン
nuxt.js	2.15.7
firebase	9.6.1
firebase-tools	9.23.3
@nuxtjs/tailwindcss	4.2.0

使用ファイル,概要

ファイル名	概要
pages/singup	新規登録ページ
pages/login	ログインページ
plugins/firerbase.js	firebase導入

firebaseの導入,inject設定

plugins/firebase.js

import firebase from 'firebase/compat/app';
//⏫ で(firebase/compat/app)をインポート
import 'firebase/compat/auth'; 
//⏫ で(firebase/compat/auth)をインポート 「auth 👉 ログイン機能」

const firebaseConfig = {
//各firebaseのAPIキー
};

firebase.initializeApp(firebaseConfig);
//initializeAppはfirebaseへの初期設定

export default function (app, inject) {
    //（'呼び出すときの名前','firebase内の機能を呼び出している'）
  inject('firebase', firebase) 
  inject('auth', firebase.auth()
}

injectを使用することによって、機能を記述する時にthis.$~と記述することができる。
this.$~と記述することで、inject()内の内容が実行される。

新規登録機能の実装

上記の記述が終えたら次にpagesで新規登録の実装を行います。

pages/singup.vue

<template>
   <input type=”email” name=”email”  required="required" placeholder="E-mail" v-model="user.email" 
   class="border-2 h-12 w-10/12 mb-5">　　　　　　　　　　　　　　　　　　　　　　　　　　<!--v-modelでdeta.user.email紐付け--->
   <input type=”password” name=”passWord” required="required" placeholder="PassWord" v-model="user.password" 
   class="border-2 h-12 w-10/12 mb-5">.            <!--v-modelでdeta.user.password紐付け--->
   <div>
     <button @click="register" class="h-12 w-10/12 my-4 bg-green-300 ">登録</button>
           <!--@click="register"でmethods,registerの処理が発火--->
   </div>
</template>

<script>

export default {
 data () {
   return {
       user:{
          email: "",
          password: "",
        }
   }
 },
 methods: {
   register () {
       this.$auth
       //this.$authでplugins/firebase.jsのinjectの部分が発動する。
          .createUserWithEmailAndPassword(this.user.email,this.user.password)
       //メールアドレスとパスワードで新規登録機能を実装する時、createUserWithEmailAndPasswordを使用する、Firebaseの決まり
             .then(function(user){
                alert("登録しました");
             })
      //.thenは成功する時に使用される、つまりメールアドレスとパスワードの登録が成功した時の処理。（失敗したときは.catch）
　　　　　　   //本来はここから別ページに飛ぶ等の処理を追加していく。
   },
 },
}
</script>

新規登録が完了したら以下のように確認のアラートが表示されます。

ログイン機能の実装

ログイン機能も新規登録と同様、同じ要領で実装します。

pages/login.vue

<template>
   <input type=”email” name=”email”  required="required" placeholder="E-mail" v-model="user.email" class="border-2 h-12 w-10/12 mb-5">
   <input type=”password” name=”password” placeholder="password" v-model="user.password" class="border-2 h-12 w-10/12 mb-5">
   <div>
      <button @click="login" value="ログイン" class="h-12 w-10/12 my-4 bg-green-300 text-center ">ログイン</button>
   </div>
</template>

<script>
export default {
     data () {
   return {
       user:{
          email: "",
          password: "",
        },
        passwordErrorMassage:''
      }
    },
    methods:{
        login(){
            this.$auth
            .signInWithEmailAndPassword(this.user.email,this.user.password)
            .then(function(user){
                alert("ログイン成功しました！");
            })
        }
    }
}
</script>

やっていることはほぼ一緒なので説明は省きます。
登録したメールアドレス、パスワードが一致していれば、以下のようにログイン成功アラートが表示されます。

まとめ

今回は新規登録・ログインの実装を記事にしました。この後に、
・ログイン失敗した時
・メールアドレス、パスワードが間違っていた時

などといった機能を追加していき、引き続きQiitaへアウトプットしていきます！

今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

最後までご愛読ありがとうございました！