uni-app demo

Background information

uni-app native language plugin

The Alibaba Cloud Phone Number Verification SDK plugin is an authentication plugin developed based on the uni-app native plugin extension capability provided by HBuilder. It enables developers to easily integrate the Alibaba Cloud Phone Number Verification Service into their projects and implement related features at the JavaScript (JS) layer.

Important

This is a native plugin and is only supported in Android or iOS applications developed using the uni-app framework. It cannot be used in other types of mini programs.

Try the demo

This topic uses an Android application developed with uni-app as an example to describe the configuration process for the demo.

1. Go to the Alibaba Cloud Phone Number Verification SDK plugin product page.

2. On the right side of the page, click Download Sample Project ZIP to download the demo code.

   Note

   This plugin is free and supports offline packaging.

3. Open the demo project using HBuilder.

4. This plugin is a native plugin. Follow the procedure to package a custom runtime for debugging. Record the Android package name that is generated during packaging. You will need this name later to create a phone number verification plan for your application.

5. In the HBuilder toolbar, click the Run button . From the pop-up menu, select Run to Android App Runtime. In the panel that appears, select Run with Custom Runtime and click Run.

6. Open the compiled application on your phone.

7. Create a phone number verification plan for your application. For more information, see Phone Number Verification Service.

   Note

   • Operating system: Select Android.

   • Package name: Enter the package name that you set when you created the custom runtime.

   • Package signature: Download and install the Android App Signature Tool. Select the current demo application to obtain the package signature.

8. Copy the key from the current authentication plan and replace the sdkInfo variable in the demo's App.vue file. After you save the changes, HBuilder performs incremental packaging.

Sample code

Import the plugin

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

Set the plan key

On the Plan Management page in the console, find your plan and click Key in the Actions column. Then, click Copy Key. For details, see How to obtain the key for setAuthSDKInfo.

aLiSDKModule.setAuthSDKInfo("The key obtained from the Alibaba Cloud console");

One-click logon feature

aLiSDKModule.getLoginToken(
  5000,
  config,
  (tokenResult) => {
    uni.hideLoading();
    console.log(JSON.stringify(tokenResult));
    if ("600001" == tokenResult.resultCode) {
      console.log("Authorization page opened successfully.");

      // Set whether the check box is selected.
      aLiSDKModule.setCheckboxIsChecked({
        check: false,
      });
    } else if ("600000" == tokenResult.resultCode) {
      console.log(
        "Token obtained successfully. Next, use the token to exchange for the mobile phone number on the server-side. The SDK service ends here."
      );
      // Manually close the authorization page.
      aLiSDKModule.quitLoginPage();
    } else {
      // Manually close the authorization page.
      aLiSDKModule.quitLoginPage();
    }
  },
  (clickResult) => {
    console.log(JSON.stringify(clickResult));
    switch (clickResult.resultCode) {
      case "700000":
        console.log("User clicked the back button.");
        break;
      case "700001":
        console.log("User switched to another logon method.");
        break;
      case "700002":
        console.log("User clicked the logon button.");
        if (!clickResult.result.isChecked) {
          // For toast styles, see https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast
          plus.nativeUI.toast("Please agree to the terms of service (PS: This toast needs to be added manually).");
        }
        break;
      case "700003":
        console.log("User clicked the check box.");
        break;
      case "700004":
        console.log("User clicked the protocol.");
        break;
    }
  },
  (customUiResult) => {
    console.log("Clicked a custom control " + JSON.stringify(customUiResult));
    if ("close" == customUiResult.widgetId) {
      // Clicked the custom button to close the authorization page.
      aLiSDKModule.quitLoginPage();
    } else {
      plus.nativeUI.toast(
        "Clicked a custom button. widgetId: " + customUiResult.widgetId
      );
    }
  }
);

Mobile number verification feature

aLiSDKModule.getVerifyToken(5000, (result) => {
  uni.hideLoading();
  console.log(JSON.stringify(result));
  let msg = "";
  if ("600000" == result.resultCode) {
    msg =
      "Mobile number verification token obtained successfully. Next, use the mobile phone number and token for verification on the server-side. The SDK service ends here.";
  } else {
    msg = "Failed to obtain the mobile number verification token, " + result.msg;
  }
  // Console output and on-screen prompt.
  console.log(msg);
  uni.showToast({
    icon: "none",
    title: msg,
    duration: 3000,
  });
});