本文为您介绍了UniApp插件接入流程。

前提条件

您已完成应用创建并获取相应的访问密钥,详情请参见一键登录和本机号码校验使用流程

背景信息

阿里云号码认证服务基于HBuilder提供的UniApp原生插件扩展开发出的认证插件,适用于Android和iOS的Hbuilder插件,开发者可以轻松将阿里云号码认证能力集成到自己的项目中,从而在js层实现对认证的控制。

SDK初始化API使用说明

除本文档的描述外,您还可参见DCloud官网文档,完成UniApp插件接入。
  1. 引入方式。
    调用示例:
    const aLiSDKModule = uni.requireNativePlugin('AliCloud-NirvanaPns')
  2. 设置密钥(必调接口)。
    在您使用一键登录功能前,需要先设置密钥,并确保密钥与Bundle ID或包名匹配。
    Object参数说明:
    参数类型描述
    infoString阿里云号码认证产品控制台生成的密钥。
    调用示例:
    aLiSDKModule.setAuthSDKInfo("从阿里云控制台获取的密钥")

一键登录API使用说明

  1. 可选:加速拉起授权页

    加速拉起授权页,防止由于调用getLoginToken接口,导致拉起授权页时间过长。

    重要
    • 建议在当前用户处于未登录状态时调用该方法,已登录用户无需调用。
    • 由于加速方法需要1~3秒的时间取得临时凭证,建议在调用拉取授权页方法2~3秒前调用预取号方法。
    • 请勿频繁地调用加速拉起授权页方法,不得与拉起授权登录页同时调用或在其后调用。
    • App直接登录的场景无需调用此接口。
    Object参数说明:
    参数类型描述
    timeoutNumber设置接口超时时间(单位:毫秒)。
    Callback参数说明:
    参数类型描述
    resultCodeStringCode值。600000表示接口调用成功,更多Code值请参见SDK返回码
    msgString相关提示信息。
    调用示例:
    aLiSDKModule.accelerateLoginPage(5000, result => {
        if ("600000" == result.resultCode) {
            console.log("加速成功")
        }
    })
  2. 唤起一键登录授权页
    获取一键登录Token,调用该接口会先弹出授权页,在该页面单击登录按钮获取Token。
    Object参数说明:
    参数类型描述
    timeoutNumber设置接口超时时间(单位:毫秒)。
    authUiConfigMap授权页UI配置,具体配置,请参见下文一键登录修改授权页主题。
    TokenCallback参数说明:
    参数类型描述
    resultCodeStringCode值。600000表示接口调用成功,更多Code值请参见SDK返回码
    msgString相关提示信息。
    tokenString最终换取手机号码的Token,只有在resultCode值为600000的时候该字段才会有值。
    UiCallback(单击自带控件回调)参数说明:
    参数类型描述
    resultCodeStringCode值,具体请参见下文授权页单击事件响应码。
    授权页单击事件响应码
    resultCode描述
    700000单击返回,用户取消免密登录。
    700001单击切换按钮,用户取消免密登录。
    700002单击登录按钮事件。
    700003单击check box事件。
    700004单击协议富文本文字事件。
    CustomUiCallBack(单击自定义控件回调)参数说明:
    参数类型描述
    widgetIdString自定义控件的widgetId。
    调用示例:
    aLiSDKModule.getLoginToken(
        5000,
        this.authUiConfig,
        tokenResult => {
            if ("600001" == tokenResult.resultCode) {
                console.log("授权页拉起成功")
            } else if ("600000" == tokenResult.resultCode) {
                console.log("获取Token成功,接下来拿着结果里面的Token去服务端换取手机号码,SDK服务到此结束")
                //手动关闭授权页
                aLiSDKModule.quitLoginPage()
            } else {
                //其他失败情况,手动关闭授权页
                aLiSDKModule.quitLoginPage()
            }
        },
        clickResult => {
            switch (clickResult.resultCode) {
                case "700000":
                    console.log("用户点击返回按钮")
                    break
                case "700001":
                    console.log("用户切换其他登录方式")
                    break
                case "700002":
                    console.log("用户点击登录按钮")
                    break
                case "700003":
                    console.log("用户点击checkBox")
                    break
                case "700004":
                    console.log("用户点击协议")
                    break
            }
        },
        customUiResult => {
            //这里回调的是自定义控件的单击事件,通过customUiResult.widgetId来识别自定义控件,然后做一些自己的处理
        }
    )
  3. 退出授权页
    获取登录Token后需开发者主动调用该接口退出授权页。
    调用示例:
    aLiSDKModule.quitLoginPage()
  4. 关闭授权页loading
    Android客户端与iOS客户端获取Token之后,关闭授权页面上的loading动画方法如下:
    • Android:获取Token结果回调后不会关闭loading动画,需要主动调用接口关闭loading动画。具体操作请参见Step 5的调用示例。
    • iOS:获取Token结果回调后会主动关闭loading动画。若要设置SDK不主动关闭loading动画,即手动控制loading消失事件,需在uiConfig配置项中加上autoHideLoginLoading: "false"。具体操作请参见步骤5的调用示例。
    调用示例
    aLiSDKModule.hideLoginLoading()
  5. 一键登录修改授权页主题
    • Android配置项说明。调用示例:
      {
          uiConfig: {
              setNavHidden: "false",
              setLogoHidden: "false",
              setSloganHidden: "false",
              setCheckboxHidden: "false",
              setSwitchHidden: "true",
              //授权页Loading图
              setLoadingImgPath: "",
              //授权页背景图
              setAuthBgImgPath: "",
              setNavUi: {
                  bgColor:"#1190ff",
                  text: "一键登录",
                  textColor: "#fbfbfb",
                  textSize: "17",
                  returnImgHidden: "false",
                  returnImgPath: "static/close_black.png",
                  returnImgWidth: "",
                  returnImgHeight: "",
              },
              setWebNavUi: {
                  bgColor:"",//协议页面导航栏背景色
                  textColor: "",//协议页面导航栏Title字体颜色
                  textSize: "",//协议页面导航栏Title字体大小(单位:sp)
                  returnImgPath: ""//协议页面导航栏返回按钮图标地址,必须是assets目录中的
              },
              setLogoUi: {
                  imgPath: "static/mytel_app_launcher.png",
                  width: "",
                  height: "",
                  offsetY: logoOffsetY,
                  offsetY_B: "",
              },
              setSloganUi: {
                  text: "xxxx",
                  textColor: "#000000",
                  textSize: "20",
                  offsetY: sloganOffsetY,
                  offsetY_B: "",
              },
              setNumberUi: {
                  textColor: "#000000",
                  textSize: "30",
                  offsetY: "",
                  offsetY_B: "",
                  offsetX: "",
                  //3 左对齐
                  //5 右对齐
                  //默认居中
                  layoutGravity: "",
              },
              setLoginBtnUi: {
                  text: "",
                  textColor: "",
                  textSize: "",
                  imgPath: "",
                  offsetX: "",
                  offsetY: "",
                  offsetY_B: "",
                  width: "",
                  height: "",
                  marginLeftAndRight: "",
                  layoutGravity: "",
                  toastHidden: "false",
              },
              setSwitchUi: {
                  text: "",
                  textColor: "",
                  textSize: "20",
                  offsetY: "",
                  offsetY_B: "",
              },
              setCheckBoxUi: {
                  defaultChecked: "true",
                  width: "",
                  height: "",
                  //checkBox未勾选图片
                  unCheckedImgPath: "",
                  //checkBox已勾选图片
                  checkedImgPath: "",
              },
              setAppPrivacyOne: {
                  title: "用户协议",
                  url: "www.example.com",
              },
              setAppPrivacyTwo: {
                  title: "隐私政策",
                  url: "www.example.com",
              },
              setAppPrivacyThree: {
                  title: "服务协议",
                  url: "www.example.com",
              },
              setPrivacyUi: {
                  beforeText: "",
                  endText: "",
                  baseColor: "",
                  protocolColor: "",
                  vendorPrivacyPrefix: "",
                  vendorPrivacySuffix: "",
                  offsetX: "",
                  offsetY: "",
                  offsetY_B: "",
                  textSize: "",
                  marginLeftAndRight: "",
                  gravity: "",
                  layoutGravity: ""
              },
              setDialogTheme: {
                  alpha: "",
                  width: "300",
                  height: "400",
                  offsetX: "0",
                  offsetY: "0",
                  isBottom: "false"
              }
      
          }, //授权页添加自定义控件元素
          widgets: {
              widget1: {
                  widgetId: "one",
                  type: "TextView",
                  left: "",
                  top: widgetOffsetY,
                  right: "",
                  bottom: "",
                  width: "",
                  height: "30",
                  textContent: "切换其他登录方式",
                  textSize: "15",
                  textColor: "#cc0000",
                  // 0位置是在导航栏下面的区域
                  // 1位置是在导航栏上
                  // 2位置是在号码栏水平线上
                  locate: "0"
              },
              widget2: {
                  widgetId: "two",
                  type: "ImageView",
                  left: "30",
                  top: widgetOffsetY,
                  right: "",
                  bottom: "",
                  width: "",
                  height: "30",
                  backgroundImgPath: "static/weixin.png",
                  locate: "1"
              }
          }
      }
    • iOS配置项说明。调用示例:
      {
          uiConfig: {
              // UIInterfaceOrientationMaskPortrait: 2
          // UIInterfaceOrientationMaskLandscapeLeft: 16
          // UIInterfaceOrientationMaskLandscapeRight: 8
          // UIInterfaceOrientationMaskPortraitUpsideDown: 4 
          supportedInterfaceOrientations: "2", //设置屏幕方向,默认为竖屏,其他方向请参考上面列举
              autoHideLoginLoading: "false", //在获取登录Token成功后,是否自动隐藏loading动画,默认隐藏,如果设置为不隐藏,需要手动调用 aLiSDKModule.hideLoginLoading() 来隐藏loading动画
              setNavHidden: "true", //是否隐藏导航栏,默认不隐藏
              setLogoHidden: "true", //是否隐藏中间的Logo图片,默认不隐藏
              setSloganHidden: "true", //是否隐藏slogan,默认不隐藏
              setSwitchHidden: "true", //是否隐藏切换其他方式按钮,默认不隐藏
              setCheckboxHidden: "true", //是否隐藏check box,默认不隐藏
              presentDirection: "2", //授权页动画方向,0:从底部弹出,1:从右边弹出,2:从上面弹出,3:从左边弹出
              animationDuration: "2.5", //授权页动画时间,设置为0则为关闭动画
              prefersStatusBarHidden: "true", //是否隐藏状态栏,默认不隐藏
              // UIStatusBarStyleDefault: 0
          // UIStatusBarStyleLightContent: 1
          // UIStatusBarStyleDarkContent: 3
              preferredStatusBarStyle: "0", //状态栏样式,参考上面枚列举
              //导航栏相关设置
              setNavUi: {
                  bgColor: "#FF8247",
                  text: "一键登录^-^",
                  textColor: "#FFFFFF",
                  textSize: "17",
                  returnImgHidden: "true", //是否隐藏返回按钮,默认不隐藏
                  returnImgPath: "static/close_black.png", //自定义返回按钮图片
                  returnImgX: "15",
                  returnImgY: "10",
                  returnImgWidth: "44",
                  returnImgHeight: "44"
              },
              //logo相关设置
              setLogoUi: {
                  imgPath: "static/mytel_app_launcher.png",
                  x: "100",
                  y: "30",
                  width: "30",
                  height: "60"
              },
              //slogan相关设置
              setSloganUi: {
                  text: "由阿里云通信提供服务",
                  textColor: "#FF8247", //必须在text不为空的情况下设置的该属性才会生效
                  textSize: "12", //必须在text不为空的情况下设置的该属性才会生效
                  x: "10",
                  y: "200",
                  width: "300",
                  height: "20"
              },
              //掩码相关设置
              setNumberUi: {
                  textColor: "#FF8247",
                  textSize: "17",
                  x: "10",
                  y: "320"
              },
              //登录按钮相关设置
              setLoginBtnUi: {
                  text: "一键登录^-^",
                  textColor: "#551A8B",
                  textSize: "15",
                  activeImgPath: "static/loginBtn_active.png", //check box勾选时按钮的颜色,注:只有activeImgPath、invalidImgPath、hightedImgPath全都设置,并且有效情况下才会生效
                  invalidImgPath: "static/loginBtn_invalid.png", //check box未勾选时按钮的颜色,注:只有activeImgPath、invalidImgPath、hightedImgPath全都设置,并且有效情况下才会生效
                  hightedImgPath: "static/loginBtn_highted.png", //check box勾选时,按压按钮时的颜色,注:只有activeImgPath、invalidImgPath、hightedImgPath全都设置,并且有效情况下才会生效
                  x: "10",
                  y: "350",
                  width: "300", //宽度必须大于屏幕的一半
                  height: "30" //高度不能小于20
              },
              //切换其他登录按钮相关设置
              setSwitchUi: {
                  text: "切换其他登录方式^-^",
                  textColor: "#551A8B",
                  textSize: "12",
                  x: "10",
                  y: "420",
                  width: "300",
                  height: "20"
              },
              //check box相关设置
              setCheckBoxUi: {
                  defaultChecked: "true", //check box默认是否勾选
                  unCheckedImgPath: "static/checkbox0", //必须同时设置checkedImgPath有效,该属性才会生效
                  checkedImgPath: "static/checkbox1", //必须同时设置unCheckedImgPath有效,该属性才会生效
                  width: "30" //默认宽度为17 pt
              },
              //授权页底部自加协议
              setAppPrivacyOne: {
                  title: "《协议1》",
                  url: "www.example.com"
              },
              //只有设置了setAppPrivacyOne生效,setAppPrivacyTwo才会生效
              setAppPrivacyTwo: {
                  title: "《协议2》",
                  url: "www.example.com"
              },
              //只有设置了setAppPrivacyOne、setAppPrivacyTwo生效,setAppPrivacyTwo才会生效
              setAppPrivacyThree: {
                  title: "《协议3》",
                  url: "www.example.com"
              },
              //设置协议相关
              setPrivacyUi: {
                  beforeText: "协议整体前缀",
                  endText: "协议整体后缀",
                  baseColor: "#8B8878",
                  protocolColor: "#FFB5C5",
                  textSize: "13", //协议文字大小,小于12不生效
                  vendorPrivacyPrefix: "《", //供应商协议前缀
                  vendorPrivacySuffix: "》", //供应商协议后缀
                  alignment: "1", //协议文字对齐方式,0:左对齐,1:中间对齐,2:右对齐
                  x: "20",
                  y: "800",
                  width: "200" //宽度小于check box的宽度时不生效(该宽度为check box宽度 + 协议文本宽度),高度SDK内部自适应,外面设置无效
              },
              //设置协议详情页导航栏相关
              setWebNavUi: {
                  bgColor: "#CD1076",
                  textColor: "#EECFA1",
                  textSize: "30",
                  returnImgPath: "/static/close_black.png"
              },
              //设置弹窗样式相关
              setDialogTheme: {
                  alpha: "0.2", //弹框背部蒙层透明度
                  radius: ["10", "10", "10", "10"], //设置弹窗四个角的弧度
                  x: "10",
                  y: "160",
                  width: "300",
                  height: "650"
              }
          },
          //自定义控件
          widgets: [{
                  widgetId: "widgetId-001", //控件id
                  type: "ImageView", //控件类型,ImageView(图片)
                  imgPath: "static/qq.png",
                  x: "10",
                  y: "60",
                  width: "100",
                  height: "100",
                  // UIViewContentModeScaleToFill: 0
                  // UIViewContentModeScaleAspectFit: 1
                  // UIViewContentModeScaleAspectFill: 2
                  // UIViewContentModeRedraw: 3
                  // UIViewContentModeCenter: 4
                  // UIViewContentModeTop: 5
                  // UIViewContentModeBottom: 6
                  // UIViewContentModeLeft: 7
                  // UIViewContentModeRight: 8
                  // UIViewContentModeTopLeft: 9
                  // UIViewContentModeTopRight: 10
                  // UIViewContentModeBottomLeft: 11
                  // UIViewContentModeBottomRight: 12
                  contentMode: "1", //内容填充方式,参考上面列举
                  backgroundColor: "#EE6A50",
                  masksToBounds: "true",
                  cornerRadius: "5",
                  borderColor: "#8B7D6B",
                  borderWidth: "1.0"
              },
              {
                  widgetId: "widgetId-002",
                  type: "Button", //Button(按钮)
                  backgroundImage: "static/qq.png",
                  // UIControlContentVerticalAlignmentCenter: 0
                  // UIControlContentVerticalAlignmentTop: 1
                  // UIControlContentVerticalAlignmentBottom: 2
                  // UIControlContentVerticalAlignmentFill: 3
                  verticalAlignment: "0", //标题竖直对齐方式,参考上面列举
                  // UIControlContentHorizontalAlignmentCenter: 0
                  // UIControlContentHorizontalAlignmentLeft: 1
                  // UIControlContentHorizontalAlignmentRight: 2
                  // UIControlContentHorizontalAlignmentFill: 3
                  // UIControlContentHorizontalAlignmentLeading  API_AVAILABLE(ios(11.0), tvos(11.0)): 4
                  // UIControlContentHorizontalAlignmentTrailing API_AVAILABLE(ios(11.0), tvos(11.0)): 5
                  horizontalAlignment: "0", //标题水平对齐方式,参考上面列举
                  textContent: "这是一个按钮",
                  textSize: "13",
                  textColor: "#FFFFFF",
                  numberOfLines: "0",
                  x: "10",
                  y: "200",
                  width: "100",
                  height: "100",
                  backgroundColor: "#EE6A50",
                  masksToBounds: "true",
                  cornerRadius: "5",
                  borderColor: "#8B7D6B",
                  borderWidth: "1.0"
              },
              {
                  widgetId: "widgetId-003",
                  type: "Label", //Label(文本)
                  // NSTextAlignmentLeft: 0
                  // NSTextAlignmentCenter: 1
                  // NSTextAlignmentRight: 2
                  alignment: "1", //文字对齐方式,参考上面枚举
                  textContent: "这是一串文本信息xxxx这是一串文本信息xxxx这是一串文本信息xxxx",
                  textSize: "13",
                  textColor: "#FFFFFF",
                  numberOfLines: "0",
                  x: "10",
                  y: "450",
                  width: "100",
                  height: "100",
                  backgroundColor: "#EE6A50",
                  masksToBounds: "true",
                  cornerRadius: "5",
                  borderColor: "#8B7D6B",
                  borderWidth: "1.0"
              }
          ]
      }

本机号码校验方法说明

  1. 可选:加速校验接口
    加速本机号码校验Token的获取。
    说明
    • 由于加速方法需要1~3秒的时间取得临时凭证,建议在调用获取本机号码校验Token方法2~3秒前调用预取号方法。
    • 请勿频繁的调用加速拉起授权页方法,不得与拉起授权登录页同时调用或在其后调用。
    • 进入App仅获取本机号码校验Token的场景无需调用此接口。
    Object参数说明:
    参数类型描述
    timeoutNumber设置接口超时时间(单位:毫秒)。
    Callback参数说明:
    参数类型描述
    resultCodeStringCode值,600000表示接口调用成功,更多Code值请参见SDK返回码
    msgString相关提示信息。
    调用示例:
    aLiSDKModule.accelerateLoginPage(5000, result => {
        if ("600000" == result.resultCode) {
            console.log("加速成功")
        }
    })
  2. 获取本机号码校验Token
    Object参数说明:
    参数类型描述
    timeoutNumber设置接口超时时间(单位:毫秒)。
    Callback参数说明:
    参数类型描述
    resultCodeStringCode值,600000表示接口调用成功,更多Code值请参见SDK返回码
    msgString相关提示信息。
    tokenString最终进行号码校验的Token,只有在resultCode值为600000的时候该字段才会有值。
    调用示例
    aLiSDKModule.getVerifyToken(5000, result => {
        if ("600000" == result.resultCode) {
            console.log("获取本机号码校验Token成功,接下面需要拿手机号和Token去服务端进行校验,SDK服务到此结束")
        }
    })

更多方法说明

  • 获取号码认证SDK版本号
    Callback参数说明:
    返回值类型描述
    versionString号码认证SDK版本号
    调用示例:
    aLiSDKModule.getVersion(version => {
        console.log("当前SDK版版本号为:" + version)
    })
  • 环境检查
    Object参数说明:
    参数类型描述
    authTypeNumber检查类型。取值:
    • 1:检查号码认证环境。
    • 2:检查一键登录环境。
    Callback参数说明:
    参数类型描述
    resultCodeStringCode值,600000表示接口调用成功。环境支持一键登录或本机号码校验,更多Code值请参见SDK返回码
    msgString相关提示信息。
    调用示例:
    aLiSDKModule.checkEnvAvailable(2, result => {
        console.log(JSON.stringify(result))
    })
  • 获取默认上网卡运营商
    Callback参数说明:
    返回值类型描述
    carrierNameString当前运营商。取值:
    • 中国移动:CMCC。
    • 中国联通:CUCC。
    • 中国电信:CTCC。
    调用示例:
    aLiSDKModule.getCurrentCarrierName(carrierName => {
        console.log("当前运营商为:" + carrierName)
    })

SDK返回码

错误码描述操作建议
600000获取Token成功。-
600001唤起授权页成功。-
600002唤起授权页失败。建议重置网络,您可以开启飞行模式后再关闭,或者建议切换到短信登录或微信登录等其他登录方式。
600004获取运营商配置信息失败。建议升级SDK版本。您可在号码认证服务控制台下载最新版SDK。
600005手机终端不安全。建议切换到短信登录或微信登录等其他登录方式。
600007未检测到SIM卡。建议您检查SIM卡后重试。
600008移动数据网络未开启。建议开启移动数据网络后重试。
600009无法判断运营商。请检查下是否是三大运营商,即中国移动、中国联通、中国电信,暂不支持这三大运营商外的其它运营商。
600010未知异常。建议检查下SIM卡的状态是否正常,如是否欠费等,或者重启蜂窝网络后再尝试。
600011获取Token失败。建议检查下SIM卡的状态是否正常,如是否欠费等,或者重启蜂窝网络后再尝试,重启手机或切换到其他登录方式的操作尝试。
600012预取号失败。建议您检查数据网络环境后重试,或切换飞行模式、重启手机或切换到其他登录方式的操作尝试。
600013运营商维护升级,该功能不可用。建议切换到其他登录方式的操作尝试。
600014运营商维护升级,该功能调用次数已达上限。建议切换到其他登录方式的操作尝试。
600015接口超时。建议切换到其他登录方式。
600017AppID、AppKey解析失败。建议检查下控制台创建方案号时相关信息是否正确,
600021点击登录时检测到运营商已切换。建议切换到短信登录或微信登录等其他登录方式。
600023加载⾃定义控件异常。建议您检查⾃定义控件添加是否正确。
600024终端环境检查⽀持认证。-
600025终端检测参数错误。建议您检查传⼊参数类型与范围是否正确。
600026授权页已加载时不允许调用加速或预取号接口。建议您检查是否有授权页拉起后,调用preLogin或者accelerateAuthPage接口的行为不被允许。
除阿里云SDK返回码外,运营商错误码详情,请参见运营商SDK错误码