【Vue3/Firebase】Authenticationを使ったユーザーを認証
目標
- Authenticationを使ったユーザーを認証の導入
- エミュレータでの動作確認
- サインアップとサインインに処理を追加
事前準備
vue3に事前準備uetify3が導入されたProject
記事では下記Git hub Repositoryを使用する
パッケージのインストール
プロジェクト内でfirebaseのライブラリをインストールしておく
yarn add firebase
Firebaseコンソールでメール認証をOnにする
今回はユーザ認証を必要最低限の機能で実装します
ログイン方法の実装に関しては増やしていく予定です
-
Firebaseの管理画面の左メニュー「構築のAuthentication」を選択
-
ログイン プロバイダの項目から「メール/パスワード」を選択する
-
メール / パスワードを有効にする
メールリンク（パスワードなしでログイン）は無効にしておきます
下記ように表示されれば成功です
VueにAuthenticationの設定を追加して連携する
App.vueにfirebase.jsをインポート
+import { firebaseApp } from './firebase';
export default {
name: "App",
data: () => ({
title: "びびおめがサイト", //サイトのタイトル
// HOMEアイコン
home: {
icon: "mdi-home",
link: "", //今回は設定しない
},
// コピーライトp
copyright: {
icon: "©",
date: "2023",
name: "ViviOmega",
},
}),
};
サインアップとサインインに処理を追加
Authenticationを実行するために必要なパッケージのインポートを行います
import {
getAuth,
signOut,
onAuthStateChanged,
signInWithEmailAndPassword,
createUserWithEmailAndPassword,
} from "firebase/auth";
各メソッドの詳細に関しては下記のドキュメントを参考
サインアップやサインインのボタンに処理を追加するためにmethodsオプションを指定することで、v-onのイベントハンドラとして呼び出されるメソッドを定義する
data: () => ({
...
}),
+ methods: {},
サインインの処理を追加
signInWithEmailAndPasswordに渡してサインインの処理をおこないます
※今回は入力処理に対してバリデーション処理を追加しませんが別途バリデーションは追加していこうと思います
methods: {
+ // サインイン処理
+ signin() {
+ // メールアドレスとパスワードが入力されているかを確認
+ if (this.email == "" || this.email == "") return;
+ const auth = getAuth();
+ signInWithEmailAndPassword(auth, this.email, this.password)
+ .then((userCredential) => {
+ // 成功時処理
+ const user = userCredential.user;
+ console.log(user);
+ })
+ .catch((error) => {
+ // 失敗時処理
+ const errorCode = error.code;
+ const errorMessage = error.message;
+ console.log(errorCode, errorMessage);
+ });
+ },
},
サインアップの処理を追加
createUserWithEmailAndPasswordに渡してサインアップの処理をおこないます
※今回は入力処理に対してバリデーション処理を追加しませんが別途バリデーションは追加していこうと思います
methods: {
...
+ // サインアップ処理
+ createAccount() {
+ const auth = getAuth();
+ createUserWithEmailAndPassword(auth, this.email, this.password)
+ .then((userCredential) => {
+ // 成功時処理
+ const user = userCredential.user;
+ console.log(user);
+ })
+ .catch((error) => {
+ // 失敗時処理
+ const errorCode = error.code;
+ const errorMessage = error.message;
+ console.log(errorCode, errorMessage);
+ });
+ },
},
現在ログインしているユーザーを取得する
onAuthStateChangedに渡しユーザーを取得する
ここだけに限った処理ではないため、後にこの処理は共通化が必要
ライフサイクルフックのmountedで実装
data: () => ({
...
+ // ログインしているユーザーデータ
+ currentUser:""
}),
+mounted() {
+ const auth = getAuth();
+ // ログインしているユーザーを取得する
+ onAuthStateChanged(auth, (user) => {
+ if (user != null) {
+ this.currentUser = user;
+ } else {
+ this.currentUser = null;
+ }
+ });
+},
イベントハンドラを各ボタンに実装
v-onディレクティブ（省略形は@）でイベントを指定
@イベント名="メソッド名"
今回はクリックメソッドを実行する
サインアップとサインインの処理を設定する
<v-col>
<v-text-field v-model="email" :label="constant.email" type="email">
</v-text-field>
<v-text-field
v-model="password"
:label="constant.password"
:type="show ? 'text' : 'password'"
:append-inner-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
@click:append-inner="show = !show"
>
</v-text-field>
+ <v-btn color="primary" variant="tonal" @click="signin">
{{ constant.signin }}
</v-btn>
+ <v-btn color="primary" variant="tonal" @click="createAccount">
{{ constant.sinup }}
</v-btn>
</v-col>
ログイン状態と非ログイン状態で表示内容を変更する
今回は実装しませんが、今後サインアップ時に個人情報を登録する予定なので仮設置を行う
条件付きレンダリングでcurrentUserの値にログイン情報が格納された場合は個人情報を登録する項目を描画する
<v-container>
+ <div v-if="currentUser == null">
<v-card max-width="500" class="mx-auto">
<v-card-actions>
<v-col>
<v-text-field v-model="email" :label="constant.email" type="email">
</v-text-field>
<v-text-field
v-model="password"
:label="constant.password"
:type="show ? 'text' : 'password'"
:append-inner-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
@click:append-inner="show = !show"
>
</v-text-field>
<v-btn color="primary" variant="tonal" @click="signin">
{{ constant.signin }}
</v-btn>
<v-btn color="primary" variant="tonal" @click="createAccount">
{{ constant.sinup }}
</v-btn>
</v-col>
</v-card-actions>
</v-card>
+ </div>
+ <div v-else>個人情報登録画面</div>
</v-container>
動作テスト
エミュレータとvueのプロジェクトを起動する
firebase emulators:start
yarn dev
メールアドレスとパスワードを入力しサインアップのボタンを押下し、しばらくすると個人情報登録画面が表示されれば成功です
エミュレータの管理画面でも実際に登録されているかを確認する
ログアウト仮設置
動作確認のため、詳細についてはここで言及しませんが個人情報登録画面の要素にサインアウトのボタンを仮設置しておく
Git commit情報
| SHA | commit message |
|---|---|
| ec3c0e5 | 【Vue3/Firebase】Authenticationを使ったユーザーを認証 |
あとがき
Authenticationを使ったユーザーを認証を使えば本来面倒な認証処理を簡単に実装でき、また認証情報を画面を離れても保持する事ができます。
これだけでもFirebaseは便利ですがまだまだ色々なサービスがリリースされております
Discussion