UniApp 集成鸿蒙华为一键登录 Account Kit 实战

什么是华为一键登录

华为 Account Kit 提供的一键登录能力，本质上是这样一个流程：用户点击登录按钮 → 华为系统弹出授权面板，展示当前华为账号绑定的手机号（脱敏显示）→ 用户确认授权 → 客户端拿到一个 authorizationCode → 把这个 code 发给你的后端 → 后端拿 code 去华为服务器换取真实手机号 → 完成登录。

整个过程用户不需要手动输入任何信息，体验非常丝滑。

Account Kit 提供两种主要能力：

能力	说明	获取内容
华为账号授权登录	获取用户基本资料	昵称、头像、OpenID、UnionID
一键登录（quickLoginAnonymousPhone）	获取手机号	匿名手机号 + authorizationCode（后端换真实号码）

整体架构

先看整体的技术架构，理解各层之间的关系：

• 服务端：Express 后端，处理 JWT Token 签发与手机号验证。
• 鸿蒙原生层：jack-hwilogin 插件，包含 index.uts (JS API) 和 login.ets (原生按钮组件)。
• 客户端：Vue 页面，通过 embed 标签或 JS API 调用。
• 华为授权服务：提供 AccountKit - AuthenticationController 与 LoginWithHuaweiIDButton。

关键点在于：客户端永远拿不到真实手机号，只能拿到匿名手机号和授权码。真实手机号的获取必须走服务端，这是华为出于安全考虑的设计。

前置准备

在写代码之前，需要先在华为开发者平台完成一些配置工作：

1. 登录 AppGallery Connect 创建你的应用。
2. 在「API 管理」中开通 Account Kit（帐号服务）。
3. 记录下你的 Client ID 和 Client Secret，后端验证要用。
4. 配置应用的签名证书指纹（SHA-256），这个很重要，指纹不匹配的话授权页面拉不起来。

重点说一下容易忽略的：签名证书指纹一定要和你实际打包用的证书一致，开发阶段用的调试证书和发布证书的指纹是不同的，别搞混了。

插件结构

插件目录结构很简洁：

uni_modules/jack-hwilogin/ └── utssdk/ └── app-harmony/ ├── index.uts # JS API（huaweiLogin / getPhoneNumber） └── login.ets # 原生登录按钮组件（embed 方式） 

两个文件各司其职：index.uts 提供函数式调用，适合你想自定义按钮样式的场景；login.ets 封装了华为官方的登录按钮组件，通过 embed 标签嵌入 Vue 页面，样式合规且用户体验更好。

核心实现：UTS 插件层

JS API 方式 (index.uts)

这个文件导出两个核心函数：huaweiLogin（获取用户资料）和 getPhoneNumber（获取手机号，一键登录场景）。

import './login.ets'
import { authentication } from '@kit.AccountKit'
import { hilog }  
 { util }  
 {  }  
 { common }  

  = 


  {
  : 
  : 
  : 
  : 
  : 
}

  {
  :  
  :  
}

  {
  : 
  : 
  : 
  ?: 
  ?: 
}

  {
  :  
  :  
}


  ():  {
   {
     loginRequest =  authentication.().()
    loginRequest. = 
    loginRequest. = []
    loginRequest. = []
    loginRequest. = util.()
    loginRequest. = util.()
    loginRequest. = authentication..

     context = ()  common.
     controller =  authentication.(context)

    controller.(loginRequest,  {
       (error) {
        hilog.(, , )
        options. && options.()
        
      }
       response = data  authentication.
      
       (response. && loginRequest. !== response.) {
        hilog.(, , )
        options. && options.()
        
      }
       credential = response?.
       :  = {
        : credential?. ?? ,
        : credential?. ?? ,
        : credential?. ?? ,
        : credential?. ?? ,
        : credential?. ?? 
      }
      options. && options.(userInfo)
    })
  }  (error) {
    hilog.(, , )
    options. && options.()
  }
}


  ():  {
   {
     loginRequest =  authentication.().()
    loginRequest. = 
    loginRequest. = []
    loginRequest. = []
    loginRequest. = util.()

     context = ()  common.
     controller =  authentication.(context)

    controller.(loginRequest,  {
       (error) {
        hilog.(, , )
        options. && options.()
        
      }
       response = data  authentication.
       (response. && loginRequest. !== response.) {
        options. && options.()
        
      }
       credential = response?.
       :  = {
        : credential?. ?? ,
        : credential?. ?? ,
        : credential?. ?? ,
        : credential?.?.   | ,
        : credential?.?.   | 
      }
      options. && options.(phoneInfo)
    })
  }  (error) {
    hilog.(, , )
    options. && options.()
  }
}