How to integrate a native plugin into the uni-app framework for one-click logon-Phone Number Verification Service(PNVS)-阿里云帮助中心

This document describes how to integrate the Phone Number Verification Service uni-app native plugin and implement one-click logon.

Background information

uni-app native plugin

The Alibaba Cloud Phone Number Verification SDK plugin is a verification plugin developed based on the uni-app native plugin extension capability provided by HBuilder. Developers can easily integrate the Alibaba Cloud Phone Number Verification capability into their projects and implement related functions at the JS layer.

Important

This native plugin supports only Android and iOS apps built with the uni-app framework and is not compatible with other mini program types.

Add the plugin to your project

Create a uni-app project.
1. If you do not have a uni-app project, see Create a project by using the HBuilder visual interface.
2. If you already have a project, proceed to the next step.
Download the plugin.
1. Go to the plugin page: Alibaba Cloud Phone Number Verification SDK.
2. On the right side of the page, click Download for offline packaging to download the plugin.
Import the plugin into your project.
1. In the root directory of your project, create a folder named nativeplugins. Unzip the downloaded AliCloud-NirvanaPns_x.x.x.zip file and place its contents into the nativeplugins folder. The project's root directory should now contain a nativeplugins folder, which includes the AliCloud-NirvanaPns directory. This directory contains the android and ios subfolders, along with the license.md and package.json files.
2. Open the manifest.json file in the root directory, and then click App Native Plugin Configuration > Select Local Plugins.
3. In the Select Local Plugins dialog box, select Alibaba Cloud Phone Number Verification SDK.
4. Click OK.

Create an authentication scheme

For more information, see Create an authentication scheme and obtain the scheme Code.

Interaction flow

For the complete interaction flow, see one-click logon interaction flow.

Methods

Import method

In your vue or nvue file, import the native plugin using the uni.requireNativePlugin method.

Example

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

setAuthSDKInfo

This is a required method.

Before using one-click logon, call this method to provide your secret key. The key must correspond to your bundle ID or package name.

Parameters: setAuthSDKInfo(info)

Parameter	Type	Description
info	String	The secret key generated in the Phone Number Verification Service console.

Example

aLiSDKModule.setAuthSDKInfo("<SDK_INFO>"); // Replace with the secret key obtained from the console.

accelerateLoginPage

This method pre-loads the authorization page to reduce wait times when you call getLoginToken.

Call this method only for users who are not logged in.
Call this method a few seconds before you display the authorization page. A buffer of 2 to 3 seconds is recommended because the acceleration process takes 1 to 3 seconds to obtain a temporary credential.
Do not call this method repeatedly.
Do not call this method at the same time as or after calling getLoginToken.
This method does not accelerate the login process for users who log in immediately after opening the app.

Parameters

Parameter

Type

Description

timeout

Number

The method timeout in milliseconds.

callback(args)

Function

A callback function that receives an object with the following structure:

resultCode: A value of 600000 indicates that the method call was successful.
msg: A descriptive message.

Example

aLiSDKModule.accelerateLoginPage(5000, (result) => {
  if ("600000" == result.resultCode) {
    console.log("Acceleration successful");
  }
});

getLoginToken

Launches the authorization page to retrieve a one-click logon token. The token is returned in a callback after the user taps the logon button.

Parameters

Parameter	Type	Description
timeout	Number	The method timeout in milliseconds.
authUiConfig	Map	The UI configuration for the authorization page. For more information, see Theme configuration.
tokenCallback(args)	Function	A callback function for the call status that receives an object with the following structure: resultCode: A value of 600000 indicates that the method call was successful. msg: A descriptive message. token: The token used to exchange for the phone number. This field has a value only when `resultCode` is 600000.
uiCallback(args)	Function	A callback function for clicks on built-in controls that receives an object with the following structure: resultCode: For more information, see Authorization page event codes.
customUiCallback(args)	Function	A callback function for clicks on custom controls that receives an object with the following structure: widgetId: Use this field to identify the custom control.

Authorization page event codes

Result code	Description
700000	The user clicked the back button and canceled one-click logon.
700001	The user clicked the switch button and canceled one-click logon.
700002	The user clicked the logon button.
700003	The user clicked the checkbox.
700004	The user tapped an agreement link.

Example

aLiSDKModule.getLoginToken(
  5000,
  config,
  tokenResult => {
    if ("600001" == tokenResult.resultCode) {
      console.log("Authorization page launched successfully.");
    } else if ("600000" == tokenResult.resultCode) {
      console.log(
        "Token obtained successfully. Use the token to exchange for the phone number on your server. The SDK's task is now complete."
      );
      // Manually close the authorization page.
      aLiSDKModule.quitLoginPage();
    } else {
      // In case of other failures, manually close the authorization page.
      aLiSDKModule.quitLoginPage();
    }
  },
  clickResult => {
    switch (clickResult.resultCode) {
      case "700000":
        console.log("User clicked the back button.");
        aLiSDKModule.quitLoginPage();
        break;
      case "700001":
        console.log("User switched to another logon method.");
        break;
      case "700002":
        console.log("User clicked the logon button.");
        // Use the isChecked field to check if the checkbox is selected. If not, you can display a custom toast notification.
        if (!clickResult.result.isChecked) {
          // For toast styles, see: https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUl.toast
          plus.nativeUI.toast("Please agree to the terms of service."); // This toast notification must be added manually.
        }
        break;
      case "700003":
        console.log("User clicked the checkbox.");
        break;
      case "700004":
        console.log("User clicked the agreement.");
        break;
      case "700010":
        // Available only after userControlAuthPageCancel is called.
        console.log("User clicked the back button. Android only.");
        break;
      case "700011":
        // Available only after userControlAuthPageCancel is called.
        console.log("User pressed the physical back button. Android only.");
        break;
    }
  },
  customUiResult => {
    // This callback handles click events for custom controls. Use customUiResult.widgetId to identify the control and perform your own processing.
  }
);

quitLoginPage

The authorization page does not close automatically after you receive the logon token. Call this method to close it.

Example

aLiSDKModule.quitLoginPage();

hideLoginLoading

Hides the loading animation that appears on the page while obtaining the token.

On Android, the loading animation persists after the token callback. Call this method to hide it.

On iOS, the loading animation hides automatically after the token callback. To hide it manually instead, set autoHideLoginLoading: "false" in uiConfig.

Example

aLiSDKModule.hideLoginLoading();

Theme configuration

This configuration is an example. Do not copy it directly. Select and modify properties to customize your UI.

{
    uiConfig: {
      globalFontName: "static/testFont.ttf",// Sets the global font. For system fonts, provide the font name, such as "PingFangSC-Regular". For third-party fonts, provide the relative path. For example, if the font file is in the static directory, use "static/testFont.ttf".
      setPrivacyAlertIsNeedShow: true,// Specifies whether to display the secondary pop-up. Default: false.
      setStatusBarStyle: "1", // Sets the status bar style (1: Light, 2: Dark). If not set, it follows the app's style.
      setNavHidden: "false", // Specifies whether to hide the navigation bar. Valid values: true (hidden), false (not hidden). Default: false.
      setLogoHidden: 'false', // Specifies whether to hide the logo. Valid values: true (hidden), false (not hidden). Default: false.
      setSloganHidden: "false", // Specifies whether to hide the slogan text. Valid values: true (hidden), false (not hidden). Default: false.
      setSwitchHidden: "true", // Specifies whether to hide the "Switch Method" button. Valid values: true (hidden), false (not hidden).
      setCheckboxHidden: "false", // Specifies whether to hide the checkbox next to the privacy agreement. Valid values: true (hidden), false (not hidden). If hidden, the user is forced to agree to the terms. Use with caution.
      // Settings for the pop-up style. If this is not configured, the page is displayed in full screen by default.
      setDialogTheme: {
        alpha: "0.2", // The opacity of the mask behind the pop-up.
        isBottom: "false", // Specifies whether the window is a pop-up from the bottom. Valid values: true (yes), false (no). Default: false (centered pop-up).
        offsetX: "0", // The horizontal offset of the pop-up. Do not add units. The default unit is dp for Android and pt for iOS.
        offsetY: "0", // The vertical offset of the pop-up. Do not add units. The default unit is dp for Android and pt for iOS.
        width: "300", // The width of the pop-up. Do not add units. The default unit is dp for Android and pt for iOS.
        height: "400", // The height of the pop-up. Do not add units. The default unit is dp for Android and pt for iOS.
        tapAuthPageMaskClosePage:"true",// Specifies whether tapping the mask of a pop-up authorization page closes the pop-up. Valid values: true (close), false (do not close). Default: false.
      },
      // Background settings for the authorization page.
      setBackgroundUi: {
        backgroundColor: "#EA7F32", // The background color of the authorization page. For a pop-up, this is the background color of the pop-up itself. Note: When loading an image or video, you can set a background color that is similar to the first frame to avoid a white screen during resource loading.
        imagePath: "", // The local resource path for the background image. This has the highest priority. The image fills the screen by default. To set a custom position and size, consider using a WebView or Weex background.
        imageUrl: "", // The URL of the background image. This has a lower priority than imagePath. The image fills the screen by default. To set a custom position and size, consider using a WebView or Weex background.
        gifPath: "", // The local resource path for the background GIF. This has a lower priority than imageUrl. The GIF fills the screen by default. To set a custom position and size, consider using a WebView or Weex background.
        gifUrl: "", // The URL of the background GIF. This has a lower priority than gifPath. The GIF fills the screen by default. To set a custom position and size, consider using a WebView or Weex background.
        videoPath: "", // The local resource path for the background video. This has a lower priority than gifUrl. The video fills the screen by default and supports only the MP4 format. To set a custom position and size, consider using a WebView or Weex background.
        videoUrl: "", // The URL of the background video. This has a lower priority than videoPath. The video fills the screen by default. To set a custom position and size, consider using a WebView or Weex background.
        webviewPath: "", // The local resource path of an HTML file for the background, rendered by using a native WebView. The WebView fills the screen by default. This has a lower priority than videoUrl.
        webviewUrl: "", // The URL of an HTML file for the background, rendered by using a native WebView. The WebView fills the screen by default. This has a lower priority than webviewPath.
        webviewScrollEnabled: "", // Valid values: true (The webpage is not scaled to the screen size and can be scrolled), false (The webpage is scaled to the screen size and cannot be scrolled).
        weexJsPath: "", // The local resource path of a JS file for the background, rendered by using Weex. The view fills the screen by default. This has a lower priority than webviewUrl. For more information, see Appendix: Compiling a JS file by using Weex and render it on the authorization page.
        weexJsUrl: "", // The URL of a JS file for the background, rendered by using Weex. The view fills the screen by default. This has a lower priority than weexJsPath. For more information, see Appendix: Compile a JS file by using Weex and render it on the authorization page.
      },
      // Navigation bar settings.
      setNavUi: {
        bgColor: '#1190ff', // The background color of the navigation bar. Note: This applies only to full-screen mode, not pop-ups.
        text: "One-click Logon", // The navigation bar title.
        textColor: "#fbfbfb", // The color of the navigation bar title.
        textSize: "17", // The font size. Do not add units. The default unit is sp for Android and pt for iOS.
        returnImgHidden: "false", // Specifies whether to hide the back button. Valid values: true (hidden), false (not hidden). Default: false.
        returnImgPath: "static/close_black.png", // The image path for the back button.
        returnImgWidth: "44", // The width of the back button. Do not add units. The default unit is dp for Android and pt for iOS.
        returnImgHeight: "44", // The height of the back button. Do not add units. The default unit is dp for Android and pt for iOS.
        suspendDisMissVC:true,// If true, intercepts the navigation back button tap. The page will not close, and the uiCallback receives response code 700010. You must then call quitLoginPage manually. Default: false.
      },
      // Logo settings. The logo is centered horizontally by default.
      setLogoUi: {
        imgPath: "static/mytel_app_launcher.png", // The resource path of the logo image.
        top: "30", // The offset from the top of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
        width: "30", // The width of the control. Do not add units. The default unit is dp for Android and pt for iOS.
        height: "60" // The height of the control. Do not add units. The default unit is dp for Android and pt for iOS.
      },
      // Slogan settings. The slogan is centered horizontally by default.
      setSloganUi: {
        text: "Powered by AliTelecom", // The slogan text. If not set, the default text is used.
        textColor: "#FF8247", // The color of the slogan text.
        textSize: "12", // The font size. Do not add units. The default unit is sp for Android and pt for iOS.
        top: "200", // The offset from the top of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
      },
      // Number mask settings. The mask is centered horizontally by default.
      setNumberUi: {
        textColor: "#FF8247", // The color of the number mask text.
        textSize: "17", // The font size. Do not add units. The default unit is sp for Android and pt for iOS.
        left: "20", // The offset from the left of the parent container. If not set, the control is centered. Do not add units. The default unit is dp for Android and pt for iOS.
        top: "20", // The offset from the top of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
      },
      // Logon button settings. The button is centered horizontally by default.
      setLoginBtnUi: {
        text: "One-click Logon ^-^", // The logon button text. If not set, the default text is used.
        textColor: "#551A8B", // The color of the logon button text.
        textSize: "15", // The font size. Do not add units. The default unit is sp for Android and pt for iOS.
        imgPath: "static/loginBtn_active.png", // The background image path for the button. To specify different images for normal and clicked states, use activeImgPath and highlightedImgPath. For iOS, you can also set an image for the disabled state by using invalidImgPath.
        color: "#D8BFD8", // If imgPath, activeImgPath, invalidImgPath, or highlightedImgPath is empty, this color is used as the button's background fill.
        activeImgPath:"",// Sets the image for the default state. This does not take effect if imgPath is set. This must be set with invalidImgPath and highlightedImgPath to take effect. For Android, it must be set with highlightedImgPath.
        invalidImgPath:"",// For iOS only. Sets the image for the disabled state. This does not take effect if imgPath is set. This must be set with highlightedImgPath and activeImgPath to take effect.
        highlightedImgPath:"",// Sets the image for the highlighted (clicked) state. This does not take effect if imgPath is set. For iOS, this must be set with activeImgPath and invalidImgPath. For Android, it must be set with activeImgPath.
        left: "20", // The offset from the left of the parent container. If not set, the control is centered. Do not add units. The default unit is dp for Android and pt for iOS.
        top: "20", // The offset from the top of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
        width: "30", // The width of the control. The width must be greater than half of the screen width. Do not add units. The default unit is dp for Android and pt for iOS.
        height: "30", // The height of the control. The height cannot be less than 20. Do not add units. The default unit is dp for Android and pt for iOS.
      },
      // Settings for the "Switch to another login method" button. The button is centered horizontally by default.
      setSwitchUi: {
        text: "Switch to another login method ^-^", // The text for the button. If not set, the default text is used.
        textColor: "#551A8B", // The color of the text.
        textSize: "12", // The font size. Do not add units. The default unit is sp for Android and pt for iOS.
        top: "20", // The offset from the top of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
      },
      // Checkbox settings.
      setCheckBoxUi: {
        defaultChecked: "true", // Specifies whether the checkbox is selected by default. Valid values: true (selected), false (not selected). If not set, the user must manually select it. Default: false.
        unCheckedImgPath: "static/checkbox0", // The image for the unchecked state. This takes effect only if checkedImgPath is also set.
        checkedImgPath: "static/checkbox1", // The image for the checked state. This takes effect only if unCheckedImgPath is also set.
        width: "30", // The width and height of the control. Do not add units. The default unit is dp for Android and pt for iOS.
        checkBoxPostion:"top",// For iOS only. The position of the checkbox. Can be 'top' or 'VerticalCenter'. Other values are invalid. Default: top.
        top:10,// For Android only. The top margin of the checkbox. Unit: dp.
      },
      // Configuration for the first custom agreement (up to three are supported).
      setAppPrivacyOne: {
        title: "《Agreement 1》", // The title of the agreement.
        url: "www.taobao.com" // The URL of the agreement.
      },
      // Configuration for the second custom agreement (takes effect only if setAppPrivacyOne is set).
      setAppPrivacyTwo: {
        title: "《Agreement 2》", // The title of the agreement.
        url: "www.taobao.com" // The URL of the agreement.
      },
      // Configuration for the third custom agreement (takes effect only if setAppPrivacyOne and setAppPrivacyTwo are set).
      setAppPrivacyThree: {
        title: "《Agreement 3》", // The title of the agreement.
        url: "www.taobao.com" // The URL of the agreement.
      },
      setPrivacyUi: {
        beforeText: "Agreement prefix", // The prefix for the entire privacy agreement text.
        endText: "Agreement suffix", // The suffix for the entire privacy agreement text.
        baseColor: "#8B8878", // The color of the non-link part of the agreement text.
        protocolColor: "#FFB5C5", // The color of the rich text (link) part of the agreement.
        operatorColor:"#FFB5C5",// Sets a specific color for the carrier's agreement link. This has the highest priority. If this is set, the value of protocolColor is ignored for the carrier agreement. If this is not set, the value of protocolColor is used.
        oneColor:"#FFB5C5",// Sets a specific color for the first agreement link. This has the highest priority. If this is set, the value of protocolColor is ignored. If this is not set, the value of protocolColor is used.
        twoColor:"#FFB5C5",// Sets a specific color for the second agreement link. This has the highest priority. If this is set, the value of protocolColor is ignored. If this is not set, the value of protocolColor is used.
        threeColor:"#FFB5C5",// Sets a specific color for the third agreement link. This has the highest priority. If this is set, the value of protocolColor is ignored. If this is not set, the value of protocolColor is used.
        textSize: "13", // The font size of the agreement text. Must be 12 or greater. Do not add units. The default unit is sp for Android and pt for iOS.
        vendorPrivacyPrefix: "《", // The prefix for the carrier's agreement name, such as an opening bracket.
        vendorPrivacySuffix: "》", // The suffix for the carrier's agreement name, such as a closing bracket.
        conectTexts: "['and','、','、']", // Connectors between agreement names, used in order. For example, [" and ", ", "]. Defaults to ["and", ",", ","].
        operatorIndex: "0", // The display order for the carrier's agreement. Default: 0 (first). Maximum: 3 (fourth).
        bottom: "20", // The offset from the bottom of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
        top: "400", // The offset from the top of the parent container. This has a lower priority than bottom. Do not add units. The default unit is dp for Android and pt for iOS.
        marginLR: "18", // The left and right margin for the agreement area (including the checkbox). Do not add units. The default unit is dp for Android and pt for iOS.
        alignment: "1", // The alignment of the agreement area (including the text). Valid values: 0 (left), 1 (center), 2 (right). Default: left.
        expandAuthPageCheckedScope:true,// For iOS only. Specifies whether to expand the tappable area of the checkbox to include its prefix text (for example, "I have read and agree"). Default: false.
      },
      setWebNavUi: {
        bgColor: "#CD1076", // The background color of the navigation bar on the agreement details page.
        textColor: "#EECFA1", // The color of the navigation bar title on the agreement details page.
        textSize: "30", // The font size of the navigation bar title on the agreement details page. Do not add units. The default unit is sp.
        returnImgPath: "/static/close_black.png", // The image path for the back button on the agreement page's navigation bar.
      },
      // Secondary pop-up properties.
      setPrivacyAlertUi:{
        needAutoLogin: true,// Specifies whether to log in automatically after the user clicks the confirm button.
        left:"0",// The horizontal offset of the pop-up. Do not add units. The default unit is dp for Android and pt for iOS.
        top:"0",// The vertical offset of the pop-up. Do not add units. The default unit is dp for Android and pt for iOS.
        radius:["0","0","0","0"],// The four corner radius values, in the order of top-left, bottom-left, bottom-right, top-right. Four values must be provided. If a value is <=0, the corner is sharp. Default: 0.
        width:"500",// The width of the pop-up. Do not add units. The default unit is dp for Android and pt for iOS.
        height:"400",// The height of the pop-up. Do not add units. The default unit is dp for Android and pt for iOS.
        alpha:1.0,// The opacity of the secondary pop-up. Range: 0.3 to 1.0.
        backgroundColor:"#01001C",// The background color of the secondary pop-up.
      },
      // Properties of the mask for the secondary pop-up.
       setPrivacyAlertMaskUi:{
        needShow: true,// Specifies whether to show the background mask.
        tapMaskClosed: true,// Specifies whether tapping the mask closes the pop-up.
        color:"#000000",// The color of the mask.
        alpha:0.3,// The opacity of the mask. Range: 0.3 to 1.0.
        },
      // The title bar of the secondary pop-up.
       setPrivacyAlertTitleUi:{
        backgroundColor:"#FFFFFF",// The background color of the title bar.
        left:"0",// The horizontal offset of the title bar. Do not add units. The default unit is dp for Android and pt for iOS.
        top:"0",// The vertical offset of the title bar. Do not add units. The default unit is dp for Android and pt for iOS.
        width:"",// For iOS only. The width of the title. Unit: pt.
        height:"",// For iOS only. The height of the title. Unit: pt.
        alignment:"", // For Android: 0 (left), 1 (center). For iOS: 0 (left), 1 (center), 2 (right), 3 (justified), 4 (natural).
        text:"Please read and agree to the following terms",// The title text.
        textSize:"18",// The font size of the title text. Do not add units. The default unit is dp for Android and pt for iOS.
        textColor:"#000000",// The color of the title text.
        },
      // The close button on the secondary pop-up.
      setPrivacyAlertCloseUi:{
        needShow:true,// Specifies whether to show the close button. Default: true.
        imagPath:"",// The image path for the close button.
        left:0,// For iOS only. The left margin. Unit: pt.
        top:0,// For iOS only. The top margin. Unit: pt.
        width:"30",// The width of the close button. Do not add units. The default unit is dp for Android and pt for iOS.
        height:"30",// The height of the close button. Do not add units. The default unit is dp for Android and pt for iOS.
        },
      // The agreement text content in the secondary pop-up.
     setPrivacyAlertContentUi:{
        backgroundColor:"#ffffff",// The background color of the agreement content area.
        textSize:"18",// The font size of the agreement text. Do not add units. The default unit is dp for Android and pt for iOS.
        alignment:"0",// The alignment of the agreement text. For Android: 0 (left), 1 (center). For iOS: 0 (left), 1 (center), 2 (right), 3 (justified), 4 (natural).
        left:"",// The horizontal margin. On Android, this applies to both sides. Do not add units. The default unit is dp for Android and pt for iOS.
        top:"",// The vertical margin. On Android, this applies to the top and bottom. Do not add units. The default unit is dp for Android and pt for iOS.
         width:"",// For iOS only. The width. Unit: pt.
        height:"",// For iOS only. The height. Unit: pt.
        baseColor:"#000000",// The color of the non-link part of the agreement text.
        protocolColor:"#FFB5C5",// The color of the rich text (link) part of the agreement.
        privacyAlertOperatorColor:"#FFB5C5",// Sets a specific color for the carrier's agreement link. This has the highest priority. If this is set, protocolColor is ignored. If this is not set, the value of protocolColor is used.
        privacyAlertOneColor:"#FFB5C5",// Sets a specific color for the first agreement link. This has the highest priority. If this is set, protocolColor is ignored. If this is not set, the value of protocolColor is used.
        privacyAlertTwoColor:"#FFB5C5",// Sets a specific color for the second agreement link. This has the highest priority. If this is set, protocolColor is ignored. If this is not set, the value of protocolColor is used.
        privacyAlertThreeColor:"#FFB5C5",// Sets a specific color for the third agreement link. This has the highest priority. If this is set, protocolColor is ignored. If this is not set, the value of protocolColor is used.
        privacyAlertBeforeText:"Agreement prefix",// The prefix for the entire agreement text.
        privacyAlertEndText:"Agreement suffix"// The suffix for the entire agreement text.
        },
      // The confirm button on the secondary pop-up.
      setPrivacyAlertConfirmUi:{
        left:"",// The left margin. Do not add units. The default unit is dp for Android and pt for iOS.
        top:"",// The top margin. Do not add units. The default unit is dp for Android and pt for iOS.
        width:"200",// The width of the confirm button. Do not add units. The default unit is dp for Android and pt for iOS.
        height:"100",// The height of the confirm button. Do not add units. The default unit is dp for Android and pt for iOS.
        text:"Agree",// The text on the confirm button.
        imgPath:"",// The background image path for the confirm button. To specify different images for normal and clicked states, use activeImgPath and highlightedImgPath.
        activeImgPath:"",// Sets the image for the default state. This does not take effect if imgPath is set. This must be set with highlightedImgPath to take effect.
        highlightedImgPath:"",// Sets the image for the highlighted (clicked) state. This does not take effect if imgPath is set. This must be set with activeImgPath to take effect.
        color:"#FF7F00",// If no image path is set, this color is used as the button's background.
        textColor:"#000000",// The color of the button text.
        highlightedTextColor:"#000000",// The color of the button text when clicked.
        textSize:"18",// The font size of the button text. Default: 18. Do not add units. The default unit is dp for Android and pt for iOS.
        },   
    },
    widgets: [{
        widgetId: "widgetId-003", // The control ID.
        type: "Text", // The control type. Text is not clickable.
        alignment: "1", // The text alignment (0: Left, 1: Center, 2: Right).
        textContent: "This is a line of text", // The text to display.
        textSize: "13", // The font size. Do not add units. The default unit is sp for Android and pt for iOS.
        textColor: "#FFFFFF", // The text color.
        backgroundColor: "#EE6A50", // The background color of the control.
        left: "20", // The offset from the left of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
        top: "20", // The offset from the top of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
        right: "20", // The offset from the right of the parent container. This has a lower priority than left. Do not add units. The default unit is dp for Android and pt for iOS.
        bottom: "20", // The offset from the bottom of the parent container. This has a lower priority than top. Do not add units. The default unit is dp for Android and pt for iOS.
        width: "30", // The width of the control. Do not add units. The default unit is dp for Android and pt for iOS.
        height: "30", // The height of the control. Do not add units. The default unit is dp for Android and pt for iOS.
      },
      {
        widgetId: "widgetId-002", // The control ID. It is returned in the callback when the control is clicked.
        type: "Button", // The control type. Buttons are clickable.
        alignment: "1", // The text alignment (0: Left, 1: Center, 2: Right).
        textContent: "This is a button", // The button text.
        textSize: "13", // The font size. Do not add units. The default unit is sp for Android and pt for iOS.
        textColor: "#FFFFFF", // The text color.
        backgroundColor: "#EE6A50", // The background color of the control.
        backgroundImage: "static/qq.png", // The resource path of the button's background image.
        activeImgPath:"",// This does not take effect if backgroundImage is set. It must be set with highlightedImgPath to take effect.
        highlightedImgPath:"",// This does not take effect if backgroundImage is set. It must be set with activeImgPath to take effect.
        left: "20", // The offset from the left of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
        top: "20", // The offset from the top of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
        right: "20", // The offset from the right of the parent container. This has a lower priority than left. Do not add units. The default unit is dp for Android and pt for iOS.
        bottom: "20", // The offset from the bottom of the parent container. This has a lower priority than top. Do not add units. The default unit is dp for Android and pt for iOS.
        width: "30", // The width of the control. Do not add units. The default unit is dp for Android and pt for iOS.
        height: "30", // The height of the control. Do not add units. The default unit is dp for Android and pt for iOS.
      },
      {
        widgetId: "widgetId-001", // The control ID.
        type: "Image", // The control type. Images are not clickable.
        imgPath: "static/qq.png", // The resource path of the image.
        mode: "0", // The image scaling or cropping mode. Default: 0 (scaleToFill: 0, aspectFit: 1, aspectFill: 2).
        backgroundColor: "#EE6A50", // The background color of the control.
        left: "20", // The offset from the left of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
        top: "20", // The offset from the top of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
        right: "20", // The offset from the right of the parent container. This has a lower priority than left. Do not add units. The default unit is dp for Android and pt for iOS.
        bottom: "20", // The offset from the bottom of the parent container. This has a lower priority than top. Do not add units. The default unit is dp for Android and pt for iOS.
        width: "30", // The width of the control. Do not add units. The default unit is dp for Android and pt for iOS.
        height: "30", // The height of the control. Do not add units. The default unit is dp for Android and pt for iOS.
      }
    ],
    privacyAlertWidgets: [{
      widgetId: "privacyAlertWidgetId-001",// The control ID.
      type: "Button",// The control type. Buttons are clickable.
      textContent:"Cancel",// The button text.
      textSize:18, // The font size. Do not add units. The default unit is sp for Android and pt for iOS.
      textColor:"#000000",// The font color.
      highlightedTextColor:"#000000",// The font color when clicked.
      borderColor:"#FF7F00",// The border color. For iOS only.
      borderWidth:1,// The border width. For iOS only.
      backgroundColor:"#FFFFFF",
      // Priority: backgroundImage > (activeImgPath and highlightedImgPath are not empty) > backgroundColor.
      backgroundImage:"",// The path of the background image.
      activeImgPath:"",// This does not take effect if backgroundImage is set. It must be set with highlightedImgPath to take effect.
      highlightedImgPath:"",// This does not take effect if backgroundImage is set. It must be set with activeImgPath to take effect.
      left: "40",// The left margin. Do not add units. The default unit is dp for Android and pt for iOS.
      top: "40",// The top margin. Do not add units. The default unit is dp for Android and pt for iOS.
      width: "150",// The button width. Do not add units. The default unit is dp for Android and pt for iOS.
      height: "50"// The button height. Do not add units. The default unit is dp for Android and pt for iOS.
    },
    {
      widgetId: "privacyAlertWidgetId-002", // The control ID.
      type: "Text", // The control type. Text is not clickable.
      alignment: "1", // The text alignment (0: Left, 1: Center, 2: Right).
      textContent: "This is a line of text", // The text to display.
      textSize: "13", // The font size. Do not add units. The default unit is sp for Android and pt for iOS.
      textColor: "#FFFFFF", // The text color.
      backgroundColor: "#EE6A50", // The background color of the control.
      left: "20", // The offset from the left of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
      top: "20", // The offset from the top of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
      right: "20", // The offset from the right of the parent container. This has a lower priority than left. Do not add units. The default unit is dp for Android and pt for iOS.
      bottom: "20", // The offset from the bottom of the parent container. This has a lower priority than top. Do not add units. The default unit is dp for Android and pt for iOS.
      width: "30", // The width of the control. Do not add units. The default unit is dp for Android and pt for iOS.
      height: "30", // The height of the control. Do not add units. The default unit is dp for Android and pt for iOS.
    },
    {
      widgetId: "privacyAlertWidgetId-003", // The control ID.
      type: "Image", // The control type. Images are not clickable.
      imgPath: "static/qq.png", // The resource path of the image.
      mode: "0", // The image scaling or cropping mode. Default: 0 (scaleToFill: 0, aspectFit: 1, aspectFill: 2).
      backgroundColor: "#EE6A50", // The background color of the control.
      left: "20", // The offset from the left of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
      top: "20", // The offset from the top of the parent container. Do not add units. The default unit is dp for Android and pt for iOS.
      right: "20", // The offset from the right of the parent container. This has a lower priority than left. Do not add units. The default unit is dp for Android and pt for iOS.
      bottom: "20", // The offset from the bottom of the parent container. This has a lower priority than top. Do not add units. The default unit is dp for Android and pt for iOS.
      width: "30", // The width of the control. Do not add units. The default unit is dp for Android and pt for iOS.
      height: "30", // The height of the control. Do not add units. The default unit is dp for Android and pt for iOS.
    }]
}

getVersion

Parameters:getVersion(callback)

Parameter

Type

Description

callback(version)

Function

A callback function that receives the following argument:

version: The version string of the Alibaba Cloud Phone Number Verification SDK.

Example

aLiSDKModule.getVersion((version) => {
  console.log("Current SDK version: " + version);
});

checkEnvAvailable

Checks whether the current environment supports one-click logon or phone number verification.

Parameters:`checkEnvAvailable(authType, callback)`

Parameter

Type

Description

authType

Number

The check type:

1: Check the environment for phone number verification.
2: Check the environment for one-click logon.

callback(args)

Function

A callback function that receives an object with the following structure:

resultCode: A value of 600000 indicates that the method call was successful and the environment supports one-click logon or phone number verification.
msg: A descriptive message.

Example

aLiSDKModule.checkEnvAvailable(2, (result) => {
  if ("600000" == result.resultCode) {
    uni.navigateTo({
      animationDuration: 300,
      url: "../login/login",
    });
  } else {
    console.log("The current environment does not support one-click logon. result = ", JSON.stringify(result));
    uni.showToast({
      icon: "none",
      title: result.msg,
      duration: 3000,
    });
  }
});

getCurrentCarrierName

Parameters:`getCurrentCarrierName(callback)`

Parameter

Type

Description

callback(carrierName)

Function

A callback function that receives the following argument:

carrierName: The name of the current carrier.

China Mobile: CMCC

China Unicom: CUCC

China Telecom: CTCC

Example

aLiSDKModule.getCurrentCarrierName((carrierName) => {
  console.log("Current carrier: " + carrierName);
});

expandAuthPageCheckedScope

For Android only. Expands the tappable area of the checkbox to include its prefix text (for example, "I have read and agree"). Valid values: true (expand), false (do not expand). Default: false.

Example

aLiSDKModule.expandAuthPageCheckedScope(true)

closeAuthPageReturnBack

For Android only. Disables the physical back button on the authorization page. Valid values: true (disable), false (do not disable). Default: false.

Example

aLiSDKModule.closeAuthPageReturnBack(true)

userControlAuthPageCancel

For Android only. Differentiates between the UI back button and the physical back button on the authorization page.

Example

aLiSDKModule.userControlAuthPageCancel()

setAuthPageUseDayLight

For Android only. Specifies whether the authorization page follows the system's dark/night mode. Valid values: true (follow), false (do not follow). Default: false.

Example

aLiSDKModule.setAuthPageUseDayLight(true)

Appendix: Weex background compilation

Use a development tool or Weex Playground to create an nvue page.
Use the weex compile command to compile the .vue file into a .js file. Example: $ weex compile src/index.vue build
Place the compiled .js file in your project's static directory. Then, set the weexJsPath or weexJsUrl field in the authorization page theme configuration (uiConfig > setBackgroundUi) to use the compiled JS file as the authorization page background.

Background information

uni-app native plugin

Add the plugin to your project

Create an authentication scheme

Interaction flow

Methods

Import method

setAuthSDKInfo

accelerateLoginPage

Parameters

Example

getLoginToken

Parameters

Authorization page event codes

Example

quitLoginPage

hideLoginLoading

Theme configuration

getVersion

checkEnvAvailable

Parameters:checkEnvAvailable(authType, callback)

Example

getCurrentCarrierName

Parameters:getCurrentCarrierName(callback)

expandAuthPageCheckedScope

Example

closeAuthPageReturnBack

Example

userControlAuthPageCancel

Example

setAuthPageUseDayLight

Example

Appendix: Weex background compilation

Parameters:`checkEnvAvailable(authType, callback)`

Parameters:`getCurrentCarrierName(callback)`