登入前的單元

1. 應用程式啟動

啟動畫面

開啟 Valo 時，看到的品牌過渡畫面，過程中塞入一些 初始化的事物。

根據 main.dart 流程:

  1. 開啟 Native Splash - 顯示品牌 Logo

  2. 啟動應用程式

    • 已登入 -> /topic/contacts/friends/all
    • 未登入 -> /welcome

  3. 關閉 Native Splash

  4. 進入 (2) 對應的頁面

2. 歡迎

歡迎頁面

單純 UI 的展示，該動作細節不多。

3. 登入

登入頁面

詳細參考 認證機制、login_form.dart

兩個重點

  • 表單資料 (信箱、密碼)

    • 沒特別做什麼欄位的 格式驗證，只驗證是否有輸入，其他交由 API 返回錯誤

  • 登入按鈕

    • 登入該信箱失敗5次，後端將會鎖定信箱 5 分鐘。

    • 目前統一錯誤 您的電子信箱、密碼有輸入錯誤。

      boheng: 為何統一個錯誤，帳號、密碼錯誤怎麼不分開？ 這個是我當初刻意設計，但沒有好壞，因為我以前的產品經驗中，曾經有人使用登入的錯誤訊息，去猜測網站有註冊的電子信箱，在黑市中，會有些外流的信箱密碼資訊，駭客能使用這些資訊去嘗試帳號與密碼，日後我個人的開發經驗中，會盡量用這樣設計，去增加駭客的揣測成本，但這段是防範那少數`流入黑市的信箱名單`，如果未來需求有希望能明確改成 `email 失敗` `password 失敗` 要區分，再自行調整。

      (但需求上的失敗 5次，需要鎖定該信箱，其實黑客還是有機會利用上述的情況，去猜測已註冊的用戶，但前提黑客要先知道 try 5 次會鎖定的規則)

    • 登入成功後：

      • 保存 Token 資訊，方便下次自動登入。
      • 更新 Agora User Info
      • 更新 是否為死灰復燃
      • (注意) 同步該帳戶的所有Agora訊息
      • 跳轉進入大廳(聯絡人)

      "死灰復燃" ？

      表示正在刪除中的帳號，但目前重新登入表示不刪除了

      當 Login API Response 有 "hasDeleteMark": true 時，APP 登入後，進入到大廳(聯絡人)，會彈跳歡迎回來。

4. 註冊

註冊頁面

4-1. 註冊表單

screen: forgot_password_email_screen.dart

  • 姓名、電子信箱、密碼、確認密碼、確認政策

    • 欄位都是 即時驗證，但有缺陷需優化 Notion Link。

    密碼規則:

    業務密碼規則： 密碼至少 8 字，含英文大小寫及數字，特殊符號不支援

    備註: Valo Password 元件，正則好像沒套上 "特殊符號不支援"，但後台有幫忙檔。

  • 成功後，進入 4-2。

    • Registion API - verifyId: 驗證 Id，期限 １０分鐘。
    • Registion API - verifyCode: 驗證碼。目前只有封測環境開放

  • 後端會發送一則註冊驗證信。

    註冊頁面

4-2. 註冊驗證

註冊驗證頁面

screen: forgot_password_email_verify_screen.dart

  • 從 4-1 會帶兩份資料 信箱、驗證token
  • 重送驗證碼信
  • 驗證確認 Button

需優化的流程

  1. 此時點擊左上的 < 按鈕，返回 4-1，將無法回到該驗證頁！
  2. 此時點擊左上的 < 按鈕，返回 4-1 再次案送出，會被擋著 此信箱驗證中。
  • 情況 2 解法: 可以先試試請後端，將這段防呆拔除看看。
  • 情況 1 解法: 如果 情況1解法有效，那會收到新的驗證信，那就看需求是否能接受 上一次的驗證信 被強致失效
  • 驗證成功：導回 登入頁。
    • UX: 此時會偷帶 email 過去，讓使用者登入免填信箱

5. 忘記密碼

忘記密碼頁面忘記密碼頁面

5-1. 輸入信箱

  • 信箱 欄位格式驗證
  • 送出重設驗證信按鈕
    • 30 秒/次
    • 送出成功：純顯示 Success Alert
    • 送出失敗：純顯示 信箱寄送失敗 Alert
      • 可能情況 1: 該信箱的用戶沒註冊
      • 可能情況 2: 該信相寄送失敗
  • 信箱收到該封驗證信

5-2. 驗證信

忘記密碼頁面

  • 驗證信，有兩個部分能點擊

    • 重設密碼 - 點擊跳進去 APP
    • 連結網址 - 貼到 "瀏覽器網址列"，跳進去 APP

  • 跳進去 APP，是走"深度連結"

    • 參考：application.dart
      • ValoApplicationHooks::whenDeepLink
      • DeepLink Uri : /forgot/password/email/verify

改善問題

  1. 目前 15 分鐘後，還是能跳進入 APP，以下兩個 暫時想到的改善方式。

      1. 後端需要開放一個 check verfiy api，進入當下需要檢查一下
      1. token 有沒有什麼溝通方式，能解開 expired time

5-3. 更改密碼

忘記密碼頁面

  • 該頁面必須帶入 token、email

  • 新、確認密碼

  • 送出按鈕

    • 欄位格式驗證

    • 後端判別

      • 如果該 token 已經更改過，會被阻止
      • (but: 都沒更改過，期限後其實還能更改)

其他單元： 切換語系

忘記密碼頁面
  • 使用 easy_localization 套件
  • 相關套件初始化，參考 core_application.dart
  • 未來如果添加新的語系
    • 參考： i18n.dart並在 assets/translations/ 下添加語言 JSON。
  • 登入前
最後更新:
貢獻者: boheng