更新记录

1.0.0（2026-02-09） 下载此版本

1. 首个版本

平台兼容性

uni-app(4.81)

jack-hwilogin

华为账号登录插件，为 uni-app 开发者提供便捷的鸿蒙华为账号授权登录能力。

功能特性

• ✅ 华为账号授权登录
• ✅ 获取用户基本信息（昵称、头像）
• ✅ 获取匿名手机号（一键登录）
• ✅ 支持服务端换取真实手机号
• ✅ 内置 CSRF 防护

平台支持

前置条件

1. 在 AppGallery Connect 创建应用
2. 开通「帐号服务」（Account Kit）
3. 配置应用的 Client ID 和签名证书指纹

安装

在 uni-app 插件市场搜索 jack-hwilogin 导入项目，或直接将插件目录复制到 uni_modules 下。

快速开始

插件提供两种使用方式：原生按钮组件 和 JS 函数调用。

方式一：原生按钮组件（推荐）

使用华为官方登录按钮样式，用户体验更好：

<template>
  <!-- #ifdef APP-HARMONY -->
  <embed
    tag="hwilogin"
    class="login-btn"
    @success="onLoginSuccess"
    @fail="onLoginFail"
  />
  <!-- #endif -->
</template>

<script>
// #ifdef APP-HARMONY
import '@/uni_modules/jack-hwilogin'
// #endif

export default {
  methods: {
    onLoginSuccess({ detail }) {
      console.log('登录成功')
      console.log('授权码:', detail.authorizationCode)
      console.log('OpenID:', detail.openID)
      console.log('UnionID:', detail.unionID)
      // 将授权码发送到服务端验证
    },
    onLoginFail({ detail }) {
      console.log('登录失败:', detail.err)
    }
  }
}
</script>

<style>
.login-btn {
  width: 100%;
  height: 96rpx;
}
</style>

方式二：JS 函数调用

// #ifdef APP-HARMONY
import { huaweiLogin, getPhoneNumber } from '@/uni_modules/jack-hwilogin'
// #endif

华为账号登录

获取用户的昵称、头像等基本信息：

// #ifdef APP-HARMONY
huaweiLogin({
  success: (data) => {
    console.log('登录成功')
    console.log('昵称:', data.nickName)
    console.log('头像:', data.avatarUri)
    console.log('OpenID:', data.openID)
    console.log('UnionID:', data.unionID)
    console.log('授权码:', data.authorizationCode)
  },
  fail: (err) => {
    console.log('登录失败:', err)
  }
})
// #endif

获取手机号（一键登录）

获取用户的匿名手机号，用于一键登录场景：

// #ifdef APP-HARMONY
getPhoneNumber({
  success: (data) => {
    console.log('获取成功')
    console.log('匿名手机号:', data.anonymousPhone)  // 如：138****8888
    console.log('授权码:', data.authorizationCode)

    // 将授权码发送到服务端，换取真实手机号
  },
  fail: (err) => {
    console.log('获取失败:', err)
  }
})
// #endif

完整示例

<template>
  <view class="login-page">
    <button @click="handleHuaweiLogin">华为账号登录</button>
    <button @click="handleQuickLogin">一键登录</button>
  </view>
</template>

<script>
// #ifdef APP-HARMONY
import { huaweiLogin, getPhoneNumber } from '@/uni_modules/jack-hwilogin'
// #endif

export default {
  methods: {
    // 华为账号登录
    handleHuaweiLogin() {
      // #ifdef APP-HARMONY
      huaweiLogin({
        success: async (data) => {
          // 调用服务端接口验证授权码
          const res = await this.$api.loginWithHuawei({
            authorizationCode: data.authorizationCode,
            openID: data.openID,
            unionID: data.unionID,
            nickName: data.nickName,
            avatarUri: data.avatarUri
          })

          if (res.success) {
            uni.showToast({ title: '登录成功' })
          }
        },
        fail: (err) => {
          uni.showToast({ title: err, icon: 'none' })
        }
      })
      // #endif
    },

    // 一键登录（手机号）
    handleQuickLogin() {
      // #ifdef APP-HARMONY
      getPhoneNumber({
        success: async (data) => {
          // 显示匿名手机号供用户确认
          uni.showModal({
            title: '一键登录',
            content: `将使用手机号 ${data.anonymousPhone} 登录`,
            success: async (res) => {
              if (res.confirm) {
                // 调用服务端接口，用授权码换取真实手机号并登录
                const result = await this.$api.quickLogin({
                  authorizationCode: data.authorizationCode
                })

                if (result.success) {
                  uni.showToast({ title: '登录成功' })
                }
              }
            }
          })
        },
        fail: (err) => {
          uni.showToast({ title: err, icon: 'none' })
        }
      })
      // #endif
    }
  }
}
</script>

API 参考

huaweiLogin(options)

华为账号登录，获取用户信息。

返回数据（HuaweiUserInfo）：

getPhoneNumber(options)

获取手机号，用于一键登录。

返回数据（PhoneInfo）：

服务端对接

换取 Access Token

使用 authorizationCode 调用华为服务端 API 换取 Access Token：

POST https://oauth-login.cloud.huawei.com/oauth2/v3/token
Content-Type: application/x-www-form-urlencoded

grant_type=authorization_code
&code={authorizationCode}
&client_id={your_client_id}
&client_secret={your_client_secret}
&redirect_uri={your_redirect_uri}

获取真实手机号

使用 Access Token 调用华为服务端 API 获取真实手机号：

POST https://account.cloud.huawei.com/rest.php?nsp_svc=GOpen.User.getPhoneNumber
Authorization: Bearer {access_token}

常见问题

Q: 授权页面没有拉起？

检查：

• 应用是否在 AGC 后台正确配置
• Client ID 是否正确
• 签名证书指纹是否匹配

Q: 获取不到用户昵称和头像？

用户可能未在华为账号中设置昵称和头像，此时返回空字符串。

Q: 匿名手机号为空？

检查：

• 用户是否授权了手机号权限
• 当前设备是否插入 SIM 卡

Q: OpenID 和 UnionID 的区别？

• OpenID：同一应用下唯一，不同应用的 OpenID 不同
• UnionID：同一开发者账号下唯一，可用于关联同一开发者的多个应用

相关链接

• 华为 Account Kit 官方文档
• AppGallery Connect 控制台

更新日志

1.0.0

• 初始版本
• 支持华为账号登录获取用户信息
• 支持获取匿名手机号（一键登录）

许可证

MIT License

作者

鸿蒙Jack