loginComponentManager (华为账号登录组件管理)

[h2]onClickEvent

onClickEvent(callback: AsyncCallback<ClickEvent>): LoginWithHuaweiIDButtonController

注册点击事件的回调函数。当前支持监听华为账号登录按钮的点击事件，可用于运营统计。使用callback异步回调。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
callback	AsyncCallback<ClickEvent>	是	回调函数。当用户点击华为账号登录按钮时，err为undefined，data为获取到的ClickEvent；否则为错误对象。

返回值：

类型	说明
LoginWithHuaweiIDButtonController	LoginWithHuaweiIDButton组件控制器。

示例：

[h2]onClickLoginWithHuaweiIDButton

onClickLoginWithHuaweiIDButton(callback: AsyncCallback<HuaweiIDCredential>): LoginWithHuaweiIDButtonController

注册华为账号登录事件的回调函数。当华为账号用户登录成功时触发回调，返回HuaweiIDCredential，可在此回调中处理响应结果、关闭面板完成登录。使用callback异步回调。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 4.1.0(11)

参数：

参数名	类型	必填	说明
callback	AsyncCallback<HuaweiIDCredential>	是	回调函数。当华为账号登录成功返回结果，err为undefined，data为获取到的HuaweiIDCredential对象；否则为错误对象。

返回值：

类型	说明
LoginWithHuaweiIDButtonController	LoginWithHuaweiIDButton组件控制器。

错误码：

以下错误码的详细介绍请参见通用错误码、ArkTS错误码和账号管理错误码。

错误码ID	错误信息
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. 适用版本：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. 适用版本：5.0.0(12)+

示例：

[h2]setEnabled

setEnabled(enabled: boolean): LoginWithHuaweiIDButtonController

设置华为账号登录按钮是否可点击。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
enabled	boolean	是	按钮是否可点击。当enabled为true时，华为账号登录按钮高亮可点击，当enabled为false时，华为账号登录按钮置灰不可点击，默认值：true。

参数名

类型

必填

说明

enabled

boolean

是

按钮是否可点击。

当enabled为true时，华为账号登录按钮高亮可点击，当enabled为false时，华为账号登录按钮置灰不可点击，默认值：true。

返回值：

类型	说明
LoginWithHuaweiIDButtonController	LoginWithHuaweiIDButton组件控制器。

示例：

[h2]continueLogin

continueLogin(callback: AsyncCallback<void>): LoginWithHuaweiIDButtonController

继续登录方法。当用户未同意协议时点击登录按钮会弹出协议确认弹框，用户点击同意并登录按钮时可调用该接口继续触发登录。使用callback异步回调

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
callback	AsyncCallback<void>	是	回调函数。当用户点击协议弹框的同意并登录按钮操作成功，err为undefined，否则为错误对象。

返回值：

类型	说明
LoginWithHuaweiIDButtonController	LoginWithHuaweiIDButton组件控制器。

错误码：

以下错误码的详细介绍请参见ArkTS错误码。

错误码ID	错误信息
1005300002	The user did not click the HUAWEI ID login button.

示例：

[h2]setLocale

setLocale(locale: string): LoginWithHuaweiIDButtonController

设置华为账号登录按钮文本显示语言。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 26.0.0

参数：

参数名	类型	必填	说明
locale	string	是	地区语言代码。当传入参数无效或系统不支持指定语言时，按钮文本将跟随系统语言进行显示。全量的地区语言代码可通过调用系统资源管理对象的getLocales方法获取。以下为常见的地区语言代码示例。 ar：阿拉伯语 bo-CN：藏语（中国） de：德语 en-US：英语（美国） en-GB：英语（英国） es：西班牙语 es-US：西班牙语（美国） fr：法语 id：印尼语 it：意大利语 ja：日语 ko：韩语 lo：老挝语 ms：马来语 my：缅甸语 my-MM：缅甸语（缅甸） pl：波兰语 pt：葡萄牙语 pt-PT：葡萄牙语（葡萄牙） ru：俄语 th：泰语 tr：土耳其语 ug：维吾尔语 vi：越南语 zh-CN：中文（简体） zh-HK：繁体中文（香港特别行政区） zh-TW：繁体中文（中国台湾）

参数名

类型

必填

说明

locale

string

是

地区语言代码。

当传入参数无效或系统不支持指定语言时，按钮文本将跟随系统语言进行显示。全量的地区语言代码可通过调用系统资源管理对象的getLocales方法获取。以下为常见的地区语言代码示例。

ar：阿拉伯语

bo-CN：藏语（中国）

de：德语

en-US：英语（美国）

en-GB：英语（英国）

es：西班牙语

es-US：西班牙语（美国）

fr：法语

id：印尼语

it：意大利语

ja：日语

ko：韩语

lo：老挝语

ms：马来语

my：缅甸语

my-MM：缅甸语（缅甸）

pl：波兰语

pt：葡萄牙语

pt-PT：葡萄牙语（葡萄牙）

ru：俄语

th：泰语

tr：土耳其语

ug：维吾尔语

vi：越南语

zh-CN：中文（简体）

zh-HK：繁体中文（香港特别行政区）

zh-TW：繁体中文（中国台湾）

返回值：

类型	说明
LoginWithHuaweiIDButtonController	LoginWithHuaweiIDButton组件控制器。

示例：

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;
  // 匿名手机号
  @State quickLoginAnonymousPhone: string = '';
  // 是否勾选协议
  @State isSelected: boolean = false;
  // 华为账号用户认证协议链接，此处仅为示例，实际开发过程中，出于可维护性、安全性等方面考虑，域名不建议硬编码在本地
  private static USER_AUTHENTICATION_PROTOCOL: string =
    'https://privacy.consumer.huawei.com/legal/id/authentication-terms.htm?code=CN&language=zh-CN';
  private static USER_SERVICE_TAG = '用户服务协议';
  private static PRIVACY_TAG = '隐私协议';
  private static USER_AUTHENTICATION_TAG = '华为账号用户认证协议';
  // 定义LoginWithHuaweiIDButton展示的隐私文本，展示应用的用户服务协议、隐私协议和华为账号用户认证协议
  privacyText: loginComponentManager.PrivacyText[] = [{
    text: '已阅读并同意',
    type: loginComponentManager.TextType.PLAIN_TEXT
  }, {
    text: '《用户服务协议》',
    tag: QuickLoginButtonComponent.USER_SERVICE_TAG,
    type: loginComponentManager.TextType.RICH_TEXT
  }, {
    text: '《隐私协议》',
    tag: QuickLoginButtonComponent.PRIVACY_TAG,
    type: loginComponentManager.TextType.RICH_TEXT
  }, {
    text: '和',
    type: loginComponentManager.TextType.PLAIN_TEXT
  }, {
    text: '《华为账号用户认证协议》',
    tag: QuickLoginButtonComponent.USER_AUTHENTICATION_TAG,
    type: loginComponentManager.TextType.RICH_TEXT
  }, {
    text: '。',
    type: loginComponentManager.TextType.PLAIN_TEXT
  }];
  // 构造LoginWithHuaweiIDButton组件的控制器
  controller: loginComponentManager.LoginWithHuaweiIDButtonController =
    new loginComponentManager.LoginWithHuaweiIDButtonController()
      /**
       * 当应用使用自定义的登录页时，如果用户未同意协议，需要设置协议状态为NOT_ACCEPTED，当用户同意协议后再设置
       * 协议状态为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);
        // 调用此方法，同意协议与登录一并完成，无需再次点击登录按钮
        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
  });

  // 传递页面渲染所需的数据，如匿名手机号等
  aboutToAppear(): void {
    this.getQuickLoginAnonymousPhone();
  }

  // Toast提示
  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}`);
    }
  }

  // 跳转华为账号用户认证协议页，该页面需在工程main_pages.json文件配置
  jumpToPrivacyWebView() {
    this.getUIContext().getRouter().pushUrl({
      // 需在module.json5中增加“ohos.permission.INTERNET”权限
      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: '网络未连接，请检查网络设置。',
            offset: { dx: 0, dy: -12 },
            alignment: DialogAlignment.Bottom,
            autoCancel: false,
            confirm: {
              value: '知道了',
              action: () => {
                // 用户点击“知道了”按钮，可于此处补充业务逻辑
              }
            }
          }
        );
      } else if (error.code === ErrorCode.ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED) {
        // 未同意协议，弹出协议弹框，推荐使用该回调方式
        this.agreementDialog.open();
      } else if (error.code === ErrorCode.ERROR_CODE_LOGIN_OUT) {
        // 华为账号未登录提示
        this.showToast('华为账号未登录，请重试');
      } else if (error.code === ErrorCode.ERROR_CODE_NOT_SUPPORTED) {
        // 不支持该scopes或permissions提示
        this.showToast('该scopes或permissions不支持');
      } else if (error.code === ErrorCode.ERROR_CODE_PARAMETER_ERROR) {
        // 参数错误提示
        this.showToast('参数错误');
      } else if (error.code === ErrorCode.ERROR_CODE_USER_CANCEL) {
        // 用户取消，无需特别处理
      } else {
        // 其他提示系统或服务异常
        this.showToast('服务或网络异常，请稍后重试');
      }
      return;
    }
    try {
      if (this.isSelected) {
        if (response) {
          hilog.info(this.domainId, this.logTag, 'Succeeded in clicking LoginWithHuaweiIDButton.');
          // 开发者根据实际业务情况使用以下信息
          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: '服务或网络异常，请稍后重试',
          offset: { dx: 0, dy: -12 },
          alignment: DialogAlignment.Bottom,
          autoCancel: false,
          confirm: {
            value: '知道了',
            action: () => {
              // 用户点击“知道了”按钮，可于此处补充业务逻辑
            }
          }
        }
      );
    }
  }

  // 错误处理
  dealAllError(error: BusinessError): void {
    hilog.error(0x0000, 'testTag', `Failed to login, errorCode=${error.code}, errorMsg=${error.message}`);
    // 在应用登录涉及UI交互场景下，建议按照如下错误码指导提示用户
    if (error.code === ErrorCode.ERROR_CODE_LOGIN_OUT) {
      // 用户未登录华为账号，请登录华为账号并重试或者尝试使用其他方式登录
    } else if (error.code === ErrorCode.ERROR_CODE_NETWORK_ERROR) {
      // 网络错误，请检查当前网络状态并重试
    } else if (error.code === ErrorCode.ERROR_CODE_INTERNAL_ERROR) {
      // 登录失败，请尝试使用其他方式登录
    } else if (error.code === ErrorCode.ERROR_CODE_USER_CANCEL) {
      // 用户取消授权
    } else if (error.code === ErrorCode.ERROR_CODE_SYSTEM_SERVICE) {
      // 系统服务异常，请稍后重试或者尝试使用其他方式登录
    } else if (error.code === ErrorCode.ERROR_CODE_REQUEST_REFUSE) {
      // 重复请求，应用无需处理
    } else if (error.code === ErrorCode.ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED) {
      // 用户未同意协议
    } else {
      // 应用登录失败，请尝试使用其他方式登录
    }
  }

  getQuickLoginAnonymousPhone() {
    // 创建授权请求，并设置参数
    const authRequest = new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();
    /**
     * 获取匿名手机号需传quickLoginAnonymousPhone这个scope，传参之前需要先申请“华为账号一键登录”权限
     * (权限名称为：quickLoginMobilePhone),后续才能获取匿名手机号数据
     */
    authRequest.scopes = ['quickLoginAnonymousPhone'];
    // 建议使用generateRandomUUID生成state，可用于一致性比对，防止跨站攻击
    authRequest.state = util.generateRandomUUID();
    // 一键登录场景该参数必须设置为false
    authRequest.forceAuthorization = false;
    const controller = new authentication.AuthenticationController();
    try {
      controller.executeRequest(authRequest).then((response: authentication.AuthorizationWithHuaweiIDResponse) => {
        // 获取到匿名手机号
        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.');
        // 未获取到匿名手机号需要跳转到应用自定义的登录页面
      }).catch((error: BusinessError) => {
        this.dealAllError(error);
      });
    } catch (error) {
      this.dealAllError(error);
    }
  }

  build() {
    Scroll() {
      Column() {
        Column() {
          Column() {
            // 此处为示例资源，开发者可使用应用图标进行替换，以保证正常编译运行
            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('应用描述')
              .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('华为账号绑定号码')
              .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: {
                // LoginWithHuaweiIDButton支持的样式
                style: loginComponentManager.Style.BUTTON_RED,
                // 账号登录按钮在登录过程中展示加载态
                extraStyle: {
                  buttonStyle: new loginComponentManager.ButtonStyle().loadingStyle({
                    show: true
                  })
                },
                // LoginWithHuaweiIDButton的边框圆角半径
                borderRadius: 24,
                // LoginWithHuaweiIDButton支持的登录类型
                loginType: loginComponentManager.LoginType.QUICK_LOGIN,
                // LoginWithHuaweiIDButton支持按钮的样式跟随系统深浅色模式切换
                supportDarkMode: true
              },
              controller: this.controller
            })
          }
          .height(40)
          .margin({
            top: 56
          })

          Column() {
            Button({
              type: ButtonType.Capsule,
              stateEffect: true
            }) {
              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_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(() => {
                      // 应用需要根据item.tag实现协议页面的跳转逻辑
                      hilog.info(this.domainId, this.logTag, `click privacy text tag: ${item.tag}`);
                      // 华为账号用户认证协议
                      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 = () => {
    // 用户点击“取消”按钮，可于此处补充业务逻辑
  };
  confirm: () => void = () => {
    // 用户点击“同意并登录”按钮，可于此处补充业务逻辑
  };
  clickHyperlinkText: () => void = () => {
    // 用户点击超链接文本，可于此处补充业务逻辑
  };
  privacyText: loginComponentManager.PrivacyText[] = [];
  private static USER_AUTHENTICATION_TAG = '华为账号用户认证协议';

  build() {
    Column() {
      Row() {
        Text('用户协议与隐私条款')
          .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(() => {
                  // 应用需要根据item.tag实现协议页面的跳转逻辑
                  hilog.info(this.domainId, this.logTag, `click privacy text tag: ${item.tag}`);
                  // 华为账号用户认证协议
                  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('取消',
          { 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('同意并登录',
          { 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 {
  // 账号未登录
  ERROR_CODE_LOGIN_OUT = 1001502001,
  // 该账号不支持一键登录，如海外账号
  ERROR_CODE_NOT_SUPPORTED = 1001500003,
  // 网络错误
  ERROR_CODE_NETWORK_ERROR = 1001502005,
  // 内部错误
  ERROR_CODE_INTERNAL_ERROR = 1001502009,
  // 用户取消授权
  ERROR_CODE_USER_CANCEL = 1001502012,
  // 系统服务异常
  ERROR_CODE_SYSTEM_SERVICE = 12300001,
  // 用户未同意用户协议
  ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED = 1005300001,
  // 参数错误
  ERROR_CODE_PARAMETER_ERROR = 401,
  // 重复请求
  ERROR_CODE_REQUEST_REFUSE = 1001500002
}

import { webview } from '@kit.ArkWeb';
import { hilog } from '@kit.PerformanceAnalysisKit';

// 华为账号用户认证协议展示页
@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}`);
      }
    }
  }
}

LoginPanelController

LoginPanel组件控制器类，用来控制组件内部状态变化、注册回调函数以监听组件内部的点击事件。支持应用主动设置用户协议状态（setAgreementStatus）、设置是否在用户点击其他登录方式时展示协议弹框（setShowAgreementForOptionalLogin），并支持通过链式调用注册各类事件的回调函数：

onClickLoginWithHuaweiIDButton：注册华为账号登录事件回调，登录成功时返回HuaweiIDCredential。
onClickOptionalLoginButton/onClickOptionalLoginIcon：注册可选登录按钮/图标点击事件回调，用于响应其他方式登录。
onClickPrivacyText：注册富文本协议链接点击事件回调，可获取对应tag以跳转具体协议页面。
onClickCloseButton：注册关闭面板或侧滑返回事件回调。
onChangeAgreementStatus：注册协议勾选框状态变化回调。
onClickEvent：注册华为账号登录按钮点击事件回调，可用于运营统计。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 4.1.0(11)

[h2]onClickLoginWithHuaweiIDButton

onClickLoginWithHuaweiIDButton(callback: AsyncCallback<HuaweiIDCredential>): LoginPanelController

注册华为账号登录事件的回调函数。当华为账号用户登录成功时触发回调，返回HuaweiIDCredential，可在此回调中处理响应结果、关闭面板完成登录。使用callback异步回调。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 4.1.0(11)

参数：

参数名	类型	必填	说明
callback	AsyncCallback<HuaweiIDCredential>	是	回调函数。当注册华为账号登录返回结果成功，err为undefined，data为获取到的HuaweiIDCredential对象；否则为错误对象。

返回值：

类型	说明
LoginPanelController	LoginPanel组件控制器。

错误码：

以下错误码的详细介绍请参见通用错误码、ArkTS错误码和账号管理错误码。

错误码ID	错误信息
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. 适用版本：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. 适用版本：5.0.0(12)+

示例：

[h2]onClickOptionalLoginButton

onClickOptionalLoginButton(callback: AsyncCallback<void>): LoginPanelController

注册可选登录按钮点击事件的回调函数。可选登录按钮文本可通过LoginPanelParams.optionalLoginButtonAttr配置，可在此回调中引导用户跳转至其他登录方式页面。使用callback异步回调。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 4.1.0(11)

参数：

参数名	类型	必填	说明
callback	AsyncCallback<void>	是	回调函数。当用户点击可选登录按钮操作成功，err为undefined，否则为错误对象。

返回值：

类型	说明
LoginPanelController	LoginPanel组件控制器。

示例：

[h2]onClickOptionalLoginIcon

onClickOptionalLoginIcon(callback: AsyncCallback<string>): LoginPanelController

注册可选登录图标点击事件的回调函数。可选登录图标可通过LoginPanelParams.optionalLoginAreaAttr配置，可在此回调中引导用户跳转至其他登录方式页面。使用callback异步回调。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
callback	AsyncCallback<string>	是	回调函数。当用户点击LoginIcon操作成功，err为undefined，data为获取到的LoginIcon的tag；否则为错误对象。

返回值：

类型	说明
LoginPanelController	LoginPanel组件控制器。

示例：

[h2]onClickPrivacyText

onClickPrivacyText(callback: AsyncCallback<string>): LoginPanelController

注册隐私文本点击事件的回调函数，仅类型为富文本的隐私文本被用户点击时会触发回调函数。隐私文本属性可通过LoginPanelParams.privacyText配置，可在此回调中跳转到应用的隐私协议页面。使用callback异步回调。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 4.1.0(11)

参数：

参数名	类型	必填	说明
callback	AsyncCallback<string>	是	回调函数。当注册隐私内容为富文本的点击操作成功时，err为undefined，data为获取到的PrivacyText的tag；否则为错误对象。

返回值：

类型	说明
LoginPanelController	LoginPanel组件控制器。

示例：

[h2]onChangeAgreementStatus

onChangeAgreementStatus(callback: AsyncCallback<AgreementStatus>): LoginPanelController

注册用户协议状态变化事件的回调函数。当登录面板中的协议勾选框状态变化时触发此回调，返回协议同意状态AgreementStatus。使用callback异步回调。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
callback	AsyncCallback<AgreementStatus>	是	回调函数。当用户同意或者取消同意协议成功，err为undefined，data为获取到的AgreementStatus；否则为错误对象。

返回值：

类型	说明
LoginPanelController	LoginPanel组件控制器。

示例：

[h2]setAgreementStatus

setAgreementStatus(agreementStatus: AgreementStatus): LoginPanelController

设置用户协议的状态。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
agreementStatus	AgreementStatus	是	开发者如果使用自定义协议页面，需要先设置agreementStatus为NOT_ACCEPTED，当用户同意协议后设置为ACCEPTED。

返回值：

类型	说明
LoginPanelController	LoginPanel组件控制器。

示例：

[h2]setShowAgreementForOptionalLogin

setShowAgreementForOptionalLogin(): LoginPanelController

设置用户点击其他方式登录选项时展示隐私协议弹框。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

返回值：

类型	说明
LoginPanelController	LoginPanel组件控制器。

示例：

[h2]onClickEvent

onClickEvent(callback: AsyncCallback<ClickEvent>): LoginPanelController

注册点击事件的回调函数。当前支持监听华为账号登录按钮的点击事件，可用于运营统计。使用callback异步回调。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
callback	AsyncCallback<ClickEvent>	是	回调函数。当用户点击华为账号登录按钮时，err为undefined，data为获取到的ClickEvent；否则为错误对象。

返回值：

类型	说明
LoginPanelController	LoginPanel组件控制器。

示例：

[h2]onClickCloseButton

onClickCloseButton(callback: AsyncCallback<void>): LoginPanelController

注册关闭按钮点击事件或用户侧滑返回事件的回调函数。使用callback异步回调。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 4.1.0(11)

参数：

参数名	类型	必填	说明
callback	AsyncCallback<void>	是	回调函数。当注册关闭按钮的点击操作或侧滑返回成功，err为undefined，否则为错误对象。

返回值：

类型	说明
LoginPanelController	LoginPanel组件控制器。

示例：

import { LoginPanel, loginComponentManager } from '@kit.AccountKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct PreviewLoginPanelPage {
  // 是否展示LoginPanel组件
  @State show: boolean = true;
  // 定义LoginPanel展示的隐私文本
  privacyText: loginComponentManager.PrivacyText[] = [{
    text: '已阅读并同意',
    type: loginComponentManager.TextType.PLAIN_TEXT
  }, {
    text: '《用户服务协议》',
    tag: '用户服务协议',
    type: loginComponentManager.TextType.RICH_TEXT
  }, {
    text: '《隐私协议》',
    tag: '隐私协议',
    type: loginComponentManager.TextType.RICH_TEXT
  }, {
    text: '和',
    type: loginComponentManager.TextType.PLAIN_TEXT
  }, {
    text: '《华为账号用户认证协议》',
    tag: '华为账号用户认证协议',
    type: loginComponentManager.TextType.RICH_TEXT
  }];
  // 定义LoginPanel展示的其他方式登录Icon
  iconArray: loginComponentManager.LoginIcon[] = [{
    // 此处为示例资源，开发者可使用应用图标进行替换，以保证正常编译运行
    icon: $r('app.media.app_icon'),
    tag: '其他方式登录'
  }];
  // 构造LoginPanel组件的控制器
  controller: loginComponentManager.LoginPanelController = new loginComponentManager.LoginPanelController()
    // 当登录类型不是QUICK_LOGIN且未设置协议时，如果需要展示自定义协议弹框，需要设置协议状态为NOT_ACCEPTED
    .setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED)
    // 用户点击其他方式登录展示隐私协议弹框
    .setShowAgreementForOptionalLogin()
    .onClickLoginWithHuaweiIDButton((error: BusinessError, response: loginComponentManager.HuaweiIDCredential) => {
      hilog.info(0x0000, 'testTag', 'onClickLoginWithHuaweiIDButton');
      if (error) {
        this.dealAllError(error);
        return;
      }
      if (response) {
        // 获取到Authorization Code后，传给应用服务端
        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;
      }
      // 应用需要实现协议页面的跳转逻辑
      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}`);
    });

  // 错误处理
  dealAllError(error: BusinessError): void {
    hilog.error(0x0000, 'testTag', `Failed to login, errorCode=${error.code}, errorMsg=${error.message}`);
    // 在应用登录涉及UI交互场景下，建议按照如下错误码指导提示用户
    if (error.code === ErrorCode.ERROR_CODE_LOGIN_OUT) {
      // 用户未登录华为账号，请登录华为账号并重试或者尝试使用其他方式登录
    } else if (error.code === ErrorCode.ERROR_CODE_NETWORK_ERROR) {
      // 网络错误，请检查当前网络状态并重试
    } else if (error.code === ErrorCode.ERROR_CODE_INTERNAL_ERROR) {
      // 登录失败，请尝试使用其他方式登录
    } else if (error.code === ErrorCode.ERROR_CODE_USER_CANCEL) {
      // 用户取消授权
    } else if (error.code === ErrorCode.ERROR_CODE_SYSTEM_SERVICE) {
      // 系统服务异常，请稍后重试或者尝试使用其他方式登录
    } else if (error.code === ErrorCode.ERROR_CODE_REQUEST_REFUSE) {
      // 重复请求，应用无需处理
    } else if (error.code === ErrorCode.ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED) {
      // 用户未同意协议
    } else {
      // 应用登录失败，请尝试使用其他方式登录
    }
  }

  build() {
    if (this.show) {
      Stack() {
        LoginPanel({
          show: this.show,
          params: {
            appInfo: {
              // 此处为示例资源，开发者可使用应用图标进行替换，以保证正常编译运行
              appIcon: $r('app.media.app_icon'),
              appName: '应用名称'
            },
            privacyText: this.privacyText,
            // 参考华为账号开发指南获取匿名手机号
            anonymousPhoneNumber: '139******99',
            loginType: loginComponentManager.LoginType.QUICK_LOGIN,
            // optionalLoginAreaAttr和optionalLoginButtonAttr同时存在时优先展示optionalLoginAreaAttr
            optionalLoginAreaAttr: { iconArray: this.iconArray },
            optionalLoginButtonAttr: { text: '其他方式登录' }
          },
          controller: this.controller
        })
      }
      .height('100%')
      .width('100%')
    }
  }
}

export enum ErrorCode {
  // 账号未登录
  ERROR_CODE_LOGIN_OUT = 1001502001,
  // 网络错误
  ERROR_CODE_NETWORK_ERROR = 1001502005,
  // 内部错误
  ERROR_CODE_INTERNAL_ERROR = 1001502009,
  // 用户取消授权
  ERROR_CODE_USER_CANCEL = 1001502012,
  // 系统服务异常
  ERROR_CODE_SYSTEM_SERVICE = 12300001,
  // 用户未同意用户协议
  ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED = 1005300001,
  // 重复请求
  ERROR_CODE_REQUEST_REFUSE = 1001500002
}

ButtonStyle

华为账号登录按钮样式类。通过new loginComponentManager.ButtonStyle()构造实例。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

[h2]buttonSize

buttonSize(value: ButtonSize): ButtonStyle

设置华为账号登录按钮的尺寸。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	ButtonSize	是	当按钮类型为纯图标按钮时，按钮的宽度和高度相等，取value.width和value.height的非undefined的最小值。如果value.width和value.height都为undefined取LoginWithHuaweiIDButtonParams的iconRadius的2倍值，如果iconRadius也是undefined则取默认值48vp。当按钮类型为非纯图标按钮时，按钮的宽度和高度分别取value.width和value.height。当value.width或者value.height为undefined，按钮宽度或高度取父布局宽高。说明：当设置该属性的宽高，父组件的宽高值应该大于等于该属性的宽高值。

参数名

类型

必填

说明

value

ButtonSize

是

当按钮类型为纯图标按钮时，按钮的宽度和高度相等，取value.width和value.height的非undefined的最小值。如果value.width和value.height都为undefined取LoginWithHuaweiIDButtonParams的iconRadius的2倍值，如果iconRadius也是undefined则取默认值48vp。

当按钮类型为非纯图标按钮时，按钮的宽度和高度分别取value.width和value.height。当value.width或者value.height为undefined，按钮宽度或高度取父布局宽高。

说明： 当设置该属性的宽高，父组件的宽高值应该大于等于该属性的宽高值。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]fontSize

fontSize(value: Length): ButtonStyle

设置华为账号登录按钮的字号。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	Length	是	当按钮为图文按钮或文本按钮时，设置按钮文字的字号。根据华为账号开放登录视觉规范，设置范围建议在按钮高度的30%~50%之间。如果没传此值，字号大小在9~16vp之间随按钮宽度自适应。

参数名

类型

必填

说明

value

Length

是

当按钮为图文按钮或文本按钮时，设置按钮文字的字号。根据华为账号开放登录视觉规范，设置范围建议在按钮高度的30%~50%之间。

如果没传此值，字号大小在9~16vp之间随按钮宽度自适应。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]fontColor

fontColor(value: ResourceColor | FontColor): ButtonStyle

设置华为账号登录按钮的文字颜色。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	ResourceColor \| FontColor	是	当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮文字颜色。当已经设置CustomButtonParams的fontColor属性时，优先取此参数值。不设置则为白色。

参数名

类型

必填

说明

value

ResourceColor | FontColor

是

当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮文字颜色。当已经设置CustomButtonParams的fontColor属性时，优先取此参数值。

不设置则为白色。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]fontWeight

fontWeight(value: string | number | FontWeight): ButtonStyle

设置华为账号登录按钮的文字字重。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	string \| number \| FontWeight	是	当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮文字字重。number类型取值[100, 900]，取值间隔为100，取值越大字体越粗，当超出边界值时取值为400。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。默认字重为FontWeight.Medium，对应的number值为500。

参数名

类型

必填

说明

value

string | number | FontWeight

是

当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮文字字重。number类型取值[100, 900]，取值间隔为100，取值越大字体越粗，当超出边界值时取值为400。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。

默认字重为FontWeight.Medium，对应的number值为500。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]fontFamily

fontFamily(value: ResourceStr): ButtonStyle

设置华为账号登录按钮的文字字体。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	ResourceStr	是	当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮文字字体。默认字体'HarmonyOS Sans'。应用当前支持'HarmonyOS Sans'字体和注册自定义字体。

参数名

类型

必填

说明

value

ResourceStr

是

当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮文字字体。

默认字体'HarmonyOS Sans'。

应用当前支持'HarmonyOS Sans'字体和注册自定义字体。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]backgroundColor

backgroundColor(value: ResourceColor): ButtonStyle

设置华为账号登录按钮的背景颜色。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	ResourceColor	是	当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮背景颜色。当已经设置CustomButtonParams的backgroundColor属性时，优先取此参数值。不设置则为 Red 红色背景。

参数名

类型

必填

说明

value

ResourceColor

是

当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮背景颜色。

当已经设置CustomButtonParams的backgroundColor属性时，优先取此参数值。

不设置则为 Red 红色背景。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]backgroundEffect

backgroundEffect(value: BackgroundEffectOptions): ButtonStyle

设置华为账号登录按钮的背景属性。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	BackgroundEffectOptions	是	当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮背景属性，包括饱和度，亮度，颜色。不设置则无效果。

参数名

类型

必填

说明

value

BackgroundEffectOptions

是

当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮背景属性，包括饱和度，亮度，颜色。

不设置则无效果。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

BackgroundBrightnessOptions

[h2]backgroundBrightness

backgroundBrightness(value: BackgroundBrightnessOptions): ButtonStyle

设置华为账号登录按钮的背景提亮效果。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	BackgroundBrightnessOptions	是	当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮背景提亮效果，包括：亮度变化速率，提亮程度。不设置则无效果。

参数名

类型

必填

说明

value

是

当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮背景提亮效果，包括：亮度变化速率，提亮程度。

不设置则无效果。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]linearGradient

linearGradient(value: LinearGradient): ButtonStyle

设置华为账号登录按钮的背景颜色线性渐变效果。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	LinearGradient	是	当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮背景颜色线性渐变效果，不设置则无效果。说明：使用此属性时，按钮不能有背景色，否则按钮边缘会出现锯齿毛边，需把按钮背景色设置为透明色，如backgroundColor(Color.Transparent)。

参数名

类型

必填

说明

value

LinearGradient

是

当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮背景颜色线性渐变效果，不设置则无效果。

说明：

使用此属性时，按钮不能有背景色，否则按钮边缘会出现锯齿毛边，需把按钮背景色设置为透明色，如backgroundColor(Color.Transparent)。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]sweepGradient

sweepGradient(value: SweepGradient): ButtonStyle

设置华为账号登录按钮的背景颜色角度渐变效果。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名

类型

必填

说明

value

SweepGradient

是

当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮背景颜色角度渐变效果。

不设置则无效果。

说明：

使用此属性时，按钮不能有背景色，否则按钮边缘会出现锯齿毛边，需把按钮背景色设置为透明色，如backgroundColor(Color.Transparent)。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]radialGradient

radialGradient(value: RadialGradient): ButtonStyle

设置华为账号登录按钮的背景颜色径向渐变效果。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名

类型

必填

说明

value

RadialGradient

是

当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮背景颜色径向渐变效果。

不设置则无效果。

说明：

使用此属性时，按钮不能有背景色，否则按钮边缘会出现锯齿毛边，需把按钮背景色设置为透明色，如backgroundColor(Color.Transparent)。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]shadow

shadow(value: ShadowOptions | ShadowStyle): ButtonStyle

设置华为账号登录按钮的阴影效果。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	ShadowOptions \| ShadowStyle	是	当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮阴影效果，不设置则无效果。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]opacity

opacity(value: number | Resource): ButtonStyle

设置华为账号登录按钮的不透明度。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名

类型

必填

说明

value

number | Resource

是

元素的不透明度，取值范围为0~1，1表示不透明，0表示完全透明，达到隐藏组件效果，但是在布局中占位。

默认值：1。

当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮的不透明度。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]border

border(value: BorderOptions): ButtonStyle

设置华为账号登录按钮的边框样式。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名

类型

必填

说明

value

BorderOptions

是

当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮的边框样式，不设置则无效果。

说明： 设置内边框需要预留充足的空间展示按钮，请确保按钮父组件宽高大于按钮本身。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]borderImage

borderImage(value: BorderImageOption): ButtonStyle

设置华为账号登录按钮的图片边框样式。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	BorderImageOption	是	当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮的图片边框样式，不设置则无效果。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]outline

outline(value: OutlineOptions): ButtonStyle

设置华为账号登录按钮的外描边样式。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	OutlineOptions	是	当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮的外描边样式，不设置则无效果。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]hoverEffect

hoverEffect(value: HoverEffect): ButtonStyle

设置华为账号登录按钮的悬浮态效果。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	HoverEffect	是	当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮的悬浮态效果，不设置则为默认效果。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：

[h2]clickEffect

clickEffect(value: ClickEffect): ButtonStyle

设置华为账号登录按钮的点击回弹效果。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.AuthenticationServices.HuaweiID.UIComponent

起始版本： 5.0.0(12)

参数：

参数名	类型	必填	说明
value	ClickEffect	是	当按钮类型为BUTTON_CUSTOM时，此参数可设置按钮的点击回弹效果，不设置则无效果。

返回值：

类型	说明
ButtonStyle	华为账号登录按钮样式。

示例：