前言

今天是開發的Day5，重點為使用vue指令拿到使用者輸入資料後傳進去firebase的Authentication。

實現內容

註冊頁面

• 用vue指令拿取使用者輸入資料，放入firebase的Authentication
• 使用到的v指令：v-model

實作

另創註冊頁面，基本架構與登入頁面大同小異。

填入資料，分別是使用者名稱／信箱／密碼／密碼（第二次確認）

按下登入按鈕後，可以在console欄看見資料已經被拿取

再回去firebase的Authentication頁面，可以看見已經被傳入的資料。

代碼

// <template>
<p><input type="text" placeholder="Email" v-model="email" /></p>
<p><input type="password" placeholder="Password" v-model="password" /></p>
<p><button @click="register">登録</button></p>

• 在信箱和密碼的登入欄內加入v-model="email"
• 在登錄按鈕上套上@click="register"

<script setup>
import { ref } from "vue"
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"
const email = ref("")
const password = ref("") //用ref響應式管理狀態


// 註冊的function
const register = () => {
  createUserWithEmailAndPassword(getAuth(), email.value, password.value) // 利用firebase本身的語法取到email和password的value
    .then((data) => {
      console.log("註冊成功")
    })
    .catch((error) => {
      alert(error.message) //用catch,error取資料
    })
}
</script>

參考資料：Vue 3 + Firebase Authentication in 10 Minutes

下階段目標

• vue componets的拆分：
  完成組件的細分，讓每個組件職責單一，代碼更加清晰。
  關於拆分 component 的學問
• 重新設計路由結構：
  限制使用者進來的頁面，以及登入與否使用者看到頁面的差別
• 撰寫驗證二次密碼的function：
  編寫一個function來驗證兩次輸入的密碼是否一致，並在表單給出提示。
  Password validation in Vue 3 isn't working properly
  Vue js Confirm Password Validation
• 將傳進去的信箱與密碼跟使用者名稱匹配
  使用 Firebase 進行身份驗證
  Username authentication instead of email

總結

雖然先辦到將資料串進資料庫內，但覺得代碼太繁冗，到下階段前應該先整理代碼，拆分結構，讓後面的開發順利進行。