nuxt.js+Firebaseで認証ページを作る③

pages&layouts編

さて、今回が
nuxt.jsとFirebaseで認証画面を作る上での下準備の最後になります。

今回は、認証画面に必要な素材となるlayoutファイルとpageファイルを
一通り作っていきたいと思います。


今回のシリーズの全リンクはこちら

nuxt.js+Firebaseで認証ページを作る① (Firebase準備編)
nuxt.js+Firebaseで認証ページを作る② (nuxt.jsインストール編)
nuxt.js+Firebaseで認証ページを作る③ (pages&layouts準備編)
nuxt.js+Firebaseで認証ページを作る④ (認証機能実装編)

まずはページファイルを作る

さて、それでは早速nuxtのpagesにpageファイルを作っていきましょう。
今回の認証画面の最終的なサイト構造はこんな感じ
https://i.imgur.com/fOQ5rXd.png

今は、nuxtを
vuetifyというUIフレームワークを選択して
インストールしただけですので

ページとしてはデフォルトで用意されている
index.vueと
inspire.vueだけです。

ここに、adminディレクトリを追加して
admin/index.vueと
admin/login.vueを作成します。

それでは、ターミナルでnuxtのpagesディレクトリまでcdコマンドで移動しましょう。

pagesディレクトリに移動したら
adminディレクトリを作成しましょう。

mkdir admin

更にtouchコマンドでindex.vueとlogin.vueを作ります。

touch admin/index.vue
touch admin/login.vue


しかし、単なる空ファイルでは
nuxtのサーバーを立ち上げて
localhost:3000/admin」と「localhost:3000/admin/login」に
アクセスしてもエラーが出るだけですので
vueファイルに最低限必要なコードを書いていきます。

エディタで
admin/index.vueとadmin/login.vue
を開きましょう。

そして下記のコードをコピペしてください。

admin/index.vue
<template>
  <div>
    admin
  </div>
</template>

<script>
  export default {
  }
</script>

<style lang="scss" scoped>

</style>
admin/login.vue
<template>
  <div>
    login
  </div>
</template>

<script>
  export default {
  }
</script>

<style lang="scss" scoped>

</style>

レイアウトファイルを作る

ページファイルが用意できたので
続いてレイアウトも作っていきましょう。

ターミナルでnuxtのlayoutsディレクトリへ移動して
下記コマンドを実行します。

touch login.vue

次に「/admin」ページ用のレイアウトですが
ここではこだわりは特に無いので「layouts/default.vue」を複製して
ファイル名をadmin.vueに変更しておきます。

これで、「/admin」ページ用と「/admin/login」ページ用の
layoutファイルが用意できたので
続いてファイルの中身を編集していきます。

まず、「layouts/admin.vue」の方ですが
こちらは今回はこのままにしておきます。
なので「layouts/login.vue」を編集していきましょう。

完成はこのような感じです。
https://i.imgur.com/eJghrk4.png


このようなログインフォームを作るのは、素のvue.jsでも充分簡単ですが
それでも、一手間はかかるだろうと思います。
ですが今回、UIフレームワークにvuetifyを採用しています。
vuetifyにはすでにこの手のログインフォームはソースコードをコピペするだけで
出来上がるようなサンプルが用意されていますので
それを使っていく事にします。

まず、Vuetify公式へアクセスして
左のサイドバーの「Pre-made layouts」という項目をクリックしてください。
すると下の画像のようにレイアウトの一覧が表示されると思います。
この中の「Centered」というのが今回利用するログインフォーム用のレイアウトです。
https://i.imgur.com/qEhasxi.png


そしたら、「Centered」の下の「< >」をクリックしましょう。
するとレイアウトのソースコードが掲載されているgithubのページが開くので

そのソースコードの templateタグを丸ごとコピーして
「layouts/login.vue」のtemplateタグに上書きしましょう。
下記のコードをコピペして貰っても良いです。

<template>
  <v-app id="inspire">
    <v-content>
      <v-container
        class="fill-height"
        fluid
      >
        <v-row
          align="center"
          justify="center"
        >
          <v-col
            cols="12"
            sm="8"
            md="4"
          >
            <v-card class="elevation-12">
              <v-toolbar
                color="primary"
                dark
                flat
              >
                <v-toolbar-title>Login form</v-toolbar-title>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field
                    label="Login"
                    name="login"
                    prepend-icon="person"
                    type="text"
                  ></v-text-field>

                  <v-text-field
                    id="password"
                    label="Password"
                    name="password"
                    prepend-icon="lock"
                    type="password"
                  ></v-text-field>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <div class="flex-grow-1"></div>
                <v-btn color="primary">Login</v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</template>

ページにレイアウトを適用させる

さて、これで
「layouts/login.vue」の準備もできたので
次はpagesのvueファイルにlayoutを設定して
「/admin」ページでは「layouts/admin.vue」のレイアウトを利用し
「/admin/login」ページでは「layouts/login.vue」のレイアウトを使うようにしてやります。

レイアウトを設定するのはものすごく簡単です。
まず、「pages/admin/index.vue」を開きましょう。

<template>
  <div>
    admin
  </div>
</template>

<script>
  export default {
    layout: 'admin'
  }
</script>

<style lang="scss" scoped>

</style>

これだけです。
単に「layout」というプロパティに'admin'と指定してやるだけです。

同様に「pages/admin/login.vue」の方にもレイアウトを適用させましょう。

<template>
  <div>
    login
  </div>
</template>

<script>
  export default {
    layout: 'login'
  }
</script>

<style lang="scss" scoped>

</style>

これでpagesとlayouts全て揃ったので
今回はここまで
と言いたいところなのですが

今の状態でプロジェクトルートでnuxtを起動して
localhost:3000/admin/login」へアクセスしてみて下さい。
すると下記画像のように一部アイコンが表示されていない状態になっているかと思います。
https://i.imgur.com/YkS7fuK.png

致命的な欠陥とまでは言わないですが
かっこ悪いので直しておきましょう。
このアイコンを表示するには
nuxt.config.jsを編集する必要がありますので、
nuxt.config.jsをエディタで開きます。

headというプロパティの中にlinkというプロパティがあるかと思います。
ここは所謂、HTMLのheadタグの中の設定という事です。
HTMLのheadタグ内をjsのオブジェクトで表現しているだけなので
ここのlinkのところに
アイコンのcssを読み込んでやればいいわけです。

linkのところでは現在faviconが読み込まれているだけだと思うので
その下に下記のように追加してやりましょう。
これで無事アイコンも表示されるようになったはずです。

link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }
]

まとめ

以上、ここまでで認証画面実装の為の
下準備ができた感じです。

次回がいよいよラストで
本格的に認証機能の実装をやっていくという感じになります。

nuxt.js+Firebaseで認証ページを作る②

早速nuxtをインストールしよう

それでは早速、nuxt.jsをインストールしていきます。
まずは、ターミナルを開いて
任意のディレクトリへ移動して
下記を実行しましょう。

npx create-nuxt-app < 任意のアプリ名 >

npx create-nuxt-appの後、任意のアプリ名を入力して下さい。
ここでは、「sample」としておきます。

nuxtの設定項目は、こんな感じです。
https://i.imgur.com/JNhU05H.png

特にどの設定も好きな設定で良いですが。
今回はCMSを想定しています。
CMSなどwebサイト側にSEOの配慮をする必要があるwebサービスを作る場合は
サーバーサイドレンダリング(SSR)が必要となるので
choose rendering modeという項目はUniversalとします。

また、今回のチュートリアルでは、UI Frameworkを
Vuetifyで進めていくので
choose UI framework の箇所もVuetifyを選択しましょう。
nuxtの設定を全て選択したらEnterを押しましょう。

インストールが終わると下の画像のような構成でnuxtアプリが構築されているかと思います。
それでは、ひとまず確認のため、アプリを開発モードで起動してみましょう。
https://i.imgur.com/4seW6hx.png

cd sample
npm run dev

ブラウザを開いて
localhost:3000
にアクセスしましょう。

nuxt.jsはUI FrameworkにVuetifyを選択すると
最初からかなりそこそこなUIのアプリが出来上がっています。

Vuetifyは非常に簡単にリッチなUIのアプリを作れてしまうので
オススメです。
最近、2.0.0系がリリースされ、これまで以上に便利なUIが増えています。
https://i.imgur.com/oLwxUYK.png

firebaseのプラグインを導入しよう。

それでは、続いてfirebaseのnodeモジュールをインストールして
firebaseプラグインを作成していきましょう。

先ほど、npm run devでnuxtのサーバーが起動しているので一回、「control + c」で終了させます。
nuxtのサーバーが終了したら下記を実行しましょう。

npm i firebase

次に、pluginsディレクトリにfirebase.jsというプラグインファイルを作成します。

touch plugins/firebase.js

作成できたらfirebase.jsをVSCodeなどのエディタで開き
下記のようにモジュールを読み込み
firebaseの初期化コードを書いてやりましょう。

import firebase from 'firebase/app'
import 'firebase/auth'

if (!firebase.apps.length) {
  firebase.initializeApp()
}


さて、この「firebase.initializeApp()」ですが
このメソッドの引数に渡してやる必要があるのが
前回Firebaseのアプリ追加画面に表示されていた。
apiキーなどの設定情報です。

firebaseのプラグインを利用するためにはこの設定情報が必要となります。

firebaseコンソールにアクセスしてapiキーなどの設定情報を取得しよう。

それでは、ブラウザでfirebaseコンソールへアクセスして
firebaseの設定情報を取得しましょう。

コンソールにアクセスしたら前回作成したプロジェクトをクリックしましょう。
https://i.imgur.com/LPvmVZg.png


Firebaseの管理画面に入ったら
サイドナビ上部の歯車のアイコンをクリックします。
https://i.imgur.com/7QotY2M.png


下画像のようにメニューが表示されるので「プロジェクトの設定」をクリックします。
「Settings」というページへ移動したら
そのページの一番下までスクロールしましょう。
https://i.imgur.com/Rrr1Zz4.png


すると、前回アプリ追加画面に表示されていた。
設定情報が見つかると思います。
https://i.imgur.com/uyXR0eM.png


こちらの画像と同じ範囲をコピーして先ほどの
firebase.initializeApp()メソッドの引数のところに
ペーストしてやります。
https://i.imgur.com/lyxzv0e.png

import firebase from 'firebase/app'
import 'firebase/auth'

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: <your config code>,
    authDomain: <your config code>,
    databaseURL: <your config code>,
    projectId: <your config code>,
    storageBucket: "",
    messagingSenderId: <your config code>,
    appId: <your config code>
  })
}

これで、firebaseモジュールの初期化ができましたので
最後に、firebaseモジュールのauthメソッドを
storeなどの別のjsファイルにインポートできるように
モジュールをエクスポートしておいてやりましょう。

import firebase from 'firebase/app'
import 'firebase/auth'

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: <your config code>,
    authDomain: <your config code>,
    databaseURL: <your config code>,
    projectId: <your config code>,
    storageBucket: "",
    messagingSenderId: <your config code>,
    appId: <your config code>
  })
}

export const fireAuth = firebase.auth()

まとめ

以上、
今回は、nuxtのインストールとfirebaseのプラグイン導入をやっていきました。
前回と比べるとだいぶ薄い内容にはなってしまいましたが
実装の手順、工程としてキリが良いので
今回はここまでにしておきましょう。

次回は、認証画面に必要な最低限のページとレイアウトファイルを作成していきます。

nuxt.js+Firebaseで認証ページを作る①

Firebase準備編

今回は、nuxt.jsとFirebaseのAuthenticationを利用して
WordPress的なCMSを想定した、認証画面を作っていこうかと思います。

nuxt.js初心者、Firebase初心者にも手順が分かりやすいように
4回に分けてやっていこうと思います。

nuxt.js+Firebaseで認証ページを作る① (Firebase準備編)
nuxt.js+Firebaseで認証ページを作る② (nuxt.jsインストール編)
nuxt.js+Firebaseで認証ページを作る③ (pages&layouts準備編)
nuxt.js+Firebaseで認証ページを作る④ (認証機能実装編)

以上の4回です。
それでは早速、第一回目という事で
Firebase準備編からやっていきましょう。

Firebaseプロジェクトを立ち上げよう。

それではまずは、こちらのFirebaseのコンソールにアクセスして
Firebaseの新規プロジェクト立ち上げをやっていきましょう。

ちなみにFirebaseを利用する為にはGoogleアカウントが必要です。
Googleアカウントが無いという人はアカウントを用意してください。


はじめて、Firebaseのコンソールにアクセスした場合だと
画像のように
「Firebaseへようこそ」と書かれたページが表示されると思います。
画像に示す通り「プロジェクトを作成」というボタンがあるかと思いますので
クリックします。
https://i.imgur.com/r2lmh2e.png


すると、プロジェクトの作成画面が表示されると思います。
この画面では、任意のプロジェクト名を入力しましょう。
今回は「test」としておきました。
「test」みたいな簡単な名前だと、既に使われている名前だったりしそうですが
その辺は、「test-a2b3c」のような感じで、Firebase側が自動で適当なIDを振ってくれるので
気にせず好きな名前で登録してください。

プロジェクト名が入力できたら
続行ボタンをクリックします。
https://i.imgur.com/CaedDvW.png


次に、Googleアナリティクスをプロジェクトに追加するかですが
今回は、WordPressのようなCMSの認証画面を想定しているので
「プロジェクト用にGoogleアナリティクスを設定する」という方を選択して
「続行」をクリックしましょう。
https://i.imgur.com/fbzypGg.png


続いて、Googleアナリティクスの構成との事ですが
この辺は、どういう設定でもとりあえずは
今回作る、認証機能とはあまり関係ないので
デフォルトを選択しておきましょう。
「Default Account for Firebase」という項目が選択されていることだけ確認して
「プロジェクトを作成」をクリックしましょう。

すると、プロジェクト準備中のローディング画面が表示されます。
10秒〜20秒ほど待つと
「プロジェクトの準備ができました」と表示されます。
以上でプロジェクトの立ち上げは完了です。
https://i.imgur.com/fFuzT4v.png

Firebaseプロジェクトにアプリを追加しよう。

それでは、続いてFirebaseにアプリを追加していきましょう。
「Firebaseにアプリを追加ってどういう事?」という人の為に軽くだけ
Firebaseは、BaaS(Backend as a Service)というクラウドサービスです。

簡単に言うとアプリを開発する際、本来自分で開発しなければならない
アプリのバックエンド部分の代わりをしてくれるもの

そんなところです。

アプリを追加と言うのは
このFirebase上に作ったバックエンドを利用するアプリを登録するというような感じです。

この辺については、別の機会、
Firebaseの主機能「Firestore」の使い方など書く機会があれば
詳しく書こうと思いますが

認証画面を作る上では
幾つもあるFirebaseの機能のうち
「Firebase Authentication」という機能しか使わないです。
なので、Firebaseについては今回は作業の手順だけ頭に入れるくらいのつもりで
サラッと先に進むことにしましょう。

それでは、閑話休題ということで
続き進めていきます。


改めてFirebaseコンソールにアクセスすると
画像のように「プロジェクトを追加」という項目の隣に先ほど作成した
プロジェクトがあると思いますので
そちらをクリックしましょう。
https://i.imgur.com/kUWjAhz.png



するとFirebaseの管理画面に入れます。
はじめて管理画面に入ると
ホーム画面に親切に「アプリにFirebaseを追加しましょう」と案内してくれているので
その下の「< / >」アイコンをクリックしましょう。
https://i.imgur.com/IL01vxU.png


アプリの登録画面が開いたので
先ほどのプロジェクト立ち上げの時同様、任意のアプリ名を入力しましょう。
プロジェクト名と違う名前でも同じ名前でも良いでしょう。
ここでは、プロジェクト名と同じ「test」としておきます。
アプリ名が入力できたら「アプリを登録」をクリックします。
https://i.imgur.com/UHS3l6g.png


アプリの登録ができたので
アプリの「APIキー」等が表示されました。
これらは、次回「nuxt.jsインストール編」の最後に
nuxtのプラグイン導入の際に使用します。
今回は、そのまま「コンソールに進む」ボタンをクリックしましょう。
https://i.imgur.com/XqnNHCM.png

認証機能の為のFirebaseログインプロバイダを追加しよう。

続いて、認証機能実装の為に
Firebase側でも、認証ユーザーの登録など
いくつか設定や登録の作業が必要なので
そちらを進めていきましょう。

Firebaseの管理画面のホームに
「Authentication」という項目があります。
こちらをクリックしてFirebase認証の設定画面へアクセスしましょう。
https://i.imgur.com/esd5wnH.png


Firebase認証の設定画面が開いたら
まずは、「ログイン方法」の設定をしていきましょう。
左上に「Authentication」という見出しがあります。
その下のナビゲーションの内の「ログイン方法」をクリックします。
すると、画像のように
「メール/パスワード」「電話番号」「Google」「Facebook」「Twitter」と
色々な、ログインプロバイダの一覧が表示されたと思います。

この中から、今回使うのは「メール/パスワード」なので
こちらをクリックしましょう。
https://i.imgur.com/wEgarC2.png


色々とログインプロバイダがある中でも
メールログインは、かなり設定が簡単な方です。
画像のように「有効にする」スイッチをオンにしてやるだけです。
これだけでログインプロバイダの準備は終わりです。

しかし、これだけではまだ
ログイン可能なユーザーが誰もいない状態となってしまっているので
ログインできるユーザーを登録する必要があります。
https://i.imgur.com/FrxKjjW.png

認証ユーザーを登録しよう

それでは、最後にログインユーザーの登録を行っていきましょう。
と言っても
もう残りの作業は、ものの数秒で終わってしまう程度です。
サラッと終わらせてしまいましょう。

左上の見出し「Authentication」の下のナビゲーションの内の「ユーザー」をクリックします。
続いて「ユーザーを追加」ボタンをクリックしましょう。
ちなみに、ログインプロバイダを一つも有効にしていない状態でこのページを開くと
「ユーザーを追加」ボタンはグレーアウトされた状態になっているので
先に、ログインプロバイダを有効にするようにしましょう。
https://i.imgur.com/ebrxYs2.png


さて、これが「Firebase準備編」最後の作業です。
「ユーザーを追加」ボタンをクリックすると
画像のようなウィンドウが開くので
メールアドレスと任意のパスワードを設定して
ウィンドウ右下の「ユーザーを追加」をクリックしましょう。
これで、今回作成する認証画面にログインできるユーザーを
登録することができました。
https://i.imgur.com/wppT7Vz.png

まとめ

以上で「Firebaseの準備編」は終わりです。
次回は、nuxt.jsのインストールと
今回、Firebaseのプロジェクト立ち上げができてるので
nuxt.jsにFirebaseと通信するためのplugin導入まで
やっていきましょう!

plugin導入の際には、今回の作業の途中で軽く紹介した「APIキー」の
組み込みもやっていきます。

それでは、また次回!