firebaseでユーザ認証して人の顔年齢を試して遊ぶものをFreenom,Netlifyで公開までやる #JavaScript

概要

Vue.jsで作ったサイトをFirebaseにユーザー認証をお願いして、ログインしないと入れないページにして、人の顔年齢（Computer Vision API）で遊んで、freenomとNetlifyで独自ドメインで公開する

できたもの

写真を入れると年齢をかえしてくれます。

環境

macOS Catalina 
Visual Studio Code 1.45.1
Node.js: v13.11.0
npm:6.14.5
Vue:@vue/cli 4.3.1

大まかな流れ

Vue.jsとFirebaseでユーザー認証ありのプロジェクトをつくる
　　　↓
Computer Vision APIをつかって顔認識のぺーじをつくる
　　　↓
freenomでドメインを取る
　　　↓
Netlifyに freenomドメインをあててDeploy

メインの構成はこんな感じです

App.vue
main.js
assets
components
　- Signup.vue
　- HelloWorld.vue
　- Signin.vue
router
　- index.js

Vue.jsとFirebaseでユーザー認証ありのプロジェクトをつくる

こちらがめちゃくちゃわかりやすかったです。
こちらを参考にVue.jsとFirebaseでユーザー認証ありのプロジェクトをつくる

Vue.js + Firebase を使って爆速でユーザ認証を実装する - Qiita

src/components/Signin.vue

<template>
  <div class="signin">
    <h2>Sign in</h2>
    <b-container class="bv-example-row">
    <b-row class="justify-content-md-center">
    <b-form inline>
    <b-input
      id="inline-form-input-name"
       v-model="username"
      class="mb-2 mr-sm-2 mb-sm-0"
      placeholder="Username"
    ></b-input>
    <b-input type="password" id="text-password" v-model="password" aria-describedby="Password" placeholder="Password"></b-input>
    <!-- <button @click="signIn">Signin</button> -->
    <b-button variant="outline-primary" @click="signIn">Signin</b-button>
    </b-form>
    </b-row>
    <b-row>
    <b-col><p>You don't have an account?
      <router-link to="/signup">create account now!!</router-link>
    </p>
    </b-col>
    </b-row>
    </b-container>
  </div>
</template>

<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>
<style>
.signin {
  line-height:5;
}
.signin h2{
  margin:2rem auto;
}
button.btn.btn-outline-primary {
    margin: 0 1rem;
}
</style>

src/components/Signup.vue


<template>
  <div class="signup">
    <h2>Sign up</h2>
    <input type="text" placeholder="Username" v-model="username">
    <input type="password" placeholder="Password" v-model="password">
    <button @click="signUp">Register</button>
    <p>Do you have an account?
      <router-link to="/signin">sign in now!!</router-link>
    </p>
  </div>
</template>

<script>
import firebase from 'firebase'

export default {
  name: 'Signup',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    signUp: function () {
      firebase.auth().createUserWithEmailAndPassword(this.username, this.password)
        .then(user => {
          alert('Create account: ', user.email)
        })
        .catch(error => {
          alert(error.message)
        })
    }
  }
}
</script>

Computer Vision APIをつかって顔認識のぺーじをつくる

こちらを参考に顔認識のページをつくる
Azure画像認識系の機能をいくつか試してみた（Face API / Custom Vision API / Computer Vision API） - Qiita

src/components/HelloWorld.vue


<template>
  <div class="hello">
    <p class="lh5">{{ msg }}</p>
    <div id="appFaceAPI-File">

      <div class="row">
        <div class="col">
            <h1>その写真の人が何歳に見えるかおしえてあげよう</h1>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <div class="form-group">
            <!-- https://bootstrap-vue.org/docs/components/form-file -->
            <div>
              <!-- Styled -->
              <b-form-file
                v-model="file"
                :state="Boolean(file)"
                placeholder="Choose a file or drop it here..."
                drop-placeholder="Drop file here..."
                @change="handlerFileChange"
              ></b-form-file>
              <div class="mt-3">Selected file: {{ file ? file.name : '' }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <pre><code>{{ response }}</code></pre>
        </div>
      </div>

    </div>
    <div class="siout">
    <b-button variant="secondary" @click="signOut">Sign out</b-button>
    </div>
  </div>
</template>
<script>
import firebase from 'firebase'
import axios from 'axios'

export default {
  name: 'HelloWorld',
  data: function () {
    return {
      response: '',
      fill: null,
      msg: '良い写真ある？',
      name: firebase.auth().currentUser.email
    }
  },

  methods: {
    signOut: function () {
      firebase.auth().signOut().then(() => {
        this.$router.push('/signin')
      })
    },
    handlerFileChange: async function (e) {
      console.log('handlerFileChange')
      const files = e.target.files || e.dataTransfer.files
      const file = files[0]
      let contentBuffer = await this.readFileAsync(file)
      // console.log(contentBuffer);
      this.sendCognitiveAsFile(contentBuffer)
    },
    readFileAsync: function (file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.onload = () => {
          resolve(reader.result)
        }
        reader.onerror = reject
        reader.readAsArrayBuffer(file)
      })
    },
    sendCognitiveAsFile: async function (contentBuffer) {
      // const FACE_API_ENDPOINT_URL = '***'
      const qs = require('querystring')
      const params = qs.stringify({
        'returnFaceId': 'true',
        'returnFaceLandmarks': 'false',
        'returnFaceAttributes': 'age,gender,headPose,smile,facialHair,glasses,' + 'emotion,hair,makeup,occlusion,accessories,blur,exposure,noise'
      })
      const FACE_API_ENDPOINT_URL = `{取得したエンドポイント}/face/v1.0/detect?${params}`

      const config = {
        url: FACE_API_ENDPOINT_URL,
        method: 'post',
        headers: {
          'Content-type': 'application/octet-stream',
          'Ocp-Apim-Subscription-Key': '***'
        },
        data: contentBuffer
      }

      // axios
      try {
        // POSTリクエストで送る
        const responseAzure = await axios.request(config)
        console.log('post OK')
        // データ送信が成功するとレスポンスが来る
        console.log(responseAzure.data)
        // ageを取得
        const lookage = responseAzure.data[0].faceAttributes.age
        this.response = `${lookage} 歳にみえるね`
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>
<style >
.col h1{
  font-size:100%;
}
div.form-group {
    max-width: 380px;
    margin: auto;
    width: 80%;
}
.lh5 {
    line-height: 5;
  }
.siout {
    text-align: right;
    padding: 1rem;
    position: fixed;
    top: 1vh;
    right: 3rem;
}
#app{
  position:relative;
}
  </style>

freenomでドメインを取る

こちらを参考にまずは好きなドメインを取得
爆速！Vercelとfreenomで独自ドメインのサイトを無料で作成する - Qiita

NetlifyにDeploy

GitHubのリポジトリを作成して、作成したプロジェクトをPushしましょう。
Netlifyのページへ行き、[Get started in seconds]ボタンを押して
GitHubと連携しましょう

Netlify の管理画面に入れたら、右上にある「New site from Git」を選択します。

GitHubを選びます
先ほど作ったリポジトリを選んでDeploy settingsを埋めていきます

Deploy siteボタンを押せば完了！

＊ここでエラーになった人！（わたし！）
Gitの作り方によってはPublish先がdistだけでは展開できず、エラーにあることがあります。
Gitの置いてある位置からみているようなので、
works/fbaseApp/distとかになる場合もあります。

Deployが進んだら、ご丁寧に次の手順が出ています

２を押しましょう

ここに、freenomで作ったドメインを入れます
とりあえずエラーっぽい感じですが気にせずここを押すと

Alternative: point A record to 1**.**.*.**

こういったものが書かれているのでこの番号をだしたまま
つぎにfreenomの管理画面からManage Freenom DNSにいきます

ここに先ほどのNetlifyから取得した番号を入れる

またNetlifyにもどって、さっきの画面の「Check DNS configuration」をおす)(さっきとちがうモーダルが出ます)

この４つのDNSをfreenomにもどって

1.Manage Freenom DNS
2.Use custom nameservers (enter below) にCheckを変える
3.NetlifyのNameserverを４ついれていく

せっかくなのでHttpsにしないと！
Netlifyにもどりましょう。
Setting　＞　HTTPS
SSL/TLS certificate
この下の
enebled
Verify Provide your own certificate
二つボタンがあるので左のVerify をおすだけです！

これでしばらく待てばfreenomでとったドメインにへんこうされてHTTPSになっている!

きになるところ

こんなに表示は遅いものなのだろうか・・・
リダイレクトがうまくいっていないような・・・