【Bootstrap 4 + Vue.js + Firebase】ログイン画面の作成方法、手順

ログイン画面の作成をFirebaseを使用してサクッと作成します！
所要時間 15分

まずBootstrap 4 + Vue.js を始めたい場合は、以下の構築手順をご覧ください。
jun-nikki.hatenablog.com

目次

Firebaseとは？？

FIrebaseはバックエンドを簡単に出来る様にするサービスです。
詳しくは下記をご覧ください！

Firebase は Google が提供しているモバイルおよび Web アプリケーションのバックエンドサービスです。クラウドサービスの形態では BaaS に位置付けされます。 Firebase を使うことで、開発者はアプリケーションの開発に専念でき、バックエンドで動くサービスを作成する必要も管理する必要もありません。

https://www.topgate.co.jp/firebase01-what-is-firebase

デザイン案

今回はこれでいきます。完璧です！

Bootstrap 4とVue.jsをインストール

npm install -g @vue/cli
vue init bootstrap-vue/webpack vue-firevase-auth

以下の様に表示されますが、設定はデフォルトでOKです。

? Project name
? Project description
? Author
? Vue build standalone
? Install vue-router?
? Use ESLint to lint your code? Yes?
? Setup unit tests with Karma + Mocha?
? Setup e2e tests with Nightwatch?

npm install firebase

npm install
npm run dev

実行するといきなり躓きます。。。

エラーを見てみるとmain.jsのsinglequoteを必ず使用しろって言っているので、変更します。

  ✘  http://eslint.org/docs/rules/quotes  Strings must use singlequote
  src\main.js:4:26
  import BootstrapVue from "bootstrap-vue"

main.js

import BootstrapVue from "bootstrap-vue"
// 下に変更する
import BootstrapVue from 'bootstrap-vue'

再度見るとOKですね。

Signinのルートを作成する

src/route/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Signin from '@/components/Signin'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/signin',
      name: 'Signin',
      component: Signin
    }
  ]
})

Signinの画面を作成する

components直下のsigninを使用する様に定義しているので、新規にファイルを作成しましょう！

src/components/Signin.vue

<template>
  <div class="signin">
    <h2>Sign in</h2>
    <div class="container" style="width:500px">
      <div class="row align-items-center">
        <div class="col-md-4">アカウント名</div>
        <div class="col-md-3">
          <input type="text" placeholder="Username" v-model="username">
        </div>
      </div>
      <div class="row align-items-center">
        <div class="col-md-4">パスワード</div>
        <div class="col-md-3">
          <input type="password" placeholder="Password" v-model="password">
        </div>
      </div>
      <div class="row align-items-center">
        <div class="col-md-12">
          <button class="btn btn-primary" @click="signIn">Signin</button>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.signin {
  margin-top: 20px;

  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
input {
  margin: 10px 0;
  padding: 10px;
}
</style>

開くとこんな感じになります。上のアイコンはネットから拾ってきました。(笑)
かわいい。。
http://localhost:8080/#/signin

次にFirebaseに登録しましょう。Googleが作成しているサービスです。もちろん無料です。
firebase.google.com

Go Startedをクリックして、gmailで認証をしてください。
gmailがなければ作成しましょう。

プロジェクトを作成をクリックしてください。

初めて使用するので、デフォルトでいいと思いますが、一応「アナリティクスの地域」は日本にしました。

次に左のAuthonticationをクリックして、メールアドレスを有効にしましょう。

次はユーザを追加しましょう。

一度戻って赤丸のところをクリックすると、scriptが表示されるのでコピーしましょう。

コピーしたら、main.jsに張り付けましょう。”script～”は不要なので削除します。
実際には以下の様に貼り付けます。
src/main.js

var config = {
  apiKey: 
  authDomain: 
  databaseURL: 
  projectId: 
  storageBucket: 
  messagingSenderId: 
}
firebase.initializeApp(config)

サインインした時にユーザ認証してもらいたいので、scriptを追加しましょう。
src/Signin.vue

<script>
import firebase from 'firebase'

export default {
  name: 'Signin',
  data: function () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    signIn: function () {
      firebase.auth().signInWithEmailAndPassword(this.username, this.password).then(
        user => {
          alert('Success!')
          this.$router.push('/')
        },
        err => {
          alert(err.message)
        }
      )
    }
  }
}
</script>

実際に入力して成功するとSuccessと出ます。

まとめ

認証機能となるとPHPやRubyなどを使用しなければならなかったため、敷居は高かったように思いますがFirebaseはGUIで設定ができますし、処理もjavascriptで簡単に書けるのでちょっとしたものを作成するには良いですね。というのも、無料版だと制限があります。それほど大きな縛りではないと思いますが、場合によっては使用できないこともあるので注意が必要ですね。

Firebaseのリファレンス
firebase.google.com