Firebase提供了驗證的服務,在驗證首頁可以看到已經存在的使用者:
第一次使用時,必須先啟動其中一種註冊的方式
選擇要啟用的登入方式,並且點選啟用:
這樣就啟用了電子郵件/密碼的驗證服務了。
利用firebase提供的createUserWithEmailAndPassword(),將使用者輸入的帳號與密碼傳給firebase進行註冊 (詳參:Sign up new users)。
<aside> 💡 為了不影響上一次的練習內容,我們可以利用「Fork Sandbox」,複製上一次的作業
</aside>
或者,進入Sandbox後,按「Fork」,就可以複製一份:
根據firebase提供的範例,我們來設計一下註冊的介面,首先,在src下,新增一個account的資料夾,並在資料夾下新增SignUp.js,首先,我們要讓使用者可以輸入帳號、密碼,可以複習一下React表單以及React元件互動的說明,在這裡,我們使用到一個前面用過的技巧
function onChangeExam(event) {
setCurrentExam(Number(event.target.value));
}
onChange呼叫時,會傳入event,過去,我們就只是把輸入的值直接儲存到state。當我們會有多個輸入時,雖然可以設定多個useState(),也可以設定單一個useState()
const [account, setAccount] = useState({ email: "", password: "" });
這時候,利用event.target.name取得TextField的name,並且將name當作state變數的屬性,透過這種寫法,可以多個欄位共用一個handleChange()函數,這裡用到了物件的一些比較進階的語法。
setAccount({ ...account, [event.target.name]: event.target.value });
/src/account/SignUp.js: