The @hms.core.account.LoginComponent module provides the HUAWEI ID sign-in UI components, including LoginPanel and LoginWithHuaweiIDButton, as well as the core logic manager loginComponentManager. These core elements are defined as follows:
LoginPanel: sign-in panel component, which displays a standard sign-in panel that integrates the HUAWEI ID sign-in button, privacy statement, and other sign-in methods.
LoginWithHuaweiIDButton: sign-in button component, which supports multiple styles and flexible layout. The HUAWEI ID sign-in button can be embedded in your app's custom sign-in screen.
loginComponentManager: HUAWEI ID sign-in component manager, which provides controllers and component parameter types for customizing button styles, listening for user operation events, and processing sign-in results.
You can use loginComponentManager together with the two UI components to quickly integrate the HUAWEI ID sign-in function in a standard manner.
loginComponentManager is the HUAWEI ID sign-in component manager. This namespace defines the following core elements:
Controller classes: LoginPanelController and LoginWithHuaweiIDButtonController, which are used to control the sign-in behavior of the sign-in panel component and that of the sign-in button component, respectively. The controller classes provide callback registration methods for tap events (such as tapping the sign-in or close button, and tapping an agreement) within the components. You can pass a callback to handle these events.
Component parameter structs: LoginPanelParams and LoginWithHuaweiIDButtonParams, which are used to configure component parameters such as the sign-in type, button style, and privacy statement text.
LoginPanel and LoginWithHuaweiIDButton are specific UI components that accept parameters and controllers constructed by loginComponentManager, render the UI, and send the user operation results to you through controller callbacks.
Since: 4.1.0(11)
LoginWithHuaweiIDButton component controller, which is used to control the internal status changes of the component and register callbacks to listen for tap events within the component. It enables your app to proactively set the user agreement status (setAgreementStatus), set whether the button is tappable (setEnabled), and continue the sign-in process (continueLogin). In addition, you can register callbacks for various events through chained calls:
onClickLoginWithHuaweiIDButton: registers the callback for the HUAWEI ID sign-in event. When the sign-in is successful, HuaweiIDCredential is returned.
onClickEvent: registers the callback for the HUAWEI ID sign-in button tap event, which can be used for operations statistics.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
setAgreementStatus(agreementStatus: AgreementStatus): LoginWithHuaweiIDButtonController
Sets the user agreement status.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| agreementStatus | AgreementStatus | Yes | When the sign-in type is LoginType.QUICK_LOGIN, the agreement status must be set to ACCEPTED to complete HUAWEI ID sign-in. When the sign-in type is not LoginType.QUICK_LOGIN, if HUAWEI ID sign-in is allowed only after the user accepts the agreements, set the agreement status to NOT_ACCEPTED first, and change the status to ACCEPTED after the agreements are accepted. |
Returns
| Type | Description |
|---|---|
| LoginWithHuaweiIDButtonController | LoginWithHuaweiIDButton component controller. |
Example:
Please refer to LoginWithHuaweiIDButtonController.setLocale.
onClickEvent(callback: AsyncCallback<ClickEvent>): LoginWithHuaweiIDButtonController
Registers a callback for tap events. Currently, you can listen for the HUAWEI ID sign-in button tap event, which can be used for operations statistics. This API uses an asynchronous callback to return the result.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<ClickEvent> | Yes | Callback used to return the result. When the user taps the HUAWEI ID sign-in button, err is undefined, and data is the ClickEvent object obtained. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| LoginWithHuaweiIDButtonController | LoginWithHuaweiIDButton component controller. |
Example:
Please refer to LoginWithHuaweiIDButtonController.setLocale.
onClickLoginWithHuaweiIDButton(callback: AsyncCallback<HuaweiIDCredential>): LoginWithHuaweiIDButtonController
Registers a callback for the HUAWEI ID sign-in event. This callback is triggered when a HUAWEI ID user signs in successfully and returns HuaweiIDCredential. You can process the response result and close the panel in this callback to complete the sign-in. This API uses an asynchronous callback to return the result.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<HuaweiIDCredential> | Yes | Callback used to return the result. If the HUAWEI ID sign-in is successful, err is undefined, and data is the HuaweiIDCredential object obtained. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| LoginWithHuaweiIDButtonController | LoginWithHuaweiIDButton component controller. |
Error codes:
For details about the error codes, please refer to Universal Error Codes, ArkTS Error Codes, and Account Management Error Codes.
| ID | Error Message |
|---|---|
| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2. Incorrect parameter types. |
| 1001500001 | Failed to check the fingerprint of the app bundle. |
| 1001500002 | This error code is reported when a request is already being processed. |
| 1001500003 | The scopes or permissions are not supported. Applicable versions: 5.0.0(12)+ |
| 1001502001 | The user has not logged in with HUAWEI ID. |
| 1001502002 | The application is not authorized. |
| 1001502003 | Invalid input parameter value. |
| 1001502005 | Network error. |
| 1001502009 | Internal error. |
| 1001502012 | The user canceled the authorization. |
| 1001502014 | The app does not have the required scopes or permissions. |
| 12300001 | System service works abnormally. |
| 1005300001 | The user did not accept the agreement. Applicable versions: 5.0.0(12)+ |
Example:
Please refer to LoginWithHuaweiIDButtonController.setLocale.
setEnabled(enabled: boolean): LoginWithHuaweiIDButtonController
Sets whether the HUAWEI ID sign-in button can be tapped.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| enabled | boolean | Yes | Indicates whether the button can be tapped. The value true (default value) indicates that the HUAWEI ID sign-in button is highlighted and can be tapped, and false indicates that the HUAWEI ID sign-in button is dimmed and cannot be tapped. |
Returns
| Type | Description |
|---|---|
| LoginWithHuaweiIDButtonController | LoginWithHuaweiIDButton component controller. |
Example:
Please refer to LoginWithHuaweiIDButtonController.setLocale.
continueLogin(callback: AsyncCallback<void>): LoginWithHuaweiIDButtonController
Continues the sign-in process. If the user has not accepted the agreements, the agreement dialog box is displayed when the user taps the sign-in button. This API is called when the user taps the button to accept the agreements and sign in. This API uses an asynchronous callback to return the result.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<void> | Yes | Callback used to return the result. If the user successfully taps the button for both accepting the agreements and signing in, err is undefined. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| LoginWithHuaweiIDButtonController | LoginWithHuaweiIDButton component controller. |
Error codes:
For details about the error codes, please refer to ArkTS Error Codes.
| ID | Error Message |
|---|---|
| 1005300002 | The user did not click the HUAWEI ID login button. |
Example:
Please refer to LoginWithHuaweiIDButtonController.setLocale.
setLocale(locale: string): LoginWithHuaweiIDButtonController
Sets the language for displaying the text on the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 26.0.0
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| locale | string | Yes | Region-language code. If the input parameter is invalid or the system does not support the specified language, the button text is displayed in the system language. You can obtain all region-language codes by calling the getLocales method of the resourceManager object. The following are common region-language codes: ar: Arabic bo-CN: Tibetan (China) de: German en-US: English (US) en-GB: English (UK) es: Spanish es-US: Spanish (US) fr: French id: Indonesian it: Italian ja: Japanese ko: Korean lo: Lao ms: Malay my: Burmese my-MM: Burmese (Myanmar) pl: Polish pt: Portuguese pt-PT: Portuguese (Portugal) ru: Russian th: Thai tr: Turkish ug: Uyghur vi: Vietnamese zh-CN: Simplified Chinese zh-HK: Traditional Chinese (Hong Kong SAR) zh-TW: Traditional Chinese (Taiwan, China) |
Returns
| Type | Description |
|---|---|
| LoginWithHuaweiIDButtonController | LoginWithHuaweiIDButton component controller. |
Example:
import { util } from '@kit.ArkTS';
import { authentication, loginComponentManager, LoginWithHuaweiIDButton } from '@kit.AccountKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct QuickLoginButtonComponent {
logTag: string = 'QuickLoginButtonComponent';
domainId: number = 0x0000;
// Anonymous mobile number.
@State quickLoginAnonymousPhone: string = '';
// Indicates whether the agreements are accepted.
@State isSelected: boolean = false;
// Link to the HUAWEI ID User Authentication Agreement. The link here is only an example. For maintainability and security reasons, you are not advised to hardcode the domain name locally during actual development.
private static USER_AUTHENTICATION_PROTOCOL: string =
'https://privacy.consumer.huawei.com/legal/id/authentication-terms.htm?code=CN&language=en-us';
private static USER_SERVICE_TAG = 'User Service Agreement';
private static PRIVACY_TAG = 'Privacy Statement';
private static USER_AUTHENTICATION_TAG = 'HUAWEI ID User Authentication Agreement';
// Define the agreements displayed for LoginWithHuaweiIDButton, including the User Service Agreement, Privacy Statement, and HUAWEI ID User Authentication Agreement.
privacyText: loginComponentManager.PrivacyText[] = [{
text: 'I have read and agree to the ',
type: loginComponentManager.TextType.PLAIN_TEXT
}, {
text: 'User Service Agreement, ',
tag: QuickLoginButtonComponent.USER_SERVICE_TAG,
type: loginComponentManager.TextType.RICH_TEXT
}, {
text: 'Privacy Statement, ',
tag: QuickLoginButtonComponent.PRIVACY_TAG,
type: loginComponentManager.TextType.RICH_TEXT
}, {
text: 'and ',
type: loginComponentManager.TextType.PLAIN_TEXT
}, {
text: 'HUAWEI ID User Authentication Agreement',
tag: QuickLoginButtonComponent.USER_AUTHENTICATION_TAG,
type: loginComponentManager.TextType.RICH_TEXT
}, {
text: '.',
type: loginComponentManager.TextType.PLAIN_TEXT
}];
// Construct the controller of the LoginWithHuaweiIDButton component.
controller: loginComponentManager.LoginWithHuaweiIDButtonController =
new loginComponentManager.LoginWithHuaweiIDButtonController()
/**
* With a custom sign-in UI, when a user does not accept the agreements, the app needs to set the agreement status to NOT_ACCEPTED,
* and change the status to ACCEPTED after the user accepts the agreements. One-tap HUAWEI ID sign-in is available only when the agreement status is ACCEPTED.
*/
.setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED)
.onClickLoginWithHuaweiIDButton((error: BusinessError | undefined,
response: loginComponentManager.HuaweiIDCredential) => {
this.handleLoginWithHuaweiIDButton(error, response);
})
.setLocale('zh-CN')
.setEnabled(true)
.onClickEvent((error: BusinessError, clickEvent: loginComponentManager.ClickEvent) => {
if (error) {
hilog.error(this.domainId, this.logTag,
`Failed to click. errCode is ${error.code}, errMessage is ${error.message}`);
return;
}
hilog.info(this.domainId, this.logTag, `onClickEvent clickEvent: ${clickEvent}`);
});
agreementDialog: CustomDialogController = new CustomDialogController({
builder: AgreementDialog({
privacyText: this.privacyText,
cancel: () => {
this.agreementDialog.close();
this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED);
},
confirm: () => {
this.agreementDialog.close();
this.isSelected = true;
this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.ACCEPTED);
// Call this method to complete accepting the agreements and signing in at the same time. There is no need to tap the sign-in button again.
this.controller.continueLogin((error: BusinessError) => {
if (error) {
hilog.error(this.domainId, this.logTag,
`Failed to login with agreementDialog. errCode is ${error.code}, errMessage is ${error.message}`);
} else {
hilog.info(this.domainId, this.logTag,
'Succeeded in clicking agreementDialog continueLogin.');
}
});
},
clickHyperlinkText: () => {
this.agreementDialog.close();
this.jumpToPrivacyWebView();
}
}),
autoCancel: false,
alignment: DialogAlignment.Center
});
// Pass the data required for page rendering, such as the anonymous mobile number.
aboutToAppear(): void {
this.getQuickLoginAnonymousPhone();
}
// Toast message.
showToast(resource: string) {
try {
this.getUIContext().getPromptAction().showToast({
message: resource,
duration: 2000
});
} catch (error) {
const message = (error as BusinessError).message;
const code = (error as BusinessError).code;
hilog.error(this.domainId, this.logTag, `showToast args errCode is ${code}, errMessage is ${message}`);
}
}
// Redirect to the HUAWEI ID User Authentication Agreement page. This page needs to be configured in the main_pages.json file of the project.
jumpToPrivacyWebView() {
this.getUIContext().getRouter().pushUrl({
// Add the ohos.permission.INTERNET permission to module.json5.
url: 'pages/WebPage',
params: {
isFromDialog: true,
url: QuickLoginButtonComponent.USER_AUTHENTICATION_PROTOCOL
}
}, (err) => {
if (err) {
hilog.error(this.domainId, this.logTag,
`Failed to jumpToPrivacyWebView, errCode is ${err.code}, errMessage is ${err.message}`);
}
});
}
handleLoginWithHuaweiIDButton(error: BusinessError | undefined,
response: loginComponentManager.HuaweiIDCredential) {
if (error) {
hilog.error(this.domainId, this.logTag,
`Failed to login with LoginWithHuaweiIDButton. errCode is ${error.code}, errMessage is ${error.message}`);
if (error.code === ErrorCode.ERROR_CODE_NETWORK_ERROR) {
this.getUIContext().showAlertDialog(
{
message: 'No Internet connection. Check your network settings.',
offset: { dx: 0, dy: -12 },
alignment: DialogAlignment.Bottom,
autoCancel: false,
confirm: {
value: 'OK',
action: () => {
// You can specify the service logic here to handle the scenario where the user taps the OK button.
}
}
}
);
} else if (error.code === ErrorCode.ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED) {
// If a user does not accept the agreements, an agreement dialog box will be displayed. This callback method is recommended.
this.agreementDialog.open();
} else if (error.code === ErrorCode.ERROR_CODE_LOGIN_OUT) {
// Message indicating that the HUAWEI ID has not been signed in.
this.showToast('HUAWEI ID not signed in. Try again.');
} else if (error.code === ErrorCode.ERROR_CODE_NOT_SUPPORTED) {
// Message displayed when the scope or permission is not supported.
this.showToast('Unsupported scope or permission.');
} else if (error.code === ErrorCode.ERROR_CODE_PARAMETER_ERROR) {
// Parameter error message.
this.showToast('Parameter error.');
} else if (error.code === ErrorCode.ERROR_CODE_USER_CANCEL) {
// Operation canceled by the user. No further handling required.
} else {
// Other messages indicating that the system or service is abnormal.
this.showToast('Service or network exception. Try again later.');
}
return;
}
try {
if (this.isSelected) {
if (response) {
hilog.info(this.domainId, this.logTag, 'Succeeded in clicking LoginWithHuaweiIDButton.');
// Use the information below as needed.
const authCode = response.authorizationCode;
const openID = response.openID;
}
} else {
this.agreementDialog.open();
}
} catch (err) {
hilog.error(this.domainId, this.logTag,
`Failed to login with LoginWithHuaweiIDButton, errCode: ${err.code}, errMessage: ${err.message}`);
this.getUIContext().showAlertDialog(
{
message: 'Service or network exception. Try again later.',
offset: { dx: 0, dy: -12 },
alignment: DialogAlignment.Bottom,
autoCancel: false,
confirm: {
value: 'OK',
action: () => {
// You can specify the service logic here to handle the scenario where the user taps the OK button.
}
}
}
);
}
}
// Handle the error.
dealAllError(error: BusinessError): void {
hilog.error(0x0000, 'testTag', `Failed to login, errorCode=${error.code}, errorMsg=${error.message}`);
// In sign-in scenarios involving UI interactions, it is advised to guide users with the following error code prompts:
if (error.code === ErrorCode.ERROR_CODE_LOGIN_OUT) {
// HUAWEI ID not signed in. Use a HUAWEI ID to sign in and try again, or sign in to the app in another way.
} else if (error.code === ErrorCode.ERROR_CODE_NETWORK_ERROR) {
// Network error. Check the network connection and try again.
} else if (error.code === ErrorCode.ERROR_CODE_INTERNAL_ERROR) {
// Failed to sign in. Try another way.
} else if (error.code === ErrorCode.ERROR_CODE_USER_CANCEL) {
// Authorization canceled by the user.
} else if (error.code === ErrorCode.ERROR_CODE_SYSTEM_SERVICE) {
// System service exception. Try again later or sign in to the app in another way.
} else if (error.code === ErrorCode.ERROR_CODE_REQUEST_REFUSE) {
// Repeated request. No further action is needed.
} else if (error.code === ErrorCode.ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED) {
// The user does not accept the agreements.
} else {
// Failed to sign in. Try another way.
}
}
getQuickLoginAnonymousPhone() {
// Create an authorization request and set parameters.
const authRequest = new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();
/**
* To obtain an anonymous mobile number, the quickLoginAnonymousPhone scope must be passed.
* Before passing this parameter, you need to request the quickLoginMobilePhone permission first.
*/
authRequest.scopes = ['quickLoginAnonymousPhone'];
// You are advised to use generateRandomUUID to generate the state, which can be used for consistency comparison to prevent cross-site attacks.
authRequest.state = util.generateRandomUUID();
// In the one-tap HUAWEI ID sign-in scenario, this parameter must be set to false.
authRequest.forceAuthorization = false;
const controller = new authentication.AuthenticationController();
try {
controller.executeRequest(authRequest).then((response: authentication.AuthorizationWithHuaweiIDResponse) => {
// The anonymous mobile number is obtained.
const anonymousPhone = response.data?.extraInfo?.quickLoginAnonymousPhone as string;
if (anonymousPhone) {
hilog.info(this.domainId, this.logTag, 'Succeeded in authentication.');
this.quickLoginAnonymousPhone = anonymousPhone;
return;
}
hilog.info(this.domainId, this.logTag, 'Succeeded in authentication. AnonymousPhone is empty.');
// If the anonymous mobile number fails to be obtained, the custom sign-in screen of the app will appear.
}).catch((error: BusinessError) => {
this.dealAllError(error);
});
} catch (error) {
this.dealAllError(error);
}
}
build() {
Scroll() {
Column() {
Column() {
Column() {
// This is a sample icon. You can replace it with a real icon to ensure proper compilation and execution.
Image($r('app.media.app_icon'))
.width(48)
.height(48)
.draggable(false)
.copyOption(CopyOptions.None)
.onComplete(() => {
hilog.info(this.domainId, this.logTag, 'appIcon loading success.');
})
.onError(() => {
hilog.error(this.domainId, this.logTag, 'appIcon loading fail.');
})
Text($r('app.string.app_name'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.fontWeight(FontWeight.Bold)
.maxFontSize($r('sys.float.ohos_id_text_size_headline8'))
.minFontSize($r('sys.float.ohos_id_text_size_body1'))
.maxLines(1)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.constraintSize({ maxWidth: '100%' })
.margin({
top: 12
})
Text('App description')
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
.fontWeight(FontWeight.Regular)
.constraintSize({ maxWidth: '100%' })
.margin({
top: 8
})
}.margin({
top: 100
})
Column() {
Text(this.quickLoginAnonymousPhone)
.fontSize(36)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.fontWeight(FontWeight.Bold)
.lineHeight(48)
.textAlign(TextAlign.Center)
.maxLines(1)
.constraintSize({ maxWidth: '100%', minHeight: 48 })
Text('Mobile number bound to a HUAWEI ID')
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
.fontWeight(FontWeight.Regular)
.lineHeight(19)
.textAlign(TextAlign.Center)
.maxLines(1)
.constraintSize({ maxWidth: '100%' })
.margin({
top: 8
})
}.margin({
top: 64
})
Column() {
LoginWithHuaweiIDButton({
params: {
// Style supported by LoginWithHuaweiIDButton.
style: loginComponentManager.Style.BUTTON_RED,
// Set the HUAWEI ID sign-in button to the loading state while the user is signing in.
extraStyle: {
buttonStyle: new loginComponentManager.ButtonStyle().loadingStyle({
show: true
})
},
// Rounded corner radius of LoginWithHuaweiIDButton.
borderRadius: 24,
// Sign-in type supported by LoginWithHuaweiIDButton.
loginType: loginComponentManager.LoginType.QUICK_LOGIN,
// The button style of LoginWithHuaweiIDButton can follow system settings (dark/light mode).
supportDarkMode: true
},
controller: this.controller
})
}
.height(40)
.margin({
top: 56
})
Column() {
Button({
type: ButtonType.Capsule,
stateEffect: true
}) {
Text('Other ways to sign in')
.fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.fontWeight(FontWeight.Medium)
.fontSize($r('sys.float.ohos_id_text_size_button1'))
.focusable(true)
.focusOnTouch(true)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
.padding({ left: 8, right: 8 })
}
.fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.fontWeight(FontWeight.Medium)
.backgroundColor($r('sys.color.ohos_id_color_button_normal'))
.focusable(true)
.focusOnTouch(true)
.constraintSize({ minHeight: 40 })
.width('100%')
.onClick(() => {
hilog.info(this.domainId, this.logTag, 'click optionalLoginButton.');
})
}.margin({ top: 16 })
}.width('100%')
Row() {
Row() {
Checkbox({ name: 'privacyCheckbox', group: 'privacyCheckboxGroup' })
.width(24)
.height(24)
.focusable(true)
.focusOnTouch(true)
.margin({ top: 0 })
.select(this.isSelected)
.onChange((value: boolean) => {
if (value) {
this.isSelected = true;
this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.ACCEPTED);
} else {
this.isSelected = false;
this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED);
}
hilog.info(this.domainId, this.logTag, `agreementChecked: ${value}`);
})
}
Row() {
Text() {
ForEach(this.privacyText, (item: loginComponentManager.PrivacyText) => {
if (item?.type === loginComponentManager.TextType.PLAIN_TEXT && item?.text) {
Span(item?.text)
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
.fontWeight(FontWeight.Regular)
.fontSize($r('sys.float.ohos_id_text_size_body3'))
} else if (item?.type === loginComponentManager.TextType.RICH_TEXT && item?.text) {
Span(item?.text)
.fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.fontWeight(FontWeight.Medium)
.fontSize($r('sys.float.ohos_id_text_size_body3'))
.onClick(() => {
// The app needs to implement the agreement redirection logic based on item.tag.
hilog.info(this.domainId, this.logTag, `click privacy text tag: ${item.tag}`);
// HUAWEI ID User Authentication Agreement
if (item.tag === QuickLoginButtonComponent.USER_AUTHENTICATION_TAG) {
this.jumpToPrivacyWebView();
}
})
}
}, (item: loginComponentManager.PrivacyText) => item.text.toString())
}
.width('100%')
}
.margin({ left: 12 })
.layoutWeight(1)
.constraintSize({ minHeight: 24 })
}
.alignItems(VerticalAlign.Top)
.margin({
bottom: 44
})
}
.justifyContent(FlexAlign.SpaceBetween)
.constraintSize({ minHeight: '100%' })
.margin({
left: 16,
right: 16
})
}
.width('100%')
.height('100%')
}
}
@CustomDialog
export struct AgreementDialog {
logTag: string = 'AgreementDialog';
domainId: number = 0x0000;
dialogController?: CustomDialogController;
cancel: () => void = () => {
// You can specify the service logic here to handle the scenario where the user taps the Cancel button.
};
confirm: () => void = () => {
// You can specify the service logic here to handle the scenario where the user taps the Accept & sign in button.
};
clickHyperlinkText: () => void = () => {
// You can specify the service logic here to handle the scenario where the user taps the hyperlink text.
};
privacyText: loginComponentManager.PrivacyText[] = [];
private static USER_AUTHENTICATION_TAG = 'HUAWEI ID User Authentication Agreement';
build() {
Column() {
Row() {
Text('User Service Agreement and Privacy Statement')
.id('loginPanel_agreement_dialog_privacy_title')
.maxFontSize($r('sys.float.ohos_id_text_size_headline8'))
.minFontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(2)
}
.alignItems(VerticalAlign.Center)
.constraintSize({ minHeight: 56, maxWidth: 400 })
.margin({
left: $r('sys.float.ohos_id_max_padding_start'),
right: $r('sys.float.ohos_id_max_padding_start')
})
Row() {
Text() {
ForEach(this.privacyText, (item: loginComponentManager.PrivacyText) => {
if (item?.type === loginComponentManager.TextType.PLAIN_TEXT && item?.text) {
Span(item?.text)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
.fontWeight(FontWeight.Regular)
} else if (item?.type === loginComponentManager.TextType.RICH_TEXT && item?.text) {
Span(item?.text)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontColor('#CE0E2D')
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.fontWeight(FontWeight.Medium)
.onClick(() => {
// The app needs to implement the agreement redirection logic based on item.tag.
hilog.info(this.domainId, this.logTag, `click privacy text tag: ${item.tag}`);
// HUAWEI ID User Authentication Agreement
if (item.tag === AgreementDialog.USER_AUTHENTICATION_TAG) {
hilog.info(this.domainId, this.logTag, 'AgreementDialog click.');
this.clickHyperlinkText();
}
})
}
}, (item: loginComponentManager.PrivacyText) => item.text.toString())
}
.width('100%')
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(10)
.textAlign(TextAlign.Start)
.focusable(true)
.focusOnTouch(true)
.padding({ left: 24, right: 24 })
}.width('100%')
Flex({
direction: FlexDirection.Row
}) {
Button('Cancel',
{ type: ButtonType.Capsule, stateEffect: true })
.id('loginPanel_agreement_cancel_btn')
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontSize($r('sys.float.ohos_id_text_size_button1'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.backgroundColor(Color.Transparent)
.fontWeight(FontWeight.Medium)
.focusable(true)
.focusOnTouch(true)
.constraintSize({ minHeight: 40, maxWidth: 400 })
.width('50%')
.onClick(() => {
hilog.info(this.domainId, this.logTag, 'AgreementDialog cancel.');
this.cancel();
})
Button('Accept & sign in',
{ type: ButtonType.Capsule, stateEffect: true })
.id('loginPanel_agreement_dialog_huawei_id_login_btn')
.fontColor(Color.White)
.backgroundColor('#CE0E2D')
.fontSize($r('sys.float.ohos_id_text_size_button1'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.fontWeight(FontWeight.Medium)
.focusable(true)
.focusOnTouch(true)
.constraintSize({ minHeight: 40, maxWidth: 400 })
.width('50%')
.onClick(() => {
hilog.info(this.domainId, this.logTag, 'AgreementDialog confirm.');
this.confirm();
})
}
.margin({
top: 8,
left: $r('sys.float.ohos_id_elements_margin_horizontal_l'),
right: $r('sys.float.ohos_id_elements_margin_horizontal_l'),
bottom: 16
})
}.backgroundColor($r('sys.color.ohos_id_color_dialog_default_bg'))
.padding({
left: 16,
right: 16
})
}
}
export enum ErrorCode {
// No HUAWEI ID has been signed in.
ERROR_CODE_LOGIN_OUT = 1001502001,
// This HUAWEI ID does not support one-tap sign-in due to some causes. For example, it is not registered in the Chinese mainland.
ERROR_CODE_NOT_SUPPORTED = 1001500003,
// Network error.
ERROR_CODE_NETWORK_ERROR = 1001502005,
// Internal error.
ERROR_CODE_INTERNAL_ERROR = 1001502009,
// Authorization canceled by the user.
ERROR_CODE_USER_CANCEL = 1001502012,
// System service exception.
ERROR_CODE_SYSTEM_SERVICE = 12300001,
// The user does not accept the agreements.
ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED = 1005300001,
// Parameter error.
ERROR_CODE_PARAMETER_ERROR = 401,
// Repeated request.
ERROR_CODE_REQUEST_REFUSE = 1001500002
} import { webview } from '@kit.ArkWeb';
import { hilog } from '@kit.PerformanceAnalysisKit';
// Screen for showing the HUAWEI ID User Authentication Agreement.
@Entry
@Component
struct WebPage {
@State webUrl?: string = '';
@State progress: number = 0;
logTag: string = 'WebPage';
domainId: number = 0x0000;
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Column() {
Button({ type: ButtonType.Normal }) {
Image($r('sys.media.ohos_ic_compnent_titlebar_back'))
.backgroundColor(Color.Transparent)
.borderRadius(20)
.width(24)
.height(24)
.draggable(false)
.autoResize(false)
.focusable(true)
.fillColor($r('sys.color.ohos_id_color_titlebar_icon'))
.matchTextDirection(true)
}
.alignSelf(ItemAlign.Start)
.backgroundColor($r('sys.color.ohos_id_color_button_normal'))
.borderRadius(20)
.width(40)
.height(40)
.onClick(() => {
this.getUIContext().getRouter().back();
})
}
.height(56)
.width('100%')
.justifyContent(FlexAlign.Center)
Progress({ value: this.progress, type: ProgressType.Linear })
.width('100%')
.visibility(this.progress <= 99 ? Visibility.Visible : Visibility.None)
Web({ src: this.webUrl ?? '', controller: this.controller })
.backgroundColor(Color.Transparent)
.onProgressChange((event) => {
hilog.info(this.domainId, this.logTag,
'onProgressChange: ', (event ? event.newProgress : -1));
this.progress = event ? event.newProgress : 0;
})
.darkMode(WebDarkMode.Auto)
.forceDarkAccess(true)
.onLoadIntercept(() => {
hilog.info(this.domainId, this.logTag, 'onLoadIntercept');
return false;
})
.onErrorReceive((event) => {
if (event) {
hilog.error(this.domainId, this.logTag, `onErrorReceive,errorInfo: ${event?.error?.getErrorInfo()}`);
}
})
}
.alignItems(HorizontalAlign.Start)
.padding({ left: 12, right: 12 })
.width('100%')
.height('100%')
}
aboutToAppear(): void {
hilog.info(0x0000, 'testTag', 'aboutToAppear');
const params = this.getUIContext().getRouter().getParams() as Record<string, string>;
this.webUrl = params.url ?? '';
hilog.info(0x0000, 'testTag', `webUrl: ${this.webUrl}`);
}
aboutToDisappear(): void {
hilog.info(0x0000, 'testTag', 'aboutToDisappear');
if (this.webUrl) {
try {
this.controller.stop();
} catch (error) {
hilog.error(0x0000, 'testTag', `stop web error, errorCode=${error.code}, errorMsg=${error.message}`);
}
}
}
} LoginPanel component controller class, which is used to control the internal status changes of the component and register callbacks to listen for tap events within the component. It enables your app to proactively set the user agreement status (setAgreementStatus), set whether to display the agreement dialog box when a user taps the button for other sign-in methods (setShowAgreementForOptionalLogin), and register callbacks for various events through chained calls:
onClickLoginWithHuaweiIDButton: registers the callback for the HUAWEI ID sign-in event. When the sign-in is successful, HuaweiIDCredential is returned.
onClickOptionalLoginButton/onClickOptionalLoginIcon: registers the callback for the optional sign-in button/icon tap event, which is used to handle sign-in through other methods.
onClickPrivacyText: registers the callback for the rich text agreement link tap event, which is used to obtain the corresponding tag to redirect to the specific agreement page.
onClickCloseButton: registers the callback for the panel close or swipe-back event.
onChangeAgreementStatus: registers the callback for the agreement checkbox status change event.
onClickEvent: registers the callback for the HUAWEI ID sign-in button tap event, which can be used for operations statistics.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
onClickLoginWithHuaweiIDButton(callback: AsyncCallback<HuaweiIDCredential>): LoginPanelController
Registers a callback for the HUAWEI ID sign-in event. This callback is triggered when a HUAWEI ID user signs in successfully and returns HuaweiIDCredential. You can process the response result and close the panel in this callback to complete the sign-in. This API uses an asynchronous callback to return the result.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<HuaweiIDCredential> | Yes | Callback used to return the result. If the HUAWEI ID sign-in is successful, err is undefined, and data is the HuaweiIDCredential object obtained. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| LoginPanelController | LoginPanel component controller. |
Error codes:
For details about the error codes, please refer to Universal Error Codes, ArkTS Error Codes, and Account Management Error Codes.
| ID | Error Message |
|---|---|
| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2. Incorrect parameter types. |
| 1001500001 | Failed to check the fingerprint of the app bundle. |
| 1001500002 | This error code is reported when a request is already being processed. |
| 1001500003 | The scopes or permissions are not supported. Applicable versions: 5.0.0(12)+ |
| 1001502001 | The user has not logged in with HUAWEI ID. |
| 1001502002 | The application is not authorized. |
| 1001502003 | Invalid input parameter value. |
| 1001502005 | Network error. |
| 1001502009 | Internal error. |
| 1001502012 | The user canceled the authorization. |
| 1001502014 | The app does not have the required scopes or permissions. |
| 12300001 | System service works abnormally. |
| 1005300001 | The user did not accept the agreement. Applicable versions: 5.0.0(12)+ |
Example:
Please refer to LoginPanelController.onClickCloseButton.
onClickOptionalLoginButton(callback: AsyncCallback<void>): LoginPanelController
Registers a callback for the optional sign-in button tap event. The text of an optional sign-in button can be configured through LoginPanelParams.optionalLoginButtonAttr. You can redirect users to the screen of another sign-in method via this callback. This API uses an asynchronous callback to return the result.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<void> | Yes | Callback used to return the result. If the user successfully taps an optional sign-in button, err is undefined. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| LoginPanelController | LoginPanel component controller. |
Example:
Please refer to LoginPanelController.onClickCloseButton.
onClickOptionalLoginIcon(callback: AsyncCallback<string>): LoginPanelController
Registers a callback for the optional sign-in icon tap event. The icons can be configured through LoginPanelParams.optionalLoginAreaAttr. You can redirect users to the screen of another sign-in method via this callback. This API uses an asynchronous callback to return the result.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<string> | Yes | Callback used to return the result. If the user successfully taps the sign-in icon specified by LoginIcon, err is undefined, and data is the tag for LoginIcon. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| LoginPanelController | LoginPanel component controller. |
Example:
Please refer to LoginPanelController.onClickCloseButton.
onClickPrivacyText(callback: AsyncCallback<string>): LoginPanelController
Registers a callback for the privacy text tap event. The callback is triggered only when a privacy text of the rich text format is tapped by a user. The privacy text properties can be configured through LoginPanelParams.privacyText. You can redirect users to the privacy statement screen of your app via this callback. This API uses an asynchronous callback to return the result.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<string> | Yes | Callback used to return the result. If the user successfully taps a privacy text in rich text format, err is undefined, and data is the tag for PrivacyText. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| LoginPanelController | LoginPanel component controller. |
Example:
Please refer to LoginPanelController.onClickCloseButton.
onChangeAgreementStatus(callback: AsyncCallback<AgreementStatus>): LoginPanelController
Registers a callback for the user agreement status change event. This callback is triggered when the status of the agreement checkbox on the sign-in panel changes. The agreement status (AgreementStatus) is returned. This API uses an asynchronous callback to return the result.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<AgreementStatus> | Yes | Callback used to return the result. If the user successfully checks or unchecks the agreement box, err is undefined, and data is the obtained AgreementStatus. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| LoginPanelController | LoginPanel component controller. |
Example:
Please refer to LoginPanelController.onClickCloseButton.
setAgreementStatus(agreementStatus: AgreementStatus): LoginPanelController
Sets the user agreement status.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| agreementStatus | AgreementStatus | Yes | If you want to use a custom agreement screen, set agreementStatus to NOT_ACCEPTED. After the user agrees to the agreement, set agreementStatus to ACCEPTED. |
Returns
| Type | Description |
|---|---|
| LoginPanelController | LoginPanel component controller. |
Example:
Please refer to LoginPanelController.onClickCloseButton.
setShowAgreementForOptionalLogin(): LoginPanelController
Displays the privacy statement dialog box when a user taps another sign-in option.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Returns
| Type | Description |
|---|---|
| LoginPanelController | LoginPanel component controller. |
Example:
Please refer to LoginPanelController.onClickCloseButton.
onClickEvent(callback: AsyncCallback<ClickEvent>): LoginPanelController
Registers a callback for tap events. Currently, you can listen for the HUAWEI ID sign-in button tap event, which can be used for operations statistics. This API uses an asynchronous callback to return the result.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<ClickEvent> | Yes | Callback used to return the result. When the user taps the HUAWEI ID sign-in button, err is undefined, and data is the ClickEvent object obtained. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| LoginPanelController | LoginPanel component controller. |
Example:
Please refer to LoginPanelController.onClickCloseButton.
onClickCloseButton(callback: AsyncCallback<void>): LoginPanelController
Registers a callback for the close button tap event or the swipe-back event. This API uses an asynchronous callback to return the result.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<void> | Yes | Callback used to return the result. If the user successfully taps the close button or swipes back, err is undefined. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| LoginPanelController | LoginPanel component controller. |
Example:
import { LoginPanel, loginComponentManager } from '@kit.AccountKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct PreviewLoginPanelPage {
// Indicates whether to display the LoginPanel component.
@State show: boolean = true;
// Define the privacy text displayed in the LoginPanel component.
privacyText: loginComponentManager.PrivacyText[] = [{
text: 'I have read and agree to the ',
type: loginComponentManager.TextType.PLAIN_TEXT
}, {
text: 'User Service Agreement, ',
tag: 'User Service Agreement',
type: loginComponentManager.TextType.RICH_TEXT
}, {
text: 'Privacy Statement, ',
tag: 'Privacy Statement',
type: loginComponentManager.TextType.RICH_TEXT
}, {
text: 'and ',
type: loginComponentManager.TextType.PLAIN_TEXT
}, {
text: 'HUAWEI ID User Authentication Agreement',
tag: 'HUAWEI ID User Authentication Agreement',
type: loginComponentManager.TextType.RICH_TEXT
}];
// Define the icons for other sign-in methods displayed in the LoginPanel component.
iconArray: loginComponentManager.LoginIcon[] = [{
// This is a sample icon. You can replace it with a real icon to ensure proper compilation and execution.
icon: $r('app.media.app_icon'),
tag: 'Other ways to sign in'
}];
// Construct the controller of LoginPanel.
controller: loginComponentManager.LoginPanelController = new loginComponentManager.LoginPanelController()
// When the sign-in type is not QUICK_LOGIN and no agreement is set, to display your custom agreement dialog box, set the agreement status to NOT_ACCEPTED.
.setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED)
// Display the privacy statement dialog box when a user taps another sign-in option.
.setShowAgreementForOptionalLogin()
.onClickLoginWithHuaweiIDButton((error: BusinessError, response: loginComponentManager.HuaweiIDCredential) => {
hilog.info(0x0000, 'testTag', 'onClickLoginWithHuaweiIDButton');
if (error) {
this.dealAllError(error);
return;
}
if (response) {
// Send the obtained authorization code to the app server.
const authorizationCode = response.authorizationCode;
hilog.info(0x0000, 'testTag', 'Succeeded in getting response.');
this.show = false;
return;
}
})
.onClickOptionalLoginButton(() => {
hilog.info(0x0000, 'testTag', 'onClickOptionalLoginButton');
this.show = false;
})
.onClickOptionalLoginIcon((error: BusinessError, tag: string) => {
if (error) {
this.dealAllError(error);
return;
}
hilog.info(0x0000, 'testTag', `onClickOptionalLoginIcon tag: ${tag}`);
this.show = false;
})
.onClickPrivacyText((error: BusinessError, tag: string) => {
if (error) {
this.dealAllError(error);
return;
}
// The app needs to implement the agreement redirection logic.
hilog.info(0x0000, 'testTag', `onClickPrivacyText tag: ${tag}`);
})
.onClickCloseButton(() => {
hilog.info(0x0000, 'testTag', 'onClickCloseButton.');
this.show = false;
})
.onChangeAgreementStatus((error: BusinessError, agreementStatus: loginComponentManager.AgreementStatus) => {
if (error) {
this.dealAllError(error);
return;
}
hilog.info(0x0000, 'testTag', `onChangeAgreementStatus agreementStatus: ${agreementStatus}`);
})
.onClickEvent((error: BusinessError, clickEvent: loginComponentManager.ClickEvent) => {
if (error) {
this.dealAllError(error);
return;
}
hilog.info(0x0000, 'testTag', `onClickEvent clickEvent: ${clickEvent}`);
});
// Handle the error.
dealAllError(error: BusinessError): void {
hilog.error(0x0000, 'testTag', `Failed to login, errorCode=${error.code}, errorMsg=${error.message}`);
// In sign-in scenarios involving UI interactions, it is advised to guide users with the following error code prompts:
if (error.code === ErrorCode.ERROR_CODE_LOGIN_OUT) {
// HUAWEI ID not signed in. Use a HUAWEI ID to sign in and try again, or sign in to the app in another way.
} else if (error.code === ErrorCode.ERROR_CODE_NETWORK_ERROR) {
// Network error. Check the network connection and try again.
} else if (error.code === ErrorCode.ERROR_CODE_INTERNAL_ERROR) {
// Failed to sign in. Try another way.
} else if (error.code === ErrorCode.ERROR_CODE_USER_CANCEL) {
// Authorization canceled by the user.
} else if (error.code === ErrorCode.ERROR_CODE_SYSTEM_SERVICE) {
// System service exception. Try again later or sign in to the app in another way.
} else if (error.code === ErrorCode.ERROR_CODE_REQUEST_REFUSE) {
// Repeated request. No further action is needed.
} else if (error.code === ErrorCode.ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED) {
// The user does not accept the agreements.
} else {
// Failed to sign in. Try another way.
}
}
build() {
if (this.show) {
Stack() {
LoginPanel({
show: this.show,
params: {
appInfo: {
// This is a sample icon. You can replace it with a real icon to ensure proper compilation and execution.
appIcon: $r('app.media.app_icon'),
appName: 'App name'
},
privacyText: this.privacyText,
// Obtain the anonymous mobile number by referring to the Account Kit Development Guide.
anonymousPhoneNumber: '139******99',
loginType: loginComponentManager.LoginType.QUICK_LOGIN,
// If both optionalLoginAreaAttr and optionalLoginButtonAttr are set, the optional sign-in area (optionalLoginAreaAttr) is displayed first.
optionalLoginAreaAttr: { iconArray: this.iconArray },
optionalLoginButtonAttr: { text: 'Other ways to sign in' }
},
controller: this.controller
})
}
.height('100%')
.width('100%')
}
}
}
export enum ErrorCode {
// No HUAWEI ID has been signed in.
ERROR_CODE_LOGIN_OUT = 1001502001,
// Network error.
ERROR_CODE_NETWORK_ERROR = 1001502005,
// Internal error.
ERROR_CODE_INTERNAL_ERROR = 1001502009,
// Authorization canceled by the user.
ERROR_CODE_USER_CANCEL = 1001502012,
// System service exception.
ERROR_CODE_SYSTEM_SERVICE = 12300001,
// The user does not accept the agreements.
ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED = 1005300001,
// Repeated request.
ERROR_CODE_REQUEST_REFUSE = 1001500002
} Represents the HUAWEI ID sign-in button style class. Use new loginComponentManager.ButtonStyle() to construct an instance.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
buttonSize(value: ButtonSize): ButtonStyle
Sets the dimensions of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | ButtonSize | Yes | When the button type is icon-only, the width and height of the button are equal. The minimum values (not undefined) of value.width and value.height are used. If both value.width and value.height are undefined, the value is twice that of iconRadius in LoginWithHuaweiIDButtonParams. If iconRadius is also undefined, the default value of 48 vp is used. When the button is not icon-only, set its width and height through value.width and value.height, respectively. If value.width or value.height is undefined, the width or height of the button equals the width or height of the parent layout. Note: When setting the width and height of the button, make sure that the width and height of the parent layout are greater than or equal to those of the button. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
fontSize(value: Length): ButtonStyle
Sets the font size of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Length | Yes | Font size of the text on the HUAWEI ID sign-in button when the button type is icon & text or text-only. According to the visual specifications for HUAWEI ID sign-in, the recommended font size should fall within 30% to 50% of the button height. If this parameter is not passed, the font size ranges from 9 vp to 16 vp and is adaptive to the button width. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
fontColor(value: ResourceColor | FontColor): ButtonStyle
Sets the text color of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | ResourceColor | FontColor | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the text color of the button. If the fontColor property of CustomButtonParams has been set, the value of this property is used preferentially. If this parameter is not set, white will be used. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
fontWeight(value: string | number | FontWeight): ButtonStyle
Sets the text weight of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | string | number | FontWeight | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the font weight of the button. For values of the number type, the valid range is [100, 900], in increments of 100. A larger value indicates a thicker font. If the value is outside this range, 400 is used as the value. For the string type, only strings that represent a number, for example, "400", and the following enumerated values of FontWeight are supported: "bold", "bolder", "lighter", "regular", and "medium". The default value is FontWeight.Medium, and the corresponding value of number type is 500. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
fontFamily(value: ResourceStr): ButtonStyle
Sets the font family of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | ResourceStr | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the font family of the button. The default value is 'HarmonyOS Sans'. Currently, 'HarmonyOS Sans' and registered custom fonts are supported. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
backgroundColor(value: ResourceColor): ButtonStyle
Sets the background color of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | ResourceColor | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the background color of the button. If the backgroundColor property of CustomButtonParams has been set, the value of this property is used preferentially. If this parameter is not set, red will be used as the background color. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
backgroundEffect(value: BackgroundEffectOptions): ButtonStyle
Sets the background properties of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | BackgroundEffectOptions | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the background properties of the button, including the saturation, brightness, and color. If this parameter is not set, the button displays no additional background effect. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
backgroundBrightness(value: BackgroundBrightnessOptions): ButtonStyle
Sets the background brightness effect of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | BackgroundBrightnessOptions | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the background brightness effect of the button, including the brightness change rate and light-up degree. If this parameter is not set, the button does not apply the background brightness effect. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
linearGradient(value: LinearGradient): ButtonStyle
Sets the linear gradient effect for the background color of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | LinearGradient | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the linear gradient effect for the background color of the button. If this parameter is not set, the button does not apply the linear gradient effect. NOTE When this property is used, set the button's background color to transparent to avoid jagged edges, for example, backgroundColor(Color.Transparent). |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
sweepGradient(value: SweepGradient): ButtonStyle
Sets the sweep gradient effect for the background color of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | SweepGradient | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the sweep gradient effect for the background color of the button. If this parameter is not set, the button does not apply the sweep gradient effect. NOTE When this property is used, set the button's background color to transparent to avoid jagged edges, for example, backgroundColor(Color.Transparent). |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
radialGradient(value: RadialGradient): ButtonStyle
Sets the radial gradient effect for the background color of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | RadialGradient | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the radial gradient effect for the background color of the button. If this parameter is not set, the button does not apply the radial gradient effect. NOTE When this property is used, set the button's background color to transparent to avoid jagged edges, for example, backgroundColor(Color.Transparent). |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
shadow(value: ShadowOptions | ShadowStyle): ButtonStyle
Sets the shadow effect of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | ShadowOptions | ShadowStyle | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the shadow effect of the button. If this parameter is not set, the button does not apply the shadow effect. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
opacity(value: number | Resource): ButtonStyle
Sets the opacity of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | number | Resource | Yes | The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. When being completely transparent, the component is hidden, but still takes up space in the layout. The default value is 1. When the button type is BUTTON_CUSTOM, this parameter can be used to set the opacity of the button. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
border(value: BorderOptions): ButtonStyle
Sets the border style of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | BorderOptions | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the border style of the button. If this parameter is not set, the button does not apply the border effect. Note: When setting an inner border, reserve sufficient space within the parent component to accommodate the button. Ensure that the parent component's width and height are greater than those of the button. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
borderImage(value: BorderImageOption): ButtonStyle
Sets the image border style of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | BorderImageOption | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the image border style of the button. If this parameter is not set, the button does not apply the image border effect. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
outline(value: OutlineOptions): ButtonStyle
Sets the outline style of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | OutlineOptions | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the outline style of the button. If this parameter is not set, the button does not apply the outline effect. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
hoverEffect(value: HoverEffect): ButtonStyle
Sets the hover effect of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | HoverEffect | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the hover effect of the button. If this parameter is not set, the button does not apply the hover effect. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
clickEffect(value: ClickEffect): ButtonStyle
Sets the tap feedback effect of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | ClickEffect | Yes | When the button type is BUTTON_CUSTOM, this parameter can be used to set the tap feedback effect of the button. If this parameter is not set, the button does not apply the tap feedback effect. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
Please refer to ButtonStyle.loadingStyle.
loadingStyle(value: LoadingStyle): ButtonStyle
Sets whether the HUAWEI ID sign-in button displays the loading state during sign-in.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | LoadingStyle | Yes | Sets whether the button displays the loading state during sign-in. By default, the loading state does not appear. Note: This parameter has no effect on icon-only buttons, as they do not support the loading state. |
Returns
| Type | Description |
|---|---|
| ButtonStyle | Style of the HUAWEI ID sign-in button. |
Example:
import { loginComponentManager, LoginWithHuaweiIDButton } from '@kit.AccountKit';
@Entry
@Component
struct QuickLoginButtonComponent {
controller: loginComponentManager.LoginWithHuaweiIDButtonController =
new loginComponentManager.LoginWithHuaweiIDButtonController();
build() {
Column() {
LoginWithHuaweiIDButton({
params: {
style: loginComponentManager.Style.BUTTON_CUSTOM,
extraStyle: {
buttonStyle: new loginComponentManager.ButtonStyle()
.buttonSize({ width: 240, height: 40 })
.fontSize(18)
.fontColor(Color.White)
.fontWeight(FontWeight.Medium)
.fontFamily('HarmonyOS Sans')
.backgroundColor(Color.Transparent)
.backgroundEffect({ radius: 0 })
.backgroundBrightness({ rate: 0, lightUpDegree: 0 })
.linearGradient({ angle: 135, colors: [[Color.Blue, 0], [Color.Blue, 1]] })
.sweepGradient({
center: ['50%', '50%'],
start: 0,
end: 360,
colors: [[Color.Blue, 0], [Color.Blue, 1]]
})
.radialGradient({ center: ['50%', '50%'], radius: '80%', colors: [[Color.Blue, 0], [Color.Blue, 1]] })
.shadow({
radius: 8,
color: Color.Blue,
offsetX: 0,
offsetY: 4
})
.opacity(1)
.border({ width: 0, color: Color.Blue, radius: 24 })
.borderImage({
source: {
direction: GradientDirection.Left,
colors: [[Color.Blue, 0.0], [Color.Blue, 0.3], [Color.Blue, 1.0]],
repeating: false
}
})
.outline({ width: 0, color: Color.Blue, radius: 24 })
.hoverEffect(HoverEffect.Auto)
.clickEffect({ level: 1, scale: 0.96 })
.loadingStyle({ show: true })
}
},
controller: this.controller
})
}
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.height('100%')
.width('100%')
}
} Defines the sign-in panel parameters. You can set parameters such as loginType (sign-in type), privacyText (privacy text content, which can be plain text or tappable rich text), appInfo (app information), anonymousPhoneNumber (anonymous mobile number), and properties of other sign-in options (optionalLoginAreaAttr or optionalLoginButtonAttr).
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| appInfo | AppInfo | No | No | App information, including the icon and name. |
| privacyText | PrivacyText[] | No | Yes | Privacy text content, which can be plain text or rich text. It can be used to redirect users to an agreement screen. |
| optionalLoginButtonAttr | OptionalLoginButtonAttr | No | Yes | Optional sign-in button properties. |
| loginType | LoginType | No | Yes | HUAWEI ID sign-in type. The default value is LoginType.ID. For one-tap sign-in, use LoginType.QUICK_LOGIN. |
| anonymousPhoneNumber | string | No | Yes | Anonymous mobile number bound to a HUAWEI ID. This parameter is mandatory when the sign-in type is set to LoginType.QUICK_LOGIN. For details, please refer to App-Side Development. Since: 5.0.0(12) |
| verifyPhoneNumber | boolean | No | Yes | Indicates whether to display the SMS verification code screen provided by Account Kit if a HUAWEI ID user did not perform SMS verification in the past 90 days. true: yes. false: no. The app needs to check whether the mobile number is up-to-date. The default value is true. Since: 5.0.0(12) |
| optionalLoginAreaAttr | OptionalLoginAreaAttr | No | Yes | Optional sign-in area properties. You can set icons for other supported sign-in methods. These icons are displayed on the sign-in screen and can redirect users to custom sign-in screens. If both optionalLoginButtonAttr and optionalLoginAreaAttr are set, the optional sign-in area (optionalLoginAreaAttr) is displayed first. Since: 5.0.0(12) |
| riskLevel | boolean | No | Yes | Indicates whether to obtain the risk level of a HUAWEI ID user. This parameter is mandatory only when the sign-in type is set to LoginType.QUICK_LOGIN. true: yes. For details, please refer to Obtaining a User's Risk Level Through One-Tap HUAWEI ID Sign-in. false: no. The default value is false. Since: 5.1.0(18) |
| securityVerification | boolean | No | Yes | After enhanced identity verification is enabled for one-tap sign-in with HUAWEI ID, the app will use biometric authentication or SMS messages to authenticate users based on their HUAWEI IDs. To obtain the status of enhanced identity verification, set this parameter to false. This parameter is mandatory only when the sign-in type is set to LoginType.QUICK_LOGIN. true: The HuaweiIDCredential response will not contain enableSecurityVerification. false: The HuaweiIDCredential response will contain enableSecurityVerification. The default value is true. Since: 6.0.0(20) |
Defines HUAWEI ID sign-in button parameters, including loginType (sign-in type) and style (button style).
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| style | Style | No | No | Style of the LoginWithHuaweiIDButton component. |
| borderRadius | number | No | Yes | Rounded corner radius of the button border. Value range: [0, +∞). Values less than 0 will be treated as 0. The default value is half of the height value. Unit: vp |
| iconRadius | number | No | Yes | Radius of the icon. Value range: [0, +∞). Values less than 0 will be treated as 0. The default value is 24. Unit: vp |
| supportDarkMode | boolean | No | Yes | Indicates whether the button style changes along with the system's color modes (light/dark). true: yes false: no The default value is true. |
| loginType | LoginType | No | Yes | HUAWEI ID sign-in type. The default value is LoginType.ID. For one-tap sign-in, use LoginType.QUICK_LOGIN. |
| textAndIconStyle | boolean | No | Yes | Indicates whether to display the HUAWEI ID sign-in button in the icon & text style. true: yes false: no (The button supports only the text style.) The default value is false. This parameter is valid only when loginType is not set to LoginType.QUICK_LOGIN and style is set to BUTTON_RED, BUTTON_WHITE, BUTTON_WHITE_OUTLINE, BUTTON_BLACK, or BUTTON_GRAY. Since: 5.0.0(12) |
| customButtonParams | CustomButtonParams | No | Yes | Style parameters of the BUTTON_CUSTOM button. Since: 5.0.0(12) |
| verifyPhoneNumber | boolean | No | Yes | Indicates whether to display the SMS verification code screen provided by Account Kit if a HUAWEI ID user did not perform SMS verification in the past 90 days. true: yes. false: no. The app needs to check whether the mobile number is up-to-date. The default value is true. Since: 5.0.0(12) |
| extraStyle | ExtraStyle | No | Yes | If your app wants to use the styles other than the fixed styles provided by HUAWEI ID, you can call this API to set the desired style. Since: 5.0.0(12) |
| loginButtonTextType | LoginButtonTextType | No | Yes | If loginType is set to LoginType.QUICK_LOGIN, this parameter can be passed to specify the button text content. The default value is LoginButtonTextType.QUICK_LOGIN. - When the value of this parameter is LoginButtonTextType.QUICK_LOGIN, the button text indicates one-tap sign-in with HUAWEI ID. - When the value of this parameter is LoginButtonTextType.QUICK_REGISTRATION, the button text indicates one-tap registration with HUAWEI ID. Since: 5.0.0(12) |
| riskLevel | boolean | No | Yes | Indicates whether to obtain the risk level of a HUAWEI ID user. This parameter is mandatory only when the sign-in type is set to LoginType.QUICK_LOGIN. true: yes. For details, please refer to Obtaining a User's Risk Level Through One-Tap HUAWEI ID Sign-in. false: no. The default value is false. Since: 5.1.0(18) |
| securityVerification | boolean | No | Yes | After enhanced identity verification is enabled for one-tap sign-in with HUAWEI ID, the app will use biometric authentication or SMS messages to authenticate users based on their HUAWEI IDs. To obtain the status of enhanced identity verification, set this parameter to false. This parameter is mandatory only when the sign-in type is set to LoginType.QUICK_LOGIN. true: The HuaweiIDCredential response will not contain enableSecurityVerification. false: The HuaweiIDCredential response will contain enableSecurityVerification. The default value is true. Since: 6.0.0(20) |
Response result after successful HUAWEI ID sign-in. It is used to obtain user information and associate the HUAWEI ID.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| unionID | string | Yes | No | UnionID, which is the unique identifier of a HUAWEI ID user. A user has the same UnionID in different apps of the same developer. For details about the format requirements, please refer to Formats of OpenID and UnionID. |
| openID | string | Yes | No | OpenID, which is the unique identifier of a HUAWEI ID user in an app or atomic service. A user has different OpenIDs in different apps. For details about the format requirements, please refer to Formats of OpenID and UnionID. |
| authorizationCode | string | Yes | No | Authorization code. It is a temporary credential used by the app server to call the API for obtaining a user-level credential. The app server sends a request to the Account Kit server to obtain an access token. The authorization code is valid for 5 minutes and can be used only once. The value contains 1 to 1024 characters. |
| idToken | string | Yes | Yes | ID token, which is a user identity credential containing user information. It is a character string in JSON Web Token (JWT) format. JWT is an open standard (RFC 7519) that defines a secure method for transmitting information. For details, please refer to jwt.io. idToken is used to obtain certain user information and verify the signature. For details, please refer to When and How Can I Use the ID Token? The value contains 1 to 2048 characters. |
| enableSecurityVerification | boolean | Yes | Yes | Indicates whether a HUAWEI ID user has enabled enhanced identity verification for one-tap sign-in. To obtain this field, set securityVerification to false. enableSecurityVerification is returned only when the sign-in type is LoginType.QUICK_LOGIN. true: yes false: no Since: 6.0.0(20) |
Defines app information. You can set the app icon, name, and description.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| appIcon | PixelMap | ResourceStr | DrawableDescriptor | No | No | App icon. |
| appName | ResourceStr | No | No | App name, which contains 1 to 19 characters. If the value exceeds this limit or is displayed in large fonts, the excess part will be replaced with an ellipsis (...). |
| appDescription | ResourceStr | No | Yes | App description, which contains 1 to 44 characters. NOTE - This parameter is mandatory in version 4.1.0(11). - This parameter is optional since version 5.0.0(12). You do not need to set this parameter only when the sign-in type is LoginType.QUICK_LOGIN. |
Represents the data struct of the privacy text, which defines the text type (including plain text and rich text), content, and other aspects of the privacy text.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| type | TextType | No | No | Type of the privacy text, including plain text and rich text. |
| text | ResourceStr | No | No | Privacy text to be displayed on the sign-in panel, which contains links that redirect to the app's privacy statement and the HUAWEI ID User Authentication Agreement. |
| tag | string | No | Yes | This parameter is mandatory when type is set to TextType.RICH_TEXT. When a user taps a text, the URL specified for the tag will be opened. The app can display privacy content based on the user's tap behavior. |
Defines the optional sign-in button properties.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| text | ResourceStr | No | No | Text description of the optional sign-in button. |
Defines the optional sign-in area properties.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| iconArray | LoginIcon[] | No | No | Icons of other sign-in options passed by the app, displayed in the optional sign-in area. A maximum of five icons can be displayed. |
Defines the properties of icons in the optional sign-in area.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| icon | PixelMap | ResourceStr | DrawableDescriptor | No | No | Icon of an alternative sign-in option displayed in the optional sign-in area. According to the visual specifications, the icon is recommended to be a circular image with a radius of 18 vp. |
| tag | string | No | Yes | When a user taps an icon, the tag value will be returned to the app. The app can display the corresponding sign-in screen based on the user's tap behavior. |
Defines custom button parameters. It is used when the style of the LoginWithHuaweiIDButton button is set to BUTTON_CUSTOM.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| fontColor | FontColor | No | Yes | Text color of the LoginWithHuaweiIDButton button. Default value: FontColor.WHITE |
| backgroundColor | ResourceColor | No | Yes | Background color of the LoginWithHuaweiIDButton button. Default value: Red |
Defines the extended parameters of the LoginWithHuaweiIDButton button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| buttonStyle | ButtonStyle | No | Yes | Button style. You can set properties such as color and size. |
| customButtonStateStyles | StateStyles | No | Yes | Button state styles. You can set the button styles for states such as pressed and focused. customButtonStateStyles is valid only for the button of the BUTTON_CUSTOM type. |
| textAndIconButtonParams | TextAndIconButtonParams | No | Yes | Parameter for the button in the icon & text style, which controls the spacing between the icon and text. |
| iconButtonParams | IconButtonParams | No | Yes | Parameter for the icon-only button. It is used to set the icon radius. |
| canvasAnimationParams | CanvasAnimationParams | No | Yes | Parameters for a custom-style button. You can draw custom animations on the canvas provided by the button. Lottie animations are recommended. CanvasAnimationParams is valid only for the button of the BUTTON_CUSTOM type. Since: 26.0.0 |
Defines parameters for animations on the canvas. CanvasAnimationParams is used to draw custom animations on the canvas provided by a custom-style button. Lottie animations are recommended. CanvasAnimationParams is valid only for the button of the BUTTON_CUSTOM type.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 26.0.0
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| canvasRenderingContext | CanvasRenderingContext2D | No | No | Context for the animation canvas. |
| onReady | Callback<void> | No | No | Callback triggered when the canvas is ready. You can initialize the animation in this callback. |
Defines the radial gradient style for the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| center | [Length, Length] | No | No | Center of the radial gradient, that is, the coordinates relative to the upper left corner of the current component. |
| radius | number | string | No | No | Radius of the radial gradient. Value range: [0, +∞) Values less than 0 will be treated as 0. |
| colors | Array<[ResourceColor, number]> | No | No | Array of color stops, each of which consists of a color and its stop position. Invalid colors are automatically skipped. By default, the button does not apply the effect. |
| repeating | boolean | No | Yes | Indicates whether the colors are repeated. true: yes false: no The default value is false. |
Defines the sweep gradient style for the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| center | [Length, Length] | No | No | Center of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component. |
| start | number | string | No | Yes | Start point of the sweep gradient. When start is a number, the default value is 0. Values less than 0 are treated as 0, and values greater than 360 are treated as 360. When start is a string, the string must be a number or a number followed by one of the following units: deg, rad, grad, and turn. Valid value examples are "90", "90deg", and "1.57rad". |
| end | number | string | No | Yes | End point of the sweep gradient. When end is a number, the default value is 0. Values less than 0 are treated as 0, and values greater than 360 are treated as 360. When end is a string, the string must be a number or a number followed by one of the following units: deg, rad, grad, and turn. Valid value examples are "90", "90deg", and "1.57rad". |
| rotation | number | string | No | Yes | Rotation angle of the sweep gradient. When rotation is a number, the default value is 0. Values less than 0 are treated as 0, and values greater than 360 are treated as 360. When rotation is a string, the string must be a number or a number followed by one of the following units: deg, rad, grad, and turn. Valid value examples are "90", "90deg", and "1.57rad". |
| colors | Array<[ResourceColor, number]> | No | No | Array of color stops, each of which consists of a color and its stop position. Invalid colors are automatically skipped. If this parameter is not set, the button does not apply the effect. |
| repeating | boolean | No | Yes | Indicates whether the colors are repeated. true: yes false: no The default value is false. |
Defines the dimensions of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
Sets whether the HUAWEI ID sign-in button displays the loading state during sign-in.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| show | boolean | No | Yes | Indicates whether the HUAWEI ID sign-in button displays the loading state during sign-in. true: yes false: no The default value is false. |
Defines the parameter for the button in the icon & text style. It controls the spacing between the icon and text.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| textAndIconMargin | number | No | Yes | Spacing between the icon and text for the button in the icon & text style. The value ranges from 4 vp to 16 vp. The default value is 8 vp. Values smaller than 4 vp are treated as 4 vp, and values greater than 16 vp are treated as 16 vp. |
Defines the parameter for the icon-only button. You can set the icon radius.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| logoRadius | number | No | Yes | Radius of the HUAWEI icon in the icon-only button. The default value is 14 vp, and the minimum value is 8 vp. The value range is 20% to 32% of the button height. Values smaller than 20% of the button height are treated as 20%, and values greater than 32% are treated as 32%. |
Defines the styles of the HUAWEI ID sign-in button in different states. You can set the button styles for states such as pressed and focused. StateStyles is valid only for the button of the BUTTON_CUSTOM type.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| normal | ButtonStyle | No | Yes | Common style of the sign-in button in normal state. |
| pressed | ButtonStyle | No | Yes | Common style of the sign-in button in pressed state. |
| disabled | ButtonStyle | No | Yes | Common style of the sign-in button in disabled state. |
| focused | ButtonStyle | No | Yes | Common style of the sign-in button in focused state. |
Enumerates HUAWEI ID sign-in types.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
| Name | Value | Description |
|---|---|---|
| ID | 0 | The OpenID and UnionID are used to associate with a HUAWEI ID. After a user successfully signs in, the corresponding data is returned. The response data of this sign-in type contains the openID, unionID, authorizationCode, and idToken parameters. |
| PHONE_NUMBER | 1 | PhoneNumber is used to associate with a HUAWEI ID. After a user successfully signs in, if the user has not authorized the mobile number for quick verification, the mobile number authorization screen is displayed. If the user has authorized the mobile number, the corresponding data is returned. This sign-in type does not require real-time verification of the mobile number bound to the HUAWEI ID. The response data contains the openID, unionID, authorizationCode, and idToken parameters. The app uses the authorization code to call the API for obtaining a user-level credential to request an access token from the Account Kit server, and then uses the access token to call the API for obtaining HUAWEI ID user information. The app then obtains the user's mobile number from the user information. |
| REAL_TIME_PHONE_NUMBER | 2 | PhoneNumber is used to associate with a HUAWEI ID. Each time a user successfully signs in, the real-time mobile number verification and authorization screen is displayed. This sign-in type requires real-time verification of the mobile number bound to the HUAWEI ID. The response data contains the openID, unionID, authorizationCode, and idToken parameters. The app uses the authorization code to call the API for obtaining a user-level credential to request an access token from the Account Kit server, and then uses the access token to call the API for obtaining HUAWEI ID user information. The app then obtains the user's mobile number from the user information. Note: REAL_TIME_PHONE_NUMBER is not supported currently. |
| QUICK_LOGIN | 3 | PhoneNumber is used to associate with a HUAWEI ID. This type does not support the LoginWithHuaweiIDButton component of the icon or icon & text type. If this sign-in type is used, the AuthorizationWithHuaweiIDRequest API is called to obtain the anonymous mobile number bound to the HUAWEI ID. If the anonymous mobile number is not obtained, use another sign-in type. The response data of this sign-in type contains the openID, unionID, authorizationCode, and idToken parameters. The app uses the authorization code to call the /oauth2/v6/quickLogin/getPhoneNumber API to obtain user information, from which it retrieves the user's mobile number. Since: 5.0.0(12) |
Enumerates privacy text types.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
| Name | Value | Description |
|---|---|---|
| PLAIN_TEXT | 0 | Plain text, which cannot be tapped. |
| RICH_TEXT | 1 | Rich text, which is displayed in blue and can be tapped. It is used to display the HUAWEI ID User Authentication Agreement and the app's privacy statement. |
Enumerates event types of the HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Value | Description |
|---|---|---|
| HUAWEI_ID_LOGIN_BUTTON | 0 | Event that a user taps the HUAWEI ID sign-in button. |
Enumerates agreement consent statuses.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Value | Description |
|---|---|---|
| NOT_ACCEPTED | 0 | The user does not accept the agreements. |
| ACCEPTED | 1 | The user has accepted the agreements. |
Enumerates the styles of the HUAWEI ID sign-in button.
If the HUAWEI ID sign-in button styles listed below cannot meet your requirements, please refer to HUAWEI ID Web Login Function.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 4.1.0(11)
| Name | Value | Description |
|---|---|---|
| BUTTON_RED | 0 | Button with white text and red background. The font size is adaptive to the width and height of the button, ranging from 9 to 16. Check the rules from the following links based on your development scenario: rules for the one-tap HUAWEI ID sign-in button or rules for the HUAWEI ID sign in button. |
| BUTTON_WHITE | 1 | Button with black text and white background. The font size is adaptive to the width and height of the button, ranging from 9 to 16. Check the rules from the following links based on your development scenario: rules for the one-tap HUAWEI ID sign-in button or rules for the HUAWEI ID sign in button. |
| BUTTON_WHITE_OUTLINE | 2 | Button with black text, white background, and a border. The font size is adaptive to the width and height of the button, ranging from 9 to 16. Check the rules from the following links based on your development scenario: rules for the one-tap HUAWEI ID sign-in button or rules for the HUAWEI ID sign in button. |
| BUTTON_BLACK | 3 | Button with white text and black background. The font size is adaptive to the width and height of the button, ranging from 9 to 16. Check the rules from the following links based on your development scenario: rules for the one-tap HUAWEI ID sign-in button or rules for the HUAWEI ID sign in button. |
| ICON_RED | 4 | White icon with the red background. Check the rules for the HUAWEI ID sign-in button. |
| ICON_WHITE | 5 | Red icon with the white background. Check the rules for the HUAWEI ID sign-in button. |
| ICON_WHITE_OUTLINE | 6 | Red icon with the white background and a border. Check the rules for the HUAWEI ID sign-in button. |
| ICON_BLACK | 7 | White icon with the black background. Check the rules for the HUAWEI ID sign-in button. |
| ICON_GRAY | 8 | Red icon with the gray background. Check the rules for the HUAWEI ID sign-in button. Since: 5.0.0(12) |
| BUTTON_GRAY | 9 | Button with black text and gray background. The font size is adaptive to the width and height of the button, ranging from 9 to 16. Check the rules from the following links based on your development scenario: rules for the one-tap HUAWEI ID sign-in button or rules for the HUAWEI ID sign in button. Since: 5.0.0(12) |
| BUTTON_CUSTOM | 10 | Button with custom effects including text color, background color, and rounded corner. The font size is adaptive to the width and height of the button, ranging from 9 to 16. You can use CustomButtonParams to set custom button parameters and ensure adaptation to the dark and light color modes. Check the rules from the following links based on your development scenario: rules for the one-tap HUAWEI ID sign-in button or rules for the HUAWEI ID sign in button. Since: 5.0.0(12) Note: Buttons of this style support plain text only. |
Enumerates the text types of the one-tap HUAWEI ID sign-in button.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Value | Description |
|---|---|---|
| QUICK_LOGIN | 0 | The button text indicates one-tap sign-in with HUAWEI ID. It is used for account sign-in. |
| QUICK_REGISTRATION | 1 | The button text indicates one-tap registration with HUAWEI ID. It is used for account registration. |
Enumerates the text colors supported by the HUAWEI ID sign-in button. It is available only for the button of the BUTTON_CUSTOM type.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent
Since: 5.0.0(12)
| Name | Value | Description |
|---|---|---|
| WHITE | 0 | White. |
| BLACK | 1 | Black. |