Flutter OnePass 專案技術方案分享

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

本文作者: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埋點統計次數

  • “一鍵登入頁面”曝光事件:zyjk-page-login-yjdl
  • “本機號碼一鍵登入”點選埋點事件:zyjk-click-login-yjdl
  • “其它登入方式”點選埋點事件:zyjk-click-login-qtfsdl

埋點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('', 'zyjk-click-login-yjdl');
  
}, onOtherModeLoginCallback: () {
  /// TODO:其它登入方式按鈕點選事件埋點
  TrackerController.pushEvent('', 'zyjk-click-login-qtfsdl');
  
}, onTrackEventResultCallback: (msg) {
  if (msg.resultCode == OnePassReturnCode.loginControllerPresentSuccess) {
  	/// TODO:一鍵登入頁面曝光
    TrackerController.pushPVEvent('zyjk-page-login-yjdl');
  }
});
複製程式碼

從埋點資料上看,用 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 元件,我們通過線上資料監控來看,使用者更偏愛使用一鍵登入功能,確實提升了使用者登入流程體驗。使用者體驗優化任重而道遠,我們將繼續努力前行。

相關文章