【Nuxt.js,Firebase】ゲストログイン機能の実装

#はじめに
こんにちは！
今回は多くの方に私が開発したアプリに触れていただきたいと思い簡単にログインできるよう**ゲストログイン機能**の実装についてアウトプットしていきます！

#対象
・firebaseを使用してのユーザー登録、ログイン/ログアウト機能の実装を行いたい方
・firebaseを使用してのゲストログインを実装したい方
・既にユーザー登録、ログイン/ログアウト機能の実装がお済みの方。
（こちら[参考記事](https://qiita.com/Yudai_35_/items/cb6f360863cf2838b7d5)）


##使用環境

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

##使用ファイル,概要

|ファイル名  |概要  |
|:-:|:-:|
|pages/login.vue  |ゲストログイン機能、テンプレート表示 |
|plugins/firerbase.js |firebase導入  |
|store/index.js |ログインデータの管理&保持  |

#store/index.js

```javascript:store/index.js
export const state = () => ({
    user: {
        email: "",
        userId: "",
        login: false
    }
});


export const actions = {
    async confirmLogin({ commit }) {
        await this.$auth.onAuthStateChanged(function (user) {
            if (user) {
                commit("getData", {
                    email: user.email,
                    userId: user.uid
                });
                commit("yesLogin");
            } else {
                commit("noLogin");
            }
        });
    }
};

export const mutations = {
    getData(state, payload) {
        state.user.email = payload.email;
        state.user.userId = payload.userId
    },
    yesLogin(state) {
        state.user.login = true;
    },
    noLogin(state) {
        state.user.login = false;
    },
    signOut(state) {
        state.user.email = "";
        state.user.login = false;
    }
};

```
既存のコードを使用。

#plugins/firebase.js

```javascript:plugins/firebase.js
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth'; //ログイン

const firebaseConfig = {
//省略
};

firebase.initializeApp(firebaseConfig);

export default function (app, inject) {

  inject('firebase', firebase)
  inject('auth', firebase.auth())
}
```

firebase関数`auth`をinjectする。pages上で`this.$auth`で実装可能になる。

#ゲストログイン実装

```vue:pages/login.vue
<template>
  <button
    @click="guestsLogin"
     class="
      text-base
      my-8
      md:text-xl
      h-16
      w-10/12
      bg-green-400
      hover:bg-green-500
      duration-1000
    "
  >
    ゲストログイン
  </button>
</template>

<script>
export default {
  methods: {
    guestsLogin() {
      this.$auth
        .signInAnonymously()
        .then(() => {
          alert("ログイン成功しました！");
          this.$store.dispatch("confirmLogin");
          this.$router.push("/top");
        })
        .catch((error) => {
          console.log(error);
          alert("ログインに失敗しました");
        });
    },   
  },
};
</script>
```

・firebaseの匿名ログイン関数`signInAnonymously`を使用する。（詳しくは[こちら](https://firebase.google.com/docs/auth/web/anonymous-auth?hl=ja)）
・既存のログイン成功した時に発火する`confirmLogin`を使用。（各自バラバラ）
・remplate側でゲストログインボタンをクリックしたら発火されるよう`@click="guestsLogin"`で紐つける。

#DB側の設定
①firebaseのプロジェクトにアクセスし、「Authentication」→「Sing-in-method」を開く
![スクリーンショット 2022-02-20 11.05.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/0f062ec9-cc21-2ce0-e591-6b643121749e.png)

②「新しいプロバイダを追加」をクリックし「匿名」を選択、有効にして保存
![スクリーンショット 2022-02-20 11.06.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/faf53724-30d8-9a24-e18c-05b956ed1316.png)
![スクリーンショット 2022-02-20 11.07.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/877efce0-c8e9-2e34-a23a-751f4a6aeffe.png)

③完了
![スクリーンショット 2022-02-20 11.09.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/169d3bc1-6541-e90f-2f54-b3ff1fd3b786.png)

#まとめ
今回はゲストログイン機能の実装について記事にしました。
既にログイン、新規登録機能が実装されていれば比較的簡単に実装できますので試してみてください！

今後もQiitaにアウトプットしていきます！

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

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