FirebaseのadminSDKを使ってみた②Vue.js編

Vue 2、vue-router、Firebaseを使用した認証システムを備えたウェブアプリケーションをすばやく構築する方法を説明します。

次回は設計思想が似ているAngularでもやってみようと思います。

その前に改めて特徴を簡単に。

特徴

・セキュリティが高い。二段階認証などを簡単に実装できる。

・NoSQL（一長一短）

認証の種類

Password

• メールアドレスとパスワードでの認証

Provider

下記のプロバイダでのユーザー認証

• Google
• Facebook
• Twitter
• GitHub
• 各アカウントでのDeveloper登録等は必要

Phone Number

• SMSを利用した認証

Anonymous function

• 一時的な匿名の認証
• 匿名アカウントから通常アカウントへのアップグレードは可能

ユーザー管理について

Firebase Consoleの機能

• ユーザー追加
• パスワードリセットメールの送信
• アカウントの停止
• アカウントの削除
• 上記以外の操作をする場合はFirebase Admin SDKのAdmin Auth APIを利用する必要がある
• Node.js、Java、Pythonで実行可能

Vue.jsとは？

軽量のJavaScriptフレームワークです。

VUEは、（発音/vjuː/、のような図）であるプログレッシブフレームワークのユーザインターフェイスを構築します。他のモノリシックフレームワークとは異なり、Vueは段階的に採用できるように一から設計されています。コアライブラリはビューレイヤーのみに焦点を当てており、他のライブラリや既存のプロジェクトとの統合が非常に簡単です。vuejs公式ドキュメントから：https ://vuejs.org/v2/guide

Vue.jsのは段階的に、Simple、Fast、Compaosable、Compact、
Powerful、Module Friendlyという６つで表現できます。

1. Simple
   HTML→JSON→View Modelを作る。
2. Fast
   DOM操作をまとめ、適切なタイミングで非同期更新することができる。
3. Composable
   依存のない再利用可能なコンポーネントを作り、組み合わせることができる。
4. Compact
   20kbに圧縮。
5. Powerful
   HTMLに書く式とコンピューテッド・プロパティは依存するプロパティ(変数)が自動的に追跡される等、ユーザにとって面倒な動作の動作の
   多くを肩代わりする。
6. Module Friendly
   Webpack etcの中から好みのモジュール管理の仕組みを利用できます。

Firebaseとは何ですか？

Firebaseは、モバイルおよびウェブアプリケーション開発プラットフォームです。Firebaseは、デベロッパーがニーズに合わせてさまざまな機能を組み合わせて構成できます。[...] Firebaseの最初の製品はリアルタイムデータベースで、開発者が複数のクライアント間でデータを保存および同期できるAPIを提供します。その後、製品ラインを拡大し、アプリ開発のための完全なスイートになりました。ウィキペディアから：https : //en.wikipedia.org/wiki/Firebase

簡単に言うと、Firebaseはサーバー側のプログラミングなしでアプリケーションを開発できるようにするツールセットです。リアルタイムデータベース、認証システム、クラッシュレポート、分析、その他のサービスがモバイル/ウェブアプリですぐに使用できます。

Let’s start!!

vue cliをまだインストールしていない場合は、インストールしてみましょう。

$ npm install -g @ vue / cli

新しいプロジェクトを作成してみましょう。

 $ vue create <プロジェクト名>

Vue Cli 3の優れた機能の1つは、必要な構成をまったく行わずにプロジェクトを初期化できるため、できるだけ早くコーディングを開始できることです。

「ルーター」オプションを選択

プロジェクトが初期化されます。

次に、新しいディレクトリに移動して実行します。

$ cd vue-firebase-tutorial 
$ npm run serve

これで、URL ‘ http：// localhost：8080’を開くと、Vueプロジェクトのデフォルトビューが表示されます。

アプリの構造

アプリの構造を簡単に見てみましょう。

ソースコードがsrc/ディレクトリの下にあります。

Let’s coding!!

ログインに成功した後、または新しいアカウントが作成された後、アプリの認証された部分であるホームビューにリダイレクトされます。

ステップ1：ログインとサインアップ

1–1ログインビュー

ログインビューを作成します。

ログインコンポーネント。`src/ views / Login.vue`

これでコンポーネントが作成されました。この新しいコンポーネントをアプリに表示するためにvue-routerを使用します。

vue-router はVue.jsの公式ルーターです。Vue.jsコアと深く統合して、Vue.jsを使用したシングルページアプリケーションの構築を簡単にします。Vue.js + vue-routerを使用して単一ページのアプリケーションを作成するのは非常に簡単です。Vue.jsを使用すると、すでにアプリケーションをコンポーネントで構成しています。ミックスにvue-routerを追加するときは、コンポーネントをルートにマップし、vue-routerにレンダリングする場所を通知するだけです。vue-routerのドキュメントから：https : //github.com/vuejs/vue-route

それでは、先ほど作成した新しいLogin コンポーネントをアプリルーターに追加しましょう。src/router.jsファイルを開き、ログイン コンポーネントを次のようにルーターに追加します。

src / router.js

次に、ブラウザーのURLを変更すると、先ほど作成しlocalhost:8080/#/loginた新しいLogin コンポーネントがブラウザーに表示されます。

http：// localhost：8080 /＃/ login

アプリコンポーネントのHTMLテンプレート

Router-viewはvue-routerのコンポーネントです：

<ルータビュー> 成分は、与えられたパスの整合コンポーネントを描画する機能要素です。でレンダリングコンポーネント<ルータビュー>は、独自含めることができます。<ルータビュー>を、ネストされたパスのコンポーネントをレンダリングしますました。vue-routerドキュメントからhttps://router.vuejs.org/en/api/router-view.html

したがって、http://localhost:8080/#/login vue-routerに到達すると、router-viewコンポーネント内で/login定義したパスの添付コンポーネントがレンダリングされます。

また、Appコンポーネントにはテンプレート内に2つのrouter-link要素を持つnav divも含まれているため、ビューにも表示されます。

作成しているアプリのナビゲーションとの混乱を避けるために、このnav divをAppコンポーネントから削除して、vueロゴに置き換えます。src / assets /ディレクトリ内にVueロゴが既にあるので、それを使用します。

`src / App.vue`のアプリコンポーネント

また、Aboutビューを使用しないため、ファイルをディレクトリ（src/views/About.vue）から削除し、ルート構成からも削除。src/router.js

src / router.js

次に、ログインビューに戻って、ログインコンポーネントにスタイルを追加します。ファイルの<style>要素Login.vue内に、それらのスタイルを追加します。

ログインコンポーネントのスタイル

これで、ログインページが少し見栄えがよくなりました。

CSSが適用されたログインビュー

1–2-サインアップビュー

ログインビューを作成したのと同じ方法で、サインアップビューを作成します。

src / views / SignUp.vue

次に、新しいコンポーネントをルート内に追加します src/router.js

src / router.js

次に、ブラウザでを開くhttp://localhost:8080/#/sign-upと、次のビューが表示されます。

サインアップビュー

ステップ2：ビュー間のナビゲーション

ログインビューからSignUpビューに移動し、これら2つのビューからホームビューに移動します。

<router-link> は、ルーター対応アプリでユーザーナビゲーションを有効にするためのコンポーネントです。

Login とSignUpコンポーネントに実装しrouter-linkて、これら2つのビュー間を移動できるようにします。

src / views / Login.vue

src / views / SignUp.vue

これで、先ほど作成したリンクを使用して、2つのページ間を移動できます。

ナビゲーションの最後の部分は、ログインとサインアップからホームビューに移動することで構成されます。

ではrouter-link、コンポーネントのhtml部分でナビゲーションが行われますが、今度はプログラムでルート間をナビゲートしたいとします。

Connectionボタンをクリックしたときにイベントをアタッチする必要があります。Vue2では、v-onディレクティブまたは@v-onディレクティブのエイリアスを使用してそれを行うことができます。

イベントを聞くv-on ディレクティブを使用してDOMイベントをリッスンし、トリガーされたときにJavaScriptを実行できます。Vue 2ドキュメントから：https : //vuejs.org/v2/guide/events.html#Listening-to-Events

ビュー間をプログラムでナビゲートするために、vue-routerにはアプリで使用できる一連の関数があります。これらの関数の詳細については、ドキュメントhttps://router.vuejs.org/en/essentials/navigation.htmlを参照してください。

src / views / Login.vue

login関数

this.$router.replace('home')

src / App.vue

ホームコンポーネントのデフォルトパスは/アプリの初期化でしたが、ユーザーが認証されたときにのみホームビューにアクセスできることがわかったので、パスに到達したときにホームビューにアクセスできるようにルートを変更しましょう/home。

src / router.js

ステップ3：Firebaseの統合

これでフロントエンドアプリの準備ができたので、Firbaseを実装して認証システムを使用できるようにします。

3.1 Firebaseで新しいプロジェクトを作成する

Firebaseを使用するには、最初にFirebaseコンソールで新しいプロジェクトを作成する必要があります。アカウントを作成していない場合は、作成してからconsole.firebase.google.comにアクセスします。

Firebaseコンソール

をクリックしAdd projectます。それらには、新しいプロジェクトを作成するためのポップアップが必要です。希望する名前を選択します。

新しいプロジェクトを作成する

次に、プロジェクトのホームページにアクセスします。

Firebaseのプロジェクトホームページ

Firebaseプロジェクトが作成されます。これをアプリに統合するには、をクリックしAdd Firebase to your web appます。

コードスニペットを含むポップアップが表示されます。2番目のスクリプトバランス内にコードをコピーします。次のようになります。

// Firebaseを初期化しますlet config = { 
  apiKey： "YOUR_API_KEY"、
  authDomain： "YOUR_PROJECT_ID.firebaseapp.com"、
  databaseURL： "https://YOUR_PROJECT_ID.firebaseio.com"、
  projectId： "YOUR_PROJECT_ID"、
  storageBucket： "YOUR_PROJECT_ID.appspot.com"、
  MessagingSenderId： "YOUR_MESSAGING_SEND_ID" 
};firebase.initializeApp（config）;

それでは、vueプロジェクトに戻りましょう。Firebaseモジュールをプロジェクトに追加する必要があります。そうするために：

$ npm install ——firebase

インストールが完了したら、Firebaseモジュールをアプリにインポートしましょう。main.jsファイルを開き、先ほどコピーした構成コードでFirebaseを初期化します。

src / main.js

3.2 SignUpコンポーネントを使用してFirebaseでユーザーを作成する

SignUpコンポーネントに戻り、Firebaseでユーザーを作成するために必要なものを実装します。

新しいユーザーを作成するにはemail、passwordをコンポーネントコントローラ内部のフォームで入力します。

v-model ディレクティブを使用して、フォーム入力要素とテキストエリア要素に双方向のデータバインディングを作成できます。入力タイプに基づいて、要素を更新する正しい方法が自動的に選択されます。少し不思議ですが、v-model は基本的に、ユーザー入力イベントのデータを更新するための構文シュガーであり、一部のエッジケースには特別な注意が必要です。Vue 2のドキュメントより：https : //vuejs.org/v2/guide/forms.html

作成する新しいユーザーのemailおよびを取得したらpassword、createUserWithEmailAndPasswordというFirebase関数を使用します。

詳しい内容は前回記事。

https : //firebase.google.com/docs/reference/js/firebase.auth.Auth#createUserWithEmailAndPassword

これらすべてをSignUpコンポーネントに追加しましょう。

src / views / SignUp.vue

Authenticationの部分は、名前のタブを持っていますSIGN-IN METHOD

Email/Passwordプロバイダーを有効にする必要があるだけです。

次に、Vueアプリで新しいユーザーを作成してみます。

Firebaseプロジェクトに新しいユーザーが作成されました。

すべてが正しいことを確認するために、FirebaseコンソールのAuthentication一部の下を見て、ユーザーのリストを確認できます。作成したユーザーがリストにあるはずです。

3.3新しいユーザーでログイン

新しいユーザーが作成されたので、このユーザーでログインしてみましょう。（Firebaseで新しいユーザーが正常に作成されると、ユーザーがアプリケーションに自動的にサインインしますが、この例では、ログインビューから再度サインインします）

ログインコンポーネントに戻りましょう。ログインを試みるユーザーのemailおよびを取得しpassword、このユーザーをFirebaseにサインインする必要があります。

このコンポーネントはSignUpコンポーネントのように見えますが、変更は呼び出す関数になります。Firebaseでユーザーをサインインするには、Firebaseが提供するsignInWithEmailAndPassword関数を使用します。emailおよびpasswordをパラメーターとして取り、Firebase promiseを返します。

src / views / Login.vue

今作成したユーザーでログインしてみましょう

これで、ユーザーがFirebaseで認証されました。

ステップ4：認証のみでアプリにアクセスする

4.1：ルートにメタフィールドを追加する

src / router.js

path: ‘*’、存在しないすべてのパスをログインビューにリダイレクトします。ユーザーが認証されると、ユーザーがログインするとログインページにアクセスできなくなるため、ビューが自動的にHelloビューにリダイレクトされます。

不正なURLを入力しようとすると、ログインビューにリダイレクトされることがわかります。

4.2：ユーザーが認証された場合にルートをリダイレクトする

すべての準備が整ったので、Firebaseでユーザーが認証されているかどうかを確認する必要があります。

これを行うために、Firebaseは現在のユーザーを取得するための関数を提供しています。

ナビゲーションガード名前が示すように、vue-router によって提供されるナビゲーションガードは、リダイレクトまたはキャンセルすることによってナビゲーションを保護するために主に使用されます。ルートナビゲーションプロセスにフックする方法はいくつかあります。グローバル、ルートごと、またはコンポーネント内です。vue-routerのドキュメントから：https : //router.vuejs.org/en/advanced/navigation-guards.html

グローバルナビゲーションガードを使用します beforeEach.

src/router/index.jsファイルに実装しましょう。

src / router.js

beforeEachこの関数は、3つのパラメータを取るto、fromと、nextナビゲーションが起動されるたびに呼び出されます。

• toパラメータは、ナビゲートされるターゲットルートオブジェクトです。
• from パラメータは、ナビゲートされている現在のルートです。
• nextパラメータは、フックを解決するために呼び出す必要がある関数であり、ナビゲーションをリダイレクトまたは中止するための引数を取ることができます（ドキュメントの詳細を参照）

ページをリロードしてみましょう。

何も起こりません。

それは、アプリのライフサイクルにおいて、ナビゲーションガードbeforeEachの実行がFirebaseの初期化が終了する前に行われるためです。したがって、アプリを最初にロードしたとき、Firebaseモジュールは初期化を完了していないため、firebase.auth（）は nullを返します。

最初の読み込み後、サインアップビューに移動しようとすると、リダイレクトが行われ、Helloビューが表示されます。

どのようにしてこのシナリオを回避し、リダイレクトがアプリの最初のロードで直接行われるようにすることができますか？

さて、Firebaseでは、Authオブジェクトにオブザーバーを設定することができるので、現在のユーザーを取得したときに、Authオブジェクトが初期化などの中間状態になっていないことを確認できます。

このオブザーバーは、onAuthStateChangedと呼ばれます。（オブザーバーの詳細については、Firebaseのドキュメントをご覧ください：https : //firebase.google.com/docs/auth/web/manage-users#get_a_users_profile）

したがって、onAuthStateChangedオブザーバーにコールバックを設定することで、Firebaseが初期化されていることが確実な場合にのみ、Vueアプリを初期化できます。

src/main.jsファイルを次のように変更してみましょう。

src / main.js

これで、Firebase Authオブジェクトを使用する準備が整っていることが確実な場合にのみ、アプリを初期化します。

これで、ページを更新するか、URLからログインまたはサインアップビューにアクセスしようとすると、リダイレクトが実行されていることがわかります。

4.3：ログイン/サインアップおよびアプリからのログアウト後のリダイレクト

これで認証システムができたので、ログイン後または新しいユーザーが作成されたときにユーザーをリダイレクトする必要があります。また、Firebaseからログアウトできるようにしたいと考えています。

ログアウトするには、Homeコンポーネントにボタンを追加し、Firebaseからログアウトするイベントをアタッチします。

signInWithEmailAndPasswordやcreateUserWithEmailAndPasswordと同様に、 Firebaseはpromiseを返すsignOutと呼ばれるログアウト機能を提供します。SignOut関数が完了したら、アプリをログインビューにリダイレクトします。

src / views / Home.vue

次に、ボタンをクリックすると、Firebaseからログアウトして、ログインビューに戻ります。

Firebaseからログアウトしていることを確認するには、ページを更新するか、ホームビューにアクセスしてみてください。

次に、再度サインインしますが、その前にコードを変更して、ログイン後にアプリの認証部分にリダイレクトできるようにします。

src/Login.vue

次に、ログインしてみます。するとホームビューにリダイレクトされます。

同じことをSignUpコンポーネントに実装しましょう。

src / views / SignUp.vue

これで、新しいアカウントの作成後、ユーザーはホームビューにもリダイレクトされます。

ES6の矢印機能を使用するthis.$routerと、アクセスしてリダイレクトを実行できます。