# Accountkit-Samplecode-Clientdemo-ArkTS_1

**Repository Path**: asking-for-love/accountkit-samplecode-clientdemo-arkts_1

## Basic Information

- **Project Name**: Accountkit-Samplecode-Clientdemo-ArkTS_1
- **Description**: 本示例基于HarmonyOS实现了Account Kit（华为账号服务）提供的华为账号一键登录、静默登录、获取头像昵称、获取手机号、获取收货地址、未成年人模式和获取发票抬头等功能。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 20
- **Created**: 2024-10-20
- **Last Updated**: 2024-10-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Account Kit

## Overview

This sample project illustrates how to use the capabilities provided by Account Kit, including signing in, obtaining the avatar and nickname of a user, verifying the mobile number in a quick manner, obtaining the shipping address, obtaining the invoice title, and making youth mode-related configurations.

This sample project simulates the following scenarios in an app: calling the one-tap sign-in **Button** component to show the sign-in screen that complies with Huawei specifications, calling the sign-in API to complete silent sign-in, calling the API for obtaining the avatar and nickname, calling the API for verifying the mobile number in a quick manner, calling the API for obtaining the shipping address, calling the API for obtaining the invoice title, calling the API for enabling or disabling the youth mode, subscribing to youth mode–related common events, and calling the API for verifying the parental control password.

The API that you need to use is **@kit.AccountKit**.

## Preview

| **Sign-in/Sign-up screen**                 | **One-tap HUAWEI ID sign-in screen**       | **Pop-up dialog box**                      |
|--------------------------------------------|--------------------------------------------|--------------------------------------------|
| ![avatar](screenshots/device/img_1_en.png) | ![avatar](screenshots/device/img_2_en.png) | ![avatar](screenshots/device/img_3_en.png) | 

| **Other ways to sign in**                  | **Main screen after user sign-in**         | **Personal info screen**                   |
|--------------------------------------------|--------------------------------------------|--------------------------------------------|
| ![avatar](screenshots/device/img_4_en.png) | ![avatar](screenshots/device/img_5_en.png) | ![avatar](screenshots/device/img_6_en.png) |

| **Avatar and nickname authorization screen** | **Quick mobile number verification screen** | **Obtaining the shipping address**         |
|----------------------------------------------|---------------------------------------------|--------------------------------------------|
| ![avatar](screenshots/device/img_7_en.png)   | ![avatar](screenshots/device/img_8_en.png)  | ![avatar](screenshots/device/img_9_en.png) |

| **Obtaining the invoice title**             | **Guiding the user to enable the youth mode** | **Guiding the user to disable the youth mode** | 
|---------------------------------------------|-----------------------------------------------|------------------------------------------------|
| ![avatar](screenshots/device/img_10_en.png) | ![avatar](screenshots/device/img_11_en.png)   | ![avatar](screenshots/device/img_12_en.png)    | 

## How to Configure and Use the Sample Project

### Configuring the Sample Project in DevEco Studio

1. [Create a project](https://developer.huawei.com/consumer/en/doc/app/agc-help-createproject-0000001100334664). Under the project, [create an app](https://developer.huawei.com/consumer/en/doc/app/agc-help-createharmonyapp-0000001945392297).
2. In [HUAWEI Developers](https://developer.huawei.com/consumer/en/), configure the **phone** and **quickLoginMobilePhone** scopes for the app. For details, please refer to the [Account Kit Development Guide](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/account-config-permissions-V5).
3. Before calling the API for obtaining the shipping address, the app first needs to apply for necessary permissions by sending an email to [accountkit@huawei.com](mailto:accountkit@huawei.com). The email must contain the information listed below. Huawei will send you the application result within 5 working days. Please check your emails in time.
   Subject: Apply for the Permission for Obtaining the Shipping Address
   Body: ***
   Company name: ***   
   App name: ***   
   App package name: com.\*\*\*.\*\*\*
   App ID: 1\*\*\*\*12
   Client ID: 1\*\*\*\*14
   Application scenario: ***
4. Open the sample app in DevEco Studio and replace the value of **bundleName** in the **app.json5** file with the app package name specified in [AppGallery Connect](https://developer.huawei.com/consumer/en/service/josp/agc/index.html).
5. Replace the value of **client_id** in the **module.json5** file with the app's client ID configured in [AppGallery Connect](https://developer.huawei.com/consumer/en/service/josp/agc/index.html).
6. Generate an SHA-256 signing certificate fingerprint and configure it for the app in [AppGallery Connect](https://developer.huawei.com/consumer/en/service/josp/agc/index.html). For details, please refer to relevant instructions for [configuring signing information](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/application-dev-overview-V5#section42841246144813) and [adding a public key fingerprint](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/application-dev-overview-V5#section1726913517284) in the development preparations part.

### Using the Sample Project

1. Run the sample app, tap **Sign in/Sign up** and then **Sign in with HUAWEI ID**. If no HUAWEI ID has signed in on the device, the app will show other ways to sign in.
2. If the signed-in HUAWEI ID is registered in the Chinese mainland and has been bound to a mobile number, after the app has obtained the one-tap HUAWEI ID sign-in scope, tapping the **Sign in/Sign up** button will show the sign-in screen with the one-tap HUAWEI ID sign-in button. Otherwise, if the signed-in HUAWEI ID is not such an account described above or has not obtained the required scope, tapping the **Sign in/Sign up** button will show other ways to sign in. These ways are only for demonstration, and the sign-in is not actually successful. The **Personal info** screen keeps the same no matter whether you sign in through the one-tap HUAWEI ID sign-in button or through any other way.
3. After a successful sign-in, tapping **Dear user** on the main screen to access the **Personal info** screen. If the app has not obtained user authorization on the avatar and nickname, tapping **Dear user** will bring up the screen for obtaining user authorization on the avatar and nickname. After a successful authorization, the avatar and nickname associated with the HUAWEI ID will be displayed on the **Personal info** screen. The avatar and nickname on this screen are for display purposes only and cannot be changed.
4. After obtaining the **phone** scope, tapping the button for obtaining the mobile phone on the **Personal info** screen will show the mobile phone verification and authorization screen. After a successful authorization, the anonymous mobile phone 180******00 is displayed. (In this sample code, only the authorization code is obtained. Then, the app sends the authorization code to its server, and the server calls the API of Account Kit to obtain an access token and further uses the access token to [obtain the mobile number](https://developer.huawei.com/consumer/en/doc/harmonyos-references-V5/account-api-get-user-info-V5)). If the app does not have the **phone** scope, an error message will be displayed.
5. After obtaining the scope of the API for obtaining the shipping address, tap the shipping address on the **Personal info** screen to access the shipping address selection screen. The selected address will be displayed on the **Personal info** screen.
6. Tapping the **Invoice title** field on the **Personal info** screen will show the screen for selecting an invoice title. The selected invoice title will be displayed on the **Personal info** screen.
7. On the **Personal info** screen, tap the **Youth mode** switch and following the guide to enable or disable the youth mode. When the youth mode is enabled, the **Screen time limit** switch is turned on by default. You can tap the **Screen time limit** switch to turn it off. If needed, you can also enable **Screen time limit** by a tap. After launching, the app subscribes to the event of enabling/disabling the youth mode on the device. When detecting that the youth mode is enabled or disabled, the app will follow the youth mode status on the device.
8. On the **Personal info** screen, you can turn on or off the **Silently sign in with HUAWEI ID** function with a tap. If the function is enabled, the app will silently sign you in with the HUAWEI ID the next time it is opened, regardless of whether you have signed out.
9. On the **Personal info** screen, you can tap the sign-out button. Then, you will change to the not-signed-in status and go back to the main screen.
10. During app launching, the **getMinorsProtectionInfoSync** API is called to query the status of the youth mode on the device and obtain the youth mode status of the app stored in **PersistentStorage**. (**PersistentStorage** simulates the scenario where the app persistently stores the youth mode status.)
   * If the youth mode status obtained from **PersistentStorage** is disabled, but the youth mode status on the device is enabled, the message indicating that the youth mode has been enabled for the app will be displayed.
   * If the youth mode status obtained from **PersistentStorage** is enabled, but the youth mode status on the device is disabled, the message indicating that the youth mode has been disabled for the app will be displayed.
   * If the youth mode status obtained from **PersistentStorage** is the same as the youth mode status on the device, no message will be displayed, and the app keeps the youth mode in the current status.
11. When the youth mode is enabled, USB debugging on the device will be disabled. You can re-enable this function by doing as follows: (1) Go to **Settings** > **System & updates** > **Developer options**; (2) Tap **USB debugging**; (3) Enter the parental control password as prompted. USB debugging will be enabled once the password verification is successful.

## Project Directory
```
├─entry/src/main/ets            // Code area.
│ ├─common                      // Common code.
│ │ └─AvoidRepeatClick.ets      // Utility class for preventing repeated taps.
│ │ └─CommonEventUtil.ets       // Public class, including events related to listening to youth mode status changes.
│ │ └─ErrorCodeEntity.ets       // Error information that may appear during sign-in.
│ │ └─UserInfo.ets              // Data structure of user information.
│ │ └─Utils.ets                 // Some public methods.
│ ├─components                  // Directory for storing component files.
│ │ └─Address.ets               // Component for obtaining the shipping address.
│ │ └─AgreementDialog.ets       // Privacy policy pop-up window component.
│ │ └─AvatarAndNickname.ets     // Component for obtaining the avatar and nickname.
│ │ └─InvoiceTitle.ets          // Component for obtaining the invoice title.
│ │ └─MinorsProtection.ets      // Component for enabling or disabling the youth mode.
│ │ └─Phone.ets                 // Mobile number authorization component.
│ │ └─SilentlyLoginSwitch.ets   // Component for enabling or disabling silent sign-in.
│ │ └─UserAgreement.ets         // User agreement component
│ ├─entryability
│ │ └─EntryAbility.ets          // Entry point class.
│ ├─pages                       // Directory for storing UI files.
│ │ └─HomePage.ets              // Main screen UI, which serves as the container for navigation jumps.
│ │ └─OtherLoginPage.ets        // Other ways to sign in, defined by the app itself.
│ │ └─PersonalInfoPage.ets      // Personal information screen, which displays the avatar, nickname, and default mobile number, and also provides the functions of quickly verifying the mobile number and asking user authorization, obtaining the shipping address, setting the youth mode, obtaining the invoice title, and enabling or disabling the function of silent sign-in with HUAWEI ID.
│ │ └─PrepareLoginPage.ets      // Main screen content, covering scenarios such as obtaining the anonymous mobile number and obtaining the youth mode status.
│ │ └─ProtocolWebView.ets       // *HUAWEI ID User Authentication Agreement* page.
│ │ └─QuickLoginPage.ets        // One-tap HUAWEI ID sign-in component, including component calling.
└──entry/src/main/resources     // Directory for storing resource files.
```

## How to Implement

Call the one-tap HUAWEI ID sign-in component to show the sign-in screen that complies with Huawei specifications. For details, please refer to **QuickLoginPage.ets**.
* Use **loginComponentManager.PrivacyText** to create a **privacyText** object for the **QuickLoginPage** component.
* Use **loginComponentManager.LoginWithHuaweiIDButtonController** to construct a controller object for **QuickLoginPage**.
* Create a one-tap sign-in component object and pass necessary parameters including **privacyText** and **controller** to bring up the sign-in screen.
* Use the **setAgreementStatus** method to set the agreement status (accepted or not) and determine whether to display the agreement pop-up window based on the status.
* Use the **continueLogin** method to implement the function of accepting the agreements and signing in simultaneously. After the agreements are accepted, an asynchronous callback is triggered for completing sign-in. It is unnecessary to tap the sign-in button again.
* Set the **extraStyle** attribute in **param** in the **LoginWithHuaweiIDButton** component to enable the loading-after-a-tap status of the one-tap HUAWEI ID sign-in button.

Call the API for obtaining the avatar and nickname to show the authorization screen, call the quick mobile number verification API to verify and authorize the mobile number, call the API for obtaining the shipping address, call the API for obtaining the invoice title, and call the API for enabling or disabling the minor mode. For details, please refer to **PersonalInfoPage.ets**.
* Use **authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest()** to create an authorization request and set the avatar and nickname parameters.
* Use **authentication.AuthenticationController(getContext(this))** to create a controller.
* Call **controller.executeRequest()** to execute the request.
* Use **authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest()** to create an authorization request and set parameters for quick mobile number verification.
* Use **authentication.AuthenticationController(getContext(this))** to create a controller.
* Call **controller.executeRequest()** to execute the request.
* Use **shippingAddress.chooseAddress** to obtain the **AddressInfo** object.
* Obtain the recipient name, mobile number, and address from the **AddressInfo** object.
* Use **invoiceAssistant.selectInvoiceTitle** to obtain the **InvoiceTitle** object.
* Obtain the invoice title name, tax number, and other information from the **InvoiceTitle** object.
* Use **minorsProtection.leadToTurnOnMinorsMode** to guide users to enable the youth mode. The app provides an entry for users to quickly enable the youth mode.
* Use **minorsProtection.leadToTurnOffMinorsMode** to guide users to disable the youth mode. The app provides an entry for users to quickly disable the youth mode.
* Use **minorsProtection.verifyMinorsProtectionCredential** to verify the password for enabling the youth mode to prevent minors from changing the youth mode settings by themselves.

Use **HomePage** to serve as the container for navigation jumps. For details, please refer to **HomePage.ets**.
* Use **new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest()** to create a silent sign-in request and simulate silent sign-in by using **PersistentStorage** together.

**PrepareLoginPage** functions as the app's main screen to call the youth mode API. For details, please refer to **PrepareLoginPage.ets**.

* Use **PersistentStorage** and **AppStorage** together to store and obtain the youth mode status in the app.
* Call the **minorsProtection.getMinorsProtectionInfoSync()** function to obtain the youth mode status from the **minorsProtection.MinorsProtectionInfo** object. The app can follow the youth mode status on the device to enable or disable its own youth mode.

Listen to youth mode status changes in **CommonEventUtil**. For details, please refer to **CommonEventUtil.ets**.
* Use the **@ohos.commonEventManager** system capability to listen to the **COMMON_EVENT_MINORSMODE_ON** and **COMMON_EVENT_MINORSMODE_OFF** events. When the app process is running, the app can detect the change of the youth mode on the device in real time and change its own youth mode accordingly.

Define other sign-in ways in **OtherLoginPage**.
* Other sign-in ways can be sign-in using mobile number & SMS verification code, password, and more.

Use the web component to show the *HUAWEI ID User Authentication Agreement* in **ProtocolWebView**.
* Obtain the web page link from **data.json**. Currently, only Chinese and English are supported.

Implement the **Privacy Policy** pop-up window component in **AgreementDialog**.
* Use **CustomDialogController** to determine whether a pop-up window is displayed or hidden.

Define common entity data in **ErrorCodeEntity**.
* Common entity data includes error codes, constants, and more.

Define the data structure of user information in **UserInfo**.

Subscribe to youth mode–related common events in **EntryAbility**.

Implement the method in the **AvoidRepeatClick** class to prevent users from repeated taps in a short period of time.

Reference
1. entry\src\main\ets\pages\QuickLoginPage.ets
2. entry\src\main\ets\pages\PersonalInfoPage.ets
3. entry\src\main\ets\common\CommonEventUtil.ets
4. entry\src\main\ets\pages\HomePage.ets
5. entry\src\main\ets\pages\PrepareLoginPage.ets
6. entry\src\main\ets\pages\OtherLoginPage.ets
7. entry\src\main\ets\pages\ProtocolWebView.ets
8. entry\src\main\ets\components\AgreementDialog.ets
9. entry\src\main\ets\common\ErrorCodeEntity.ets
10. entry\src\main\ets\common\UserInfo.ets
11. entry\src\main\ets\entryability\EntryAbility.ets
12. entry\src\main\ets\common\AvoidRepeatClick.ets

## Required Permissions

1. The sample app needs to access the *HUAWEI ID User Authentication Agreement* page, so the network permission **ohos.permission.INTERNET** must be added to the **module.json5** file.
2. The sample app needs to check whether the device is connected to the network before redirecting to relevant web pages. The **ohos.permission.GET_NETWORK_INFO** permission for obtaining network information must be added to the **module.json5** file.

## Dependencies

The device where the sample app runs must support Wi-Fi.

## Constraints

1. The sample app is only supported on Huawei phones, 2-in-1 devices, and tablets with standard systems. (The youth mode is unavailable for 2-in-1 devices.)
2. The HarmonyOS version must be HarmonyOS NEXT Beta1 or later.
3. The DevEco Studio version must be DevEco Studio NEXT Beta1 or later.
4. The HarmonyOS SDK version must be HarmonyOS NEXT Beta1 or later.