#109 登入註冊，個人資訊(profile)頁面 & Result type
Published in
8 min readMar 21, 2020
串接 okta 提供的帳號管理 API 實現 App 常見的登入註冊 & 個人資訊設定功能，還可以包含自動登入，修改密碼，忘記密碼，串接 imgur API 儲存使用者照片等進階功能，並搭配 Result type 定義串接 API 的 function。
功能需求
- 串接 okta API，將使用者的資訊存在 okta。
- 以帳號密碼註冊 & 登入。
建立帳號 API
登入 API
註冊時可同時包含其它資訊，也可後來再新增修改。
- 帳號密碼登入失敗時在 App 畫面顯示 alert。
- 使用者註冊帳號時呼叫建立帳號 API，成功後再呼叫登入 API，取得 token 存在 App 裡。
- 自動登入功能。
登入成功後將 token 存在 App 裡，下次打開 App 時由 token 判斷是否已登入，不用重新登入。
- 檢視和修改個人資訊(profile)。
包含以下項目:
- 帳號(email)。
- 大頭照。(從相簿選照片)
- 名字。
- 其它 App 需要的資訊，至少要一個，比方位置，生日，性別等。
- 將個人資訊存在 App 裡。(包含 user id)
- 呼叫建立使用者 API，然後呼叫登入 API 成功後，將個人資訊存在 App 裡。
- 呼叫登入 API 後呼叫取得 profile API，將個人資訊存在 App 裡。
3. 修改個人資訊後，將資訊存在 App 裡。
- 使用 imgur 儲存使用者的照片，將照片網址存在 okta。
- 修改密碼。
- 將串接 okta API 的程式寫成 function，使用到 Result type。
加分功能
- 登出。
- Recovery Question。
- 忘記密碼。(須搭配 Recovery Question)
- FB 登入 & Google 登入。
- 簡單做法
使用 FB & Google 的 user id 當密碼呼叫建立帳號 API 和登入 API
2. 比較好的做法
研究 Identity Providers API
App 畫面參考
從網站 Mobbin 研究各家 App 的登入註冊和個人資訊頁面。
登入註冊
App 範例圖片
Culture Trip 範例
email 註冊
個人帳號資訊(profile)設定
App 範例圖片
Culture Trip 範例
登入後將顯示個人帳號資訊設定頁面。
檢視 & 修改個人資訊。
