日別アーカイブ: 2022年11月5日

VueとRailsで作成したアプリで得た知見と備忘録5(Firebase)

コメントを残す

目標：すぐに思い出せるようにざっくり解説する。

Firebaseのプロジェクト作成

0：Firebaseとは？

iOS/AndroidアプリやWebアプリケーションの開発に活用できるプラットフォームです。
利用できるサービスはデータベース、分析、認証、メッセージ送信機能など、様々です。主に認証機能を利用します。

1:プロジェクトの作成

https://firebase.google.com/?hl=ja

↑で公式サイトにアクセスします。

新規登録をして、使ってみるをクリックします。

プロジェクトを新規作成します。

2：NuxtとFirebaseのプロジェクトを関連づけ
</>

↑のようなアイコンをクリックします。

アプリ名を入れ、
FirebaseのHostingにチェックを入れ、
アプリを登録をクリックします。

3：Firebase CLIのインストール

frontディレクトリで以下のコマンドをします。

npm install -g firebase-tools

4：Firebase SDKのインストール

npm install firebase

5：設定ファイルの作成

front/pluginsのディレクトリの中にfirebase.jsという新規ファイルを作成し、
以下のように記述します。

front/plugins/firebase.js

import firebase from "firebase/compat/app"
import "firebase/compat/auth"

const fbConfig = {
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    projectId: process.env.PROJECT_ID,
};
firebase.initializeApp(fbConfig)

export default firebase

firebase.initializeApp(fbConfig)で各種設定を引数にしてFirebase アプリオブジェクトを作成しています。

それをexportすることによって、
このnuxtのプロジェクト内からFirebaseへアクセスできるようになります。
それぞれの設定の情報は外部から見えないよう.envファイルに定義します。

FireBaseの歯車のアイコンからプロジェクトの設定

下にスクロールすることで設定情報がわかるので

.envに記述します””の間にコピペする。

API_ENDPOINT="http://localhost:3000"

API_KEY="*************************"
AUTH_DOMAIN="*********************"
PROJECT_ID="**********************"

6：設定が反映できているかを確認

front/pages/index.vueに以下の記述をします。

  export default {
    components: {
      AddTodo,
      TodoList,
    },
    data() {
      return {
        todos: [],
      };
    },
    // 追加
    created() {
      console.log("API_KEY:", process.env.API_KEY);
    },
    methods: {
      async addTodo(title) {
        await axios.post("/v1/todos", { title })
        this.todos.push({
          title
        });
      },
    },
  };

サーバーを立ち上げて確認します。

npm run dev

http://localhost:8080/

↑にアクセスして検証ツールでapikeyが出力されていればOKです！

7：Firebaseの機能を用いた新規登録機能の実装

Firebase Authenticationとは

Firebase Authenticationとはユーザー認証の機能を提供してくれて、
ユーザの情報をFirebase上に保存してくれるサービスです。
メールアドレスとパスワードを使った認証方法を使用していきます。

8：Firebase Authenticationのメールアドレス認証方式をオンにする

Firebase→作成したプロジェクトを選択

左側のナビゲーションペインからAuthenticationを選択し、始めるをクリックします。

Sign-in methodをクリックして、次にメール／パス…となっている部分をクリックします。

有効にするのチェックをONにした後で保存を押します。

9：新規登録した際にFirebaseの認証を行い、RailsAPIのDBにもユーザーのレコードが保存されるようにする。

新規登録画面の作成

新規登録の画面を作成します。
front/pagesの配下に、signup.vue作成して、フロント部分を記述します

front/pages/signup.vue

  <v-btn class="mr-4" @click="signup">submit</v-btn>
  const res = await firebase
    .auth()
    .createUserWithEmailAndPassword(this.email, this.password)

↑新規登録用の情報を入力してsubmitボタンを押したとき、async signup()が発火します。これにより、メールアドレスとパスワードを使用して、Authenticationの機能を利用できます。

 .catch(error => {
    this.error = (code => {
      switch (code) {
        case "auth/email-already-in-use":
          return "既にそのメールアドレスは使われています";
        case "auth/wrong-password":
          return "※パスワードが正しくありません";
        case "auth/weak-password":
          return "※パスワードは最低6文字以上にしてください";
        default:
          return "※メールアドレスとパスワードをご確認ください";
      }
    })(error.code);
  });

.catchは、エラーがあった際の実装です。各種エラーに対してメッセージを設定し、
<p v-if="error" class="errors">{{ error }}</p>で表示をしています。

v-ifに関しては、指定している値が存在しているときにのみ、
タグで囲んでいる部分が描画されます。
エラーが発生した場合、data()で定義されているerrorプロパティの値が入るので、
この部分が描画されるという訳です。
エラーがない場合はもちろん、表示はされません。

  const user = {
    email: res.user.email,
    name: this.name,
    uid: res.user.uid
  };

  await axios
    .post("/v1/users", {
      user
    })
    .catch(err => {
      console.log({
        err
      });
    });

Firebase側の処理が終わったら、const user =の部分でFirebaseから帰ってきた値を元に、userのオブジェクト情報を作成しています。

その後、await axiosを使用して、作成したユーザー情報をもとに、
APIへpostのリクエストを行なっています。

/v1/usersへのPOSTリクエストはどのアクションに対応しているか調べてみると、UsersControllerのcreateアクションに対応していることがわかります。

api/app/controllers/v1/users_controller.rb
  def create
    user = User.new(user_params)
    if user.save
      render json: user
    else
      render json: user.errors
    end
  end

  # 中略
  private

  def user_params
    params.require(:user).permit(:name, :email, :uid)
  end

Userクラスのインスタンスを、ストロングパラメータで受け取った引数を元に作成し、保存しています。
これでバックエンド側でもユーザーが作成され、DBに保存されます。

Submitをクリックしたら、ブラウザはTODO一覧の画面に移動できます。
こちらは、async signup()の処理の最後にあるthis.$router.push(“/”);の部分が実行されるからです。