09.emailとpasswordでパスワード制限:index.html [サルでもわかるWEBプログラミング]

09.emailとpasswordでパスワード制限:index.html

文書の過去の版を表示しています。

−目次

09.emailとpasswordでパスワード制限
方針をたてる
今回参考にした本
リンク

09.emailとpasswordでパスワード制限

CodeSandbox上で、Vue.jsとFirebaseを用いて、EmailとPasswordによるパスワード制限機能のあるホームページを作りたいと思います。

方針をたてる

今回作成するGoogle認証アプリは、

トップページに、「Emailとパスワードでログイン」フォームを表示
Emailとと初期パスワードは、あらかじめ、管理者がFirebase上に登録しておく。
ログインしたら、ログイン成功画面に移動
ログイン後の画面に、ログアウトボタンを表示

となります。

emailごパスワードは『Firebase』という場所に保存

するものとします。

今回は、https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241と、https://www.tohuandkonsome.site/entry/2018/11/19/182438#Eメールとパスワードでユーザー管理する

のソースコードを利用させていただこうと思います。

ソースコード（作成中）

https://codesandbox.io/s/6xzm6wr2k3

これから作るもの

作成中

0.用意するもの（開発環境）

パソコン
Chrome（くろーむ、WEBブラウザの一つ）
GitHubアカウント作成済み（無料）
Googleアカウント作成済み（無料）

パソコンは、Windowsパソコンでも、Macでも、かまいませんが、私の場合はWindows 8.1 Proとなります。

今回利用するもの

CodeSandbox
Firebase
Vue 2.5.2
Vuetify

1.Firebaseで新規プロジェクト（新しいサーバ）を作成

https://console.firebase.google.com　にGoogleアカウントでログインし、新規プロジェクト作成

今回は、「firebase-email-auth」という名前で新規プロジェクトを作成しました。

測定管理者間のデータ保護条項と規約の左側のチェックボックスをONにして、右下の「プロジェクトを作成」をクリック。

少し待つと、「新しいプロジェクトの準備ができました」と表示されるので、次へ　をクリック。

以下のようなプロジェクトトップ画面になるので、下図のように、「</>」をクリック。

「ウェブアプリにFirebaseを追加」の画面が出てくるので、グレーで表示された部分の中身をメモ帳などにコピーしておきます。これは、後で、CodeSandboxで、ペーストします。

プロジェクトトップ画面で、画面左側の列の「開発」をクリック

Authentication　をクリック

ログイン方法　をクリック

メール/パスワード　をクリック

「有効にする」をON（青色）にして、保存　をクリック

以下のような状態になっています。

2.Firebaseにログイン用メールアドレスとパスワードを入力

今回は、

email: user@example.com
パスワード: 111111

の人にログインできるようにしたいと思います。

Firebaseアプリの、「開発」＞「Authentication」＞「ユーザー」で、「ユーザーを追加」をクリック

emailとパスワードを、以下のように入力して、「ユーザーを追加」をクリック

以下のような感じになります。

3. CodeSandboxでVue.jsアプリを作成

https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック

Vue　をクリック

以下のような画面になります。

4. Vuetifyのインストールとindex.htmlの編集

CSSフレームワークとして、Vuetifyを用いるために、以下のように、Add Dependencyをクリック

Vuetify と入力して、Vuetifyをクリックして、インストール

以下のようになります

次に、vuetifyとfirebaseを利用できるようにするために、index.htmlとsrc/main.jsを編集します。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<title>CodeSandbox Vue Vuetify Firebase</title>
	<link
	href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\|Material+Icons"
	rel="stylesheet"
	/>
	</head>

	<body>
	<div id="app"></div>
	<!-- built files will be auto injected -->
	<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>
	<script>
	// Initialize Firebase
	// こちらにはご自身のFirebaseのAPIキーなどをコピペしてください
	var config = {
	apiKey: "<YOUR-API-KEY>",
	authDomain: "xxxxx",
	databaseURL: "xxxxx",
	projectId: "xxxxx",
	storageBucket: "xxxxx",
	messagingSenderId: "1xxxxx"
	};
	firebase.initializeApp(config);
	</script>
	</body>
	</html>

view raw index.html_(09EmailAuth_Vuetify) hosted with ❤ by GitHub

	// The Vue build version to load with the `import` command
	// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
	import Vue from "vue";
	import App from "./App";
	import Vuetify from "vuetify";
	import "vuetify/dist/vuetify.css";

	Vue.use(Vuetify);

	Vue.config.productionTip = false;

	/* eslint-disable no-new */
	new Vue({
	el: "#app",
	components: { App },
	template: "<App/>"
	});

view raw src_main.js hosted with ❤ by GitHub

この時点では、特に外見に変化はありません。

5. src/components/Home.vueとSecret.vueの作成

src/components/Home.vue　と、src/components/Secret.vue を新規作成

	<template>
	<v-app id="inspire">
	<v-content>
	<v-container fluid fill-height>
	<v-layout align-center justify-center>
	<v-flex xs12 sm8 md4>
	<v-card class="elevation-12">

	<v-toolbar dark color="primary">
	<v-toolbar-title>Login form</v-toolbar-title>
	<v-spacer></v-spacer>
	</v-toolbar>

	<v-card-text>
	<v-form>
	<v-text-field
	prepend-icon="person"
	name="login"
	label="Login"
	type="text"
	></v-text-field>
	<v-text-field
	id="password"
	prepend-icon="lock"
	name="password"
	label="Password"
	type="password"
	></v-text-field>
	</v-form>
	</v-card-text>

	<v-card-actions>
	<v-spacer></v-spacer>
	<v-btn color="primary">Login</v-btn>
	</v-card-actions>

	</v-card>
	</v-flex>
	</v-layout>
	</v-container>
	</v-content>
	</v-app>
	</template>

	<script>
	export default {
	name: "home",
	data() {
	return {};
	}
	};
	</script>

view raw src_components_Home.vue hosted with ❤ by GitHub

	<template>
	<div class="secret">
	<v-app id="inspire">
	<v-content>
	<v-container fluid fill-height>
	<v-flex xs12 sm6 offset-sm3>
	<v-card>
	<v-img
	src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
	aspect-ratio="2.75"
	></v-img>

	<v-card-title primary-title>
	<div>
	<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
	<div>
	Located two hours south of Sydney in the <br />Southern
	Highlands of New South Wales, ...
	</div>
	</div>
	</v-card-title>

	<v-card-actions>
	<v-btn flat color="orange">Share</v-btn>
	<v-btn flat color="orange">Explore</v-btn>
	</v-card-actions>
	</v-card>
	</v-flex>
	</v-container>
	</v-content>

	<v-footer height="auto" color="indigo" dark>
	<v-layout justify-center row wrap>
	<v-flex color="indigo" dark py-3 text-xs-center white--text xs12>
	©2018 — <strong>Vuetify</strong>
	</v-flex>
	</v-layout>
	</v-footer>
	</v-app>
	</div>
	</template>

	<script>
	export default {
	name: "secret",
	data() {
	return {};
	}
	};
	</script>

view raw src_components_Secret.vue hosted with ❤ by GitHub

6. src/App.vueの編集

src/App.vueを以下のように変更して、「ヘッダーとフッター」と、中身としてHome.vueを表示します。

	<template>
	<div id="app">
	<v-toolbar color="indigo" dark fixed app>
	<v-toolbar-title>Vuetify Firebase Email Auth</v-toolbar-title>
	</v-toolbar>

	<Home v-if="!isLogin"></Home> <Secret v-if="isLogin"></Secret>

	<v-footer height="auto" color="indigo" dark>
	<v-layout justify-center row wrap>
	<v-flex color="indigo" dark py-3 text-xs-center white--text xs12>
	©2018 — <strong>Vuetify</strong>
	</v-flex>
	</v-layout>
	</v-footer>
	</div>
	</template>

	<script>
	import Home from "./components/Home.vue";
	import Secret from "./components/Secret.vue";

	export default {
	name: "App",
	data() {
	return {
	isLogin: false
	};
	},
	components: {
	Home: Home,
	Secret: Secret
	}
	};
	</script>

	<style></style>