More than 1 year has passed since last update.

【Nuxt.js,Firebase】ユーザー登録、ログイン実装③Googleでの登録/ログイン

Posted at 2021-12-26

#はじめに
こんにちは！
今回は前回の記事の続き、Firebase×Googleでの登録/ログインの実装についてアウトプットしていきます！

#対象
・firebaseを使用してのユーザー登録、ログイン機能の実装を行いたい方
・Googleでの登録/ログインを実装したい方
・前回の記事までの内容がお済みの方

##使用環境

使用技術	バージョン
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導入
store/index.js	ログインデータの管理&保持

#firebace側の設定

firebaseの設定ででGoogleログインを実装できるようにする必要があります。
【Firebase管理画面＞Authentication＞Sign-in melhod】から、Google認証を有効にします。

#Googleユーザー登録実装

pages/singup.vue

<template>
   <button @click="googleLogin" class="h-12 w-10/12 my-4 bg-green-300">
     Googleで登録
   </button>
</template>

<script>
export default {
  methods: {
    googleLogin() {
      this.$auth
        .signInWithPopup(new this.$firebase.auth.GoogleAuthProvider())
        .then(() => {
          alert("登録に成功しました");
          this.$store.dispatch("confirmLogin");
          this.$router.push("/top");
        })
        .catch((error) => {
          console.log(error);
          alert("エラーが発生いたしました。間違い等がないか確認をし再度実施をお願いします");
        });
    },
};
</script>

必須項目
・this.$auth.signInWithPopup(new this.$firebase.auth.GoogleAuthProvider())はfirebaseでGoogleでの新規登録/ログイン機能を実装するときに使用するルールが決められている。コピペして使ってしまいしょう。

正常に登録できた時の処理(.then)
・登録完了をアラートで通知
・store/index.jsのconfirmLogin処理を呼び出し、stateにemail,passwordの情報を保持、login情報/状態をtureへ変更させる。
・登録に成功したら、強制的にTOPページへ移動させる

エラー発生時の処理(.catch)
・アラートにてメールアドレスもしくはパスワードが異なることを通知。

#Googleログイン実装

pages/login.vue

<template>
  <button @click="googleLogin" class="h-12 w-10/12 my-4 bg-green-300">
    Googleでログイン
  </button>
</template>

<script>
export default {
  methods: {
    googleLogin() {
      this.$auth
        .signInWithPopup(new this.$firebase.auth.GoogleAuthProvider())
        .then(() => {
          alert("ログインに成功しました");
          this.$store.dispatch("confirmLogin");
          this.$router.push("/top");
        })
        .catch((error) => {
          console.log(error);
          alert(
            "エラーが発生いたしました。間違い等がないか確認をし再度実施をお願いします"
          );
        });
    },
 },
};

</script>