华为一键登录

---

前言

除了常规的账号密码登录之外，我们还可以借助华为账号实现第三方登录，Account Kit（华为帐号服务）提供简单、快速、安全的登录和授权功能，让用户无需输入帐号、密码和繁琐验证，避免因忘记密码而带来的麻烦，为您创建帐号并登录所有HarmonyOS应用，带来更高的注册转化，同时通过授权获得用户头像昵称、手机号码等信息，提升用户黏性。

---

一、准备工作

在实现华为登录前，需要配置公钥指纹和配置权限（1. 配置Client ID 2 .申请华为账号一键登录的敏感权限）

公钥指纹配置需要做的：

1. 在 DevEco 中 生成私钥和请求文件
2. 在 AGC 平台申请调试证书和 调试 profile
3. 下载好之后返回到 DevEco 中手动配置签名信息

1.1 配置应用签名证书

1.2 在DevEco Studio工具侧生成密钥（.p12）和证书请求文件（.csr）

在主菜单栏单击Build（构建）-> Generate Key and CSR（生成私钥和证书请求文件）

选择要生成的文件目标位置并设置密码，填Alias别名以及First and last name之后，点击Next按钮

出现下面的弹框之后，填写CSR file文件目标位置之后，点击Finish按钮完成CSR文件创建

检查本地目录中，是否成功生成.csr 和 .p12 文件

1.3 申请调试证书

在AGC平台点击用户与访问, 左侧点击证书管理，再点击还右侧新增证书

在弹框中填写证书名称、选择证书类型为调试证书，选取我们在第一步生成的·csr文件，最后点击提交

会看到证书管理列表中多了一条记录

最后我们点击下载按钮，把调试证书下载的本地，后来配置要用

1.4 申请调试profile

进入AGC平台，点击我的项目进入到项目页，点击左侧HAP Provision Profile，点击右侧的添加按钮，弹出框内选择上一步生成的meikou_pre调试证书

点击下载按钮，把profile文件下载到本地

1.5 DevEco Studio工具中配置签名信息

点击“Signing Configs”页签。去除勾选的“Automatically generate signature”（如果是API 8和9工程，需同时勾选“Support HarmonyOS”），填写相关信息后，点击“OK”。
● Store File：密钥库文件，选择生成密钥和证书请求文件时生成的.p12文件
● Store Password：密钥库密码，需要与生成密钥和证书请求文件时设置的密钥库密码保持一致
● Key alias：密钥的别名信息，需要与生成密钥和证书请求文件时设置的别名保持一致
● Key password：密钥的密码，需要与生成密钥和证书请求文件时设置的密码保持一致
● Sign alg：固定设置为“SHA256withECDSA”
● Profile file：选择申请调试Profile时下载的.p7b文件
● Certpath file：选择申请调试证书时下载的.cer文件

1.6 配置公钥指纹

● 登录AppGallery Connect，点击“我的项目”。
● 在项目列表中找到您的项目，在项目中点击您的应用/元服务。
● 在“项目设置 > 常规”页面的“应用”区域，点击“SHA256证书/公钥指纹”后的“添加公钥指纹（HarmonyOS API 9及以上）”

选择咱们添加的调试证书

在“选择SHA256公钥指纹”窗口，选择应用使用的证书对应的指纹，点击“确认”

二、配置权限

2.1 配置Client ID

把ClientId后面的数字复制一下，放到项目的module.json5文件中

"module": {
  "name": "xxx",
  "type": "entry",
  "description": "xxx",
  "mainElement": "xxx",
  "deviceTypes": [],
  "pages": "xxx",
  "abilities": [],
  "metadata": [ // 配置信息如下
    {
      "name": "client_id",
      "value": "xxx"  // 放Client_ID 后边的值
    }
  ]
}

2.2 scope权限申请

登录华为开发者联盟，选择管理中心->API服务->授权管理 ，选择目标应用的应用名称，服务选择“华为帐号服务”，选择“敏感权限”，再选择“获取您的手机号”或“获取并验证您的手机号”，点击“申请”
https://developer.huawei.com/consumer/cn/console/overview

三、实现华为授权登录

3.1 流程

1. 当用户点击登录时，创建授权请求，调用华为登录的 api 拉起登录界面
2. 用户登录成功后，客户端会获取华为账号服务返回的 code 码，并将其发送给服务器
3. 服务器在接收到 code 码后，向华为账号服务发请求，获取用户的账号信息，
4. 若用户首次登录，可进行注册，然后本地拿到用户信息保存 下一次登录就可直接登录。

3.2 获取华为登录 code

为了简化调用，这里将华为登录的核心逻辑参考华为官方文档进行封装。

import { authentication } from '@kit.AccountKit'

PersistentStorage.persistProp<string>('openId', '')

class HuaweiAuthPlugin {
  async requestAuth() {
    // 1. 创建一个Account Kit授权请求对象，可通过返回值设置请求参数。
    const huaweiIdProvider = new authentication.HuaweiIDProvider()
    const authCreateRequest = huaweiIdProvider.createAuthorizationWithHuaweiIDRequest()
    // 2. 添加请求参数
    authCreateRequest.scopes = ['phone', 'openid']
    authCreateRequest.permissions = ['serviceauthcode']
    authCreateRequest.forceAuthorization = true
    // 3. 执行授权请求，获取认证码
    const authController = new authentication.AuthenticationController(getContext())
    const authResponse: authentication.AuthorizationWithHuaweiIDResponse =
      await authController.executeRequest(authCreateRequest)
    const serviceauthcode = authResponse.data?.authorizationCode
    AppStorage.setOrCreate<string>('openId', authResponse.data?.openID)
    return serviceauthcode
  }

  // getHuaweiIDState  api12 支持

  async cancelAuth() {
    try {
      // 1. 创建一个Account Kit授权请求对象，可通过返回值设置请求参数。
      const huaweiIdProvider = new authentication.HuaweiIDProvider()
      const authCancelRequest = huaweiIdProvider.createCancelAuthorizationRequest()
      // 2. 取消授权
      const authController = new authentication.AuthenticationController(getContext())
      await authController.executeRequest(authCancelRequest)
      return true
    } catch (e) {
      console.log('mk-logger', JSON.stringify(e))
      return false
    }
  }
}

export const huaweiAuthPlugin = new HuaweiAuthPlugin()

3.3 准备登录组件（在登录页调用）

import { huaweiAuthPlugin } from '@mk/basic'
import { MkDialogLoading } from '@mk/basic'

@Component
export struct HuaweiLoginCom {
  dialog: CustomDialogController = new CustomDialogController({
    builder: MkDialogLoading({ message: '华为登录中' }),
    customStyle: true,
    alignment: DialogAlignment.Center
  })

  build() {
    Image($r('app.media.ic_user_huawei'))
       .width(40)
  .onClick(async () => {
    this.dialog.open()
    const res = await huaweiAuthPlugin.requestAuth()
    AlertDialog.show({
      message: res
    })
    this.dialog.close()
  })
  }
}

在退出登录的时候，还要调用华为登出

 huaweiAuthPlugin.cancelAuth()

总结

华为账号一键登录是基于OAuth 2.0协议标准和OpenID Connect协议标准构建的OAuth2.0 授权登录系统，应用可以通过华为账号一键登录能力方便地获取华为账号用户的身份标识和手机号，快速建立应用内的用户体系。