哈希技術部落格


Slider

Thunkable教學-製作註冊登入與驗證功能

設計APP或網頁時,為了要區分不同的使用者,因此都會有「註冊」的功能。而為了避免產生幽靈註冊的情況,都會再設計驗證的步驟,例如使用email註冊,會需要使用者點擊email認證信。

今天,我們會分享如何使用積木式程式,搭配google的服務,實現註冊與認證的功能哦!

開啟Thunkable,加入Firebase登入功能

首先,我們在元件列表中,找到「身份認證」,並將「登入功能」加入到作品的不可見元件中!

接下來,我們需要註冊google的firebase服務。
點擊我開啟firebase連結
開啟後點擊「get started」並登入自己的google帳號開始使用

接著我們需要建立一個新專案,並依據官方說明步驟完成註冊

完成註冊後可以看見所有功能的控制台

製作註冊與登入的驗證功能

帳號驗證的功能就是Firebase的「Authentication」

啟用起功能之後,我們需要把使用者註冊的資料儲存下來,所以需要加入資料庫的功能

選擇「Realtime Database」建立資料庫功能,完成後會看到如下圖的畫面

完成設定後,我們要將此服務的資訊連結到Thunkable中
回到Firebase專案首頁以網頁APP方式使用我們剛剛設定好的內容

圖片來源:
Thunkable Docs

完成後可以看到以下畫面!

將APIKey與databaseURL複製起來

圖片來源:
Thunkable Docs

下一步回到Thunkable的網站,選擇剛剛新增的登入功能,開啟「firebase設定」

完成後加剛剛的API密鑰與databaseURL貼到此處

製作程式

第一步,我們先設計你的註冊與登入頁面。
例如加入2個文字輸入欄位,代表帳號與密碼的位置
以及代表「註冊」「登入」功能的按鈕

註冊功能:

登入功能:

忘記密碼:

測試註冊功能

完成程式製作後,就可以測試你的登入與註冊功能哦

使用註冊後,就會寄送認證信到你輸入的帳號欄位中

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *