Yjyz Verify Plus

yjyzVerifyPlus 模块使用说明

1. 当前模块版本：1.0.1

2. 发布日期：2020年03月20日

yjyzPreGetPhoneNumber

yjyzAuthLogin

获取完整手机号（非SDK提供）

授权界面自定义UI

yjyzSetTimeoutInterval

yjyzVersion

模块资源文件说明

一、概述

YjyzVerify 简介

YjyzVerify是一款免密一键登录认证服务工具，客户端SDK支持iOS和Android两大平台，集成方便简单快捷，帮助用户实现快速一键认证登录。

YjyzVerify 功能

  • 支持移动、联通、电信三网运营商
  • 支持双卡双待机型
  • 支持自定义选择需要支持的运营商
  • 支持授权页面高度自定义

yjyzVerifyPlus 模块概述

yjyzVerifyPlus 封装了 YjyzVerify，是对 APICloud 平台的支持，为APICloud开发的App提供一键登录认证功能的一个组件，支持授权界面自定义。

论坛示例

为了帮助用户更好更快的使用该模块，论坛维护了一个 yjyzVerifyPlus 模块使用教程 ，示例中包含了代码、知识点讲解、注意事项等，供您参考。

二、yjyzVerifyPlus 模块使用

开发者使用本模块之前需要先在 一键登陆系统 创建您的应用 （该系统账号需联系为您提供一键验证服务的工作人员进行相应账号获取） ，并获取对应的AppKey和AppSecret,如下图：

-c

如您尚无已经联系好的一键验证服务商，请联系： QQ：957989779 微信：13033600521

配置：

1. 配置config.xml文件

使用此模块之前建议先配置 config.xml 文件，配置完毕，需通过云端编译生效，配置方法如下：

  1. <feature name="yjyzVerifyPlus">
  2.     <param name="YJYZAppKey" value="替换成您的Appkey" />
  3.     <param name="YJYZAppSecret" value="替换成您的AppSecret" />
  4.     <!-- 可选配置,默认 0,支持所有运营商。-->
  5.     <!-- 0:移动 + 联通 + 电信，1:移动，2:联通，3:移动 + 联通，4:电信，5:移动 + 电信，6:联通 + 电信-->
  6.     <param name="YJYZOperator" value="0" />
  7. </feature>
  • YJYZAppKey、YJYZAppSecret:(必须配置)创建应用后，申请的app Key和app Secret；
  • YJYZOperator: 支持的运营商，默认 0 全部支持，其他值参考上面的config.xml;
  • ATS(App Transport Security):让APP可以请求http协议的接口；

2. 配置Info.plist文件（iOS专有）

在您项目的 res 目录下，新建一个Info.plist文件，文件内容如下（字段作用同上）：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
  3. <plist version="1.0">
  4. <dict>
  5.     <key>YJYZAppKey</key>
  6.     <string>替换成您的Appkey</string>
  7.     <key>YJYZAppSecret</key>
  8.     <string>替换成您的AppSecret</string>
  9.     <key>YJYZOperator</key>
  10.     <integer>0</integer>
  11.     <key>NSAppTransportSecurity</key>
  12.     <dict>
  13.         <key>NSAllowsArbitraryLoads</key>
  14.         <true/>
  15.     </dict>
  16. </dict>
  17. </plist>

模块API接口

前提条件声明：使用本模块中的API，对系统要求为：iOS 9.0+，安卓 4.1.0+

在 apiready 方法里先引用模块，示例代码如下：

  1. <script>
  2.     // 定义为全局变量
  3.     var moduleYjyzVerify = null;
  5.     function apiready() {
  6.         // 引用一键验证模块
  7.         yjyzVerifyPlus = api.require('yjyzVerifyPlus');
  8.         // ...
  9.     }
  10. </script>

1、预取号

yjyzPreGetPhoneNumber

预取号，在每次登陆之前建议先调用预取号接口来确定是否可以进行一键登陆，并且加速登陆接口的响应速度。

yjyzPreGetPhoneNumber(function(ret, err))

callback(ret, err)

ret:

  • 类型：String

当前运营商名称，例如：中国移动

err：

  • 类型：JSON

  • 内部字段：

  1. {
  2.     error_code: 10103,    // 错误码
  3.     error_message: '超时',    // 错误信息
  4.     operator: '中国联通',    //运营商信息
  5.     description: '请求超时'，// 错误描述
  6. }

调用示例：

  1. <script>js
  2.     // 定义为全局变量
  3.     var moduleYjyzVerify = null;
  5.     function apiready() {
  6.         // 引用一键验证模块
  7.         yjyzVerifyPlus = api.require('yjyzVerifyPlus');
  9.         // 页面完成时进行一次预取号,以加快登陆流程
  10.         moduleYjyzVerify.yjyzPreGetPhoneNumber(function(ret, err) {
  11.             var msg = null;
  12.             if (!err) {
  13.                 msg = JSON.stringify(ret);
  14.             } else {
  15.                 msg = JSON.stringify(err);
  16.             }
  18.             api.toast({
  19.                 msg: msg,
  20.                 location: 'middle'
  21.             });
  23.         });
  25.     }
  26. </script>

2、一键登陆

yjyzAuthLogin

调用一键登陆接口会拉起登陆授权界面，在界面上点击登陆按钮即可得到回调token等信息，使用token等信息可以获取到完整手机号（详见下文）。

yjyzAuthLogin(customParams ,function(ret, err))

customParams

  • 类型：JSON（可以为空 null）

  • 内部字段：

  1. {
  2.     'customAnimation': customAnimation,
  3.     'customNav': customNav,
  4.     'customAuthPage': customAuthPage,
  5.     'customAuthPageLogo': customAuthPageLogo,
  6.     'customPhoneNumber': customPhoneNumber,
  7.     'customSwitchNumber': customSwitchNumber,
  8.     'customCheckBox': customCheckBox,
  9.     'customPrivacy': customPrivacy,
  10.     'customPrivacyContentPage': customPrivacyContentPage,
  11.     'customLoginBtn': customLoginBtn,
  12.     'customOperatorSlogan': customOperatorSlogan,
  13. }

以上每一个字段对应的又都是一个对象，具体子字段较多，详细解释请看以下 自定义UI 部分的调用示例。

callback(ret, err)

ret:

  • 类型：JSON

  • 内部字段：

  1. {
  2.     token: '156085741897162752', // 内部token
  3.     operatorType: 'CUCC', // 运营商标示
  4.     operatorToken: 'c85ff57ac1db036b7c5b19deb24c9210e0ee9eec11bc01235854879437103105', // 运营商token
  5. }

err：

  • 类型：JSON

  • 内部字段：

  1. {
  2.     error_code: 10103,    // 错误码
  3.     error_message: 超时,    // 错误信息
  4.     operator: 中国联通,    //运营商信息
  5.     description: 请求超时，// 错误描述
  6. }

调用示例：

  1. var customParams = null;
  3. moduleYjyzVerify.yjyzAuthLogin(customParams ,function(ret, err) {
  4.     var authRet = document.getElementById('auth_ret');
  5.     if (!err) {
  6.         authRet.innerHTML = JSON.stringify(ret);
  7.         // 将授权结果传给您们自己服务端提供的获取完整手机号的接口来获取完整手机号
  8.          getPhoneNumber(ret) // 该方法具体实现见下文
  9.     } else {
  10.         authRet.innerHTML = JSON.stringify(err);
  11.         getPhoneNumber(null);
  12.         api.toast({
  13.            msg: JSON.stringify(err),
  14.            location: 'middle'
  15.         });
  16.     }
  17. });

3、获取完整手机号（非该模块提供，需自行实现）

前端是获取不到完整手机号的，该步骤的实现需要对接服务端接口，该文档此处假设您已经对接好我们的服务端，并给到前端获取完整手机号的接口地址和参数格式了，那么获取完整手机号前端就只需要把授权结果和其他必要参数信息一起调用服务端提供的接口即可，示例代码如下：

  1. /*
  2.  调用自己的服务端接口获取完整手机号
  3.  参数: authRet - 授权结果
  4.  */
  5. function getPhoneNumber(authRet) {
  6.     if (!authRet) {
  7.         var phone = document.getElementById('phone');
  8.         phone.innerHTML = null;
  9.         return;
  10.     }
  12.     // 提交JSON数据
  13.     api.ajax({
  14.         url: 'http://demo.accuratead.cn/demo/sdkLogin',
  15.         method: 'post',
  16.         headers: {
  17.             'Content-Type': 'application/json;charset=utf-8'
  18.         },
  19.         data: {
  20.             body: {
  21.                 token: authRet['token'],
  22.                 operator: authRet['operatorType'],
  23.                 opToken: authRet['operatorToken'],
  24.                 appkey: '替换成您自己的Appkey',    // body中的参数要与服务端协商一致
  25.             }
  26.         }
  27.     }, function(ret, err) {
  28.         if (ret) {
  29.             var jsonRes = JSON.stringify(ret);
  30.             api.alert({ msg: jsonRes });
  31.             console.log(jsonRes);
  32.             var phone = document.getElementById('phone');
  33.             phone.innerHTML = jsonRes;
  34.         } else {
  35.             var jsonRes = JSON.stringify(err);
  36.             console.log(jsonRes);
  37.             api.alert({ msg: jsonRes });
  38.             var phone = document.getElementById('phone');
  39.             phone.innerHTML = jsonRes;
  40.         }
  41.     });
  43. }

至此，简单的一键登陆就完成了，编译运行，体验一键登陆的快感吧！

4、自定义UI

完成以上步骤即可看到点击一键登陆按钮之后会弹出一个 “授权页面” ，这个页面目前是默认的样式，那么为了能够与您App的风格融为一体，我们提供了自定义修改该页面上所有UI控件的样式、属性及其布局。具体使用示例如下：

  1. /*
  2.  授权登陆
  3.  参数: customUI - 是否使用自定义UI,传 ture/false
  4.  */
  5. function yjyzAuthLogin(customUI) {
  6.     var customParams = null;
  7.     if (customUI) {
  8.         var systemType = api.systemType;  // 比如： ios,android
  9.         if (systemType == 'ios') {
  10.             // 以下是 iOS 自定义设置
  11.             // 自定义动画设置
  12.             var customAnimation = {
  13.                 yjyzAnimateType: 1, //动画类型 0:默认 1:水平翻转 2:淡入淡出 3: Alert 4: Push 5:sheet
  14.                 // yjyzShowType: 0, //展示类型 0:默认 1:Alert 2:Push 3: Sheet
  15.                 // 以下自定义动画设置只针对于Alert/Sheet展示类型
  16.                 yjyzAnimateBgColor: '#F7B376', //弹窗控制器的背景色
  17.                 yjyzLeftControlImage: 'leftImg.png', //左边按钮背景图片名称
  18.                 yjyzLeftControlHidden: true, //左边按钮是否显示
  19.                 yjyzRightControlImage: 'rightImg.png', //右边按钮背景图片名称
  20.                 yjyzRightControlHidden: true, //右边按钮是否显示
  21.                 yjyzBgViewHidden: false, //背景视图是否展示
  22.                 yjyzBgViewCorner: 15, //背景视图的圆角
  23.                 yjyzBgViewColor: '#000000', //背景视图颜色
  24.                 yjyzBgViewImage: 'bgImg.png', //背景视图的背景图片名称
  25.                 yjyzCloseType: true, //关闭按钮显示在左边还是右边 true:左边 false:右边
  26.             };
  28.             // 导航栏设置
  29.             var customNav = {
  30.                 yjyzNavBarTintColor: '#F0C3D6', //  导航栏背景色(default is white)
  31.                 yjyzNavText: '一键验证', // 导航栏标题
  32.                 // yjyzNavReturnImg: 'close.png', // 导航栏返回按钮图标
  33.                 // yjyzNavBottomLineHidden: true, // 是否隐藏导航栏尾部线条(默认显示,例: true)
  34.                 // yjyzNavBarHidden: false, // 导航栏隐藏(例: false)
  35.                 // yjyzNavStatusBarHidden: false, // 导航栏状态栏隐藏(例: false)
  36.                 // yjyzNavTranslucent: false, // 导航栏透明(例: false)
  37.                 // yjyzNavBackBtnHidden: false, // 导航栏返回按钮隐藏(例: false)
  38.                 // yjyzNavLeftControlHidden: false, // 隐藏导航栏左边按钮
  39.                 yjyzNavTintColor: '#FF0000', //  导航栏文字颜色
  40.                 // yjyzNavBackgroundClear: false, //  导航栏背景透明(例: false)
  41.             };
  43.             // 授权页
  44.             var customAuthPage = {
  45.                 // yjyzBackgroundColor: '#E5E589', // 授权页背景颜色
  46.                 yjyzBgImg: 'bg.png', // 授权背景图片
  47.                 yjyzCancelBySingleClick: false, //单击页面实现取消操作(例: false)
  48.             };
  50.             // 授权页Logo
  51.             var customAuthPageLogo = {
  52.                 yjyzLogoImg: 'app_icon.png', // Logo图片名称
  53.                 yjyzLogoHidden: false, // Logo是否隐藏(例: false)
  54.                 yjyzLogoCornerRadius: 10, // Logos圆角(例: 10)
  55.                 yjyzPortraitLayout: {         // 针对该控件的竖屏布局(注意: 每个控件的布局字段所表示的含义都相同,下面将不再解释)
  56.                     yjyzLayoutTop: 100,       // 顶部间距
  57.                     // yjyzLayoutBottom: -40,    // 底部间距
  58.                     yjyzLayoutLeft: 20,       // 左边间距
  59.                     // yjyzLayoutRight: -20,     // 右边间距
  60.                     yjyzLayoutWidth: 80,      // 控件宽度
  61.                     yjyzLayoutHeight: 80,     // 控件高度
  62.                     // yjyzLayoutCenterX: 0,     // 相对于父视图的CenterX的偏移量,0表示不偏移,即水平居中
  63.                     // yjyzLayoutCenterY: 0,     // 相对于父视图的CenterY的偏移量,0表示不偏移,即垂直居中
  64.                 },
  65.             };
  67.             // 手机号码
  68.             var customPhoneNumber = {
  69.                 yjyzNumberColor: '#FFCC00', // 手机号码字体颜色
  70.                 yjyzNumberFont: 18, // 字体大小(例: 18)
  71.                 yjyzNumberTextAlignment: 1, // 手机号对其方式(例: 0-Left, 1-Center, 2-Right)
  72.                 yjyzNumberBgColor: '#C2F6A3', // 手机号码背景颜色
  73.                 yjyzPhoneHidden: false, //手机号码是否隐藏
  74.                 yjyzPhoneBorderColor: '#FF0000', //手机号码边框颜色
  75.                 yjyzPhoneBorderWidth: 2, //手机号码边框宽度
  76.                 yjyzPhoneCorner: 5, //手机号码圆角
  77.                 yjyzPortraitLayout: {
  78.                     yjyzLayoutTop: customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutTop + 10,
  79.                     yjyzLayoutLeft: customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutLeft + customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutWidth + 15,
  80.                     yjyzLayoutRight: -20,
  81.                 }
  82.             };
  84.             // 切换帐号按钮
  85.             var customSwitchNumber = {
  86.                 yjyzSwitchBgColor: '#F1DBC9', // 切换账号背景颜色
  87.                 yjyzSwitchColor: '#FF0000', // 切换账号字体颜色
  88.                 yjyzSwitchFont: 14, // 切换账号字体大小
  89.                 yjyzSwitchTextHorizontalAlignment: 0, // 切换账号对其方式(例: 0-Center, 1-Left, 2-Right)
  90.                 yjyzSwitchHidden: false, // 隐藏切换账号按钮, 默认为false(例: true)
  91.                 yjyzSwitchText: '切换手机号', // 切换账号标题
  92.                 yjyzPortraitLayout: {
  93.                     yjyzLayoutTop: customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutTop + customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutHeight - 30,
  94.                     yjyzLayoutLeft: customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutLeft + customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutWidth + 15,
  95.                     yjyzLayoutRight: -20,
  96.                 }
  97.             };
  99.             // 登陆按钮设置
  100.             var customLoginBtn = {
  101.                 yjyzLoginBtnText: '登陆', // 登录按钮文本
  102.                 yjyzLoginBtnTextColor: '#F1C4A8', // 登录按钮文本颜色
  103.                 yjyzLoginBtnBgColor: '#C3D6F1', // 登录按钮背景颜色
  104.                 yjyzLoginBtnBorderWidth: 2.0, // 登录按钮边框宽度 (例: 2.0)
  105.                 yjyzLoginBtnBorderColor: '#FFCC00', // 登录按钮边框颜色
  106.                 yjyzLoginBtnCornerRadius: 5.0, // 登录按钮圆角(例: 5.0)
  107.                 yjyzLoginBtnTextFont: 20, // 登录按钮文字字体大小
  108.                 yjyzLoginBtnBgImgArr: ['#FF0000', '#00FF00', '0000FF'], //['enabled.png', 'disabled.png', 'highlighted.png'], // 登录按钮背景图片数组(例:['激活状态图片','失效状态图片','高亮状态图片'], 支持颜色数组: ['#FF0000', '#00FF00', '0000FF'])
  109.                 yjyzLoginBtnHidden: false, // 登陆按钮是否隐藏, 不建议隐藏!!!
  110.                 yjyzPortraitLayout: {
  111.                     yjyzLayoutCenterY: 0,
  112.                     yjyzLayoutLeft: 20,
  113.                     yjyzLayoutRight: -20,
  114.                 }
  115.             };
  117.             // 隐私条款设置(切记,不可隐藏)
  118.             var customPrivacy = {
  119.                 yjyzPrivacyTextColor: '#00FFDD', // 隐私条款基本文字颜色
  120.                 yjyzPrivacyTextFont: 16, // 隐私条款协议文字字体大小
  121.                 yjyzPrivacyTextAlignment: 0, // 隐私条款对其方式(例: 0-Left, 1-Center, 2-Right)
  122.                 yjyzPrivacyAgreementColor: '#DDAA00', // 隐私条款协议文字颜色
  123.                 yjyzPrivacyAgreementBgColor: '#000000', // 隐私条款协议背景颜色
  124.                 yjyzPrivacyAppName: '一键验证APICloud', // 隐私条款应用名称
  125.                 yjyzPrivacyProtocolMarkArr: ['《', '》'], // 协议文本前后符号(例['<','>'])
  126.                 yjyzPrivacyFirstTextArr: ['服务协议','https://gitee.com/','、'], // 开发者隐私条款第一组协议(例:['名字','url','分割符'])
  127.                 yjyzPrivacySecondTextArr: ['百度协议','https://www.baidu.com','、'], // 开发者隐私条款第二组协议(例:['名字','url','分割符'])
  128.                 yjyzPrivacyLineSpacing: 5.0, // 隐私条款多行时行距(例: 5.0)
  129.                 // yjyzPrivacyDefaultText: '开发者隐私条款', //开发者隐私条款协议默认名称(不建议修改)
  130.                 yjyzPrivacyUnderlineStyle: 1, //隐私协议下划线样式(例: 0-None, 1-Single, 2-Thick, 9-Double)
  131.                 yjyzPrivacyNormalTextFirst: '登录即同意', // 隐私条款开头(例: '登录即同意')
  132.                 yjyzPrivacyNormalTextSecond: '并授权', // 隐私条款中间连接文字(例: '并授权')
  133.                 yjyzPrivacyNormalTextThird: '获取本机号码', // 隐私条款末尾(例: '获取本机号码')
  134.                 yjyzPrivacyHidden: false, // 隐私条款是否隐藏, 强烈建议不要隐藏!!!
  135.                 isPrivacyOperatorsLast: false, // 运营商协议是否排在最后 默认为false(例: true)
  136.                 yjyzPortraitLayout: {
  137.                     yjyzLayoutLeft: 50,
  138.                     yjyzLayoutCenterY: 80,
  139.                     yjyzLayoutRight: -20,
  140.                 }
  141.             };
  143.             // 隐私条款复选框
  144.             var customCheckBox = {
  145.                 yjyzCheckedImg: 'checked.png', // 复选框选中时的图片
  146.                 yjyzUncheckedImg: 'uncheck.png', // 复选框未选中时的图片
  147.                 yjyzCheckDefaultState: false, // 隐私条款check框默认状态，默认为false(例: true)
  148.                 // yjyzCheckSize: 30, // 复选框尺寸(宽高相同,例: 30)
  149.                 yjyzCheckHidden: false, // 隐私条款check框是否隐藏，默认为false(例: true)
  150.                 yjyzPortraitLayout: {       // !!!! 注意: 这个复选框的布局是相对于隐私条款的,所以建议先把隐私条款布局好再布局这个框
  151.                     yjyzLayoutRight: -10,
  152.                     yjyzLayoutCenterY: -20,
  153.                     yjyzLayoutWidth: 20,
  154.                     yjyzLayoutHeight: 20,
  155.                 }
  156.             };
  158.             // 隐私条款具体协议内容页面设置
  159.             var customPrivacyContentPage = {
  160.                 yjyzPrivacyWebBackBtnImage: 'close.png', // 隐私条款WEB页面返回按钮图片
  161.                 yjyzPrivacyWebTitle: '隐私条款内容', // 隐私条款WEB页面标题
  162.                 yjyzPrivacyWebNavBarStyle: 0, // 隐私条款导航style (例: 0-Default, 1-Black)
  163.             };
  165.             // 运营商品牌标签
  166.             var customOperatorSlogan = {
  167.                 yjyzSloganTextFont: 13, //运营商品牌文字字体大小
  168.                 yjyzSloganTextColor: '#0099FF', //运营商品牌文字颜色
  169.                 yjyzSloganTextAlignment: 1, //运营商品牌文字对齐方式(例: 0-Left, 1-Center, 2-Right)
  170.                 yjyzSloganBgColor: '#666666', //运营商品牌背景颜色
  171.                 // yjyzSloganText: '运营商品牌文字', //运营商品牌文字(不建议修改)
  172.                 yjyzSloganHidden: false, //运营商品牌是否隐藏
  173.                 yjyzSloganBorderColor: '#FFEEDD', //运营商品牌边框颜色
  174.                 yjyzSloganBorderWidth: 2.0, //运营商品牌边框宽度
  175.                 yjyzSloganCorner: 5.0, //运营商品牌边框圆角
  176.                 yjyzPortraitLayout: {
  177.                     yjyzLayoutLeft: 20,
  178.                     yjyzLayoutRight: -20,
  179.                     yjyzLayoutBottom: -64,
  180.                 }
  181.             };
  183.             customParams = {
  184.                 'customAnimation': customAnimation,
  185.                 'customNav': customNav,
  186.                 'customAuthPage': customAuthPage,
  187.                 'customAuthPageLogo': customAuthPageLogo,
  188.                 'customPhoneNumber': customPhoneNumber,
  189.                 'customSwitchNumber': customSwitchNumber,
  190.                 'customCheckBox': customCheckBox,
  191.                 'customPrivacy': customPrivacy,
  192.                 'customPrivacyContentPage': customPrivacyContentPage,
  193.                 'customLoginBtn': customLoginBtn,
  194.                 'customOperatorSlogan': customOperatorSlogan,
  195.             };
  197.         } else if (systemType == 'android') {
  198.             // 以下是 Android 自定义设置
  199.             // 导航栏设置
  200.             var customNav = {
  201.                 yjyzNavBarTintColor: '#F0C3D6', //  导航栏背景色(default is white)
  202.                 yjyzNavText: '一键验证', // 导航栏标题
  203.                 // yjyzNavReturnImg: 'close.png', // 导航栏返回按钮图标
  204.                 // yjyzNavBarHidden: false, // 导航栏隐藏(例: false)
  205.                 //  yjyzNavStatusBarHidden: false, // 导航栏状态栏隐藏(例: false)
  206.                 yjyzNavStatusBarTransparent:true, //状态栏透明
  207.                 yjyzNavStatusBarBlackMode: false, //状态栏字体黑色模式
  208.                 // yjyzNavTranslucent: false, // 导航栏透明(例: false)
  209.                 // yjyzNavBackBtnHidden: false, // 导航栏返回按钮隐藏(例: false)
  210.                 yjyzNavTintColor: '#FF0000', //  导航栏文字颜色
  211.                  yjyzNavTextSize: 16 , //导航栏标题文字大小
  212.                  yjyzPortraitLayout: {
  213.                    yjyzLayoutTop: 5,       // 顶部间距
  214.     //               yjyzLayoutLeft: 5,       // 左边间距
  215.     //                yjyzLayoutRight: -20,     // 右边间距
  216.     //               yjyzLayoutWidth: 50,      // 导航栏返回按钮图标控件宽度
  217.     //               yjyzLayoutHeight: 50,     // 导航栏返回按钮图标控件高度
  218.                  }
  219.             };
  221.             // 授权页
  222.             var customAuthPage = {
  223.                 yjyzBgImg: 'bg.png', // 授权背景图片
  224.                 yjyzCancelBySingleClick: false, //单击页面实现取消操作(例: false)
  225.             };
  227.             // 授权页Logo
  228.             var customAuthPageLogo = {
  229.                 yjyzLogoImg: 'app_icon.png', // Logo图片名称
  230.                 yjyzLogoHidden: false, // Logo是否隐藏(例: false)
  231.                 yjyzLogoAlignRight: false, // logo是否靠屏幕右侧
  232.                 yjyzPortraitLayout: {         // 针对该控件的竖屏布局(注意: 每个控件的布局字段所表示的含义都相同,下面将不再解释)
  233.                     yjyzLayoutTop: 50,       // 顶部间距
  234.                     // yjyzLayoutBottom: -40,    // 底部间距
  235.                     yjyzLayoutLeft: 80,       // 左边间距
  236.                     // yjyzLayoutRight: -20,     // 右边间距
  237.                     yjyzLayoutWidth: 80,      // 控件宽度
  238.                     yjyzLayoutHeight: 80,     // 控件高度
  239.                 },
  240.             };
  242.             // 手机号码
  243.             var customPhoneNumber = {
  244.                 yjyzNumberColor: '#FFCC00', // 手机号码字体颜色
  245.                 yjyzNumberFont: 18, // 字体大小(例: 18)
  246.                 yjyzNumberTextAlignment: 2, // 手机号对其方式 设置为2代表靠屏幕右侧
  247.                 yjyzPhoneHidden: false, //手机号码是否隐藏
  248.                 yjyzPortraitLayout: {
  249.                     yjyzLayoutTop: customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutTop + 10,
  250.                     // yjyzLayoutLeft: customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutLeft + customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutWidth + 15,
  251.                     yjyzLayoutRight: -80,
  252. //                    yjyzLayoutBottom: -40,    // 底部间距
  253.                 }
  254.             };
  256.             // 切换帐号按钮
  257.             var customSwitchNumber = {
  258.                 yjyzSwitchColor: '#FF0000', // 切换账号字体颜色
  259.                 yjyzSwitchFont: 14, // 切换账号字体大小
  260.                 yjyzSwitchTextHorizontalAlignment: 2, // 切换账号对其方式，设置为2代表靠屏幕右侧
  261.                 yjyzSwitchHidden: false, // 隐藏切换账号按钮, 默认为false(例: true)
  262.                 yjyzSwitchText: '切换手机号', // 切换账号标题
  263.                 yjyzPortraitLayout: {
  264.                     yjyzLayoutTop: customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutTop + customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutHeight - 30,
  265.                     // yjyzLayoutLeft: customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutLeft + customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutWidth + 15,
  266.                     yjyzLayoutRight: -100,
  267. //                     yjyzLayoutBottom: -40,    // 底部间距
  268.                 }
  269.             };
  271.             // 登陆按钮设置
  272.             var customLoginBtn = {
  273.                 yjyzLoginBtnText: '登录', // 登录按钮文本
  274.                 yjyzLoginBtnTextColor: '#F1C4A8', // 登录按钮文本颜色
  275.                 yjyzLoginBtnAlignRight: false, //登录按钮 是否靠屏幕右侧
  276.                 yjyzLoginBtnTextFont: 16, // 登录按钮文字字体大小
  277.                  yjyzLoginBtnBgImgArr: ['#FF0000', '#00FF00', '#0000FF'], //['enabled.png', 'disabled.png', 'highlighted.png'], // 登录按钮背景图片数组(例:['激活状态图片','失效状态图片','高亮状态图片'], 支持颜色数组: ['#FF0000', '#00FF00', '0000FF'])
  278.                 yjyzLoginBtnHidden: false, // 登陆按钮是否隐藏, 不建议隐藏!!!
  279.                 yjyzPortraitLayout: {
  280.                     yjyzLayoutLeft: 30,
  281.                     yjyzLayoutRight: -30,
  282.                     yjyzLayoutTop: 200,
  283. //                     yjyzLayoutBottom: -40,    // 底部间距
  284.                 }
  285.             };
  287.             // 隐私条款设置(切记,不可隐藏)
  288.             var customPrivacy = {
  289.                 yjyzPrivacyTextColor: '#00FFDD', // 隐私条款基本文字颜色
  290.                 yjyzPrivacyTextFont: 16, // 隐私条款协议文字字体大小
  291.                 yjyzPrivacyTextAlignment: 2, // 隐私条款对其方式，设置为2代表靠屏幕右侧
  292.                 yjyzPrivacyAgreementColor: '#DDAA00', // 隐私条款协议文字颜色
  293.                 yjyzPrivacyAppName: '一键验证APICloud', // 隐私条款应用名称
  294.                 yjyzPrivacyProtocolMarkArr: ['《', '》'], // 协议文本前后符号(例['<','>'])
  295.                 yjyzPrivacyFirstTextArr: ['服务协议','https://gitee.com/','、'], // 开发者隐私条款第一组协议(例:['名字','url','分割符'])
  296.                 yjyzPrivacySecondTextArr: ['百度协议','https://www.baidu.com','、'], // 开发者隐私条款第二组协议(例:['名字','url','分割符'])
  297.                 yjyzPrivacyThirdTextArr: ['隐私条款','https://www.baidu.com','、'], // 开发者隐私条款第三组协议(例:['名字','url','分割符'])（Android）
  298.                 yjyzPrivacyNormalTextFirst: '登录即同意', // 隐私条款开头(例: '登录即同意')
  299.                 yjyzPrivacyNormalTextSecond: '并授权', // 隐私条款中间连接文字(例: '并授权')
  300.                 yjyzPrivacyNormalTextThird: '获取本机号码', // 隐私条款末尾(例: '获取本机号码')
  301.                 yjyzPrivacyPromptType: 0, // 未勾选隐私协议复选框时提示类型 0为Toast，1为弹框 （Android）
  302.                 yjyzPrivacyPromptText: '请阅读并勾选隐私协议',  // 未勾选隐私协议复选框时Toast提示内容（Android）
  303.                 yjyzPrivacyHidden: false, // 隐私条款是否隐藏, 强烈建议不要隐藏!!!
  304.                 yjyzPortraitLayout: {
  305.                     yjyzLayoutLeft: 30,
  306.                     yjyzLayoutRight: -30,
  307.                     yjyzLayoutTop: 280,
  308. //                     yjyzLayoutBottom: -40,    // 底部间距
  309.                 }
  310.             };
  312.             // 隐私条款复选框
  313.             var customCheckBox = {
  314.                 yjyzCheckedImg: 'checked.png', // 复选框选中时的图片
  315.                 yjyzUncheckedImg: 'uncheck.png', // 复选框未选中时的图片
  316.                 yjyzCheckDefaultState: false, // 隐私条款check框默认状态，默认为false(例: true)
  317.                 yjyzCheckHidden: false, // 隐私条款check框是否隐藏，默认为false(例: true)
  318.                 yjyzPortraitLayout: {       // !!!! 注意: 这个复选框的布局是相对于隐私条款的,所以建议先把隐私条款布局好再布局这个框
  319.                     yjyzLayoutWidth: 20,
  320.                     yjyzLayoutHeight: 20,
  321.                 }
  322.             };
  324.             // 运营商品牌标签
  325.             var customOperatorSlogan = {
  326.                 yjyzSloganTextFont: 13, //运营商品牌文字字体大小
  327.                 yjyzSloganTextColor: '#0099FF', //运营商品牌文字颜色
  328.                 // yjyzSloganTextAlignment: 2, //运营商品牌文字对齐方式设置为2代表靠屏幕右侧
  329.                 yjyzSloganHidden: false, //运营商品牌是否隐藏
  330.                 yjyzPortraitLayout: {
  331.                     yjyzLayoutLeft: 20,
  332.                     yjyzLayoutRight: -20,
  333.                     //  yjyzLayoutTop: customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutTop + customAuthPageLogo.yjyzPortraitLayout.yjyzLayoutHeight - 30,
  334.                     yjyzLayoutBottom: -30,
  335.                 }
  336.             };
  338.             // 弹窗设置
  339.             var customDialog = {
  340.                 yjyzDialog: false,  //是否使用弹窗模式
  341.                 yjyzDialogAlignBottom: true, //弹窗是否靠底
  342.                 yjyzDialogCancelBySingleClick : true, //点击蒙版是否取消登录
  343.     //            yjyzDialogBackground : bg.png, //弹窗蒙版背景
  344.                 yjyzPortraitLayout: {
  345.                     yjyzLayoutLeft: 20,  // 弹窗距左右两侧的距离和
  346.                     yjyzLayoutTop: 20,  // 弹窗距上下两侧的距离和
  347.                     yjyzLayoutWidth: 250,      // 弹窗控件宽度
  348.                     yjyzLayoutHeight: 400,     // 弹窗控件高度
  349.                  }
  350.             };
  352.             customParams = {
  353.                 'customNav': customNav,
  354.                 'customAuthPage': customAuthPage,
  355.                 'customAuthPageLogo': customAuthPageLogo,
  356.                 'customPhoneNumber': customPhoneNumber,
  357.                 'customSwitchNumber': customSwitchNumber,
  358.                 'customCheckBox': customCheckBox,
  359.                 'customPrivacy': customPrivacy,
  360.                 'customPrivacyContentPage': customPrivacyContentPage,
  361.                 'customLoginBtn': customLoginBtn,
  362.                 'customOperatorSlogan': customOperatorSlogan,
  363.                 'customDialog': customDialog,
  364.             };
  365.         }
  367.     }
  369.     moduleYjyzVerify.yjyzAuthLogin(customParams ,function(ret, err) {
  370.         var authRet = document.getElementById('auth_ret');
  371.         if (!err) {
  372.             authRet.innerHTML = JSON.stringify(ret);
  373.             getPhoneNumber(ret)
  374.         } else {
  375.             authRet.innerHTML = JSON.stringify(err);
  376.             getPhoneNumber(null);
  377.             api.toast({
  378.                 msg: JSON.stringify(err),
  379.                 location: 'middle'
  380.             });
  381.         }
  382.     });
  383. }
  386. /*
  387.  调用自己的服务端接口获取完整手机号
  388.  参数: authRet - 授权结果
  389.  */
  390. function getPhoneNumber(authRet) {
  391.     if (!authRet) {
  392.         var phone = document.getElementById('phone');
  393.         phone.innerHTML = null;
  394.         return;
  395.     }
  397.     // 提交JSON数据
  398.     api.ajax({
  399.         url: 'http://demo.accuratead.cn/demo/sdkLogin',
  400.         method: 'post',
  401.         headers: {
  402.             'Content-Type': 'application/json;charset=utf-8'
  403.         },
  404.         data: {
  405.             body: {
  406.                 token: authRet['token'],
  407.                 operator: authRet['operatorType'],
  408.                 opToken: authRet['operatorToken'],
  409.                 appkey: '替换为您的AppKey',
  410.             }
  411.         }
  412.     }, function(ret, err) {
  413.         if (ret) {
  414.             var jsonRes = JSON.stringify(ret);
  415.             api.alert({ msg: jsonRes });
  416.             console.log(jsonRes);
  417.             var phone = document.getElementById('phone');
  418.             phone.innerHTML = jsonRes;
  419.         } else {
  420.             var jsonRes = JSON.stringify(err);
  421.             console.log(jsonRes);
  422.             api.alert({ msg: jsonRes });
  423.             var phone = document.getElementById('phone');
  424.             phone.innerHTML = jsonRes;
  425.         }
  426.     });
  428. }

在上面的完整示例中介绍了每一个UI控件的样式修改、属性设置及布局设计，具体使用时请参考上述示例进行自定义。

注意⚠️：由于iOS和安卓在系统层面UI的区别，所以如需进行自定义还请将iOS和安卓分开设置，并且注意部分属性设置的差异性。

5、超时时间

yjyzSetTimeoutInterval

该模块提供了设置预取号和一键登陆接口的超时时间(默认5s)，请按需求调用。

yjyzSetTimeoutInterval(params)

params

  • 类型：JSON

  • 内部字段：

  1. {
  2.     'timeout': 5.0 // 超时时间
  3. }

调用示例：

  1. // 设置超时时间(可选,默认5s)
  2. moduleYjyzVerify.yjyzSetTimeoutInterval({'timeout': 5.0});

6、SDK版本号

yjyzVersion

该模块是对 YjyzVerify 这个SDK的封装，这是获取SDK版本号接口。

yjyzVersion(function(ret, err))

callback(ret, err)

ret:

  • 类型：String

当前SDK版本号，例如：2.0.8

err：

  • null

模块资源文件

在上面的示例中您会看到很多设置背景图片等操作，此时设置的只是图片名称，那么对应的图片资源我们规定 请务必放在 res 目录下， 如下图：

-c

另外，使用图片资源时请使用 完整图片文件名 ，例如: ‘bg.png’

以上文档仅供参考，具体内容请已demo为准。