【HarmonyOS NEXT】华为账号一键登录实现

一、背景

在鸿蒙开发过程中,登录除了账号密码与手机号验证码登录以为,鸿蒙还有一种登录方式是华为账号一键登录,对于用户来讲方便又快捷,更能增加用户体验与好感。此篇文章整理总结下华为账号一键登录的流程与思路

二、概述

华为账号一键登录是基于OAuth 2.0协议标准和OpenID Connect协议标准构建的OAuth2.0 授权登录系统,应用可以通过华为账号一键登录能力快捷地获取华为账号用户的身份标识和手机号,快速建立应用内的用户体系。

优势

  • 利用系统账号的安全性和便利性,用户无需输入账号名和密码,无需复杂的安全验证,简化登录步骤,提高用户转化率。
  • 提供系统验证过的手机号,关联应用已有用户。
  • 实现Phone、Tablet、PC/2in1、TV设备一致的登录体验。

三、前提准备

3.1、开发调试:

使用真机调试,目前模拟器无法调试

3.2、配置Client ID

3.2.1、获取Client ID

在 AppGallery Connect(简称AGC)的开发与服务中,选择对应的项目和对应的元服务,在"常规 > 应用 "下获取"OAuth 2.0客户端ID(凭据)"处的Client ID。

3.2.2、配置Client ID

在工程中entry模块的module.json5文件中,新增metadata,配置name为client_id,value为上一步获取的Client ID的值,如下所示:

TypeScript 复制代码
"module": {
  "name": "<name>",
  "type": "entry",
  "description": "<description>",
  "mainElement": "<mainElement>",
  "deviceTypes": [],
  "pages": "<pages>",
  "abilities": [],
  "metadata": [ // 配置信息如下
    {
      "name": "client_id",
      "value": "xxxxx" // 将上一步获取到的Client ID赋值给value,请注意不要使用其他方式设置value值
    }
  ]
 }

3.3、配置scope权限

根据官网指引来获取scope权限:

配置scope权限

说明:获取您的手机号、获取收货地址权限,仅支持企业开发者申请,不支持个人开发者申请。

四、具体实现

4.1、业务逻辑流程

4.2、具体实现效果

4.3、具体步骤

第一步:获取匿名手机号

在组件挂载前获取匿名手机号,以下是官网地址,详细可参考官网文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/account-api-authentication#section610319714214

TypeScript 复制代码
  getQuickLoginAnonymousPhone(){
    try {
      // 创建授权请求,并设置参数
      const authRequest = new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();
      // 获取匿名手机号需传quickLoginAnonymousPhone这个scope,传参之前需要先申请"华为账号一键登录"权限
      //(权限名称为:quickLoginMobilePhone),后续才能获取匿名手机号数据
      authRequest.scopes = ['quickLoginAnonymousPhone']
      // 用于防跨站点请求伪造
      authRequest.state = util.generateRandomUUID();
      // 一键登录场景该参数只能设置为false
      authRequest.forceAuthorization = false;
      const controller = new authentication.AuthenticationController();
      controller.executeRequest(authRequest).then((response:authentication.AuthorizationWithHuaweiIDResponse)=>{
        const anonymousPhone = response.data?.extraInfo?.quickLoginAnonymousPhone as string
        if(anonymousPhone){
          this.quickLoginAnonymousPhone = anonymousPhone
          return
        }
      })
    }catch (e){
      console.log('lucy== getQuickLoginAnonymousPhone--e',e,JSON.stringify(e))
    }
  }

第二步:华为账号一键登录

可以直接使用官网提供的能力---->LoginWithHuaweiIDButton (华为账号Button登录组件)

以下是官网地址,详细可参考官网文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/account-api-huawei-id-button#section1624716107193

第三步:华为授权,返回authCode/openID等凭证

第四步、调用后端接口校验并缓存用户数据

相关推荐
Flutter_OH2 小时前
Flutter OHOS 三方库与插件适配相关问题
harmonyos
Flutter_OH2 小时前
Flutter OHOS ohos应用编译相关问题
harmonyos
马剑威(威哥爱编程)6 小时前
【共创稿事节】HarmonyOS 7 Agent 开发实战 01:云端大模型 API 接入底座
华为·harmonyos
万物智能信息科技7 小时前
人体感应芯片PIR模块驱动开发—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
驱动开发·嵌入式硬件·华为·开源·harmonyos
m0_738185827 小时前
Flutter 鸿蒙化实战:sqflite 适配 OpenHarmony,本地 SQLite 数据库
flutter·华为·harmonyos·鸿蒙
马剑威(威哥爱编程)9 小时前
【共创稿事节】HarmonyOS 7 Agent 开发实战 02:Agent 工程脚手架与对话 UI 骨架
华为·harmonyos
打工仔折腾 AI10 小时前
鸿蒙平板远控电脑实测:ToDesk蓝牙键鼠、双模式鼠标与跨端剪贴板落地记录
人工智能·后端·python·性能优化·计算机外设·电脑·harmonyos
打工仔折腾 AI10 小时前
鸿蒙端ToDesk远控电脑实测:蓝牙键鼠、双模式鼠标与跨端剪贴板实践
后端·python·性能优化·计算机外设·电脑·harmonyos·ai agent 实战
OH_TPC10 小时前
【鸿蒙优选三方库】@ohos/axios:前端转鸿蒙,网络层几乎不用改
前端·华为·harmonyos·鸿蒙
m0_7381858210 小时前
Flutter 鸿蒙化实战:simple_circular_progress_bar 适配 OpenHarmony,环形进度条
flutter·华为·harmonyos·鸿蒙