鸿蒙NEXT开发-华为账号服务

 注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下

如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识

目录

1. 华为账号服务基本概念

1.1 基本介绍

1.2 能力范围

1.3 开发准备

2. 华为账号登录

2.1 业务流程

2.2 接口说明

2.3 代码示例

1. 华为账号服务基本概念

1.1 基本介绍

Account Kit（华为账号服务）提供简单、快速、安全的登录功能，让用户快捷地使用华为账号登录应用。用户授权后，Account Kit可提供头像、昵称、手机号码等信息，帮助应用更了解用户。

1.2 能力范围

• 登录：提供登录服务，让用户使用华为账号快速登录应用。
• 获取华为账号用户信息：获取用户的基本开放信息，如头像、昵称、手机号、收货地址、发票抬头。
• 未成年人模式：获取未成年人模式的开启状态及年龄段信息以进行内容分级，调整未成年人相关设置时可增加家长验证，还可调用接口引导用户开启或关闭未成年人模式。

1.3 开发准备

注意：只能用真机进行测试华为账号登录，模拟器不行

1、我们首选创建一个项目工程，这个项目工程同时也需要在AGC上面创建项目和应用

2、在AGC上添加真机设备

3、把第一步创建的项目进行手动签名，并且在DevEco Studio中配置密钥（.p12）文件、申请的调试证书（.cer）文件和调试Profile（.p7b）文件。

手动签名部署在上一节视频课程中有

4、配置Client ID

登录AppGallery Connect平台，在“项目设置 > 常规 > 应用”区域获取“OAuth 2.0客户端ID（凭据）”处的Client ID。

在工程中entry模块的module.json5文件中，新增metadata，配置name为client_id，value为上一步获取的Client ID的值

5、配置scope权限

注意

scope权限申请当前仅针对企业开发者开放。要是单纯的需要华为账号登录获取头像、昵称基本信息无需申请该权限

参考链接地址：文档中心

2. 华为账号登录

应用可以使用Account Kit提供的华为账号登录按钮获取华为账号用户身份标识UnionID、OpenID，通过UnionID、OpenID完成用户登录；或者与应用账号完成绑定，绑定后用于登录或者验证。

华为账号登录按钮包含文本、标志和文本、标志三种样式，以满足应用对界面风格一致性和灵活性的要求。

2.1 业务流程

流程说明：

1、用户打开应用进行登录，应用设置LoginType类型为LoginType.ID后拉起应用自己的登录页并展示“华为账号登录”按钮，用户点击按钮，请求华为账号授权ID。

2、如华为账号未登录，将拉起华为账号登录页，用户登录后，将返回UnionID、Authorization Code、OpenID、ID Token数据给应用，应用根据获取到的用户标识，服务端进行安全认证后实现应用登录。

3、如华为账号已登录，将直接返回UnionID、Authorization Code、OpenID、ID Token数据给应用，应用根据获取到的用户标识，服务端进行安全认证后实现应用登录。

2.2 接口说明

2.3 代码示例

导入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，完成服务端开发。

@Entry
  @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
        })
    }
  }