How to integrate one-click login in a HarmonyOS client, including available interfaces-Phone Number Verification Service(PNVS)-阿里云帮助中心

This document explains how to integrate one-click login into a HarmonyOS client and provides interface usage examples.

Important

The one-click logon service works only when cellular data is enabled and the application has permission to use the cellular network.
The number retrieval request consumes a small amount of data.
China Mobile supports 2G, 3G, 4G, and 5G data networks. On 2G and 3G networks, latency is higher and the success rate is lower than on 4G networks.
China Telecom supports 4G and 5G data networks, but not 2G or 3G.
China Unicom supports 3G, 4G, and 5G data networks, but not 2G.

Procedure

Get the SDK

Log in to the Phone Number Verification Service console. On the overview page, in the API & SDK section on the right, click Download Now. On the API & SDK page, select Phone Number Verification Service for HarmonyOS.

Import the project

Create or open your project in DevEco Studio.
Extract the downloaded package and copy the .har file to the libs directory in your project.
Add the SDK dependency to the oh_package.json5 file in your module:
Note: This is the oh_package.json5 file in the module, not the one in the project's root directory. For example, refer to the demo project in the package.
```
"dependencies": {
    "numberauth_standard": "file:libs/auth_number_product-2.0.1-log-online-standard-release.har"
  }
```

Configure permissions

Edit the module.json5 file to configure the required permissions for the SDK:

    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.GET_NETWORK_INFO"
      },
      {
        "name": "ohos.permission.SET_NETWORK_INFO"
      }
    ]

Permission	Description
INTERNET	Lets your application connect to the internet to access the gateway and authentication server.
GET_NETWORK_INFO	Lets your application get the network status to determine the connection type, such as cellular data or Wi-Fi.
SET_NETWORK_INFO	Lets your application configure the cellular data network. This permission is required to switch to the cellular network for number retrieval.

Request a certification scheme key

API calls require a scheme code and a key. To obtain them, go to the Phone Number Verification Service console and create a certification scheme. You will need to provide your app name, package name, package signature, and AppId.

Get the signature

Use the following HarmonyOS code to get the package name, package signature, and AppId.

bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_SIGNATURE_INFO).then((bundleInfo) => {
  const packageName = bundleInfo.name
  console.log("numberauth:pagname:" + packageName)
  const sign = bundleInfo.signatureInfo.fingerprint
  console.log("numberauth:sign:" + sign)
  const appIdentifier = bundleInfo.signatureInfo.appIdentifier
  console.log("numberauth:appid:" + appIdentifier)
})

Sign your app

If you have not yet signed your new project, use the automatic signing feature in DevEco Studio:

To use automatic signing, click the Project Structure icon in the upper-right corner of the IDE:
In the dialog, navigate to Project > Signing Configs and select the Automatically generate signature checkbox. Wait for the process to complete, and then click OK.

For more information about configuring app signatures for HarmonyOS apps, see the official HarmonyOS documentation.

Interaction flow

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

SDK methods

Required: Create an entry point instance

PhoneNumberAuthHelper is the entry point of the SDK. All API calls must be made through PhoneNumberAuthHelper.

Method signature

public static getInstance(context: Context, listener: TokenResultListener): PhoneNumberAuthHelper;

Parameters:

Parameter	Type	Description
context	Context	The application context.
listener	TokenResultListener	A callback to monitor the authentication flow.

Usage example

class TokenListener implements TokenResultListener {
    private page: Index

    constructor(page: Index) {
        this.page = page;
    }

    onSuccess(msg: string): void {
        console.log("auth:onSuccess:" + msg)
        const result: object = JSON.parse(msg)
        const code = result['_code'] + ''
        const token = result['_token'] + ''
        if (code === "600000") {
            this.page.quitLoginPage()
        }
    }

    onFailure(ret: string): void {
        console.log("auth:onFailure:" + ret)
        this.page.updateAuth()
    }
}

let listener = new TokenListener(this)
this.helper = PhoneNumberAuthHelper.getInstance(getContext(this), listener)

Required: Configure the authorization page UI

public  setAuthConfig(config: AuthUiConfig): void;

Parameters:

Parameter	Type	Description
config	AuthUiConfig	A configuration object that contains the UI parameters for the authorization page and secondary pop-up. For more information, see UI Page API Reference.

Required: Set the secret key

public setAuthSDKInfo(secretInfo: string): void

Parameters:

Parameter	Type	Description
secretInfo	string	The SDK secret key. You can obtain it by creating an authentication scheme in the Phone Number Verification Service console.

Required: Retrieve the token

Authorization request

When you call this method, the SDK displays the authorization page. After the user grants authorization, the SDK returns a token to your app.

// Timeout duration in milliseconds.
public getLoginToken(totalTime: number): Promise<void>;

Parameters:

Parameter	Type	Description
totalTime	number	The timeout duration in milliseconds.

Usage example

this.helper.getLoginToken(5000)

The method returns the result through the TokenResultListener callback:

class TokenListener implements TokenResultListener {
    private page: Index

    constructor(page: Index) {
        this.page = page
    }

    onSuccess(msg: string): void {
        console.log("auth:onSuccess:" + msg)
        const result: object = JSON.parse(msg)
        const code = result['_code'] + ''
        const token = result['_token'] + ''
        if (code === "600000") {
            this.page.quitLoginPage()
        }
    }

    onFailure(ret: string): void {
        console.log("auth:onFailure:" + ret)
        this.page.updateAuth()
    }
}

Required: Clear the flow callback listener

After the flow completes, call this method to clear the listener and prevent unnecessary background processing.

public clearAuthListener():void

Optional: Exit the authorization page

After the authorization page appears, call this method to exit.

public quitLoginPage(): Promise<void>;

Use this method to close the authorization page, end the Phone Number Verification Service session, and switch to your custom login UI.

For example, the demo (path shown in the figure below) uses a custom logo component to set the logo image and position. Clicking the logo closes the authorization page and invokes custom login logic, which allows the user to switch to other login methods. To download the demo, see HarmonyOS Client Demo.

146192785d5eebab39d64f5f8dc6ac4c

Optional: Set the callback listener

Adds or updates the listener for the authentication flow.

public setAuthListener(listener: TokenResultListener): void

Parameters:

Parameter	Type	Description
listener	TokenResultListener	The listener to add or update.

Optional: Check the runtime environment

This method checks if the device's runtime environment is suitable for the SDK and returns the result in the callback.

public checkEnvAvailable(type: number): void

Parameters:

Parameter

Type

Description

type

number

The SDK feature type. Valid values:

1: local phone number verification
2: one-click login

Optional: Get carrier type

Returns the carrier type of the default data SIM card.

public getCurrentCarrierName(): String

Return value description: CMCC: China Mobile; CUCC: China Unicom; CTCC: China Telecom.

Optional: Accelerate one-click login (pre-fetch)

We recommend that you call this interface in advance to quickly bring up the authorization page. Bringing up the authorization page requires a successful pre-fetch. If you do not call this interface in advance and instead call the getlogintoken interface directly, the SDK automatically calls the pre-fetch interface first, which causes a noticeable delay before the authorization page appears.

When to call this method

We recommend that you call this interface 2 to 3 seconds before you call the getlogintoken interface, because this interface requires 1 to 3 seconds to obtain a temporary credential.
Call this method only for users who are not logged in.
Do not call this method frequently, repeatedly, or while or after the authorization page appears.
If the login process starts immediately after the app launches, you do not need to call this method.

Usage example:

class PreListener implements PreLoginResultListener {
    onTokenSuccess(vendor: string): void {
        throw new Error('Method not implemented.');
    }

    onTokenFailed(vendor: string, ret: string): void {
        throw new Error('Method not implemented.');
    }
}

let preListener = new PreListener();
this.helper.accelerateLoginPage(5000, preListener);

Parameters:

public accelerateLoginPage(overdueTimeMills: number, listener: PreLoginResultListener): void

Parameter	Type	Description
overdueTimeMills	number	The timeout duration, in milliseconds.
listener	PreLoginResultListener	The callback listener.

Optional: Set dialog mode

Sets the SDK to display the authorization page and agreement details pages in dialog mode.

public setDialog(isDialog: boolean): void

Parameters:

Parameter

Type

Description

isDialog

boolean

Specifies whether to enable dialog mode. Valid values:

true: Enabled
false: Disabled

Optional: Set a UI click listener

Sets a listener for click events on the authorization page and the secondary pop-up.

public setUIClickListener(listener: AuthUIControlClickListener): void

Parameters:

Parameter	Type	Description
listener	AuthUIControlClickListener	The callback listener for click events.

Optional: Check the agreement checkbox state

Use this method to check if the agreement checkbox on the authorization page is selected. Based on the state, you can display a message or a secondary privacy agreement pop-up.

public queryCheckBoxIsChecked(): boolean

UI page API

Create authorization page

This section details the authorization page for the Phone Number Verification Service HarmonyOS Edition.

If you use custom agreements, ensure that the HTML for the details page of all custom agreements configured in the privacy section contains a populated <title> tag. If the <title> tag is not configured, the page's URL is displayed as the title, which impairs the user experience.

Navigation bar

Parameter	Type	Description
windowBarProperties	window.SystemBarProperties	Sets the top status bar for the authorization page and agreement details page.

Screen orientation

Parameter

Description

Type

Default

pageScreenOrientation

Configures the screen orientation.

PageOrientation

Defaults to portrait mode: PageOrientation.PORTRAIT.

Portrait: PageOrientation.PORTRAIT
Landscape: PageOrientation.LANDSCAPE

Dialog mode

Parameter	Description	Type	Default
dialogAlignment	The alignment of the authorization page in dialog mode.	DialogAlignment	Center alignment: `DialogAlignment.Center`
dialogWidth	The width of the authorization page in dialog mode.	Length	'80%'
dialogHeight	The height of the authorization page in dialog mode.	Length	'60%'
dialogAutoCancel	Specifies whether tapping the area outside the dialog automatically closes the page.	boolean	Defaults to `false`. `true`: The page closes automatically. `false`: The page does not close automatically.

Number mask

Parameter	Type	Description
numberMargin	Margin	Sets the margin for the number mask.
numberFontSize	number	Sets the font size for the number mask.
numberFontColor	ResourceColor	Sets the font color for the number mask.
numberHeight	Length	Sets the height of the number mask container.
numberAlignRuleOption	AlignRuleOption	Sets the relative layout alignment rules for the number mask container.

Login button

Parameter	Type	Description
loginBtnText	string	Sets the text of the login button.
loginBtnMargin	Margin	Sets the offset of the login button.
loginBtnPadding	Padding	Sets the padding of the login button.
loginBtnFontSize	number	Sets the font size of the login button text.
loginBtnFontColor	ResourceColor	Sets the font color of the login button text in its enabled state.
loginBtnDisableFontColor	ResourceColor	Sets the font color of the login button text in its disabled state.
loginBtnWidth	Length	Sets the width of the login button.
loginBtnHeight	Length	Sets the height of the login button.
loginBtnBackGroundColor	ResourceColor	Sets the background color of the login button in its enabled state.
loginBtnDisableBackGroundColor	ResourceColor	Sets the background color of the login button in its disabled state.
loginBtnBorder	Length \| BorderRadiuses \| LocalizedBorderRadiuses	Configures the border of the login button.
loginBtnBorderWidth	Length	Sets the border width of the login button in its enabled state.
loginBtnDisableBorderWidth	Length	Sets the border width of the login button in its disabled state.
loginBtnBorderColor	ResourceColor	Sets the border color of the login button in its enabled state.
loginBtnDisableBorderColor	ResourceColor	Sets the border color of the login button in its disabled state.
loginBtnBackGroundImage	Resource	Sets the background image of the login button in its enabled state. Note The path to the media resource. Do not include the file extension. For example, if the image path is `resources/media/test.png`, set the parameter to "test", like this: `loginBtnBackGroundImage=$r('app.media.test')`. This property takes effect only when configured with `loginBtnDisableBackGroundImage`.
loginBtnDisableBackGroundImage	Resource	Sets the background image of the login button in its disabled state. Note This property takes effect only when configured with `loginBtnBackGroundImage`.
loginBtnAlignRuleOption	AlignRuleOption	Sets the relative layout alignment rules for the login button.

Privacy section

General settings:

Parameter	Type	Description
privacyFontColor	ResourceColor	The font color for the carrier agreement text.
privacyFontSize	number	The font size of the carrier agreement text.
privacyMargin	Margin	The offset of the privacy section.
privacyAlignRuleOption	AlignRuleOption	The relative layout alignment rules for the privacy section.

Checkbox settings:

privacyCbUnSelectImg	Resource	Sets the image for the checkbox in its unchecked state. No default image is provided.
privacyCbSelectImg	Resource	Sets the image for the checkbox in its checked state. No default image is provided.
privacyCbWidth	Length	The width of the checkbox.
privacyCbHeight	Length	The height of the checkbox.
privacyCbMargin	Margin	The margin of the checkbox.
privacyCbIsOn	boolean	Specifies whether the checkbox is checked by default.
privacyCbSelectColor	ResourceColor	The color of the checkbox when it is checked.
privacyCbAlignRuleOption	AlignRuleOption	The relative layout alignment rules for the checkbox.
privacyCbShape	CheckBoxShape	The shape of the checkbox.
privacyCbTipText	string	Sets the text for the toast that appears when a user taps the login button without selecting the checkbox. This toast is shown only if no secondary dialog is configured. By default, no text is specified.

Other:

Notes on configuring custom agreements:

Configure the <title> property in the HTML of the agreement details page, for example, <title>User Service and Privacy Agreement</title>. If you have multiple custom agreements, you must configure the <title> property for each one.

If a <title> is not configured on the agreement details page or the <title> cannot be retrieved correctly, the agreement URL is displayed at the top of the page, which is not visually appealing.

privacySpanBeforeText	string	The text displayed before the agreement links.
privacySpanBeforeFontSize	number	The font size of the text displayed before the agreement links.
privacySpanBeforeFontColor	ResourceColor	The font color of the text displayed before the agreement links.
privacySpanBeforeFontWeight	FontWeight	The font weight of the text displayed before the agreement links. The default value is `FontWeight.Normal`.
privacySpanEndText	string	The text displayed after the agreement links.
privacySpanEndFontSize	number	The font size of the text displayed after the agreement links.
privacySpanEndFontColor	ResourceColor	The font color of the text displayed after the agreement links.
privacySpanEndFontWeight	FontWeight	The font weight of the text displayed after the agreement links. The default value is `FontWeight.Normal`.
privacyOperatorIndex	OperatorIndex	Sets the position of the carrier agreement link: Before custom agreements: `OperatorIndex.BEGIN` After custom agreements: `OperatorIndex.END`
vendorPrivacyPrefix	string	Sets the opening symbol for carrier and built-in privacy agreement links, such as `《`. The value must be a single character and form a matching pair with `vendorPrivacySuffix`. Valid pairs are: `<>`, `()`, `《》`, `【】`, `『』`, `[]`, or `（）`.
vendorPrivacySuffix	string	Sets the closing symbol for carrier and built-in privacy agreement links, such as `》`. The value must be a single character and form a matching pair with `vendorPrivacyPrefix`. Valid pairs are: `<>`, `()`, `《》`, `【】`, `『』`, `[]`, or `（）`.
privacySpanOneText	string	The first custom agreement text. On the authorization page, clicking the agreement text `privacySpanOneText` redirects you to the configured URL for `privacySpanOneUrl the first custom agreement URL`.
privacySpanOneUrl	string	The URL for the first custom agreement.
privacySpanOneFontSize	number	The font size of the first custom agreement text.
privacySpanOneFontColor	ResourceColor	The font color of the first custom agreement text.
privacySpanTwoText	string	Sets the display text for the second custom agreement link. Tapping this text redirects the user to the URL defined in `privacySpanTwoUrl`.
privacySpanTwoUrl	string	The URL for the second custom agreement.
privacySpanTwoFontSize	number	The font size of the second custom agreement text.
privacySpanTwoFontColor	ResourceColor	The font color of the second custom agreement text.
privacySpanThreeText	string	Sets the display text for the third custom agreement link. Tapping this text redirects the user to the URL defined in `privacySpanThreeUrl`.
privacySpanThreeUrl	string	The URL for the third custom agreement.
privacySpanThreeFontSize	number	The font size of the third custom agreement text.
privacySpanThreeFontColor	ResourceColor	The font color of the third custom agreement text.

Agreement details page

Parameter	Type	Description
navFontColor	ResourceColor	Sets the font color for the title bar on the agreement details page. The default value is `Color.Black`.
navFontSize	number	Sets the font size for the title bar on the agreement details page. The default value is `16`.

Custom component

Parameter	Type	Description
loginPageComponent	WrappedBuilder<[]>	Specifies a custom component for the authorization page. For implementation details, see the demo.
clauseComponent	WrappedBuilder<[]>	Specifies a custom component for the agreement details page. For implementation details, see the demo.

To add an "Other login methods" option at the bottom of the authorization page, you can use a custom component and the quitLoginPage method. For a detailed example, see Optional method: Exit the authorization page.

Secondary pop-up

The secondary pop-up appears when the agreement checkbox on the authorization page is not selected:

Pop-up properties

Parameter	Description	Type	Default
needShowPrivacyAlert	Controls whether the secondary pop-up is displayed.	boolean	Defaults to `true`. `true`: Displays the pop-up. `false`: Does not display the pop-up.
privacyAlertWidth	The width of the secondary pop-up.	Length	90%
privacyAlertHeight	The height of the secondary pop-up.	Length	60%
privacyAlertBackgroundColor	The background color of the secondary pop-up.	ResourceColor	#FFFFFFFF (white)
privacyAlertBorderRadius	The border radius of the secondary pop-up.	Length \| BorderRadiuses \| LocalizedBorderRadiuses	{ topLeft: 10, topRight: 10, bottomLeft:10, bottomRight:10 }
privacyAlertAutoCancel	Controls whether tapping outside the pop-up dismisses it.	boolean	Defaults to `false`. `false`: Does not dismiss the pop-up. `true`: Dismisses the pop-up.
privacyAlertAlignment	The alignment of the secondary pop-up.	DialogAlignment	`DialogAlignment.Bottom` (bottom)
privacyAlertMaskColor	The mask color of the secondary pop-up.	ResourceColor	#22000000
privacyAlertTransition	The transition animation of the secondary pop-up.	TransitionEffect	`TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 100 })` (Slides in from the bottom)

Title bar properties

Parameter	Description	Type	Default
privacyAlertTitleText	The title text of the secondary pop-up.	string	Please read and agree to the following terms
privacyAlertTitleFontColor	The font color of the title text.	ResourceColor	`Color.Black` (black)
privacyAlertTitleFontSize	The font size of the title text.	number	22
privacyAlertTitleFontWeight	The font weight of the title text.	FontWeight	`FontWeight.Normal`

Agreement section properties

Parameter	Description	Type	Default
privacyAlertContentVisibility	Controls the visibility of the agreement text.	Visibility	`Visibility.Visible` (visible)
privacyAlertContentLineHeight	The line height of the agreement text.	number \| string \| Resource	24
privacyAlertContentMargin	The margin of the agreement text.	Margin	{ left: 20, top:40, right: 20 };
privacyAlertContentAlignRuleOption	The relative position of the agreement text.	AlignRuleOption	{ top: { anchor: 'prvacy_title', align: VerticalAlign.Bottom }, middle: { anchor: '__container__', align: HorizontalAlign.Center }, } (Below the title bar)
privacyAlertOperatorFontColor	The font color of the operator agreement text.	ResourceColor	`Color.Black` (black)
privacyAlertOperatorFontSize	The font size of the operator agreement text.	number	16
privacyAlertOperatorFontWeight	The font weight of the operator agreement text.	FontWeight	`FontWeight.Normal`
privacyAlertSpanBeforeText	The prefix text for the agreements.	string	I have read and agree to
privacyAlertSpanBeforeFontSize	The font size of the prefix text.	number	16
privacyAlertSpanBeforeFontWeight	The font weight of the prefix text.	FontWeight	`FontWeight.Normal`
privacyAlertSpanBeforeFontColor	The font color of the prefix text.	ResourceColor	`Color.Black` (black)
privacyAlertSpanOneText	The text for the first custom agreement.	string	''
privacyAlertSpanOneUrl	The URL for the first custom agreement.	string	''
privacyAlertSpanOneFontWeight	The font weight of the first custom agreement text.	FontWeight	`FontWeight.Normal`
privacyAlertSpanOneFontSize	The font size of the first custom agreement text.	number	16
privacyAlertSpanOneFontColor	The font color of the first custom agreement text.	ResourceColor	`Color.Black` (black)
privacyAlertSpanTwoText	The text for the second custom agreement.	string	''
privacyAlertSpanTwoUrl	The URL for the second custom agreement.	string	''
privacyAlertSpanTwoFontWeight	The font weight of the second custom agreement text.	FontWeight	`FontWeight.Normal`
privacyAlertSpanTwoFontSize	The font size of the second custom agreement text.	number	16
privacyAlertSpanTwoFontColor	The font color of the second custom agreement text.	ResourceColor	`Color.Black` (black)
privacyAlertSpanThreeText	The text for the third custom agreement.	string	''
privacyAlertSpanThreeUrl	The URL for the third custom agreement.	string	''
privacyAlertSpanThreeFontWeight	The font weight of the third custom agreement text.	FontWeight	`FontWeight.Normal`
privacyAlertSpanThreeFontSize	The font size of the third custom agreement text.	number	16
privacyAlertSpanThreeFontColor	The font color of the third custom agreement text.	ResourceColor	`Color.Black` (black)
privacyAlertSpanEndText	The suffix text for the agreements.	string	''
privacyAlertSpanEndFontSize	The font size of the suffix text.	number	16
privacyAlertSpanEndFontWeight	The font weight of the suffix text.	FontWeight	`FontWeight.Normal`
privacyAlertSpanEndFontColor	The font color of the suffix text.	ResourceColor	`Color.Black` (black)

Confirm button properties

Parameter	Description	Type	Default
privacyAlertConfirmBtnText	The text of the confirm button.	string	OK
privacyAlertConfirmBtnMargin	The margin of the confirm button.	Margin	{ left:'40vp', }
privacyAlertConfirmBtnPadding	The padding of the confirm button.	Padding	{}
privacyAlertConfirmBtnFontSize	The font size of the confirm button text.	number	18
privacyAlertConfirmBtnVisibility	Controls the visibility of the confirm button.	Visibility	`Visibility.Visible` (visible)
privacyAlertConfirmBtnWidth	The width of the confirm button.	Length	'32%'
privacyAlertConfirmBtnHeight	The height of the confirm button.	Length	'48vp'
privacyAlertConfirmBtnBorder	The border of the confirm button.	Length \| BorderRadiuses \| LocalizedBorderRadiuses	'4vp'
privacyAlertConfirmBtnAlignRuleOption	The relative position of the confirm button.	AlignRuleOption	{ center: { anchor: '__container__', align: VerticalAlign.Center }, left:{anchor:'__container__',align:HorizontalAlign.Start} }
privacyAlertConfirmBtnFontColor	The text color of the confirm button when tapped.	ResourceColor	`Color.Black` (black)
privacyAlertConfirmBtnDisableFontColor	The text color of the confirm button when disabled.	ResourceColor	`Color.Gray`
privacyAlertConfirmBtnBackGroundColor	The background color of the confirm button when tapped.	ResourceColor	#3791EC
privacyAlertConfirmBtnDisableBackGroundColor	The background color of the confirm button when disabled.	ResourceColor	#80BDF4
privacyAlertConfirmBtnBackGroundImage	The background image of the confirm button when tapped.	Resource	None
privacyAlertConfirmBtnDisableBackGroundImage	The background image of the confirm button when disabled.	Resource	None
privacyAlertConfirmBtnBorderWidth	The border width of the confirm button when tapped.	Length	'1vp'
privacyAlertConfirmBtnDisableBorderWidth	The border width of the confirm button when disabled.	Length	'1vp'
privacyAlertConfirmBtnBorderColor	The border color of the confirm button when tapped.	ResourceColor	`Color.White`
privacyAlertConfirmBtnDisableBorderColor	The border color of the confirm button when disabled.	ResourceColor	`Color.Gray`

Cancel button properties

Parameter	Description	Type	Default
privacyAlertCancelBtnText	The text of the cancel button.	string	Cancel
privacyAlertCancelBtnMargin	The margin of the cancel button.	Margin	{ left:'50vp', }
privacyAlertCancelBtnPadding	The padding of the cancel button.	Padding	{}
privacyAlertCancelBtnFontSize	The font size of the cancel button text.	number	18
privacyAlertCancelBtnVisibility	Controls the visibility of the cancel button.	Visibility	`Visibility.Visible` (visible)
privacyAlertCancelBtnWidth	The width of the cancel button.	Length	'32%'
privacyAlertCancelBtnHeight	The height of the cancel button.	Length	'48vp'
privacyAlertCancelBtnBorder	The border of the cancel button.	Length \| BorderRadiuses \| LocalizedBorderRadiuses	'4vp'
privacyAlertCancelBtnAlignRuleOption	The relative position of the cancel button.	AlignRuleOption	{ center: { anchor: '__container__', align: VerticalAlign.Center }, left:{anchor:'confirmBtn',align:HorizontalAlign.End} };
privacyAlertCancelBtnFontColor	The text color of the cancel button when tapped.	ResourceColor	`Color.Black` (black)
privacyAlertCancelBtnDisableFontColor	The text color of the cancel button when disabled.	ResourceColor	`Color.Gray`
privacyAlertCancelBtnBackGroundColor	The background color of the cancel button when tapped.	ResourceColor	#3791EC
privacyAlertCancelBtnDisableBackGroundColor	The background color of the cancel button when disabled.	ResourceColor	#80BDF4
privacyAlertCancelBtnBackGroundImage	The background image of the cancel button when tapped.	Resource	None
privacyAlertCancelBtnDisableBackGroundImage	The background image of the cancel button when disabled.	Resource	None
privacyAlertCancelBtnBorderWidth	The border width of the cancel button when tapped.	Length	'1vp'
privacyAlertCancelBtnDisableBorderWidth	The border width of the cancel button when disabled.	Length	'1vp'
privacyAlertCancelBtnBorderColor	The border color of the cancel button when tapped.	ResourceColor	`Color.White`
privacyAlertCancelBtnDisableBorderColor	The border color of the cancel button when disabled.	ResourceColor	`Color.Gray`

Custom component properties

Parameter	Description	Type	Default
privacyAlertComponent	Specifies a custom component to replace the default secondary pop-up.	WrappedBuilder<[]>	None

SDK entry point to close the secondary pop-up:

public quitPrivacyAlert(): void

Usage example:

this.helper?.quitPrivacyAlert();

SDK return codes

For the return codes from the Phone Number Verification HarmonyOS client SDK, see Alibaba Cloud Phone Number Verification SDK return code reference (HarmonyOS client only).

Common import issues

[build init]failed:npm ERR! Error: EPERM: operation not permitted
This error indicates a permission issue on Windows. To resolve this, ensure your local development environment, including the SDK and Node.js, is configured correctly. Then, run DevEco Studio as an administrator.

[Ohpm Install]failed:ohpm ERROR: missing: numberauth_standard

This error indicates that the numberauth_standard dependency is missing or incorrectly referenced. Refer to the Import the project section to verify that the SDK dependency's path and name are correct. The full error message is as follows:

ohpm ERROR: missing: numberauth_standard@C:\workspace\NumberAuthDemo\demo\libs, required by demo@1.0.0
ohpm ERROR: Found exception: Error: Fetch local folder package error, C:\workspace\NumberAuthDemo\demo\libs\oh-package.json5 does not exist., reached retry limit or non retryable error encountered.
ohpm ERROR: Install failed, detail: Error: Fetch local folder package error, C:\workspace\NumberAuthDemo\demo\libs\oh-package.json5 does not exist.

To resolve an SDK import failure:
Delete the imported oh_modules folder and the oh_modules folder in the project root directory. Then, run ohpm install in the DevEco Studio terminal to re-import the SDK.