华为账号登录功能实现

最近项目要接入华为账号登录，SDK文档看着还行，真用起来发现坑还不少。这里把踩过的坑和实现细节都记下来，省得以后自己或者同事再掉坑里。

一、基础知识

1.1 什么是华为账号登录

华为账号登录就是让用户用华为账号一键登录你App，省去注册、记密码的麻烦。用过微信/QQ登录的都懂，套路差不多。

1.2 主要概念

• UnionID：全局唯一，跨App识别同一用户。别搞混了，和OpenID不是一回事。
• OpenID：单App唯一，换个App就变了。
• AuthorizationCode：临时凭证，后端用来换token。
• AccessToken：拿这个去调接口，别暴露给前端。

二、开发背景

我们项目用户大多用华为手机，老板一句"加个华为账号登录吧"，于是就有了这篇笔记。SDK集成其实不难，难的是各种边界和异常场景。

三、实现步骤

3.1 基础配置

// 该引的都得引，不然编译直接报错
import { LoginWithHuaweiIDButton, loginComponentManager, authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { util } from '@kit.ArkTS';
import { RDBUtils } from '../../utils/rdbutils';
import { UserInfo } from '../../utils/rdbutils';
import dataPreferences from '@ohos.data.preferences';
import common from '@ohos.app.ability.common';
import promptAction from '@ohos.promptAction';
import router from '@ohos.router';

3.2 登录功能实现

@Entry
@Component
struct PreviewLoginButtonPage {
  // 数据库工具实例
  private rdbUtils: RDBUtils = RDBUtils.getInstance(getContext(this));
  private context: common.Context = getContext(this);
  
  // 状态变量
  @State userInfo: UserInfo | null = null;
  @State isLoggedIn: boolean = false;
  @State showUserInfo: boolean = false;
  @State loading: boolean = false;

  // 登录按钮控制器
  controller: loginComponentManager.LoginWithHuaweiIDButtonController =
    new loginComponentManager.LoginWithHuaweiIDButtonController()
      .onClickLoginWithHuaweiIDButton(async (error: BusinessError, response: loginComponentManager.HuaweiIDCredential) => {
        if (error) {
          hilog.error(0x0000, 'testTag',
            `登录失败. 错误码: ${error.code}, 错误信息: ${error.message}`);
          return;
        }

        if (response) {
          this.loading = true;
          try {
            // 获取登录凭证
            const authCode = response.authorizationCode;
            const openID = response.openID;
            const unionID = response.unionID;
            const idToken = response.idToken;

            // 获取用户详细信息
            const authRequest = new authentication.HuaweiIDProvider()
              .createAuthorizationWithHuaweiIDRequest();
            authRequest.scopes = ['profile'];
            authRequest.permissions = ['serviceauthcode'];
            authRequest.forceAuthorization = true;
            authRequest.state = util.generateRandomUUID();
            
            const controller = new authentication.AuthenticationController(this.context);
            const data = await controller.executeRequest(authRequest);
            
            // 处理用户信息
            const userInfo: UserInfo = {
              avatarUri: data.data?.avatarUri || '',
              nickName: data.data?.nickName || '',
              unionID: data.data?.unionID || '',
              openID: data.data?.openID || '',
              authorizationCode: data.data?.authorizationCode || '',
              createTime: Date.now(),
              memo: '华为账号登录'
            };

            // 保存用户信息
            await this.saveUserInfo(userInfo);
            
            // 更新状态
            this.isLoggedIn = true;
            this.showUserInfo = true;
          } catch (err) {
            hilog.error(0x0000, 'testTag', `登录处理失败: ${err}`);
          } finally {
            this.loading = false;
          }
        }
      });
}

3.3 用户信息管理

private async saveUserInfo(userInfo: UserInfo) {
  try {
    // 查询是否已存在该用户
    const existingUser = await this.rdbUtils.queryUserByUnionID(userInfo.unionID);

    if (existingUser) {
      // 更新现有用户信息
      userInfo.id = existingUser.id;
      await this.rdbUtils.updateUser(userInfo);
    } else {
      // 插入新用户信息
      await this.rdbUtils.insertUser(userInfo);
    }

    // 保存当前用户的unionID
    await this.saveCurrentUserUnionID(userInfo.unionID);

    // 显示登录成功提示
    promptAction.showToast({
      message: '登录成功',
      duration: 2000
    });

    // 延迟返回首页
    setTimeout(() => {
      router.back();
    }, 2000);
  } catch (error) {
    hilog.error(0x0000, 'testTag', `保存用户信息失败: ${error}`);
    promptAction.showToast({
      message: '登录失败',
      duration: 2000
    });
  }
}

四、踩坑记录

• 登录状态没持久化，用户一重启App就得重新登录，被吐槽了好几次。
• 登录回调里没处理好异常，偶尔UI直接卡死。
• 多设备登录状态不同步，用户切换设备后信息乱套。
• 网络慢的时候，登录按钮没loading，用户以为点没反应。
• 错误码处理不全，有些报错用户根本看不懂。
• 图片没缓存，头像每次都要重新拉，体验很差。

五、使用示例

// 1. 初始化登录页面
@Entry
@Component
struct LoginPage {
  build() {
    Column() {
      // 登录按钮
      LoginWithHuaweiIDButton({
        params: {
          style: loginComponentManager.Style.BUTTON_RED,
          extraStyle: {
            buttonStyle: new loginComponentManager.ButtonStyle()
              .loadingStyle({
                show: this.loading
              })
          },
          borderRadius: 24,
          loginType: loginComponentManager.LoginType.ID,
          supportDarkMode: true,
          verifyPhoneNumber: true
        },
        controller: this.controller
      })
    }
  }
}

// 2. 检查登录状态
private async checkLoginStatus() {
  try {
    this.loading = true;
    const currentUnionID = await this.getCurrentUserUnionID();
    if (currentUnionID) {
      const user = await this.rdbUtils.queryUserByUnionID(currentUnionID);
      if (user) {
        this.userInfo = user;
        this.isLoggedIn = true;
        this.showUserInfo = true;
      }
    }
  } catch (error) {
    hilog.error(0x0000, 'testTag', `检查登录状态失败: ${error}`);
  } finally {
    this.loading = false;
  }
}

// 3. 退出登录
private async logout() {
  try {
    await this.clearCurrentUserUnionID();
    this.isLoggedIn = false;
    this.showUserInfo = false;
    this.userInfo = null;
    promptAction.showToast({
      message: '已退出登录',
      duration: 2000
    });
  } catch (error) {
    hilog.error(0x0000, 'testTag', `退出登录失败: ${error}`);
  }
}

六、注意事项

• 华为开发者联盟的配置一定要对，包名、签名、权限，错一个都不行。
• token和敏感信息一定要加密，别直接丢本地。
• 网络慢的时候记得加loading，别让用户等得心慌。
• 错误提示要友好，别只弹"登录失败"，最好能带点原因。
• 多端同步要做好，别让用户切换设备后信息乱套。
• 代码里别写死任何ID和密钥，安全第一。

七、后端实现说明

这里只是前端实现，后端你得自己搞。比如token换取、用户信息存储、权限校验、接口安全，这些都得后端配合。别想着全靠前端糊弄过去，安全问题很严重。

7.1 后端服务需求

• 用户认证服务：校验华为账号凭证、生成和管理会话、token刷新、登录状态同步。
• 用户信息服务：存储和管理用户信息、权限、同步、更新。
• 安全服务：数据加密、敏感信息保护、访问控制、防止数据泄露。

7.2 后端API接口

// 1. 用户认证接口
POST /api/auth/login
Request: {
  authorizationCode: string;  // 华为账号授权码
  openID: string;            // 华为账号OpenID
  unionID: string;           // 华为账号UnionID
}
Response: {
  token: string;             // 用户访问令牌
  refreshToken: string;      // 刷新令牌
  expiresIn: number;         // 过期时间
}

// 2. 用户信息接口
GET /api/user/info
Request: {
  token: string;             // 用户访问令牌
}
Response: {
  userInfo: {
    avatarUri: string;       // 头像
    nickName: string;        // 昵称
    unionID: string;         // UnionID
    openID: string;          // OpenID
    // 其他用户信息
  }
}

// 3. 刷新令牌接口
POST /api/auth/refresh
Request: {
  refreshToken: string;      // 刷新令牌
}
Response: {
  token: string;             // 新的访问令牌
  expiresIn: number;         // 过期时间
}

7.3 安全考虑

• 所有接口必须HTTPS，别用明文。
• token、敏感数据都要加密，数据库也别裸奔。
• SQL注入、暴力破解这些老生常谈的安全问题，别掉以轻心。
• 登录设备管理、token过期、异常检测都要有。

7.4 部署建议

• 服务器和数据库都要有备份，别等出事才想起来。
• 日志、监控、告警都要配好，出问题能第一时间发现。
• 缓存用Redis，接口别被刷爆。
• 防火墙、限流、黑名单这些都要有。

7.5 开发建议

• 后端框架、ORM、API文档、日志系统都建议用主流方案，别造轮子。
• 统一错误处理，日志别省。
• 单元测试、压力测试、自动化测试都要有。
• 安全补丁要及时打，别等被黑了才补。

7.6 注意事项

• 需要自行实现后端服务，前端只是"壳"。
• 华为开发者联盟账号、API权限都要提前申请。
• 数据安全、服务监控、应急预案都要有。
• 重要：别把密钥、token、用户数据写死在前端！

---

有问题欢迎留言，大家一起踩坑一起填。方案适合大部分场景，特殊需求记得多测几遍。

• 鸿蒙应用开发指南

欢迎体验

这个已经集成到鸿蒙开发者工具箱里了,欢迎下载体验！

鸿蒙开发者工具箱

---

作者：在人间耕耘 邮箱：1743914721@qq.com 版权声明：本文为博主原创文章，转载请附上原文出处链接及本声明。