LoginWithHuaweiIDButton能否根据loginType的属性动态切换登录类型
===============================================

#### 问题现象

使用LoginWithHuaweiIDButton一键登录组件，希望根据组件的loginType属性动态改变组件类型，比如获取到匿名手机号就使用一键登录，不存在就使用华为账号登录，实际使用时为什么状态更新后，UI组件没有变化？

问题代码如下：

_//_ _华为一键登录按钮组件_
LoginWithHuaweiIDButton({
  params: {
    textAndIconStyle: true,
    style: loginComponentManager.Style.BUTTON\_BLACK,
    extraStyle: {
      buttonStyle: new loginComponentManager.ButtonStyle()
    },
    _// 存在匿名手机号则使用手机号一键登录，不存在则使用华为账号登录_
    loginType: this.loginType,
  },
  controller: this.controller,
})
@Computed
  get loginType() {
    return this.quickLoginAnonymousPhone ? loginComponentManager.LoginType.QUICK\_LOGIN :
    loginComponentManager.LoginType.ID
  }

#### 背景知识

*   [LoginWithHuaweiIDButton](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/account-api-huawei-id-button)：华为账号登录组件，通过该组件，应用可完成华为账号的登录功能。
*   [loginType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/account-api-component-manager#section79023235528)：是LoginWithHuaweiIDButton中标识华为账号登录类型的属性，默认是LoginType.ID，一键登录对应的值是LoginType.QUICK\_LOGIN。
*   华为账号一键登录及华为账号登录，可以[借助DevEco Studio辅助开发](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/account-phone-unionid-login#section12250103482815)，快速实现页面代码及逻辑编写。

#### 解决方案

因LoginWithHuaweiIDButton中封装了登录相关的业务逻辑，不支持根据loginType动态改变登录类型，上述需求可通过if/else控制实际显示的登录组件来实现。

核心代码如下：

aboutToAppear(): void {
  _// 页面初始化时，获取匿名手机号_
  this.getQuickLoginAnonymousPhone();
}

build() {
  Column() {
   _ // 获取到匿名手机号，走一键登录_
    if (this.quickLoginAnonymousPhone) {
      QuickLoginButtonComponent({ quickLoginAnonymousPhone: this.quickLoginAnonymousPhone });
    } else {
     _ // 未获取匿名手机号，走华为账号登录_
      LoginButtonComponent();
    }
  }
  .height('100%')
  .width('100%');
}

完整示例代码：

import { authentication, loginComponentManager, LoginWithHuaweiIDButton } from '@kit.AccountKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { util } from '@kit.ArkTS';

const LOG\_TAG: string \= 'QuickLoginButtonComponent';
const DOMAIN\_ID: number \= 0x0000;

@Entry
@Component
struct Index {
  @State quickLoginAnonymousPhone: string \= '';

  getQuickLoginAnonymousPhone() {
 _   // 创建授权请求，并设置参数_
    const authRequest \= new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();
  _  // 获取匿名手机号需传quickLoginAnonymousPhone这个scope，传参之前需要先申请“华为账号一键登录”权限_
    _//(权限名称为：quickLoginMobilePhone),后续才能获取匿名手机号数据_
    authRequest.scopes \= \['quickLoginAnonymousPhone'\];
  _  // 用于防跨站点请求伪造_
    authRequest.state \= util.generateRandomUUID();
 _   // 一键登录场景该参数只能设置为false_
    authRequest.forceAuthorization \= false;
    const controller \= new authentication.AuthenticationController();
    try {
      controller.executeRequest(authRequest).then((response: authentication.AuthorizationWithHuaweiIDResponse) \=\> {
       _ // 获取到UnionID、OpenID、匿名手机号_
        const unionID \= response.data?.unionID;
        const openID \= response.data?.openID;
        const anonymousPhone \= response.data?.extraInfo?.quickLoginAnonymousPhone as string;
        if (anonymousPhone) {
          hilog.info(DOMAIN\_ID, LOG\_TAG, 'Succeeded in authentication.');
          this.quickLoginAnonymousPhone \= anonymousPhone;
          return;
        }
        hilog.info(DOMAIN\_ID, LOG\_TAG, 'Succeeded in authentication. AnonymousPhone is empty.');
       _ // 未获取到匿名手机号需要跳转到应用自定义的登录页面_
      }).catch((error: BusinessError) \=\> {
        hilog.error(DOMAIN\_ID, LOG\_TAG,
          \`Failed to login, errorCode is ${error.code}, errorMessage is ${error.message}\`);
      });
    } catch (error) {
      hilog.error(DOMAIN\_ID, LOG\_TAG,
        \`Failed to login, errorCode is ${error.code}, errorMessage is ${error.message}\`);
    }
  }

  aboutToAppear(): void {
   _ // 页面初始化时，获取匿名手机号_
    this.getQuickLoginAnonymousPhone();
  }

  build() {
    Column() {
      _// 获取到匿名手机号，走一键登录_
      if (this.quickLoginAnonymousPhone) {
        QuickLoginButtonComponent({ quickLoginAnonymousPhone: this.quickLoginAnonymousPhone });
      } else {
      _  // 未获取匿名手机号，走华为账号登录_
        LoginButtonComponent();
      }
    }
    .height('100%')
    .width('100%');
  }
}

@Component
struct LoginButtonComponent {
  logTag: string \= 'LoginButtonComponent';
  domainId: number \= 0x0000;
 _ /\*\*_
   _\* Defines the controller to interact with the button for login with a HUAWEI ID._
   _\*/_
  controller: loginComponentManager.LoginWithHuaweiIDButtonController \=
    new loginComponentManager.LoginWithHuaweiIDButtonController()
      .onClickLoginWithHuaweiIDButton((error: BusinessError, response: loginComponentManager.HuaweiIDCredential) \=\> {
        if (error) {
          hilog.error(this.domainId, this.logTag,
            \`Failed to login with LoginWithHuaweiIDButton. Code is ${error.code}, message is ${error.message}\`);
          return;
        }

        if (response) {
          hilog.info(this.domainId, this.logTag, 'Succeed in clicking LoginWithHuaweiIDButton.');
          let authCode \= response.authorizationCode;
          let openID \= response.openID;
          let unionID \= response.unionID;
          let idToken \= response.idToken;
          _// to do something after getting the response._
          return;
        }
      });

  build() {
    Column() {
      Column() {
     _   /\*\*_
         _\* Invoke the LoginWithHuaweiIDButton component._
         _\*/_
        LoginWithHuaweiIDButton({
          params: {
            style: loginComponentManager.Style.BUTTON\_RED,
            loginType: loginComponentManager.LoginType.ID,
            supportDarkMode: true,
          },
          controller: this.controller
        });
      }
      .height(40)
      .width(200)
      .margin({
        left: $r('sys.float.ohos\_id\_max\_padding\_start'),
        right: $r('sys.float.ohos\_id\_max\_padding\_end')
      });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}

@Component
struct QuickLoginButtonComponent {
 _ // 匿名化手机号_
  @Prop quickLoginAnonymousPhone: string;
  _// 是否勾选协议_
  @State isSelected: boolean \= false;
  _// 华为账号用户认证协议链接，此处仅为示例，实际开发过程中，出于可维护性、安全性等方面考虑，域名不建议硬编码在本地_
  private static USER\_AUTHENTICATION\_PROTOCOL: string \=
    'https://\*\*\*\*\*\*\*\*\*/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);
      })
      .onClickEvent((error: BusinessError, clickEvent: loginComponentManager.ClickEvent) \=\> {
        if (error) {
          this.dealAllError(error);
          return;
        }
        hilog.info(DOMAIN\_ID, LOG\_TAG, \`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(DOMAIN\_ID, LOG\_TAG,
              \`Failed to login with agreementDialog. errCode is ${error.code}, errMessage is ${error.message}\`);
          } else {
            hilog.info(DOMAIN\_ID, LOG\_TAG,
              'Succeed in clicking agreementDialog continueLogin.');
          }
        });
      },
      clickHyperlinkText: () \=\> {
        this.agreementDialog.close();
        this.jumpToPrivacyWebView();
      }
    }),
    autoCancel: false,
    alignment: DialogAlignment.Center,
  });

 _ // 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(DOMAIN\_ID, LOG\_TAG, \`showToast args  errCode is ${code}, errMessage is ${message}\`);
    }
  }

 _ // 跳转华为账号用户认证协议页,该页面需在工程main\_pages.json文件配置_
  jumpToPrivacyWebView() {
    this.getUIContext().getRouter().pushUrl({
     _ // 在工程main\_pages.json文件配置跳转页，具体可参考AccountKit开发指南使用华为账号一键登录WebPage示例代码_
      url: 'pages/WebPage',
      params: {
        isFromDialog: true,
        url: QuickLoginButtonComponent.USER\_AUTHENTICATION\_PROTOCOL,
      }
    }, (err) \=\> {
      if (err) {
        hilog.error(DOMAIN\_ID, LOG\_TAG,
          \`Failed to jumpToPrivacyWebView, errCode is ${err.code}, errMessage is ${err.message}\`);
      }
    });
  }

  handleLoginWithHuaweiIDButton(error: BusinessError | undefined,
    response: loginComponentManager.HuaweiIDCredential) {
    if (error) {
      hilog.error(DOMAIN\_ID, LOG\_TAG,
        \`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 {
       _ // 其他提示系统或服务异常_
        this.showToast('服务或网络异常，请稍后重试');
    _    // TODO: 其他错误码处理，请参考API中的错误码查看详细错误原因_
      }
      return;
    }
    try {
      if (this.isSelected) {
        if (response) {
          hilog.info(DOMAIN\_ID, LOG\_TAG, 'Succeed in clicking LoginWithHuaweiIDButton.');
         _ // 开发者根据实际业务情况使用以下信息_
          const authCode \= response.authorizationCode;
          const openID \= response.openID;
          const unionID \= response.unionID;
          const idToken \= response.idToken;
        }
      } else {
        this.agreementDialog.open();
      }
    } catch (err) {
      hilog.error(DOMAIN\_ID, LOG\_TAG,
        \`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(DOMAIN\_ID, LOG\_TAG,
      \`Failed to login, errorCode is ${error.code}, errorMessage is ${error.message}\`);
   _ // TODO: 错误码处理，请参考API中的错误码根据实际情况处理_
  }

  build() {
    Scroll() {
      Column() {
        Column() {
          Column() {
            Image($r('sys.media.ohos\_app\_icon'))
              .width(48)
              .height(48)
              .draggable(false)
              .copyOption(CopyOptions.None)
              .onComplete(() \=\> {
                hilog.info(DOMAIN\_ID, LOG\_TAG, 'appIcon loading success.');
              })
              .onError(() \=\> {
                hilog.error(DOMAIN\_ID, LOG\_TAG, 'appIcon loading fail.');
              });

            Text($r('app.string.app\_name'))
              .fontFamily($r('sys.string.ohos\_id\_text\_font\_family\_medium'))
              .fontWeight(FontWeight.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,
              _  // verifyPhoneNumber：如果华为账号用户在过去90天内未进行短信验证，是否拉起Account Kit提供的短信验证码页面_
                verifyPhoneNumber: 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(DOMAIN\_ID, LOG\_TAG, '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(DOMAIN\_ID, LOG\_TAG, \`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'))
                    .focusable(true)
                    .focusOnTouch(true)
                    .onClick(() \=\> {
                      _// 应用需要根据item.tag实现协议页面的跳转逻辑_
                      hilog.info(DOMAIN\_ID, LOG\_TAG, \`click privacy text tag: ${item.tag}\`);
                     _ // 华为账号用户认证协议_
                      if (item.tag \=== QuickLoginButtonComponent.USER\_AUTHENTICATION\_TAG) {
                        this.jumpToPrivacyWebView();
                      }
                    });
                }
              }, (item: loginComponentManager.PrivacyText, index: number) \=\> {
                return item?.tag \+ index.toString();
              });
            }
            .width('100%');
          }
          .margin({ left: 12 })
          .layoutWeight(1)
          .constraintSize({ minHeight: 24 });
        }
        .alignItems(VerticalAlign.Top)
        .margin({
          bottom: 16,
          top: 16
        });
      }
      .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)
                .focusable(true)
                .focusOnTouch(true)
                .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, index: number) \=\> {
            return item?.tag \+ index.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\_AGREEMENT\_STATUS\_NOT\_ACCEPTED \= 1005300001
}

#### 总结

LoginWithHuaweiIDButton组件的类型是在初始化时由loginType类型决定，不支持动态改变，可通过条件渲染的方式来满足动态切换登录类型的需求。