Flutter OnePass 專案技術方案分享

智雲健康大前端團隊發表於2021-06-02
Flutter

本文作者：cherry689，未經授權禁止轉載。

內容

  • 1、簡介
  • 2、原理&技術方案
  • 3、問題&解決方案
  • 4、總結

注意

  • 本 Flutter OnePass 功能是基於阿里雲SDK的二次開發。
  • 本次分享主要以 iOS & Flutter 程式碼為主。

1、簡介

1.1、OnePass是什麼呢？

OnePass就是自動獲取手機裡面正在使用的手機號碼功能，如下圖所示（智雲健康接入的OnePass頁面），主要用於提高使用者登入流程體驗。

image.png

1.2、那麼OnePass有什麼優缺點呢？我也簡單列舉了幾點

image.png

image.png

2、原理&技術方案

2.1、在缺點中提到了如果要使用一鍵登入功能，手機必須要連上蜂窩資料流量，那麼為什麼一定要連上蜂窩資料流量，它的原理是什麼呢？

iOS/Android系統是沒有可以直接獲取使用者手機號資訊的相關API的。

  • 三大運營商（中國移動、中國電信、中國聯通）提供的SDK，支援從運營商資料閘道器中直接獲取當前流量卡的手機號碼，省去了使用者輸入手機號到接收簡訊輸入驗證碼的整個過程，減少使用者的登入耗時。
  • 如果限制一款APP僅能使用WiFi資料而禁止使用蜂窩資料流量，則「一鍵登入」將無法正常工作。
  • 如果是雙卡的話，僅能獲取連線蜂窩資料的那一張卡。

2.2、一鍵登入的系統互動流程

一鍵登入的系統互動流程主要分為四個步驟：

  • 1.號碼認證SDK初始化。
  • 2.喚起授權頁。
  • 3.同意授權並登入。
  • 4.發起取號。

一鍵登入涉及到四個介面：

  • 1.開關介面（用於是否使用 OnePass 功能）
  • 2.配置介面（用於儲存 OnePass 初始化所需要的金鑰）
  • 3.換取 AppToken 介面（用於通過運營商的 AccessToken 換取 AppToken ）
  • 4.服務端呼叫 GetMobile RPC 介面，獲取手機號碼

image.png

2.3、一鍵登入的實現流程

  • Native SDK
    • 主要是基於阿里雲SDK的二次原生封裝元件
  • flutter_one_pass
    • 統一功能採用 Flutter 編寫（比如：介面呼叫、OnePass功能、埋點上報）
  • 業務線
    • 接入 flutter_one_pass 的所有業務線

image.png

2.4、驗證碼登入、密碼登入和 OnePass 登入對比

  • 賬號驗證碼登入（code_login）

login.gif

  • 賬號密碼登入（password_login）

pwd.gif

  • 一鍵登入（onepass_login）

onepass.gif

2.5、三種登入方式登入時長統計圖

三種登入方式，統計時長從短到長依次是：onepass_login < code_login < password_login

image.png

2.6、Telescope埋點統計次數

埋點code碼：

class OnePassReturnCode {
  /// 喚起授權頁成功
  static String loginControllerPresentSuccess = '100001';
  /// 喚起授權頁失敗
  static String loginControllerPresentFailed = '100002';
  /// 授權頁已載入時不允許呼叫加速或預取號介面
  static String callPreLoginInAuthPage = '100003';
  /// 點選返回，⽤戶取消一鍵登入
  static String loginControllerClickCancel = '200000';
  /// 點選切換按鈕，⽤戶取消免密登入
  static String loginControllerClickChangeBtn = '200001';
  /// 點選登入按鈕事件
  static String loginControllerClickLoginBtn = '200002';
  /// 點選CheckBox事件
  static String loginControllerClickCheckBoxBtn = '200003';
  /// 點選協議富文字文字
  static String loginControllerClickProtocol = '200004';
}

複製程式碼

示例：

OnePass.setup(onAppTokenResultCallback: (loginModel) {
  /// TODO：手機號碼一鍵登入按鈕點選事件埋點
  TrackerController.pushEvent('', '****-****-****-*****');
  
}, onOtherModeLoginCallback: () {
  /// TODO：其它登入方式按鈕點選事件埋點
  TrackerController.pushEvent('', '****-****-****-*****');
  
}, onTrackEventResultCallback: (msg) {
  if (msg.resultCode == OnePassReturnCode.loginControllerPresentSuccess) {
  	/// TODO：一鍵登入頁面曝光
    TrackerController.pushPVEvent('****-****-****-*****');
  }
});
複製程式碼

從埋點資料上看，用 onepass_login 登入方式最多（資料比較敏感，就不發出來）。

2.7、閘道器統計呼叫次數

我們從閘道器上分別拉取了 onepass_login 、 code_login 、 password_login 登入介面的呼叫次數。事實再次證明了使用者使用 onepass_login 登入方式最多（資料比較敏感，就不發出來）。

3、問題&解決方案

3.1、一鍵登入按鈕背景圓角問題？

從最開始我放的兩張圖不難發現，其它家接入的 OnePass 基本上一鍵登入按鈕樣式都是方方正正，這也是三方運營商預設提供給我們的樣式，由於三方運營商提供的API有限，只提供了設定背景圖API，最終的解決方案是：先用UIColor生成一張UIImage，再將UIImage生成帶圓角的UIImage，最後設定到一鍵登入按鈕背景圖。

3.2、多次呼叫 Login API ，會彈多個一鍵登入頁面？

多次呼叫 Login API ，會彈多個一鍵登入頁面，三方運營商未做任何處理，需要我們在 Native SDK 中自行優化處理，多次呼叫，頁面上只會彈一個一鍵登入頁面。

3.3、跳轉隱私協議頁面，動畫問題、隱私協議中電話、郵箱、連結等無法跳轉問題？

阿里雲提供給我們的 WebView 頁面，跳轉到隱私協議頁面的動畫是 Present 起來的，隱私協議裡面如果有電話、郵箱的話也是沒法撥打或跳轉的，同時從隱私協議頁面點選返回鍵則直接關閉了整個隱私協議頁面。我們選擇了自定義 WebView 頁面，解決以上問題。

3.4、授權頁面彈起較慢？

在初始化SDK（setAuthSDKInfo）成功的時候，再呼叫預取號（accelerateLoginPageWithTimeout），這樣能加速授權⻚彈起接⼝（getLoginTokenWithTimeout），提前獲取必要引數，為後⾯彈起授權⻚加速。

4、總結

業務線接入了 Flutter OnePass 元件，我們通過線上資料監控來看，使用者更偏愛使用一鍵登入功能，確實提升了使用者登入流程體驗。使用者體驗優化任重而道遠，我們將繼續努力前行。

相關文章