学着学着我就给这个 HarmonyOS 应用增加了些新技术

前言

学习技术最好基本的过程分为两个阶段：

输入阶段
输出阶段

输入阶段，就是你如何获取知识和吸收知识的过程，因人而异，看书、看视频、看代码、看文章等等方式。

输出阶段，就是体现出你知道的内容输出成客观的存在的东西，可以是写文章博客、输出教程视频、教会别人、落地到你的项目中。

在我平时的输出方式，以上都包含了，那么今天输出的方式就是落地到具体到项目中了

今天主要做了什么呢

今天主要是使用HarmonyOS 端云的能力和元服务的静默能力，对已经上架的项目 萤火故事屋 做了一些升级优化

静默登录

静默登录就像你走进自己家一样自然，不需要钥匙，也不需要输密码------系统直接认出你是主人，自动开门让你进去。

场景

：你之前用华为账号登录过某个应用（比如游戏、社交软件），后来手机丢了、重装了应用，或者换了新手机。
操作：当你重新下载应用打开时，不需要手动输入账号密码，甚至不需要点击"登录"按钮。
结果：应用直接记住你的身份（比如你的华为账号信息），自动帮你完成登录，就像从未离开过一样。

端云一体

端云一体就是HarmonyOS提供一套完整的后端环境，包括：云数据库、云存储、云函数等能力。

这里我们的使用端云是存储了用户的个人信息，包括身份验证的token，头像和昵称等。

场景化Button

场景化Button是 HarmonyOS 中 **Scenario Fusion Kit（融合场景服务）**中的一个分支。

**Scenario Fusion Kit（融合场景服务）**基于ArkUI框架组件开发，提供跨多个子系统融合的场景化组件，降低开发者接入复杂度，确保鸿蒙生态体验统一。ArkUI一行核心代码启用，智能推荐输入建议，复杂表单一键填充。融合场景服务通过完善应用/元服务的系统开发能力，进一步丰富鸿蒙生态，满足开发者在HarmonyOS系统下的服务闭环诉求。

选择头像Button 是场景化Button中的一个分类，开发者可以Button组件快速拉起头像选择页面，供用户完成华为账号头像或其他头像的选择与展示

整体效果

核心代码

这里罗列了关键功能的部分核心代码

鸿蒙端静默登录

typescript 复制代码

  /**
   * 华为静默登录
   * @returns
   */
  async hwLoginRequest() {
    // 创建登录请求，并设置参数
    const loginRequest = new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest();
    // false表示静默登录
    loginRequest.forceLogin = false;
    // 用于防跨站点请求伪造
    loginRequest.state = util.generateRandomUUID();
    const controller = new authentication.AuthenticationController();
    const response = await controller.executeRequest(loginRequest);
    const loginWithHuaweiIDResponse = response as authentication.LoginWithHuaweiIDResponse;
    const state = loginWithHuaweiIDResponse.state;
    if (state && loginRequest.state !== state) {
      hilog.error(0x0000, 'testTag', `Failed to login. The state is different, response state: ${state}`);
      return;
    }
    const loginWithHuaweiIDCredential = loginWithHuaweiIDResponse!.data;
    return loginWithHuaweiIDCredential!
  }

代码解释：

功能：实现华为账号的静默登录功能，并验证请求的合法性目的：通过华为账号系统进行用户身份认证，获取用户凭证信息使用场景：在鸿蒙应用中需要用户身份验证时（如访问个人数据、执行敏感操作等）

主要逻辑：

创建登录请求对象
- 使用authentication.HuaweiIDProvider创建华为账号登录请求实例
- 设置forceLogin = false表示尝试静默登录（若用户已登录则直接获取凭证）
- 生成随机UUID作为state参数，用于防止CSRF攻击
执行认证请求
- 通过AuthenticationController执行登录请求
- 使用await等待异步操作完成，符合ArkTS的异步编程特性
响应验证
- 检查响应中的state参数是否与请求时设置的值一致
- 使用hilog记录错误日志（当state不匹配时）
- 通过类型断言as authentication.LoginWithHuaweiIDResponse确保类型安全
获取登录凭证
- 从响应数据中提取loginWithHuaweiIDCredential
- 使用非空断言!确保返回值不为null（需确保业务逻辑已处理异常情况）

鸿蒙端调用云函数生成Access_Token

这里的业务需求是，我们需要获取静默登录返回的code，这个code是当前登录用户的身份验证，有效期为1分钟，并且只能使用一次，我们需要根据它来得到自己业务服务器颁发的token，后续用到自己的业务时，便是根据这个token来进行身份验证的。详细开发流程如下图。

代码：

typescript 复制代码

  /**
   * 登录
   */
  async login(authorizationCode: string,OpenID:string) {
    const res = await cloudFunction.call({
      // 云对象的名称，这个和你创建的云对象文件名一致
      name: "auth-cloud",
      data: {
        // book云对象的methods1方法
        method: "login",
        // 传递给method1的参数
        params: [authorizationCode,OpenID],
      },
    })
    return res
  }

解释如下：

功能：通过调用云函数实现用户登录验证目的：将用户授权码和OpenID传递至云端进行安全验证，并获取登录结果使用场景：移动应用（如鸿蒙应用）中用户通过第三方授权（如OAuth）登录时，与后端云服务交互的场景

主要逻辑：
1. 异步函数声明 ：使用async关键字声明函数，支持异步调用云函数并等待响应结果
2. 参数传递 ：接收授权码authorizationCode和用户标识OpenID作为输入参数，用于身份验证
3. 云函数调用：通过框架提供的 cloudFunction.call接口：
  - 指定云对象名称auth-cloud（需与云端部署的云函数名称一致）
  - 通过method字段指定调用云端的login方法
  - 通过params数组传递验证所需的两个关键参数
4. 结果返回：将云端返回的响应结果直接透传给调用方，保持请求-响应的透明性
5. 类型安全：基于ArkTS的静态类型特性，对输入参数和返回值类型进行编译时检查（string类型参数，Promise封装的响应结果）

云函数端根据鸿蒙端code 生成 Access_token

云函数接收客户端传递过来的code，需要向华为服务器申请获取 Access Token 和 Refresh Token，这里的 AccessToken的功能是向华为服务器获取当前用户的敏感革新，头像、名称等。

typescript 复制代码

  login(authorizationCode: string,openID:string) {
    // 生成 Token
    const payload = { authorizationCode ,openID};

    const token = generateToken(payload, '1h');
    console.log('生成的 Token:', token);
    return token
  }

总结

以上是我们部分核心代码的展示，然后萤火故事屋的端云改造还没有结束，目前技术方案上还存在一些问题没有解决：

云数据库、云函数、云存储中开发环境和生成环境，端云如何快速便捷的切换
本地真机如何和本地函数联动调试，因为生成用户的code是和真机调用静默登录返回的内容相关的，因此需要打通这个关系。

关于我们

关于青蓝逐码组织

如果你兴趣想要了解更多的鸿蒙应用开发细节和最新资讯 ，甚至你想要做出一款属于自己的应用！欢迎在评论区留言或者私信或者看我个人信息，可以加入技术交流群。

学着学着 我就给这个 HarmonyOS 应用增加了些新技术