目录

LoginPanel (HUAWEI ID Sign-in Panel Component)

This module provides the LoginPanel component. You can integrate this component into your app to implement the HUAWEI ID sign-in function.

The LoginPanel component must be used with loginComponentManager to implement the HUAWEI ID sign-in function. The button text in LoginPanel supports multiple languages by default.

Since: 4.1.0(11)

Modules to Import

import { LoginPanel, loginComponentManager } from '@kit.AccountKit';

LoginPanel

The @hms.core.account.LoginComponent module provides the HUAWEI ID sign-in panel component, which integrates standard elements such as the HUAWEI ID sign-in button, privacy statement, and other sign-in methods. This component is a sheet for sign-in. You can control its visibility using the show property. Follow the procedure below to integrate the component:

  1. Create a loginComponentManager.LoginPanelController object. You can register callbacks for events such as sign-in button taps and agreement consent status changes through chained calls.

  2. Construct a loginComponentManager.LoginPanelParams object and configure properties such as sign-in type, privacy statement text, app information, anonymous mobile number, and other sign-in methods.

  3. Set the variable show to control whether to display the LoginPanel component.

  4. Use the LoginPanel component in your screen component and pass the LoginPanelController and LoginPanelParams objects, as well as the variable show.

Model restriction: This API can be used only in the stage model.

Decorator: @Component

System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent

Since: 4.1.0(11)

Parameters

Name Type Mandatory Decorator Type Description
show boolean Yes @Link

Indicates whether to display the LoginPanel component.

false: no

true: yes (used when your service needs to use the LoginPanel component)

NOTE

- This parameter must be a local variable decorated with @State.

- LoginPanel can be used only on screens, not on pop-ups or sub-windows (for the time being).
params loginComponentManager.LoginPanelParams Yes

@Require

Applicable versions: 26.0.0+

 LoginPanel component parameters.
controller loginComponentManager.LoginPanelController Yes

@Require

Applicable versions: 26.0.0+

 LoginPanel component controller, which is used to receive tap events in the component.

[h2]build

build(): void

Constructor for the LoginPanel component.

Model restriction: This API can be used only in the stage model.

System capability: SystemCapability.AuthenticationServices.HuaweiID.UIComponent

Since: 4.1.0(11)

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 privacy-related text of the LoginPanel component, including the Privacy Statement, User Service Agreement, 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: '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 based on tag.
      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,
            // The anonymous mobile number here is only an example. Obtain an 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
}