Vue.jsでつくったサイトにfirebaseでユーザ認証してこっそり人の顔年齢を試して遊ぶ

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

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

<template><divclass="signin"><h2>Sign in</h2><b-containerclass="bv-example-row"><b-rowclass="justify-content-md-center"><b-forminline><b-inputid="inline-form-input-name"v-model="username"class="mb-2 mr-sm-2 mb-sm-0"placeholder="Username"></b-input><b-inputtype="password"id="text-password"v-model="password"aria-describedby="Password"placeholder="Password"></b-input><!-- <button@click="signIn">Signin</button> -->
    <b-buttonvariant="outline-primary"@click="signIn">Signin</b-button></b-form></b-row><b-row><b-col><p>You don't have an account?
      <router-linkto="/signup">create account now!!</router-link></p></b-col></b-row></b-container></div></template><script>importfirebasefrom'firebase'exportdefault{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;}.signinh2{margin:2remauto;}button.btn.btn-outline-primary{margin:01rem;}</style>

<template><divclass="signup"><h2>Sign up</h2><inputtype="text"placeholder="Username"v-model="username"><inputtype="password"placeholder="Password"v-model="password"><button@click="signUp">Register</button><p>Do you have an account?
      <router-linkto="/signin">sign in now!!</router-link></p></div></template><script>importfirebasefrom'firebase'exportdefault{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>

<template><divclass="hello"><pclass="lh5">{{msg}}</p><divid="appFaceAPI-File"><divclass="row"><divclass="col"><h1>その写真の人が何歳に見えるかおしえてあげよう</h1></div></div><divclass="row"><divclass="col"><divclass="form-group"><!-- https://bootstrap-vue.org/docs/components/form-file --><div><!-- Styled --><b-form-filev-model="file":state="Boolean(file)"placeholder="Choose a file or drop it here..."drop-placeholder="Drop file here..."@change="handlerFileChange"></b-form-file><divclass="mt-3">Selected file: {{file?file.name:''}}</div></div></div></div></div><divclass="row"><divclass="col"><pre><code>{{response}}</code></pre></div></div></div><divclass="siout"><b-buttonvariant="secondary"@click="signOut">Sign out</b-button></div></div></template><script>importfirebasefrom'firebase'importaxiosfrom'axios'exportdefault{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:asyncfunction(e){console.log('handlerFileChange')constfiles=e.target.files||e.dataTransfer.filesconstfile=files[0]letcontentBuffer=awaitthis.readFileAsync(file)// console.log(contentBuffer);this.sendCognitiveAsFile(contentBuffer)},readFileAsync:function(file){returnnewPromise((resolve,reject)=>{letreader=newFileReader()reader.onload=()=>{resolve(reader.result)}reader.onerror=rejectreader.readAsArrayBuffer(file)})},sendCognitiveAsFile:asyncfunction(contentBuffer){// const FACE_API_ENDPOINT_URL = '***'constqs=require('querystring')constparams=qs.stringify({'returnFaceId':'true','returnFaceLandmarks':'false','returnFaceAttributes':'age,gender,headPose,smile,facialHair,glasses,'+'emotion,hair,makeup,occlusion,accessories,blur,exposure,noise'})constFACE_API_ENDPOINT_URL=`{取得したエンドポイント}/face/v1.0/detect?${params}`constconfig={url:FACE_API_ENDPOINT_URL,method:'post',headers:{'Content-type':'application/octet-stream','Ocp-Apim-Subscription-Key':'***'},data:contentBuffer}// axiostry{// POSTリクエストで送るconstresponseAzure=awaitaxios.request(config)console.log('post OK')// データ送信が成功するとレスポンスが来るconsole.log(responseAzure.data)// ageを取得constlookage=responseAzure.data[0].faceAttributes.agethis.response=`${lookage}歳にみえるね`}catch(error){console.error(error)}}}}</script><style>.colh1{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>

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