uni-app Demo体验

背景信息

uni-app原生语言插件

阿里云号码认证SDK插件是基于HBuilder提供的uni-app原生插件扩展能力开发出的认证插件，开发者可以轻松将阿里云号码认证能力集成到自己的项目中，在JS层实现相关功能。

重要

本插件使用原生语言开发，仅支持在uni-app开发框架开发的Android或iOS应用中使用，无法在其他各类小程序中使用。

Demo体验

本文以uni-app开发Android应用为例，讲解Demo体验的完整配置过程。

1. 访问插件地址：阿里云号码认证SDK，进入插件详情页。

2. 点击界面右侧“下载示例项目ZIP”，下载Demo代码。

   说明

   本插件免费，支持离线打包。

   若使用 Android 离线打包方式集成插件，本地调试正常但打包后调用报错或无法读取插件时，请严格按照 uni-app 官方离线打包文档配置原生插件，参见uni-app 离线打包原生插件配置及模块配置文档，确保插件正确集成。

3. 使用HBuilder打开Demo项目。

4. 本插件使用原生语言开发，请根据 操作步骤 打包自定义基座以便于调试。请记录打包过程中的Android 包名，用于后续创建专属于当前应用的号码认证方案。

5. 点击HBuilder顶部工具栏运行按钮 ，弹出菜单选择运行到Android App基座，弹出面板，选择使用自定义基座运行，点击运行按钮。

6. 手机上打开编译后的应用。

   应用打开后显示阿里巴巴本机认证服务主界面，信息区域展示号码认证原生SDK版本号（如 2.12.1.1）及当前运营商信息，下方提供本机号码认证流程和一键登录流程两个功能入口按钮。

7. 创建专属于当前应用的号码认证方案，配置详情请参见号码认证服务。

   说明

   • 操作系统：请选择Android。

   • 包名：请填入创建自定义基座设置的包名称。

   • 包签名：请先下载并安装Android APP签名获取工具，选择到当前Demo应用，获取包签名。

8. 复制当前认证方案中的密钥，替换掉Demo中App.vue的sdkInfo变量，保存后HBuilder会进行差量打包。

示例代码

引入插件

const aLiSDKModule = uni.requireNativePlugin('AliCloud-NirvanaPns');

设置方案密钥

请在控制台号码认证方案管理页，在对应的方案名称操作列单击密钥后，再单击复制密钥即可。详细操作步骤，请参见setAuthSDKInfo的密钥获取方式。

aLiSDKModule.setAuthSDKInfo("从阿里云控制台获取的密钥");

一键登录功能

aLiSDKModule.getLoginToken(
  5000,
  config,
  (tokenResult) => {
    uni.hideLoading();
    console.log(JSON.stringify(tokenResult));
    if ("600001" == tokenResult.resultCode) {
      console.log("授权页拉起成功");
      // 设置是否选中复选框
      aLiSDKModule.setCheckboxIsChecked({
        check: false,
      });
    } else if ("600000" == tokenResult.resultCode) {
      console.log(
        "获取Token成功，接下来拿着结果里面的Token去服务端换取手机号码，SDK服务到此结束"
      );
      //手动关闭授权页
      aLiSDKModule.quitLoginPage();
    } else {
      //手动关闭授权页
      aLiSDKModule.quitLoginPage();
    }
  },
  (clickResult) => {
    console.log(JSON.stringify(clickResult));
    switch (clickResult.resultCode) {
      case "700000":
        console.log("用户点击返回按钮");
        break;
      case "700001":
        console.log("用户切换其他登录方式");
        break;
      case "700002":
        console.log("用户点击登录按钮");
        if (!clickResult.result.isChecked) {
          //Toast样式可参考：https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast
          plus.nativeUI.toast("请同意服务条款（ps：这个Toast需手动添加）");
        }
        break;
      case "700003":
        console.log("用户点击checkBox");
        break;
      case "700004":
        console.log("用户点击协议");
        break;
    }
  },
  (customUiResult) => {
    console.log("点击了自定义控件 " + JSON.stringify(customUiResult));
    if ("close" == customUiResult.widgetId) {
      //点击了自定义的关闭授权页按钮
      aLiSDKModule.quitLoginPage();
    } else {
      plus.nativeUI.toast(
        "点击了自定义按钮，widgetId：" + customUiResult.widgetId
      );
    }
  }
);

本机号码校验功能

aLiSDKModule.getVerifyToken(5000, (result) => {
  uni.hideLoading();
  console.log(JSON.stringify(result));
  let msg = "";
  if ("600000" == result.resultCode) {
    msg =
      "获取本机号码校验token成功，接下来需要拿手机号和token去服务端进行校验，SDK服务到此结束";
  } else {
    msg = "获取本机号码校验Token失败，" + result.msg;
  }
  // 控制台输出和屏幕提示
  console.log(msg);
  uni.showToast({
    icon: "none",
    title: msg,
    duration: 3000,
  });
});

常见问题

多次调用 getLoginToken 导致授权页异常关闭或弹出多个窗口怎么办？

短时间内连续并发调用 getLoginToken 接口会导致 SDK 逻辑冲突，出现授权页被自动关闭（返回 600030）或叠加弹出多个登录窗口的现象。

新版 uni-app 插件已增加防护逻辑，限制仅允许一次调用完成后才能进行下一次调用。请通过云打包更新到最新插件版本进行测试。

建议在应用层业务代码中自行增加防抖处理作为双重保险；若收到 600030 状态码，建议不做任何处理，以避免干扰正常流程。

是否支持不跳转授权页的静默一键登录？

不支持静默一键登录，即不跳转原生授权页直接获取 Token。必须使用 SDK 自带的授权页组件，但开发者可以通过配置 authUiConfig 对授权页 UI 进行自定义调整（如修改协议文案、掩码样式、登录按钮及添加自定义控件等），以满足业务视觉需求。

调用 getLoginToken 卡死、无回调或无授权弹窗如何排查？

请按以下步骤排查：

1. 检查配置字段名称：核对 authUiConfig 中的接口名称是否正确（例如应为 setNavHidden 而非 navHidden），并确认隐私协议文案等必要字段已配置。

2. 最小化配置测试：先将 UI 配置减配到最小（仅保留基础结构），确认非必需资源（如背景图片）不影响核心功能；待接口正常回调后，再逐步增加其他 UI 配置项进行排查。

3. 资源说明：uiConfig 中的背景图片资源不是必需的，即使不配置该图片，只要基础 uiConfig 结构正确，即可正常拉起授权页并获取回调。