Flutter OnePass 项目技术方案分享-一一网

本文作者：cherry689，未经授权禁止转载。

内容

1、简介
2、原理&技术方案
3、问题&解决方案
4、总结

注意

本 Flutter OnePass 功能是基于阿里云SDK的二次开发。
本次分享主要以 iOS & Flutter 代码为主。

1、简介

1.1、OnePass是什么呢？

OnePass就是自动获取手机里面正在使用的手机号码功能，如下图所示（智云健康接入的OnePass页面），主要用于提高用户登录流程体验。

1.2、那么OnePass有什么优缺点呢？我也简单列举了几点

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 接口，获取手机号码

2.3、一键登录的实现流程

Native SDK
- 主要是基于阿里云SDK的二次原生封装组件
flutter_one_pass
- 统一功能采用 Flutter 编写（比如：接口调用、OnePass功能、埋点上报）
业务线
- 接入 flutter_one_pass 的所有业务线

2.4、验证码登录、密码登录和 OnePass 登录对比

账号验证码登录（code_login）

账号密码登录（password_login）

一键登录（onepass_login）

2.5、三种登录方式登录时长统计图

三种登录方式，统计时长从短到长依次是：onepass_login < code_login < password_login

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，最后设置到一键登录按钮背景图。