用Vue & Firebase 實作簡易購物網站09.會員註冊、登入(Firebase & Vuejs)
※成品連結：vue-shop-3b5cc.web.app
09.會員註冊、登入(Firebase & Vuejs)、新增SweetAlert
一、新增提示工具SweetAlert
(一)安裝指令
npm install --save sweetalert2(二)於main.js引入
// Sweet Alert 提醒功能import Swal from 'sweetalert2';window.Swal = Swal;
二、以Email及Password註冊會員及會員登入
(一)程式碼
1.components資料夾->修改Login.vue內容
加上以下內容作資料的雙向綁定(v-model)及監聽事件(v-on，v-on:keyup.enter 可以簡寫成 @keyup.enter )
(1)v-model=”email”
(2)@keyup.enter=”register/login” v-model=”password”
(3)@click=”register/login”
2. 設定資料回傳
3. 將專案設定為以Email及Password進行驗證
點選vue_shop專案的Authentication，將Sign-in Method中的Email/Password 電子郵件/密碼改為enble 啟用。
(二)參考資料
firebase官方文件
1.新增使用者的方法
https://firebase.google.com/docs/reference/js/firebase.auth.Auth#createuserwithemailandpassword
2.以email及password登入的方法
https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInWithemailandpassword
(三)完成畫面
1.註冊會員
用Email及Password註冊會員後，Firebase console查看專案的Authentication，可以看到目前註冊的Users，並給各使用者一隨機產生的UID(之後設定會員資料會用到UID)
2.會員註冊或登入錯誤提醒
