简化登录流程,助力应用建立用户体系

随着智能手机和移动应用的普及,用户需要在不同的应用中注册和登录账号,传统的账号注册和登录流程需要用户输入用户名和密码,这不仅繁琐而且容易造成用户流失。

华为账号服务(Account Kit)提供简单、快速、安全的登录功能,让用户快捷地使用华为账号登录应用。用户授权后,华为账号可提供头像、昵称、手机号码等信息,帮助应用更了解用户。其中一键登录功能是基于OAuth 2.0协议标准和OpenID Connect协议标准构建的OAuth2.0 授权登录系统,应用可以通过华为账号一键登录能力方便地获取华为账号用户的身份标识和手机号,快速建立应用内的用户体系。

一键登录技术通过简化登录流程,用户无需记住额外的用户名和密码,只需点击一下按钮即可快速登录,省去了填写注册表单和登录表单的繁琐步骤,提升了用户体验,降低了用户因忘记密码而不能访问应用的几率,减少了用户的流失率。

对于开发者和运营者来说,一键登录技术不仅能够简化用户管理和支持流程,还能减少因账号管理带来的运营成本和风险。通过集成一键登录,开发者可以专注于应用的核心功能开发,提升开发效率和用户体验。

能力优势

应用可以通过华为账号一键登录功能获取手机号授权并完成登录,帮助应用建立用户体系或者打通原有的用户体系。

便捷性:一键完成登录和手机号授权,为用户提供更加便捷易用的登录体验。

效率高:无需单独集成SDK,减少开发者开发和运营成本。

登录组件

账号服务提供了登录按钮、登录面板两种一键登录组件,可满足应用不同的界面风格。

华为账号一键登录按钮:应用可以将华为账号一键登录按钮嵌入自有的登录页,满足应用对界面风格一致性和灵活性的要求。

华为账号一键登录面板:应用可以直接调用华为账号一键登录面板,无需自行开发登录页,简化开发步骤。

【华为账号一键登录】按钮

用户体验设计

登录页面UX规范设计

【华为账号一键登录】面板

用户体验设计

登录页面UX规范设计

开发步骤

客户端开发

1.导入authentication模块及相关公共模块。

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

2.调用authentication模块的AuthorizationWithHuaweiIDRequest请求获取华为账号用户的UnionID、OpenID、匿名手机号。匿名手机号用于登录页面展示。

getQuickLoginAnonymousPhone() {// 创建授权请求,并设置参数。let authRequest = new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();// 获取手机号需传quickLoginAnonymousPhone这个scope,传参之前需要先申请"华为账号一键登录"权限,后续才能获取手机号数据;// 获取UnionID、OpenID需传openid这个scope,这个scope不需要申请权限。authRequest.scopes = ['quickLoginAnonymousPhone','openid'];// 用于防跨站点请求伪造。authRequest.state = util.generateRandomUUID();// 一键登录场景该参数只能设置为false。authRequest.forceAuthorization = false;let controller = new authentication.AuthenticationController();try {controller.executeRequest(authRequest).then((response: authentication.AuthorizationWithHuaweiIDResponse) => {// 获取到UnionID、OpenID、匿名手机号let unionID = response.data?.unionID;let openID = response.data?.openID;let anonymousPhone = response.data?.extraInfo?.quickLoginAnonymousPhone;if (anonymousPhone) {hilog.info(0x0000, 'testTag', 'Succeeded in authentication');return;}hilog.info(0x0000, 'testTag', 'Succeeded in authentication. AnonymousPhone is empty');// 未获取到匿名手机号需要跳转到应用自定义的登录页面。}).catch((error: BusinessError) => {this.dealAllError(error);})} catch (error) {this.dealAllError(error);}
}// 错误处理
dealAllError(error: BusinessError): void {hilog.error(0x0000, 'testTag', 'Failed to auth, errorCode=%{public}d, errorMsg=%{public}s', error.code, error.message);// 应用需要展示其他登录方式。
}

3.将获取到的匿名手机号设置给下面示例代码中的quickLoginAnonymousPhone变量,调用LoginWithHuaweiIDButton组件,实现应用自己的登录页面,并展示华为账号一键登录按钮和华为账号用户认证协议(Account Kit提供跳转链接,应用需实现协议跳转,参见使用与约束第2点),用户同意协议、点击一键登录按钮后,可获取到Authorization Code,将该值传给应用服务器用于获取用户信息(完整手机号、UnionID)。

import { loginComponentManager, LoginWithHuaweiIDButton } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';@Entry
@Component
struct PreviewLoginButtonPage {// 设置步骤二中获取到的匿名手机号。quickLoginAnonymousPhone: string = '';// 展示应用的用户服务协议、隐私协议和华为账号用户认证协议。// 华为账号用户认证协议跳转链接:https://privacy.consumer.huawei.com/legal/id/authentication-terms.htm?code=CN&language=zh-CNprivacyText: loginComponentManager.PrivacyText[] = [{text: '已阅读并同意',type: loginComponentManager.TextType.PLAIN_TEXT}, {text: '《用户服务协议》 ',tag: '用户服务协议',type: loginComponentManager.TextType.RICH_TEXT}, {text: '《隐私协议》',tag: '隐私协议',type: loginComponentManager.TextType.RICH_TEXT}, {text: '和',type: loginComponentManager.TextType.PLAIN_TEXT}, {text: '《华为账号用户认证协议》',tag: '华为账号用户认证协议',type: loginComponentManager.TextType.RICH_TEXT}];// 构造LoginWithHuaweiIDButton组件的控制器。controller: loginComponentManager.LoginWithHuaweiIDButtonController =new loginComponentManager.LoginWithHuaweiIDButtonController()/*** 当应用使用自定义的登录页时,如果用户未同意协议,需要设置协议状态为NOT_ACCEPTED,当用户同意协议后再设置* 协议状态为ACCEPTED,才可以使用华为账号一键登录功能。*/.setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED).onClickLoginWithHuaweiIDButton((error: BusinessError, response: loginComponentManager.HuaweiIDCredential) => {if (error) {this.dealAllError(error);return;}if (response) {// 获取到Authorization Codelet authorizationCode = response.authorizationCode;hilog.info(0x0000, 'testTag', 'response: %{public}s', JSON.stringify(response));return;}});// 错误处理dealAllError(error: BusinessError): void {hilog.error(0x0000, 'testTag', 'Failed to login, errorCode=%{public}d, errorMsg=%{public}s', error.code, error.message);}build() {Scroll() {Column() {Column() {Column() {Image($r('app.media.app_icon')).width(48).height(48).draggable(false).copyOption(CopyOptions.None).onComplete(() => {hilog.info(0x0000, 'testTag', 'appIcon loading success');}).onError(() => {hilog.error(0x0000, 'testTag', 'appIcon loading fail');})Text($r('app.string.app_name')).fontFamily($r('sys.string.ohos_id_text_font_family_medium')).fontWeight(FontWeight.Medium).fontWeight(FontWeight.Bold).maxFontSize($r('sys.float.ohos_id_text_size_headline8')).minFontSize($r('sys.float.ohos_id_text_size_body1')).maxLines(1).fontColor($r('sys.color.ohos_id_color_text_primary')).constraintSize({ maxWidth: '100%' }).margin({top: 12,})Text('应用描述').fontSize($r('sys.float.ohos_id_text_size_body2')).fontColor($r('sys.color.ohos_id_color_text_secondary')).fontFamily($r('sys.string.ohos_id_text_font_family_regular')).fontWeight(FontWeight.Regular).constraintSize({ maxWidth: '100%' }).margin({top: 8,})}.margin({top: 100})Column() {Text(this.quickLoginAnonymousPhone).fontSize(36).fontColor($r('sys.color.ohos_id_color_text_primary')).fontFamily($r('sys.string.ohos_id_text_font_family_medium')).fontWeight(FontWeight.Bold).lineHeight(48).textAlign(TextAlign.Center).maxLines(1).constraintSize({ maxWidth: '100%', minHeight: 48 })Text('华为账号绑定号码').fontSize($r('sys.float.ohos_id_text_size_body2')).fontColor($r('sys.color.ohos_id_color_text_secondary')).fontFamily($r('sys.string.ohos_id_text_font_family_regular')).fontWeight(FontWeight.Regular).lineHeight(19).textAlign(TextAlign.Center).maxLines(1).constraintSize({ maxWidth: '100%' }).margin({top: 8})}.margin({top: 64})Column() {LoginWithHuaweiIDButton({params: {// LoginWithHuaweiIDButton支持的样式。style: loginComponentManager.Style.BUTTON_RED,// LoginWithHuaweiIDButton的边框圆角半径。borderRadius: 24,// LoginWithHuaweiIDButton支持的登录类型。loginType: loginComponentManager.LoginType.QUICK_LOGIN,// LoginWithHuaweiIDButton支持按钮的样式跟随系统深浅色模式切换。supportDarkMode: true},controller: this.controller})}.height(40).width('100%').margin({top: 56})Column() {Button({type: ButtonType.Capsule,stateEffect: true}) {Text('其他方式登录').fontColor($r('sys.color.ohos_id_color_text_primary_activated')).fontFamily($r('sys.string.ohos_id_text_font_family_medium')).fontWeight(FontWeight.Medium).fontSize($r('sys.float.ohos_id_text_size_button1')).focusable(true).focusOnTouch(true).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1).padding({ left: 8, right: 8 })}.fontColor($r('sys.color.ohos_id_color_text_primary_activated')).fontFamily($r('sys.string.ohos_id_text_font_family_medium')).fontWeight(FontWeight.Medium).backgroundColor($r('sys.color.ohos_id_color_button_normal')).focusable(true).focusOnTouch(true).constraintSize({ minHeight: 40 }).width('100%').onClick(() => {hilog.info(0x0000, 'testTag', 'click optionalLoginButton');})}.margin({ top: 16 })}Row() {Row() {Checkbox({ name: 'privacyCheckbox', group: 'privacyCheckboxGroup' }).width(24).height(24).focusable(true).focusOnTouch(true).margin({ top: 0 }).onChange((value: boolean) => {if (value) {this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.ACCEPTED);} else {this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED);}hilog.info(0x0000, 'testTag', "agreementChecked " + value);})}Row() {Text() {ForEach(this.privacyText, (item: loginComponentManager.PrivacyText, index: number) => {if (item?.type == loginComponentManager.TextType.PLAIN_TEXT && item?.text) {Span(item?.text).fontColor($r('sys.color.ohos_id_color_text_secondary')).fontFamily($r('sys.string.ohos_id_text_font_family_regular')).fontWeight(FontWeight.Regular).fontSize($r('sys.float.ohos_id_text_size_body3'))} else if (item?.type == loginComponentManager.TextType.RICH_TEXT && item?.text) {Span(item?.text).fontColor($r('sys.color.ohos_id_color_text_primary_activated')).fontFamily($r('sys.string.ohos_id_text_font_family_medium')).fontWeight(FontWeight.Medium).fontSize($r('sys.float.ohos_id_text_size_body3')).focusable(true).focusOnTouch(true).onClick(() => {// 应用需要根据item.tag实现协议页面的跳转逻辑。hilog.info(0x0000, 'testTag', 'click privacy text tag:' + item.tag);})}})}.width('100%')}.margin({ left: 12 }).layoutWeight(1).constraintSize({ minHeight: 24 })}.alignItems(VerticalAlign.Top).margin({bottom: 16})}.justifyContent(FlexAlign.SpaceBetween).constraintSize({ minHeight: '100%' }).margin({left: 16,right: 16})}.width('100%').height('100%')}
}
服务端开发

1.应用服务器使用Client ID、Client Secret、Authorization Code调用获取凭证Access Token的接口向华为账号服务器请求获取Access Token、Refresh Token。

2.使用Access Token调用获取用户信息接口获取用户信息,从用户信息中获取用户绑定的完整手机号和华为账号用户标识UnionID。

3.应用通过获取到的完整手机号或UnionID查询该用户是否已登录应用。如已登录,则绑定获取的UnionID或手机号到已有用户上(如已绑定,则可忽略),完成用户登录;如未登录,则创建新用户并绑定手机号与UnionID到该用户上。

了解更多详情>>

访问华为账号服务联盟官网

获取华为账号一键登录服务开发指导文档

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

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

相关文章

一文5000字从0到1使用Jmeter实现轻量级的接口自动化测试

接口测试虽然作为版本的一环,但是也是有一套完整的体系,有接口的功能测试、性能测试、安全测试;同时,由于接口的特性,接口的自动化低成本高收益的,使用一些开源工具或一些轻量级的方法,在测试用…

怎么解决小程序的异步请求问题

解决小程序的异步请求问题通常涉及对异步操作的有效管理,以确保数据的正确加载和显示。在小程序中,最常见的异步操作包括网络请求、文件操作等。以下是一些解决小程序异步请求问题的方法: 使用Promise: 小程序中的wx.request接口…

【Kotlin设计模式】Kotlin实现工厂模式

前言 工厂模式(Factory Pattern)是一种创建型设计模式,提供一个创建对象的接口,不暴露对象的创建过程。它将实例化对象的任务交给子类或具体实现,从而使得客户端代码与具体类解耦。 工厂模式主要分为以下三类&#xf…

图像处理之:Video Processing Subsystem(一)

免责声明: 本文所提供的信息和内容仅供参考。作者对本文内容的准确性、完整性、及时性或适用性不作任何明示或暗示的保证。在任何情况下,作者不对因使用本文内容而导致的任何直接或间接损失承担责任,包括但不限于数据丢失、业务中断或其他经济…

ucharts图表滚动

背景&#xff1a; 使用ucharts绘制折线图&#xff0c;当数据项多的时候&#xff0c;横坐标显示的文字会重合&#xff0c;故想到滑动 项目代码使用的是原生的代码&#xff0c;而非ucharts的组件&#xff1a; <template><view><canvas canvas-id"chartsLi…

各类软件历史版本的下载地址

postman,notpad等 https://www.filehorse.com/software-developer-tools/https://www.filehorse.com/software-developer-tools/

pdf查看密码

pdf有两种密码方式&#xff0c;一种是打开后进入文件内容页面后需要密码才能进行修改等操作&#xff0c;网上有很多方式进行移除密码操作&#xff0c;第二种是打开就需要密码&#xff0c;我这里简单记录一个暴力破解的方式&#xff0c;仅供参考 import PyPDF2 import itertools…

FreeRTOS学习:内存管理

FreeRTOS内存管理简介 在使用 FreeRTOS 创建任务、队列、信号量等对象的时候&#xff0c; FreeRTOS 一般都提供了两种方法&#xff0c; 动态方法创建&#xff1a;自动地从 FreeRTOS 管理的内存堆中申请所创建对象所需的内存&#xff0c;在对象被删除后&#xff0c;又可以将这…

day33(mysql57主从从+mycat读写分离+java项目结合mycat数据库+lvs_dr轮询调用java项目)

1.设置主从从mysql57服务器 &#xff08;1&#xff09;配置主数据库 [rootmsater_5 ~]# systemctl stop [rootmsater_5 ~]# setenforce 0 [rootmsater_5 ~]# systemctl disable Removed symlink /etc/systemd/system/multi-user.target.wants/# ls anaconda-ks.cfg mysql-5.7…

C语言家教记录(七)

C语言家教记录&#xff08;七&#xff09; 导语字符串字面量变量读写字符串操作函数惯用法数组 结构联合枚举总结与复习 导语 本次授课的内容如下&#xff1a;字符串&#xff0c;结构体、联合体、枚举 辅助教材为 《C语言程序设计现代方法&#xff08;第2版&#xff09;》 字…

二刷代码随想录训练营Day 38|322. 零钱兑换、279.完全平方数、139.单词拆分

1.零钱兑换 视频讲解&#xff1a;动态规划之完全背包&#xff0c;装满背包最少的物品件数是多少&#xff1f;| LeetCode&#xff1a;322.零钱兑换_哔哩哔哩_bilibili 代码随想录 代码&#xff1a; class Solution { public:int coinChange(vector<int>& coins, int …

VA水封特点及优势

水封是工业应用中至关重要的组件&#xff0c;起到防止液体泄漏并确保机械设备顺利运行的作用。在众多类型的水封中&#xff0c;VA水封因其独特的特性而广受欢迎。那么&#xff0c;VA水封究竟有哪些特点使其在特定场景中特别有效呢?本文将从设计、材料构成和性能优势等多个角度…

每天一个数据分析题(四百九十七)- 序列模式挖掘

序列模式挖掘 (sequence pattern mining &#xff09;是指挖掘相对时间或其他模式出现频率高的模式&#xff0c;典型的应用还是限于离散型的序列。下列哪个选项不属于序列模式的时限约束&#xff1f; A. 最大跨度约束 B. 主键约束 C. 最小间隔和最大间隔约束 D. 窗口大小约…

Qt实现圆型控件的三种方法之设置样式表

前言 最近在研究绘制各种形状的控件&#xff0c;这里专门挑出圆形的控件进行记录&#xff0c;其它形状的也大差不差&#xff0c;会了圆形的之后其它的也类似。 正文 这里我挑出Label来进行举例。 通过设置样式表 (QSS) 这种方法简单且适用于不需要自定义绘制的场景。就是要…

【OpenFeign】OpenFeign指定url方式调用

OpenFeign一般是结合注册中心一起使用的&#xff0c;也就是可以通过提供服务的名称而不是url来完成对目标服务的访问。但是出于本地调试的需要&#xff0c;或者考虑到一些简单的服务可能并不需要依赖注册中心&#xff0c;所以本篇我们就讲解一下OpenFeign直接通过目标服务的url…

vue2项目 预渲染 Unable to prerender all routes 错误排查与解决方案

前言 今天在做我的Vue2项目的SEO优化时&#xff0c;我采用了prerender-spa-plugin与vue-meta-info的一套官网前端SEO预渲染方案。 但是&#xff0c;在打包时&#xff0c;报错Unable to prerender all routes。尝试了很多种网上方案&#xff0c;都没有成功&#xff0c;最后从源…

基于vue3和audio封装的简易音频播放器

样式如图所示 <template><div class"audio-player"><div class"player_top" flex-ac flex-justify-between ><div class"fileName genericTitle" fs-28 l-height-32 height-64 pr-42 flex-ac><span class"t…

维护和升级LabVIEW程序

在维护和升级LabVIEW程序时&#xff0c;需要全面考虑代码的现状和未来的需求。以下是各个方面的详细注意事项&#xff0c;以确保程序能够在稳定性和性能方面得到提升。 1. 理解现有代码: 深入代码分析: 仔细阅读现有的代码&#xff0c;了解其逻辑结构、数据流、和控制流程。关注…

中国大模型平台市场份额最新排名Top5!场景化应用昭示新蓝海

8月21日&#xff0c;IDC&#xff08;国际数据公司&#xff09;首次发布了《中国大模型平台市场份额&#xff0c;2023&#xff1a;大模型元年 —— 初局》。数据显示&#xff0c;2023年中国大模型平台及相关应用市场规模达17.65亿元人民币。 在过去的2023年&#xff0c;行业对于…

Linux用户账户管理精髓:创建、删除、密码与会话管理全攻略

目录 一、创建与删除用户 二、设置与修改密码 三、用户切换与会话管理 在Linux系统中&#xff0c;用户账户管理是系统管理员日常工作中不可或缺的一部分。良好的用户账户管理不仅有助于维护系统的安全性&#xff0c;还能提高系统的可用性和可管理性。以下将详细介绍创建与删…