第24篇：华为账号一键登录——从配置到实战

一、引言

华为账号一键登录是鸿蒙应用提供的高效登录方式，用户无需输入密码即可快速登录。DriverLicenseExam 项目集成了华为账号服务，实现了快速登录功能。本文将深入解析其实现。

二、华为账号服务配置

2.1 配置 Client ID

在 module.json5 中配置华为账号服务的 client ID：

{
  "module": {
    "abilities": [{
      "name": "EntryAbility",
      "metadata": [{
        "name": "huawei_app_preview_client_id",
        "value": "your_client_id_here"
      }]
    }]
  }
}

2.2 权限声明

{
  "requestPermissions": [{
    "name": "ohos.permission.APP_TRACKING_CONSENT"
  }]
}

三、一键登录实现

3.1 登录按钮

// QuickLoginPage.ets
@Builder
loginButton() {
  LoginWithHuaweiIDButton({
    params: {
      style: loginComponentManager.Style.BUTTON_CUSTOM,
      loginType: loginComponentManager.LoginType.QUICK_LOGIN,
      customButtonParams: {
        backgroundColor: 'rgba(100, 187, 92, 1)',
      },
    },
    controller: this.controller,
  }).id('login_with_huaweiId_button');
}

3.2 登录回调处理

controller: loginComponentManager.LoginWithHuaweiIDButtonController =
  new loginComponentManager.LoginWithHuaweiIDButtonController()
    .setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED)
    .onClickLoginWithHuaweiIDButton((error: BusinessError, response: HuaweiIDCredential) => {
      if (error) {
        // Mock 登录（开发阶段使用）
        if (this.isSelected) {
          AccountUtil.getAccountInfo().openID = '1';
          AccountUtil.getAccountInfo().unionID = '1';
          AccountUtil.getAccountInfo().idToken = '1';
          AccountUtil.getUserInfo().nickname = $r('app.string.huawei_user');
          AccountUtil.getUserInfo().phone = this.quickLoginAnonymousPhone;
          this.vm.navStack.pop();
        }
      } else {
        this.handleLoginWithHuaweiIDButton(error, response);
      }
    });

3.3 真实登录处理

handleLoginWithHuaweiIDButton(error: BusinessError | undefined, response: HuaweiIDCredential) {
  if (error) {
    if (error.code === ErrorCode.ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED) {
      this.showPopUp = true;
    }
    return;
  }
  if (this.isSelected && response) {
    const authCode = response.authorizationCode;
    const openID = response.openID;
    const unionID = response.unionID;
    const idToken = response.idToken;
    
    AccountUtil.getAccountInfo().openID = openID;
    AccountUtil.getAccountInfo().unionID = unionID;
    AccountUtil.getAccountInfo().idToken = idToken;
    AccountUtil.getUserInfo().nickname = $r('app.string.huawei_user');
    AccountUtil.getUserInfo().phone = this.quickLoginAnonymousPhone;
    this.vm.navStack.pop();
  }
}

四、隐私协议管理

// 隐私协议文本
privacyText: loginComponentManager.PrivacyText[] = [
  { text: $r('app.string.read_and_agree'), type: loginComponentManager.TextType.PLAIN_TEXT },
  { text: $r('app.string.app_user_agreement'), type: loginComponentManager.TextType.RICH_TEXT, tag: '' },
  { text: $r('app.string.app_privacy_policy'), type: loginComponentManager.TextType.RICH_TEXT, tag: 'privacy_policy' },
  { text: $r('app.string.and'), type: loginComponentManager.TextType.PLAIN_TEXT },
  { text: $r('app.string.huaweiId_user_authentication_protocol'), type: loginComponentManager.TextType.RICH_TEXT, tag: this.getProtocolUrl(PRIVACY_URL) },
  { text: $r('app.string.end'), type: loginComponentManager.TextType.PLAIN_TEXT },
];

// 复选框状态
Checkbox({ name: 'privacyCheckbox' })
  .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);
    }
  });

五、总结

华为账号一键登录通过 LoginWithHuaweiIDButton 组件实现，配合隐私协议管理和授权状态控制，提供了安全便捷的登录体验。

关键源码文件：

• products/entry/src/main/ets/pages/mine/QuickLoginPage.ets — 完整登录页面
• commons/commonLib/src/main/ets/utils/AccountUtil.ets — 账号管理工具