登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›开发者工具箱-华为账号登录功能实现

开发者工具箱-华为账号登录功能实现

奸轲嫣 2025-6-21 02:24:13
华为账号登录功能实现

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

1.1 什么是华为账号登录

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


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

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

3.1 基础配置
  1. // 该引的都得引，不然编译直接报错
  2. import { LoginWithHuaweiIDButton, loginComponentManager, authentication } from '@kit.AccountKit';
  3. import { BusinessError } from '@kit.BasicServicesKit';
  4. import { hilog } from '@kit.PerformanceAnalysisKit';
  5. import { util } from '@kit.ArkTS';
  6. import { RDBUtils } from '../../utils/rdbutils';
  7. import { UserInfo } from '../../utils/rdbutils';
  8. import dataPreferences from '@ohos.data.preferences';
  9. import common from '@ohos.app.ability.common';
  10. import promptAction from '@ohos.promptAction';
  11. import router from '@ohos.router';
复制代码
3.2 登录功能实现
  1. @Entry
  2. @Component
  3. struct PreviewLoginButtonPage {
  4.   // 数据库工具实例
  5.   private rdbUtils: RDBUtils = RDBUtils.getInstance(getContext(this));
  6.   private context: common.Context = getContext(this);
  7.   
  8.   // 状态变量
  9.   @State userInfo: UserInfo | null = null;
  10.   @State isLoggedIn: boolean = false;
  11.   @State showUserInfo: boolean = false;
  12.   @State loading: boolean = false;
  14.   // 登录按钮控制器
  15.   controller: loginComponentManager.LoginWithHuaweiIDButtonController =
  16.     new loginComponentManager.LoginWithHuaweiIDButtonController()
  17.       .onClickLoginWithHuaweiIDButton(async (error: BusinessError, response: loginComponentManager.HuaweiIDCredential) => {
  18.         if (error) {
  19.           hilog.error(0x0000, 'testTag',
  20.             `登录失败. 错误码: ${error.code}, 错误信息: ${error.message}`);
  21.           return;
  22.         }
  24.         if (response) {
  25.           this.loading = true;
  26.           try {
  27.             // 获取登录凭证
  28.             const authCode = response.authorizationCode;
  29.             const openID = response.openID;
  30.             const unionID = response.unionID;
  31.             const idToken = response.idToken;
  33.             // 获取用户详细信息
  34.             const authRequest = new authentication.HuaweiIDProvider()
  35.               .createAuthorizationWithHuaweiIDRequest();
  36.             authRequest.scopes = ['profile'];
  37.             authRequest.permissions = ['serviceauthcode'];
  38.             authRequest.forceAuthorization = true;
  39.             authRequest.state = util.generateRandomUUID();
  40.             
  41.             const controller = new authentication.AuthenticationController(this.context);
  42.             const data = await controller.executeRequest(authRequest);
  43.             
  44.             // 处理用户信息
  45.             const userInfo: UserInfo = {
  46.               avatarUri: data.data?.avatarUri || '',
  47.               nickName: data.data?.nickName || '',
  48.               unionID: data.data?.unionID || '',
  49.               openID: data.data?.openID || '',
  50.               authorizationCode: data.data?.authorizationCode || '',
  51.               createTime: Date.now(),
  52.               memo: '华为账号登录'
  53.             };
  55.             // 保存用户信息
  56.             await this.saveUserInfo(userInfo);
  57.             
  58.             // 更新状态
  59.             this.isLoggedIn = true;
  60.             this.showUserInfo = true;
  61.           } catch (err) {
  62.             hilog.error(0x0000, 'testTag', `登录处理失败: ${err}`);
  63.           } finally {
  64.             this.loading = false;
  65.           }
  66.         }
  67.       });
  68. }
复制代码
3.3 用户信息管理
  1. private async saveUserInfo(userInfo: UserInfo) {
  2.   try {
  3.     // 查询是否已存在该用户
  4.     const existingUser = await this.rdbUtils.queryUserByUnionID(userInfo.unionID);
  6.     if (existingUser) {
  7.       // 更新现有用户信息
  8.       userInfo.id = existingUser.id;
  9.       await this.rdbUtils.updateUser(userInfo);
  10.     } else {
  11.       // 插入新用户信息
  12.       await this.rdbUtils.insertUser(userInfo);
  13.     }
  15.     // 保存当前用户的unionID
  16.     await this.saveCurrentUserUnionID(userInfo.unionID);
  18.     // 显示登录成功提示
  19.     promptAction.showToast({
  20.       message: '登录成功',
  21.       duration: 2000
  22.     });
  24.     // 延迟返回首页
  25.     setTimeout(() => {
  26.       router.back();
  27.     }, 2000);
  28.   } catch (error) {
  29.     hilog.error(0x0000, 'testTag', `保存用户信息失败: ${error}`);
  30.     promptAction.showToast({
  31.       message: '登录失败',
  32.       duration: 2000
  33.     });
  34.   }
  35. }
复制代码
四、踩坑记录


  • 登录状态没持久化，用户一重启App就得重新登录，被吐槽了好几次。
  • 登录回调里没处理好异常，偶尔UI直接卡死。
  • 多设备登录状态不同步，用户切换设备后信息乱套。
  • 网络慢的时候，登录按钮没loading，用户以为点没反应。
  • 错误码处理不全，有些报错用户根本看不懂。
  • 图片没缓存，头像每次都要重新拉，体验很差。
五、使用示例
  1. // 1. 初始化登录页面
  2. @Entry
  3. @Component
  4. struct LoginPage {
  5.   build() {
  6.     Column() {
  7.       // 登录按钮
  8.       LoginWithHuaweiIDButton({
  9.         params: {
  10.           style: loginComponentManager.Style.BUTTON_RED,
  11.           extraStyle: {
  12.             buttonStyle: new loginComponentManager.ButtonStyle()
  13.               .loadingStyle({
  14.                 show: this.loading
  15.               })
  16.           },
  17.           borderRadius: 24,
  18.           loginType: loginComponentManager.LoginType.ID,
  19.           supportDarkMode: true,
  20.           verifyPhoneNumber: true
  21.         },
  22.         controller: this.controller
  23.       })
  24.     }
  25.   }
  26. }
  28. // 2. 检查登录状态
  29. private async checkLoginStatus() {
  30.   try {
  31.     this.loading = true;
  32.     const currentUnionID = await this.getCurrentUserUnionID();
  33.     if (currentUnionID) {
  34.       const user = await this.rdbUtils.queryUserByUnionID(currentUnionID);
  35.       if (user) {
  36.         this.userInfo = user;
  37.         this.isLoggedIn = true;
  38.         this.showUserInfo = true;
  39.       }
  40.     }
  41.   } catch (error) {
  42.     hilog.error(0x0000, 'testTag', `检查登录状态失败: ${error}`);
  43.   } finally {
  44.     this.loading = false;
  45.   }
  46. }
  48. // 3. 退出登录
  49. private async logout() {
  50.   try {
  51.     await this.clearCurrentUserUnionID();
  52.     this.isLoggedIn = false;
  53.     this.showUserInfo = false;
  54.     this.userInfo = null;
  55.     promptAction.showToast({
  56.       message: '已退出登录',
  57.       duration: 2000
  58.     });
  59.   } catch (error) {
  60.     hilog.error(0x0000, 'testTag', `退出登录失败: ${error}`);
  61.   }
  62. }
复制代码
六、注意事项


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

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


  • 用户认证服务：校验华为账号凭证、生成和管理会话、token刷新、登录状态同步。
  • 用户信息服务：存储和管理用户信息、权限、同步、更新。
  • 安全服务：数据加密、敏感信息保护、访问控制、防止数据泄露。
7.2 后端API接口
  1. // 1. 用户认证接口
  2. POST /api/auth/login
  3. Request: {
  4.   authorizationCode: string;  // 华为账号授权码
  5.   openID: string;            // 华为账号OpenID
  6.   unionID: string;           // 华为账号UnionID
  7. }
  8. Response: {
  9.   token: string;             // 用户访问令牌
  10.   refreshToken: string;      // 刷新令牌
  11.   expiresIn: number;         // 过期时间
  12. }
  14. // 2. 用户信息接口
  15. GET /api/user/info
  16. Request: {
  17.   token: string;             // 用户访问令牌
  18. }
  19. Response: {
  20.   userInfo: {
  21.     avatarUri: string;       // 头像
  22.     nickName: string;        // 昵称
  23.     unionID: string;         // UnionID
  24.     openID: string;          // OpenID
  25.     // 其他用户信息
  26.   }
  27. }
  29. // 3. 刷新令牌接口
  30. POST /api/auth/refresh
  31. Request: {
  32.   refreshToken: string;      // 刷新令牌
  33. }
  34. Response: {
  35.   token: string;             // 新的访问令牌
  36.   expiresIn: number;         // 过期时间
  37. }
复制代码
7.3 安全考虑


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


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


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


  • 需要自行实现后端服务，前端只是"壳"。
  • 华为开发者联盟账号、API权限都要提前申请。
  • 数据安全、服务监控、应急预案都要有。
  • 重要：别把密钥、token、用户数据写死在前端！
有问题欢迎留言，大家一起踩坑一起填。方案适合大部分场景，特殊需求记得多测几遍。


  • 鸿蒙应用开发指南
欢迎体验

这个已经集成到鸿蒙开发者工具箱里了,欢迎下载体验！
鸿蒙开发者工具箱
作者：在人间耕耘
邮箱：1743914721@qq.com
版权声明：本文为博主原创文章，转载请附上原文出处链接及本声明。
本文由博客一文多发平台 OpenWrite 发布！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
奸轲嫣
2025-6-21 02:24:13

0

粉丝关注

16

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫