===== 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://amzn.to/2EJyMuw|改訂新版　Vue.jsとFirebaseで作るミニWebサービス]] ソースコード 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アカウントでログインし、新規プロジェクト作成 {{:08.googleアカウントでのログイン機能:pasted:20181216-124725.png}} *今回は、「firebase-email-auth」という名前で新規プロジェクトを作成しました。 {{:09.emailとpasswordでパスワード制限:pasted:20181219-164456.png}} *測定管理者間のデータ保護条項と規約の左側のチェックボックスをONにして、右下の「プロジェクトを作成」をクリック。 {{:08.googleアカウントでのログイン機能:pasted:20181216-125023.png}} *少し待つと、「新しいプロジェクトの準備ができました」と表示されるので、次へ　をクリック。 {{:08.googleアカウントでのログイン機能:pasted:20181216-125148.png}} *以下のようなプロジェクトトップ画面になるので、下図のように、「」をクリック。 {{:08.googleアカウントでのログイン機能:pasted:20181216-125305.png}} *「ウェブアプリにFirebaseを追加」の画面が出てくるので、グレーで表示された部分の中身をメモ帳などにコピーしておきます。これは、後で、CodeSandboxで、ペーストします。 {{:08.googleアカウントでのログイン機能:pasted:20181216-125734.png}} *プロジェクトトップ画面で、画面左側の列の「開発」をクリック {{:08.googleアカウントでのログイン機能:pasted:20181216-130117.png}} *Authentication　をクリック {{:08.googleアカウントでのログイン機能:pasted:20181216-130030.png}} *ログイン方法　をクリック {{:08.googleアカウントでのログイン機能:pasted:20181216-130219.png}} *メール/パスワード　をクリック {{:09.emailとpasswordでパスワード制限:pasted:20181219-165926.png}} *「有効にする」をON（青色）にして、保存　をクリック {{:09.emailとpasswordでパスワード制限:pasted:20181219-170145.png}} *以下のような状態になっています。 {{:09.emailとpasswordでパスワード制限:pasted:20181219-170249.png}} ==== 2.Firebaseにログイン用メールアドレスとパスワードを入力 ==== 今回は、


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

の人にログインできるようにしたいと思います。 *Firebaseアプリの、「開発」＞「Authentication」＞「ユーザー」で、「ユーザーを追加」をクリック {{:09.emailとpasswordでパスワード制限:pasted:20181219-171035.png}} *emailとパスワードを、以下のように入力して、「ユーザーを追加」をクリック {{:09.emailとpasswordでパスワード制限:pasted:20181219-171226.png}} *以下のような感じになります。 {{:09.emailとpasswordでパスワード制限:pasted:20181219-171408.png}} ==== 3. CodeSandboxでVue.jsアプリを作成 ==== *https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック {{:09.emailとpasswordでパスワード制限:pasted:20181219-171907.png}} *Vue　をクリック {{:09.emailとpasswordでパスワード制限:pasted:20181219-171955.png}} *以下のような画面になります。 {{:09.emailとpasswordでパスワード制限:pasted:20181219-172514.png}} ==== 4. Vuetifyのインストールとindex.htmlの編集 ==== *CSSフレームワークとして、Vuetifyを用いるために、以下のように、Add Dependencyをクリック {{:09.emailとpasswordでパスワード制限:pasted:20181219-173748.png}} *Vuetify と入力して、Vuetifyをクリックして、インストール {{:09.emailとpasswordでパスワード制限:pasted:20181219-173833.png}} *以下のようになります {{:09.emailとpasswordでパスワード制限:pasted:20181219-173914.png}} *次に、vuetifyとfirebaseを利用できるようにするために、index.htmlとsrc/main.jsを編集します。この時点では、特に外見に変化はありません。 {{:09.emailとpasswordでパスワード制限:pasted:20181220-211018.png}} ==== 5. src/components/Home.vueとSecret.vueの作成 ==== *src/components/Home.vue　と、src/components/Secret.vue を新規作成 {{:09.emailとpasswordでパスワード制限:pasted:20181220-230523.png}} {{:09.emailとpasswordでパスワード制限:pasted:20181220-232040.png}} ==== 6. src/App.vueの編集 ==== src/App.vueを以下のように変更して、「ヘッダーとフッター」と、中身としてHome.vueを表示します。（変更前） {{:09.emailとpasswordでパスワード制限:pasted:20181221-000801.png}} （変更後） {{:09.emailとpasswordでパスワード制限:pasted:20181221-000645.png}} ログインしていないので、Home.vueのログイン画面が表示されます。 ==== 7. Emailログインの実装 ==== Googleログインより、Email-Passwordログインの方が、難しい。参考：https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241 src/components/Home.vueを編集先に、内のbuttonのところを変更します。 v-text-fieldのところに、それぞれ、v-model="username"と、v-model="password"を追加します。また、v-btnのところに、@click="emailLogin"を追加します。 (変更前１)

(変更後１)

次に、のところにdata()関数と、emailLogin()関数を定義。 (変更前２)


  data: function () {
    return {}
  },

(変更後２)


  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    emailLogin: function() {
      firebase
        .auth()
        .signInWithEmailAndPassword(this.username, this.password)
        .then(
          user => {
            alert("Success!");
            this.$router.push("/");
          },
          err => {
            alert(err.message);
          }
        );
    }
  }

この時点で、user@example.com, 111111　と入力してLoginボタンをクリックすると、Success!というアラートが表示される。 {{:09.emailとpasswordでパスワード制限:pasted:20181222-105302.png}} ==== 8. ログイン状態のチェック ==== サイト上でログイン状態をチェックします。 App.vue内でログイン状態をチェックして、isLoginに格納します。 src/App.vueの内に、data関数の後ろに、created関数を定義します。created関数は、Vue.jsがそのcomponentを作成したタイミングで実行されるとのことです。


  created: function() {
    firebase.auth().onAuthStateChanged(user => {
      console.log(user);
      if (user) {
        this.isLogin = true;
      } else {
        this.isLogin = false;
      }
    });
  },

(変更前) {{:09.emailとpasswordでパスワード制限:pasted:20181222-110527.png}} (変更後) {{:09.emailとpasswordでパスワード制限:pasted:20181222-110842.png}} 先ほど、ログインしていますので、上記コード変更により、Secret.vueコンポーネントが表示されるようになりました。 ==== 9. コンポーネント間の情報の受け渡しとログアウトボタン ==== src/App.vueがFirebaseから受け取ったユーザー情報userを、src/components/Secret.vueに渡して、Secret.vue上で表示します。 src/App.vueの