# Accountkit-Samplecode-Clientdemo-ArkTS

**Repository Path**: chenjia-stone/accountkit-samplecode-clientdemo-arkts

## Basic Information

- **Project Name**: Accountkit-Samplecode-Clientdemo-ArkTS
- **Description**: 本示例基于HarmonyOS实现了华为帐号服务提供的登录、获取头像昵称、实时验证手机号等功能。

- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 13
- **Created**: 2024-07-19
- **Last Updated**: 2024-07-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Account Kit

## 介绍

本示例展示了使用Account Kit提供的登录、授权头像昵称、实时验证手机号、收货地址、发票抬头、未成年人模式的能力。

本示例模拟了在应用里，调用一键登录Button组件拉起符合华为规范的登录页面；调用获取头像昵称接口获取头像昵称，调用实时验证手机号接口拉起实时验证页面，调用收货地址接口获取收货地址，调用发票抬头接口获取发票抬头，调用未成年人模式接口开启或关闭未成年人模式。

需要使用Account Kit接口 **@kit.AccountKit**。

## 效果预览

| **登录/注册页面**                           | **用户登录后首页**                             | **用户个人信息页面**                            |
|---------------------------------------|-----------------------------------------|-----------------------------------------|
| ![avatar](screenshots/device/img.png) | ![avatar](screenshots/device/img_1.png) | ![avatar](screenshots/device/img_2.png) | 

| **一键登录组件登录页面**                          | **头像昵称授权页面**                            | **获取实时验证手机号页面**                          |
|-----------------------------------------|-----------------------------------------|------------------------------------------|
| ![avatar](screenshots/device/img_5.png) | ![avatar](screenshots/device/img_6.png) | ![avatar](screenshots/device/img_12.png) |

| **一键登录组件弹窗页面**                           | **获取收货地址页面**                             | **应用其他登录页**                              |
|------------------------------------------|------------------------------------------|------------------------------------------|
| ![avatar](screenshots/device/img_17.png) | ![avatar](screenshots/device/img_18.png) | ![avatar](screenshots/device/img_19.png) |

## 本示例工程的配置与使用

### 在DevEco中配置本示例工程的步骤如下

1. [创建项目](https://developer.huawei.com/consumer/cn/doc/app/agc-help-createproject-0000001100334664)及[应用](https://developer.huawei.com/consumer/cn/doc/app/agc-help-createapp-0000001146718717)。
2. 在[华为开发者联盟](https://developer.huawei.com/consumer/cn/)为应用配置权限（权限名：realTimePhone、quickLoginMobilePhone），具体操作可参考[Account Kit开发指南](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/account-config-permissions-V5)。
3. 应用调用收货地址API前，需完成对应的权限申请，当前可通过[accountkit@huawei.com](mailto:accountkit@huawei.com)进行邮件申请。  
   请提供如下信息进行申请，我们会在15个工作日内回复申请结果，请您留意邮箱信息。  
   邮箱主题：【获取收货地址】权限申请  
   邮件正文：***  
   企业名称：***  
   企业包名：com.\*\*\*.\*\*\*  
   APP ID： 1\*\*\*\*12  
   Client ID：1\*\*\*\*14  
   使用场景：***  
4. 打开本示例应用，使用[AppGallery Connect](https://developer.huawei.com/consumer/cn/service/josp/agc/index.html)配置的应用包名替换app.json5文件中的bundleName属性值。 
5. 使用[AppGallery Connect](https://developer.huawei.com/consumer/cn/service/josp/agc/index.html)配置的应用Client ID替换module.json5文件中的client_id属性值。 
6. 生成SHA256应用签名证书指纹并添加到[AppGallery Connect](https://developer.huawei.com/consumer/cn/service/josp/agc/index.html)对应的应用配置中，证书指纹生成请参考应用开发准备中的[添加公钥指纹](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-dev-overview-0000001825237158-V5#section1726913517284)章节。

#### 本示例工程使用说明
1. 运行该本示例应用，依次点击“登录/注册”和“华为账号一键登录”按钮进行登录，如果系统账号未登录，会拉起应用其他登录方式。
2. 如系统已登录注册地为中国大陆且已绑定手机号的华为账号，应用在申请完“华为账号一键登录”权限后，点击“登录/注册”按钮，会拉起嵌有“华为账号一键登录”按钮的登录页面，否则拉起其他登录方式，其他登录方式仅为演示，实际并未登录成功。
3. 登录成功后，在应用首页点击“亲爱的用户”会进入个人信息页面，如果头像昵称未授权，点击亲爱的用户或默认头像会拉起头像昵称授权页面，授权成功后会在个人信息页展示华为账号头像昵称。个人信息页面的头像、昵称仅用于展示，不可点击修改。
4. 申请realTimePhone权限后，在个人信息页点击`180******00`，会拉起手机号验证及授权页面，授权成功后展示默认的匿名化手机号`180******00`
   （本示例只获取code，获取code后需要将code传给应用服务器，调用华为账号服务器接口换取Access Token，然后再[获取用户手机号](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/account-api-get-user-info-V5)），
   如未申请权限则点击无效。
5. 申请获取收货地址API权限后，在个人信息页点击收货地址拉起选择收货地址页面，用户选择对应的地址后展示收货地址信息。
6. 应用首次启动时，会调用getMinorsProtectionInfoSync接口，查询未成年人模式的开启状态，如果查询到系统未成年人模式已开启，则应用弹出“未成年人模式已开启”提示，如果查询到系统未成年人模式未开启，不弹出提示。当前应用启动后会订阅未成年人模式开启/关闭事件，当感知到系统未成年人模式开启/关闭时，则应用未成年人模式按钮状态会跟随系统未成年人模式状态进行切换。
7. 本示例除了未成年人模式接口，其他所有数据使用的是缓存数据，未做数据持久化，开发者只需将应用关闭后，进入/data/app/el2/100/base/com.xxx/haps/entry/files/persistent_storage
   后删除当前文件，重新打开应用，即可重新体验账号相关功能。
8. 在个人信息页点击发票抬头拉起选择发票抬头页面，用户选择对应的抬头后展示发票抬头信息。
9. 在个人信息页，点击未成年人模式按钮，引导用户开启或关闭未成年人模式，未成年人模式开启时，可用时长限制按钮默认为开启状态，用户可以点击可用时长限制按钮，关闭时长限制，当可用时长限制为关闭状态时，用户也可点击可用时长限制按钮开启时长限制。

## 工程目录
├─entry/src/main/ets   // 代码区  
│ ├─commonUtil  
│ │ └─CommonUtil.ets     // 公共类，包含监听未成年人状态变化的事件  
│ ├─entryability  
│ │ └─EntryAbility.ets // 程序入口类  
│ ├─pages              // 存放页面文件目录      
│ │ └─HomePage.ets     // 主页面，包括获取匿名手机号、未成年人模式的开启状态场景  
│ │ └─PersonalInfo.ets // 个人信息页，包含头像、昵称、默认手机号展示，同时包含实时验证手机号授权、获取收货地址、设置未成年人模式和获取发票抬头场景  
│ │ └─QuickLoginButton.ets   // 华为账号一键登录组件，包含组件调用  
│ │ └─OtherLoginModel.ets   // 应用自定义的其他登录方式  
│ │ └─UserAuthenticationProtocolWebView.ets   // 华为账号用户认证协议页面  
│ │ └─AgreementDialog.ets   // 用户隐私协议页面弹窗  
│ │ └─ErrorCodeEntity.ets   // 登录过程中可能遇到的错误码信息页面  

## 具体实现
调用一键登录组件拉起符合华为规范的登录页面，功能在QuickLoginButton中，参考QuickLoginButton.ets：
* 使用loginComponentManager.PrivacyText创建QuickLoginButton组件隐私文本对象privacyText
* 使用loginComponentManager.LoginWithHuaweiIDButtonController构造QuickLoginButton组件的控制器对象controller
* 创建一键登录组件对象将privacyText、controller等作为参数传入，拉起登录界面
* 使用setAgreementStatus方法设置用户是否同意协议，通过该状态判断是否需要拉起协议弹窗

调用获取头像昵称授权接口拉起授权页面，参考PersonalInfo.ets：
* 使用authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest()创建授权请求，完成头像昵称参数设置
* 使用authentication.AuthenticationController(getContext(this))创建controller
* 调用controller.executeRequest()执行请求

在PersonalInfo中调用实时验证手机号接口完成手机号实时验证与授权，参考PersonalInfo.ets：
* 使用authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest()创建授权请求，完成实时验证手机号参数设置
* 使用authentication.AuthenticationController(getContext(this))创建controller
* 调用controller.executeRequest()执行请求

在PersonalInfo中调用收货地址接口获取收货地址信息，参考PersonalInfo.ets：
* 使用shippingAddress.chooseAddress获取AddressInfo对象
* 从AddressInfo对象中获取收货人姓名、电话、地址信息

在HomePage中，组件MainPage的aboutToAppear的生命周期下，调用未成年人模式接口，参考HomePage.ets：
* 使用PersistentStorage和AppStorage存储和获取到当前应用是否开启未成年人模式的状态位。
* 调用minorsProtection.getMinorsProtectionInfoSync()函数，从minorsProtection.MinorsProtectionInfo对象中获取未成年人模式的开启状态。

在PersonalInfo中调用发票抬头接口获取发票抬头信息，参考PersonalInfo.ets：
* 使用invoiceAssistant.selectInvoiceTitle获取InvoiceTitle对象
* 从InvoiceTitle对象中获取发票抬头名称、税号等信息

在PersonalInfo中调用未成年人模式相关接口设置未成年人模式，参考PersonalInfo.ets：
* 使用minorsProtection.leadToTurnOnMinorsMode引导用户开启未成年人模式。
* 使用minorsProtection.leadToTurnOffMinorsMode引导用户关闭未成年人模式。
* 使用minorsProtection.verifyMinorsProtectionCredential校验用户开启未成年人模式的密码。

在CommonUtil监听未成年状态变化，参考在CommonUtil.ets：
* 使用@ohos.commonEventManager系统能力监听COMMON_EVENT_MINORSMODE_ON和COMMON_EVENT_MINORSMODE_OFF事件。

在OtherLoginModel页面中自定义用户的其他登录方式：
* 比如手机号验证码、密码等

在UserAuthenticationProtocolWebView页面中使用Web组件显示《华为账号用户认证协议》内容：
* 在data.json中获取网页链接，当前仅支持中英文

在AgreementDialog中实现用户隐私协议的弹窗组件
* 通过自定义CustomDialogController控制弹窗的显隐

在ErrorCodeEntity中定义通用的实体数据信息
* 比如通用错误码、通用常量等

参考
1. entry\src\main\ets\pages\QuickLoginButton.ets
2. entry\src\main\ets\pages\PersonalInfo.ets
3. entry\src\main\ets\commonUtil\CommonUtil.ets
4. entry\src\main\ets\pages\HomePage.ets
5. entry\src\main\ets\pages\OtherLoginModel.ets
6. entry\src\main\ets\pages\UserAuthenticationProtocolWebView.ets
7. entry\src\main\ets\pages\AgreementDialog.ets
8. entry\src\main\ets\pages\ErrorCodeEntity.ets

## 相关权限

1. 本示例应用在调用一键登录组件和获取头像昵称授权等场景需要访问网络，已在module.json5文件中添加网络权限"ohos.permission.INTERNET"。

## 依赖

依赖设备具备WIFI能力

## 约束与限制

1. 本示例仅支持在标准系统上运行，支持设备：华为直板手机（例如：HUAWEI Mate 60 Pro），其他设备暂不支持。
2. HarmonyOS系统：HarmonyOS Next Developer Beta1及以上。
3. DevEco Studio版本：DevEco Studio Next Developer Beta1及以上。
4. HarmonyOS SDK版本：HarmonyOS Next Developer Beta1及以上。