更新记录

1.0.0（2025-11-12） 下载此版本

华为鸿蒙快速登陆组件，支持获取头像昵称、匿名手机号、真实手机号等

平台兼容性

uni-app(4.51)

uni-app x(4.51)

华为鸿蒙账号登录

uni-app 插件，用于在鸿蒙应用中集成华为账号登录功能。

目录

• 功能特性
• 安装配置
• 使用说明
  • 获取匿名手机号
  • 获取用户头像昵称
  • 华为账号一键登录
• API 文档
• 服务端集成
• 注意事项
• 常见问题

功能特性

• ✅ 获取匿名手机号（脱敏显示）
• ✅ 获取用户头像和昵称
• ✅ 华为账号一键登录（获取完整手机号）

安装配置

1. 导入插件

将本插件放置在项目的 uni_modules 目录下。

2. 配置华为账号服务

在华为开发者平台配置应用的账号服务权限：

• 登录华为AppGallery Connect
• 选择“开发与服务”，
• 获取 clientId 和 clientSecret（用于服务端接口调用和uniapp配置client_id）

3. 申请开放能力和配置client_id

在开发与服务需要申请 华为账号一键登录，这个申请都可以通过的

然后需要在 harmony-configs\entry\src\main\module.json5 里面配置 client_id

或者最新版本的 hbuilder 里面也可以直接配置 client_id

使用说明

获取匿名手机号

快速获取用户的脱敏手机号（例如：131******23），无需用户额外授权。

示例代码：

<template>
  <view class="container">
    <view class="phone-display">{{ phone || '未获取手机号' }}</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getHmAnonymousPhone } from '@/uni_modules/anhao-login'
import { onLoad } from '@dcloudio/uni-app'

const phone = ref('')

onLoad(() => {
  getHmAnonymousPhone({
    success(res) {
      console.log('获取匿名手机号成功：', res)
      phone.value = res.quickLoginAnonymousPhone
    },
    fail(err) {
      console.error('获取匿名手机号失败：', err)
      uni.showToast({
        title: '获取手机号失败',
        icon: 'none'
      })
    }
  })
})
</script>

<style scoped>
.container {
  padding: 100px 20px;
}
.phone-display {
  font-size: 16px;
  text-align: center;
}
</style>

返回数据说明：

获取用户头像昵称

通过按钮组件引导用户授权，获取用户的头像和昵称信息。

示例代码：

<template>
  <view class="container">
    <view class="user-info" v-if="userInfo.nickName">
      <image :src="userInfo.avatarUri" class="avatar" mode="aspectFill"></image>
      <text class="nickname">{{ userInfo.nickName }}</text>
    </view>

    <button @click="getProfile" type="primary">获取用户信息</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { hmLoginWithProfile } from '@/uni_modules/anhao-login'

const userInfo = ref({
  nickName: '',
  avatarUri: ''
})

const getProfile = () => {
  hmLoginWithProfile({
    success(res) {
      console.log('获取用户信息成功：', res)
      userInfo.value = {
        nickName: res.nickName,
        avatarUri: res.avatarUri
      }

      uni.showToast({
        title: '获取成功',
        icon: 'success'
      })
    },
    fail(err) {
      console.error('获取用户信息失败：', err)
      uni.showToast({
        title: '获取失败，请重试',
        icon: 'none'
      })
    }
  })
}
</script>

<style scoped>
.container {
  padding: 100px 20px;
}
.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 20px;
}
.nickname {
  font-size: 18px;
  font-weight: bold;
}
</style>

返回数据说明：

华为账号一键登录

支持应用通过华为账号一键登录能力便捷获取用户身份标识和绑定手机号（需要服务端配合）。

📖 官方文档地址

示例代码：

<template>
  <view class="container">
    <!-- 华为账号登录按钮（原生组件） -->
    <embed
      class="native-button"
      tag="hwilogin"
      :options="options"
      @success="loginSuccess"
      @fail="loginFail"
    ></embed>

    <view class="phone-display" v-if="phone">
      手机号：{{ phone }}
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import '@/uni_modules/anhao-login'

const options = ref({})
const phone = ref('')

const loginSuccess = ({ detail }) => {
  console.log('登录成功：', detail)

  // detail 结构：
  // {
  //   authorizationCode: "xxx", // 授权码
  //   unionID: "xxx",          // 用户统一ID
  //   openID: "xxx",           // 应用内用户ID
  //   success: true,
  //   err: "ok"
  // }

  // 将 authorizationCode 发送到服务端，换取真实手机号
  getPhoneFromServer(detail.authorizationCode)
}

const loginFail = (err) => {
  console.error('登录失败：', err)
  uni.showToast({
    title: '登录失败，请重试',
    icon: 'none'
  })
}

// 调用服务端接口获取真实手机号
const getPhoneFromServer = async (code) => {
  try {
    const res = await uni.request({
      url: 'https://your-server.com/api/getPhoneNumber',
      method: 'POST',
      data: {
        code: code
      }
    })

    if (res.data.success) {
      phone.value = res.data.phoneNumber
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })
    }
  } catch (error) {
    console.error('获取手机号失败：', error)
    uni.showToast({
      title: '获取手机号失败',
      icon: 'none'
    })
  }
}
</script>

<style scoped>
.container {
  padding: 100px 20px;
}
.native-button {
  display: block;
  width: 200px;
  height: 50px;
  margin: 10px auto;
}
.phone-display {
  margin-top: 40px;
  font-size: 16px;
  text-align: center;
}
</style>

API 文档

getHmAnonymousPhone(options)

获取匿名手机号（脱敏）。

参数：

success 回调参数：

{
  authorizationCode: String,        // 授权码
  openID: String,                   // 用户在当前应用的唯一标识
  unionID: String,                  // 用户在开发者账号下的唯一标识
  quickLoginAnonymousPhone: String, // 脱敏手机号
  localNumberConsistency: Boolean   // 本机号码一致性
}

hmLoginWithProfile(options)

获取用户头像和昵称信息。

参数：

success 回调参数：

{
  authorizationCode: String, // 授权码
  unionID: String,          // 用户在开发者账号下的唯一标识
  openID: String,           // 用户在当前应用的唯一标识
  nickName: String,         // 用户昵称
  avatarUri: String         // 用户头像地址
}

embed 组件（华为原生登录按钮）

用于华为账号一键登录的原生组件。

属性：

事件：

服务端集成

华为账号一键登录需要服务端配合，通过 authorizationCode 换取真实手机号。

接口地址

POST https://account-api.cloud.huawei.com/oauth2/v6/quickLogin/getPhoneNumber

请求头

Content-Type: application/json;charset=UTF-8

请求参数

{
  "code": "<authorizationCode>",
  "clientId": "<your-clientId>",
  "clientSecret": "<your-clientSecret>"
}

响应示例

{
    "openId": "xxxx",
    "unionId": "xxxx",
    "phoneNumber": "***",
    "phoneNumberValid": 1,
    "purePhoneNumber": "***",
    "phoneCountryCode": "0086"
}

📖 服务端接口详细文档

注意事项

1. 授权码有效期：authorizationCode 有效期较短（通常为几分钟），请及时发送到服务端换取手机号。

2. 授权码单次使用：每个 authorizationCode 只能使用一次，请勿重复提交。

3. 安全性：

   • clientSecret 必须保存在服务端，切勿暴露在客户端代码中
   • 所有手机号的获取操作应在服务端完成

4. 错误处理：建议在所有 API 调用中添加 fail 回调，提供友好的错误提示。

5. 用户体验：

   • 获取匿名手机号无需用户授权，可在页面加载时调用
   • 获取头像昵称和一键登录需要用户主动触发

6. 测试环境：在开发阶段，请确保在真实的鸿蒙设备或模拟器上测试，部分功能在浏览器环境下不可用。

常见问题

Q1: 获取匿名手机号失败？

A: 请检查：

• 应用是否在华为开发者平台配置了账号服务
• 设备是否登录了华为账号
• 应用签名是否与平台配置一致

Q2: authorizationCode 换取手机号失败？

A: 请检查：

• authorizationCode 是否已过期
• clientId 和 clientSecret 是否正确
• 是否重复使用了同一个 authorizationCode

Q3: 一键登录按钮不显示？

A: 请检查：

• 是否正确导入了插件：import '@/uni_modules/anhao-login'
• embed 组件的样式是否正确设置（宽高等）
• 是否在鸿蒙环境下运行

Q4: 如何区分不同用户？

A: 使用 unionID 作为用户的唯一标识，它在同一开发者账号下的所有应用中保持一致。openID 仅在当前应用中唯一。

如有其他问题，请参考华为鸿蒙账号服务官方文档。