【Nuxt.js・TailwindCSS】ログイン実装② FirebaseAuthでGoogleログイン/匿名ログイン

#はじめに
こんにちは。
こちらの記事では、FirebaseAuthでGoogleログイン/匿名ログインを行う方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

#前提
今回の記事は、メールログイン実装の記事の続編になります。まだみていない方は先にこちらを一度見てみていただけると概要が把握できるかと思います。
（スタイルはTailwindCSSで行なっています。）

https://qiita.com/YuStarrr/items/5a096fd06c81349b016d

#実装手順
Googleログイン、匿名ログインの順に実装していきます。

##Googleログイン機能の実装
>firebase公式：https://firebase.google.com/docs/auth/web/google-signin

###1. Firebase側の設定
Googleログインを実装できるように、【Firebase管理画面＞Authentication＞Sign-in melhod】から、Google認証を有効にしておきます。

![Google](https://i.gyazo.com/eff373aae8d2c30bef10432a3e68ba63.png)

###2. ログインボタンの作成
前回の記事で作成した`pages/login.vue`のファイル内に、Googleログインボタンを追加します。


```javascript:pages/login.vue
<template>
  <button
  type="submit"
  @click="googleLogin"
  class="
    mt-12
    w-full
    h-12
    text-base
    hover:bg-gray-200
    bg-white
    border-2 border-solid border-black border-opacity-25
    hover:border-opacity-50
    rounded-md
    cursor-pointer
    transition
    duration-300
    "
  >
    Googleでログイン
  </button>
</template>

<script>
export default {
 methods: {
  googleLogin() {
    this.$auth
      .signInWithPopup(new this.$firebase.auth.GoogleAuthProvider())
      .then(() => {
        alert("ログインに成功しました。");
        this.$store.dispatch("checkLogin");
        this.$router.push("/");
      })
      .catch((error) => {
        console.log(error);
        alert("ログインに失敗しました。");
      });
  },
}
</script>
```
ボタンをクリックすると、`googleLogin()`イベントが発火します。`this.$auth`は、puluginsディレクトリから`firebase.auth()`をinjectしており、storeディレクトリの`checkLogin `でログイン状態を管理しています。

完成したボタンは以下のようになっています。

![Googleログイン](https://i.gyazo.com/413be5d4a3902be8a8daa8cf5d0978d7.png)

正常に動作した場合は、Googleアカウントの選択画面が表示されてログインが完了します。

##匿名ログイン機能の実装
>firebase公式：https://firebase.google.com/docs/auth/web/anonymous-auth

###1. Firebase側の設定
Googleログインと同様に、匿名認証を有効にしておきます。
![](https://i.gyazo.com/da976d2d3a346c82683399d194504694.png)

###2. ログインボタンの作成
`pages/login.vue`のファイル内に、ゲストログインボタンを追加します。

```javascript:pages/login.vue
<template>
  <button
      type="submit"
      @click="anonyLogin"
      class="
        mt-12
        w-full
        h-12
        text-base
        bg-yellow-300
        hover:bg-yellow-500
        rounded-md
        cursor-pointer
        transition
        duration-300
      "
    >
      ゲストログイン
  </button>
</template>

<script>
export default {
  anonyLogin() {
    this.$auth
      .signInAnonymously()
      .then(() => {
        alert("ログインに成功しました。");
        this.$store.dispatch("checkLogin");
        this.$router.push("/");
      })
      .catch((error) => {
        console.log(error);
        alert("ログインに失敗しました。");
      });
  },
}
</script>
```
匿名ログインを導入することで、メールアドレスを入力したりアカウントを連携する必要がないので、ユーザーにとっても気軽に利用することが出来ます。

![](https://i.gyazo.com/299d1d8cb05ef007790a1e45d61dd038.png)

##全体のコード
前回の記事も含めた`pages/login.vue`のコードは下記のようになります。

```javascript:script
<template>
  <div class="mt-12 px-4 py-20 bg-gray-100 md:mt-20">
    <div class="container mx-auto bg-white md:w-160">
      <h2 class="pt-8 text-center text-2xl font-bold">ログイン</h2>
      <form @submit.prevent class="px-8 md:px-40" novalidate>
        <div class="pb-10 w-full border-b-2 border-gray-400 border-opacity-50">
          <button
            type="submit"
            @click="anonyLogin"
            class="
              mt-12
              w-full
              h-12
              text-base
              bg-yellow-300
              hover:bg-yellow-500
              rounded-md
              cursor-pointer
              transition
              duration-300
            "
          >
            ゲストログイン
          </button>
          <button
            type="submit"
            @click="googleLogin"
            class="
              mt-12
              w-full
              h-12
              text-base
              hover:bg-gray-200
              bg-white
              border-2 border-solid border-black border-opacity-25
              hover:border-opacity-50
              rounded-md
              cursor-pointer
              transition
              duration-300
            "
          >
            Googleでログイン
          </button>
        </div>
        <div>
          <div class="mt-12 w-full">
            <input
              type="email"
              name="email"
              required="required"
              placeholder="メールアドレス"
              v-model="email"
              @input="isInput"
              class="
                pl-4
                w-full
                h-14
                text-base
                border-2 border-solid border-black border-opacity-25
                hover:border-opacity-50
                rounded-md
                transition
                duration-300
              "
              autofocus
            />
            <p class="text-red-400">{{ emailErrorMassage }}</p>
          </div>
          <div class="mt-12 w-full">
            <input
              type="password"
              name="password"
              required="required"
              placeholder="パスワード"
              v-model="password"
              @input="isInput"
              class="
                pl-4
                w-full
                h-14
                text-base
                border-2 border-solid border-black border-opacity-25
                hover:border-opacity-50
                rounded-md
                transition
                duration-300
              "
            />
            <p class="text-red-400">{{ passwordErrorMassage }}</p>
          </div>
          <button
            type="submit"
            @click="login"
            class="
              block
              mt-8
              mx-auto
              w-2/3
              h-12
              text-white text-xl
              rounded-md
              cursor-pointer
              transition
              duration-300
            "
            :class="btnColor"
          >
            ログイン
          </button>
        </div>
      </form>
      <div class="py-8 text-center text-base">
        <p class="text-blue-500">
          <nuxt-link to="/register">初めての方はこちら</nuxt-link>
        </p>
        <p class="mt-2 text-blue-500">
          <nuxt-link to="/passReset">パスワードを忘れた方はこちら</nuxt-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      email: "",
      password: "",
      emailErrorMassage: "",
      passwordErrorMassage: "",
    };
  },
  computed: {
    btnColor: function () {
      return {
        "bg-red-500": this.email !== "" && this.password !== "",
        "bg-gray-200": this.email === "" || this.password === "",
      };
    },
  },
  methods: {
    login() {
      if (this.email === "") {
        this.emailErrorMassage = "メールアドレスを入力してください。";
      }
      if (this.password === "") {
        this.passwordErrorMassage = "パスワードを入力してください。";
      }
      if (this.emailErrorMassage !== "" || this.passwordErrorMassage !== "") {
        return;
      }
      this.$auth
        .signInWithEmailAndPassword(this.email, this.password)
        .then(() => {
          alert("ログインに成功しました。");
          this.$store.dispatch("checkLogin");
          this.$router.push("/");
        })
        .catch((error) => {
          console.log(error);
          alert("メールアドレスもしくはパスワードが違う可能性があります。");
        });
    },
    googleLogin() {
      this.$auth
        .signInWithPopup(new this.$firebase.auth.GoogleAuthProvider())
        .then(() => {
          alert("ログインに成功しました。");
          this.$store.dispatch("checkLogin");
          this.$router.push("/");
        })
        .catch((error) => {
          console.log(error);
          alert("ログインに失敗しました。");
        });
    },
    anonyLogin() {
      this.$auth
        .signInAnonymously()
        .then(() => {
          alert("ログインに成功しました。");
          this.$store.dispatch("checkLogin");
          this.$router.push("/");
        })
        .catch((error) => {
          console.log(error);
          alert("ログインに失敗しました。");
        });
    },
    isInput() {
      this.emailErrorMassage = "";
      this.passwordErrorMassage = "";
    },
  },
};
</script>
```

![](https://i.gyazo.com/6a083f7406945107dd74a91362f27340.png)


#参考
* [【Nuxt.js】firebase基礎編(Auth版)：Googleログインをできるようにしよう](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91firebase%e5%9f%ba%e7%a4%8e%e7%b7%a8auth%e7%89%88%ef%bc%9agoogle%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e3%81%97/)
* [Nuxt.jsでFirebase Authの匿名ログインをアクセス時に行いたい](https://teratail.com/questions/229280)
* [Firebase Authentication](https://firebase.google.com/docs/auth)

<br>


#おわりに
ここまでFirebaseAuthでGoogleログイン/匿名ログインを行う方法についてまとめました。
少しでも参考になれば幸いです！

以上、最後まで読んでいただきありがとうございました！
よければLGTMを押してくれると嬉しいです！