えいむーさんは明日も頑張るよ

Vue3 + Firebaseチュートリアル

価格

# Vue3 + Firebase

Vue の最新バージョンは 3 なのだが、ネットを調べると情報が錯綜しすぎていて全く参考にならないので備忘録としてメモしておく。良い子の諸君はここのページだけを信じるように。

# Vue3 (opens new window)

まずは Vue プロジェクトを作成するために@vue/cliをインストールする。

Vue CLI (opens new window)

yarn global add @vue/cli
# OR
npm install -g @vue/cli

インストールが完了したらプロジェクトを作成する。

vue create PROJECT_NAME

Vue3 について

利用する Vue のバージョンはこの段階で選択することができる。どうしても 2 が使いたいなら 2 を利用することも可能。

プロジェクトが作成できたらプロジェクト内で@vue/cliのバージョンをアップデートする。

cd PROJECT_NAME
vue upgrade --next

ここまでで Vue3 自体のセットアップはできたので、Dev 環境で実行してみよう。

なお、以後はyarnでの開発環境についてのみのコマンドを記述するので注意。

yarn serve # Devlopment

http://localhost:8080/ (opens new window)にアクセスすると Vue のトップページが表示されるはずだ。

# Vuefire (opens new window)について

Firebase を楽に利用するためのラッパーである Vuefire を使おうみたいな記事がたくさんありますが、Vuefire はvuefire@nextを使ったとしてもFirebase JS SDKのバージョン 8 までしか対応していません。

最新バージョンは9.5.0(2021 年 12 月 02 日現在)なので、これでは全く意味がないわけです。

# Firebase (opens new window)

yarn add firebase
# OR
npm install firebase

追加したらmain.jsを編集します。

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { initializeApp } from "firebase/app"; // 追加

const firebaseConfig = {
  // 追加
};

const app = initializeApp(firebaseConfig); // 追加

createApp(App).use(store).use(router).mount("#app");

const app = initializeApp(firebaseCondig)を書かないと初期化されていないとかでエラーが出ますので、必ず書くように。

firebaseConfigの中身は各自ウェブサイトで確認してください。

# Authentication の設定

今回は Twitter ログインを実装したいと思います。

予めTwitter Developer Potal (opens new window)でトークンを取得しておいてください。

あとFirebase Authentication (opens new window)で Twitter 認証を許可しておきましょう。

# SignIn.vue

ボタンを押すとポップアップが表示されて Twitter 認証ができるコンポーネントのコードです。

<template>
  <button @click="signIn">Twitter</button>
</template>

<script>
import { getAuth, signInWithPopup, TwitterAuthProvider } from "@firebase/auth";

export default {
  methods: {
    signIn() {
      const auth = getAuth();
      const provider = new TwitterAuthProvider();
      signInWithPopup(auth, provider)
        .then((result) => {
          // ログイン後の処理を書く
        })
        .catch((error) => {
          // エラー発生時の処理を書く
        });
    },
  },
};
</script>

これだけでポップアップが正しく表示されてログインができます。

記事は以上。

価格
    えいむーさんは明日も頑張るよ © 2022