模拟登录页,华为账号一键登录

news2024/9/21 18:48:28

一、介绍
基于鸿蒙Next模拟账号一键登录,免去账号注册环节
二、场景需求
1. 用户场景
新用户: 需要快速注册并登录,以体验华为的服务。
老用户: 希望快速登录,不用每次输入用户名和密码。
2. 界面设计
Logo和标题: 页面顶部展示华为的Logo及"一键登录"或"华为账号登录"的标题。
3. 功能需求:短信/邮箱验证码:
4. 安全性
二次验证: 可选启用二次验证,如在高风险环境下(新设备登录等),要求用户通过邮件或短信进行确认。
5. 适应性
响应式设计: 确保在不同设备(手机、平板、电脑)上的良好展示。
多语言支持: 提供多种语言选项,方便不同地区用户使用。
6. 用户反馈
操作反馈: 无论是按钮点击还是输入错误,都需要及时反馈用户操作状态。
常见问题解答链接: 用户如果在登录时遇到问题,可以快速找到帮助。

三、业务步骤
第一步:点击“一键登录”,获取登录信息
第二步:拉起授权弹窗
第三步:获取授权,获取用户信息
第四步:展示用户信息,显示功能选项
四、效果展示
 

#HarmonyOS NEXT 体验官#模拟登录页,华为账号一键登录-鸿蒙开发者社区


五:代码展示:

import { authentication } from '@kit.AccountKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { util } from '@kit.ArkTS';
import { BusinessError } from '@kit.BasicServicesKit';

//自定义
import { Mine_SystemItem_Type,CommonConstants } from "../common/CommonConstant"

@Entry
@Component
struct Index06 {
  @State tabMineItem:Mine_SystemItem_Type[] = CommonConstants.MINE_SYSTEM_ITEM_LIST
  @State isLogin: boolean = false
  @State userImg: string|Resource|undefined = $r("app.media.app_icon") // 登录头像
  @State userName: string|undefined = '昵称001' // 用户昵称
  @State btnTitle: string = '华为账号一键登录' // 用户昵称

  getHuaWeiAccount(){
    // 创建授权请求,并设置参数
    let authRequest = new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();
    // 获取头像昵称需要传如下scope
    authRequest.scopes = ['profile','phone'];
    // 若开发者需要进行服务端开发,则需传如下permission获取authorizationCode
    authRequest.permissions = ['serviceauthcode'];
    // 用户是否需要登录授权,该值为true且用户未登录或未授权时,会拉起用户登录或授权页面
    authRequest.forceAuthorization = true;
    // 用于防跨站点请求伪造。
    authRequest.state = util.generateRandomUUID();
    // 执行授权请求
    try {
      let controller = new authentication.AuthenticationController(getContext(this));
      controller.executeRequest(authRequest).then((data) => {
        let authorizationWithHuaweiIDResponse = data as authentication.AuthorizationWithHuaweiIDResponse;
        let state = authorizationWithHuaweiIDResponse.state;
        if (state != undefined && authRequest.state != state) {
          hilog.error(0x0000, 'testTag', `Failed to authorize. The state is different, response state: ${state}`);
          return;
        }
        hilog.info(0x0000, 'testTag', 'Succeeded in authentication: %{public}s',
          JSON.stringify(authorizationWithHuaweiIDResponse));
        this.isLogin = !this.isLogin
        this.btnTitle = '退出'
        this.userImg = authorizationWithHuaweiIDResponse.data!.avatarUri;
        this.userName = authorizationWithHuaweiIDResponse.data!.nickName;

      }).catch((err: BusinessError) => {
        this.dealAllError(err);
      });
    } catch (error) {
      this.dealAllError(error);
    }
  }
  // 错误处理
  dealAllError(error: BusinessError): void {
    hilog.error(0x0000, 'testTag', `Failed to auth. Code: ${error.code}, message: ${error.message}`);
  }

  build() {
      Column() {
        Column() {
          //头像
          Column() {
            Image(this.userImg)
              .objectFit(ImageFit.Cover)
              .height(72)
              .width(72)
              .borderRadius(36)
            Row().height(20)

            Text(this.userName).fontSize(16)

          }
          .width('90%')
          .borderRadius(12)
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.Center)
          .backgroundColor(0xFFFFFF)
          .shadow({
            radius: 10,
            color: "#dddddd",
            offsetX: 6,
            offsetY: 6
          })
          .margin({ top: 15, bottom: 10 })
          .padding({ top: 30, bottom: 30 })
        }
        .justifyContent(FlexAlign.Start)
        .alignItems(HorizontalAlign.Center)

        Button(this.btnTitle)
          .width('70%')
          .height(30)
          .onClick(()=>{
            this.getHuaWeiAccount()
            // this.isLogin = !this.isLogin
            // this.btnTitle = '退出'
          })
          .margin({ top:10,bottom:20 })

        if (this.isLogin){
        Column(){
          //功能选项
          ForEach(this.tabMineItem,(item:Mine_SystemItem_Type,index:number)=>{
            Row(){
              Text(item.itemTitle).fontSize(16).fontColor(0x161616)
              Blank()
              Image($r("app.media.ic_right_back_greyWhite")).width(24).height(24)
            }.width('100%')
            .height(48)
            .padding({left:15,right:10})
            .stateStyles({
              normal:{.backgroundColor(0xFFFFFF)},
              pressed:{.backgroundColor(0xEFEFEF)}
            })
          },(item:string)=>item)
          Row(){
            Text('隐私声明').fontSize(16).fontColor(0x161616)
            Blank()
            Image($r("app.media.ic_right_back_greyWhite")).width(24).height(24)
          }.width('100%')
          .height(48)
          .padding({left:15,right:10})
          .stateStyles({
            normal:{.backgroundColor(0xFFFFFF)},
            pressed:{.backgroundColor(0xEFEFEF)}
          })

        }.width('90%')
        .justifyContent(FlexAlign.Start)
        .alignItems(HorizontalAlign.Center)
        .backgroundColor(0xFFFFFF)
        .shadow({radius:10,color:"#dddddd",offsetX:6,offsetY:6})
        .padding({top:10,bottom:10})
        .borderRadius(12)
        }

      }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
    .backgroundColor(0xEEEEEE)

  }

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2085332.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RK方案有时一开机要设置GPIO口点平

有时候RK方案,需要一开机就设置GPIO口电平,需要在uboot阶段,board.c #define GPIO_BANK0 0 #define GPIO_BANK1 32 #define GPIO_BANK2 64 #define GPIO_BANK3 …

基于RK3568智慧交通-雷达视频融合一体机,支持鸿蒙

智慧交通-雷达视频融合一体机 随着5G网络与智慧交通车路协同系统在全国各点的落地,作为提升交通安全的前沿技术方案也愈发受到重视。 在交通信控领域,以往的感知技术、无论是地磁、线圈还是摄像头,功能都仅仅局限于数清经过了多少车辆&…

TypeScript类型检查错误 error TS2339

错误产生 上一篇博客写了一个调用摄像头的 demo &#xff0c;用了 vue3 vite &#xff0c;使用了 TypeScript &#xff0c;代码大致如下&#xff1a; <script setup lang"ts"> import { onMounted, ref } from vue; import WelcomeItem from ./WelcomeItem.…

视频监控管理老鼠检测算法应用方案厨房老鼠检测算法源码展示

在当今的现代厨房环境中&#xff0c;维持卫生的重要性不仅仅体现在健康层面&#xff0c;更与整个家庭的生活质量息息相关。随着城市化进程不断加快&#xff0c;城市中的居住空间变得更加拥挤&#xff0c;这导致了一系列家庭管理问题的出现&#xff0c;其中厨房老鼠问题尤为突出…

复杂 RAG 系统的检索规划

文章介绍了REAPER&#xff08;Reasoning based Retrieval Planning for Complex RAG Systems&#xff09;&#xff0c;这是一种基于大型语言模型&#xff08;LLM&#xff09;的规划器&#xff0c;用于在复杂的对话系统中生成检索计划。REAPER旨在解决在大规模异构数据存储中进行…

linux中下载nginx

Nginx是一款高性能的开源Web服务器软件。它可以作为一个HTTP服务器进行网站的发布&#xff0c;也可以作为反向代理服务器进行负载均衡。Nginx以其出色的性能、稳定性和低资源消耗而受到广泛的使用。它的特点包括支持并发连接数高、内存消耗低、事件驱动等&#xff0c;适用于大部…

滚雪球学MyBatis-Plus(01):学前导读

&#x1f300;写在前面 我是bug菌&#xff0c;CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云 等社区博客专家&#xff0c;C站博客之星Top30&#xff0c;华为云2023年度十佳博主&#xff0c;掘金多年度人气作者Top40&#xff0c;掘金等各大社区平台签约作者&#xff…

Python进阶05-多线程

零、文章目录 Python进阶05-多线程 1、进程 &#xff08;1&#xff09;单任务 单任务&#xff1a;指在同一时间内只执行单个任务。 import time# 定义一个函数&#xff0c;用于实现听音乐 def music():for i in range(3):print(正在听音乐...)time.sleep(0.2)# 定义一个函…

振弦式基岩位移计主要功能探析

在土木工程和地质监测领域&#xff0c;基岩位移计作为一种重要的监测设备&#xff0c;发挥着不可替代的作用。其主要功能在于长期、精准地测量水工结构物、桥梁、建筑、铁路等混凝土结构物与地基之间的开合度(位移)&#xff0c;并同步监测埋设点的温度变化。本文将深入探讨基岩…

【漏洞复现】某联云采 SRM2.0 download 任意文件读取漏洞

声明&#xff1a;本文档或演示材料仅用于教育和教学目的。如果任何个人或组织利用本文档中的信息进行非法活动&#xff0c;将与本文档的作者或发布者无关。 一、漏洞描述 某联云采 SRM2.0 是一款专门为企业供应链管理设计的采购管理系统。它具备采购流程自动化、供应商管理优化…

LLM大模型入门天花板!《大模型入门:技术原理与实战应用》一本书让你轻松入门大模型(附PDF)

随着大模型技术的不断完善和普及&#xff0c;我们将进入一个由数据驱动、智能辅助的全新工作模式和生活模式。个人和企业将能够利用大模型来降本增效&#xff0c;并创造全新的用户体验。 人工智能是人类探索未来的重要领域之一&#xff0c;以GPT为代表的大模型应用一经推出在短…

【网络安全】服务基础第一阶段——第二节:Windows系统管理基础----虚拟化IP地址以及用户与组管理

目录 一、Windows网络测试工具 1.1.ping命令 1.2.tracert命令 二、IP实验内容 2.1 实验一 2.2 实验二 三、用户与组管理 3.1 用户与账户概述 3.2 用户管理 3.3 用户增删改查 3.4 增加用户 3.5 修改用户属性 3.6 删除用户 3.7 组账户概述 3.8 组账户增删改查 四、…

linux网络编程-原理到应用-附源码(全)

目录 一、计算机网络分层模型 1.1 概念 1.2 OSI 七层模型 1.3 五层模型 1.4 TCP/IP四层模型 二、传输层-TCP协议 2.1 什么是TCP协议&#xff1f; 2.2 TCP的连接的建立和释放 2.3 基于TCP协议-只接受一个连接的范例程序 一、计算机网络分层模型 1.1 概念 计算机网络…

装过mr又卸载了,max报错 mrmateralattribs missing dlls

rendering>scene converter 打开对话框后&#xff0c;current preset 中选择 remove invalid legacy elements&#xff0c;取消open scene converter。。勾选 automaticaly remove missing。再点 convet scene

HTML静态网页成品作业(HTML+CSS)——个人介绍网页(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

java-Spring框架02

1.AOP 1.概述 AOP &#xff08;Aspect Oriented Programming&#xff09;&#xff1a;面向切面编程&#xff0c;通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术。&#xff08;是对面向对象编程的补充延续&#xff0c;&#xff09; 面向切面编程思想&#…

Linux之ip命令详解

华子目录 1.ip命令是什么1.1ip命令的由来1.2ip命令的安装包1.2ip选项&#xff08;基本不用&#xff09; 2.查看网络信息2.1显示全部网络接口信息2.2显示单个网络接口信息2.3显示单个接口状态2.4查看路由表2.5查看arp缓存 3.设置网卡ip地址3.1启用或停用网卡3.2设置默认网关3.3新…

【数据集】遥感影像建筑物提取论文常用数据集

几个常用于遥感影像建筑物对比试验的数据集 WHU building dataset 下载链接&#xff1a; https://study.rsgis.whu.edu.cn/pages/download/building_dataset.html WHU数据集中包含多个子数据集&#xff1a; Aerial imagery dataset 航空影像建筑物数据集 数量&#xff1a;8…

SD3337C 恒流Boost DC/DC转换器的白色LED驱动器芯片IC

一般描述 SD3337C是一款升压型DC/DC转换器&#xff0c;具有恒定电流&#xff0c;可驱动白色LED或类似器件。该 器件可以从锂离子电池驱动多达八个串联的LED。LED电流由外部电阻器(RsET)设置&#xff0c;并由反馈(FB)电压(典型值:200mV)直接调节&#xff0c;该电压跨接在…

IntelliJ IDEA使用内网穿透工具配置的公网地址远程连接本地MySQL

文章目录 前言1. 本地连接测试2. Windows安装Cpolar3. 配置Mysql公网地址4. IDEA远程连接Mysql5. 固定连接公网地址6. 固定地址连接测试 前言 本教程主要介绍如何使用Cpolar内网穿透工具实现在IDEA中也可以远程访问家里或者公司的数据库&#xff0c;提高开发效率&#xff01;无…