認証機能構築チュートリアル
見出し画像

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

自己紹介

プログラミング講師の飼鳥晴康(@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)開発に使われていることが多いです。

特徴

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

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/

画像7

Firebase設定

Firebaseを設定します。

Firebaseとは?

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

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

プロジェクト作成

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

コンソール

プロジェクト追加

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

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

この続きをみるには

この続き: 13,380文字 / 画像12枚

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

飼鳥 晴康 / プログラミング講師

500円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
飼鳥 晴康 / プログラミング講師

最後まで読んでいただきありがとうございました😃 サポートは、プログラミングチュートリアル開発の手助けとなります。 シェアもして頂くと嬉しいです。 Twitterのフォローもお願いします。 https://twitter.com/hathle

「スキ」がとても励みになります😍ありがとうございます。
日本で組み込みエンジニア、Webエンジニアとして働いた後、バンクーバー、モントリオールのVFX業界でPipeline TDとして映画を作っていました。 帰国後、独立しプログラミング講師として、Django、Vue.jsのチュートリアル教材を開発しています。 宜しくお願いします。