認証機能構築チュートリアル

自己紹介

プログラミング講師の飼鳥晴康(@hathle)です。

エンジニア歴は10年以上で海外(カナダ)就労も経験しています。

カナダでは、映画を作っていました。

現在は、独立して、Python、Djangoをメインにオンラインでマンツーマンレッスンをしています。

お問い合わせなどは、Twitter(@hathle)からお願いいたします。

プログラミングは人生を変えることができます。

目標に向かって、一緒に頑張っていきましょう！！

はじめに

Vue.js + Firebaseを使用して、認証機能を構築していきましょう。

目標

・Vue.jsの導入方法を学習
・Vuetifyの導入方法を学習
・Firebaseの導入方法を学習
・認証機能の構築方法を学習

機能

・サインアップ
・ログイン
・ログアウト
・ログイン必須のメインコンテンツ

前提知識

Vue.jsを始める前に、JavaScriptは学習しておいて下さい。

・JavaScript

では、始めて行きましょう！！

準備

Vue.jsを導入する準備をしていきます。

Vue.jsとは？

Vue.jsは、Webアプリケーションにおけるユーザーインターフェイスを構築するためのJavaScriptフレームワークです。

SPA(Single Page Application)開発に使われていることが多いです。

特徴

・学習コストが低い
・コードの記述量が少なく、開発スピードが早くなる
・コンポーネント化することで、再利用することができる

Vue.js

node/npmインストール

nodeとnpmがインストールされていることを確認します。

$ node -v
$ npm -v

まだインストールされていない方は、インストールしてください。

ダウンロード

vue-cliインストール

$ sudo npm i -g @vue/cli

vue.jsインストール

ルートディレクトリでvue createコマンドでインストールできます。

フォルダ名はvue-firebase-authにします。

$ vue create vue-firebase-auth

順番に選択

・Manually select featuresを選択
・Babel、Router、Linterをスペースを押して選択
・Use history mode for router? Yを入力
・ESLint + Prettierを選択
・Lint on saveを選択
・In package.jsonを選択
・Save this as a preset for feature projects? Nを入力

vuetifyインストール

$ cd vue-firebase-auth
$ vue add vuetify

fireabseインストール

$ npm install firebase

設定変更

ソースコードを変更したら、自動的にコンパイルされるように修正します。

vue.config.js

module.exports = {
  transpileDependencies: ["vuetify"],
  devServer: {
    watchOptions: {
      poll: true
    }
  }
};

開始

$ npm run serve

URLをクリックすると、Vuetifyの初期画面が表示されます。

http://localhost:8080/

Firebase設定

Firebaseを設定します。

Firebaseとは？

FirebaseはGoogleが提供しているモバイルおよびウェブアプリケーション開発プラットフォームです。

ここではFirebase Authenticationという認証機能を実装するためのサービスを使用していきます。

Firebase Authentication

プロジェクト作成

Firebaseにアクセスしてプロジェクトを作成していきます。

コンソール

Sign in - Google Accounts

プロジェクト追加

Firebaseのコンソール画面でプロジェクトを追加をクリックします。

プロジェクト名を入力して続行ボタンをクリックします。