【HarmonyOS NEXT】华为账号登录华为一键登录使用“华为账号登录”按钮登录开发前提在进行代码开发前，请先

使用“华为账号登录”按钮登录

开发前提

在进行代码开发前，请先确认您已完成配置Client ID工作。该场景无需申请scope权限。

客户端开发

导入LoginWithHuaweiIDButton模块及相关公共模块。

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

调用LoginWithHuaweiIDButton组件，展示华为账号登录按钮，用户点击华为账号登录按钮后，应用获取到UnionID、Authorization Code、OpenID、ID Token，将数据传给应用服务端，可参考客户端与服务端交互开发的开发步骤a和b，完成服务端开发。应用可以通过公开的网址获取到华为账号服务器发布的公钥，对签名和ID Token中的必要信息进行验证，以证明其没有被篡改过。解析ID Token可参考ID Token解析与验证。

@Component
struct PreviewLoginButtonPage {
  // 构造LoginWithHuaweiIDButton组件的控制器
  controller: loginComponentManager.LoginWithHuaweiIDButtonController =
    new loginComponentManager.LoginWithHuaweiIDButtonController()
      .onClickLoginWithHuaweiIDButton((error: BusinessError, response: loginComponentManager.HuaweiIDCredential) => {
        if (error) {
          hilog.error(0x0000, 'testTag',
            `Failed to onClickLoginWithHuaweiIDButton. Code: ${error.code}, message: ${error.message}`);
          return;
        }

        if (response) {
          hilog.info(0x0000, 'testTag', 'Succeeded in getting response.');
          const authCode = response.authorizationCode;
          const openID = response.openID;
          const unionID = response.unionID;
          const idToken = response.idToken;
          // 开发者处理authCode、openID、unionID、idToken
        }
      });

  build() {
    Column() {
      Column() {
        Column() {
          LoginWithHuaweiIDButton({
            params: {
              // LoginWithHuaweiIDButton支持的样式
              style: loginComponentManager.Style.BUTTON_RED,
              // 账号登录按钮在登录过程中展示加载态
              extraStyle: {
                buttonStyle: new loginComponentManager.ButtonStyle().loadingStyle({
                  show: true
                })
              },
              // LoginWithHuaweiIDButton的边框圆角半径
              borderRadius: 24,
              // LoginWithHuaweiIDButton支持的登录类型
              loginType: loginComponentManager.LoginType.ID,
              // LoginWithHuaweiIDButton支持按钮的样式跟随系统深浅色模式切换
              supportDarkMode: true,
              // verifyPhoneNumber：如果华为账号用户在过去90天内未进行短信验证，是否拉起Account Kit提供的短信验证码页面
              verifyPhoneNumber: true
            },
            controller: this.controller
          })
        }
        .height(40)
      }.width('100%')
    }
    .justifyContent(FlexAlign.Center)
    .constraintSize({ minHeight: '100%' })
    .margin({
      left: 16,
      right: 16
    })
  }
}

使用自定义按钮登录

开发前提

在进行代码开发前，请先确认您已完成配置Client ID工作。该场景无需申请scope权限。

客户端开发

根据【华为账号登录】按钮规范开发自定义登录图标按钮，参考如下步骤在点击事件中完成华为账号登录API调用。

导入authentication模块及相关公共模块。

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

创建登录请求并设置参数。

const loginRequest = new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest();
// 用户是否需要登录授权，该值为true且用户未登录或未授权时，会拉起用户登录或授权页面
loginRequest.forceLogin = true;// 用于防跨站点请求伪造
loginRequest.state = util.generateRandomUUID();

调用AuthenticationController对象的executeRequest方法执行登录请求，并处理登录结果，获取到UnionID、OpenID、Authorization Code及ID Token。之后将Authorization Code传给应用服务端处理，可参考客户端与服务端交互开发的开发步骤a和b。应用可以通过公开的网址获取到华为账号服务器发布的公钥，对签名和ID Token中的必要信息进行验证，以证明其没有被篡改过。解析ID Token可参考ID Token解析与验证。

try {
  const controller = new authentication.AuthenticationController(getContext(this));
  controller.executeRequest(loginRequest).then((response: authentication.LoginWithHuaweiIDResponse) => {
    const loginWithHuaweiIDResponse = response as authentication.LoginWithHuaweiIDResponse;
    const state = loginWithHuaweiIDResponse.state;
    if (state && loginRequest.state !== state) {
      hilog.error(0x0000, 'testTag', `Failed to login. The state is different, response state: ${state}`);
      return;
    }
    hilog.info(0x0000, 'testTag', 'Succeeded in logging in.');
    const loginWithHuaweiIDCredential = loginWithHuaweiIDResponse.data!;
    const code = loginWithHuaweiIDCredential.authorizationCode;
    const idToken = loginWithHuaweiIDCredential.idToken;
    const openID = loginWithHuaweiIDCredential.openID;
    const unionID = loginWithHuaweiIDCredential.unionID;
    // 开发者处理code, idToken, openID, unionID
  }).catch((error: BusinessError) => {
    this.dealAllError(error);
  })
} catch (error) {
  this.dealAllError(error);
}

dealAllError(error: BusinessError): void {
  hilog.error(0x0000, 'testTag', 'Failed to login, errorCode=%{public}d, errorMsg=%{public}s', error.code,
    error.message);
}