Nuxt.js と Firebase でGoogleアカウントログインの設定をする

Firebase でログイン設定をする手順

1. 対象のFirebase console にアクセスする。
2. ［ Authentication ］ タブに移動する。
3. ［ ログイン方法を設定 ］ をクリックする。
4. ［ ログイン プロバイダ ］ のGoogle をクリックし［ 有効にする ］をクリックする。
5. プロジェクトのサポートメールを設定する*1
6. ［ 保存 ］ をクリックする。

Nuxt.js でログイン設定をする手順

Firebaseをプラグイン化する

Firebase は外部モジュールになるので、plugins に記述する必要がある。

// plugins/firebase.js

import firebase from "firebase";

const config = {
  apiKey: process.env.VUE_APP_apiKey,
  authDomain: process.env.VUE_APP_authDomain,
  databaseURL: process.env.VUE_APP_databaseURL,
  projectId: process.env.VUE_APP_projectId,
  storageBucket: process.env.VUE_APP_storageBucket,
  messagingSenderId: process.env.VUE_APP_messagingSenderId,
  appId: process.env.VUE_APP_appId,
  measurementId: process.env.VUE_APP_measurementId
};
if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

export default firebase;

process.env は .env のデータを持ってくるという意味。

面倒くさいけれど、情報が漏れないために必要な処置のひとつ。

// .env
VUE_APP_apiKey　= "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_authDomain = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_databaseURL = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_projectId = "xxxxxxxxxxxxxxxxx",
VUE_APP_storageBucket = "xxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_messagingSenderId = "xxxxxxxxxxxxxx",
VUE_APP_appId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_measurementId = "xxxxxxxxxxxxxxx"

.env には上記コードを記述する。

上記のように.env に記載したところ、エラーが生じたので、直接書くことにしたら解消した。

// plugins/firebase.js

import firebase from "firebase";

const config = {
  apiKey: "*********",
  authDomain: "*********",
  projectId: "*********",
  storageBucket: "*********",
  messagingSenderId: "*********",
  appId: "*********",
  measurementId: "*********"
};
if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

export default firebase;

必要なデータはサイドバーの［ プロジェクトの概要 ］ をクリックし表示されたページの、アプリ名の下</> をクリックし歯車アイコンをクリックする。

遷移先のサイトの下部 マイアプリのラジオボタン 構成をクリックすると表示される。

最後にplugins を使用しているので、nuxt.config.js にプラグインの宣言をする。

  plugins: [
    '~/plugins/firebase',
  ],

ログインボタンを設置したページを用意

まずはログインボタンを設置したページを用意する。

// Hello.vue （元）
<template>
<div>
  <h1>HELLO</h1>
  <button>Googleアカウントでログイン</button>
</div>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>
<style>
</style>

上記コードに必要なコードを付け加えていく。

必要なコードを加えたのが下記コード。

// Hello.vue（ログイン処理を付け加えた版）
<template>
<div>
  <h1>HELLO</h1>
  <button @click="googleLogin">Googleアカウントでログイン</button>
</div>
</template>

<script>
import firebase from "~/plugins/firebase.js";
export default {
  data() {
    return {};
  },
  methods: {
    googleLogin: function() {
      var provider = new firebase.auth.GoogleAuthProvider();
      firebase.auth().signInWithRedirect(provider).then(function(result) {
        var token = result.credential.accessToken;
        var user = result.user;
      }).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        var email = error.email;
        var credential = error.credential;
      });
    }
  }
}
</script>
<style>
</style>

ボタンクリック後、ログイン画面に遷移できれてばOK。

Nuxt.js の@click*2、methodsについては別記事。

*1:ここで設定したメールアドレスはアプリケーション公開時に認証画面で公開されるので注意が必要

*2:https://blog-progblog-web.hatenablog.com/entry/2021/01/10/215020