海口企业网站建设制作哪家专业,企业网站设计中应注意产品发布功能优化,注册100万的公司一年缴纳多少税,找项目网站随着智能手机和移动应用的普及#xff0c;用户需要在不同的应用中注册和登录账号#xff0c;传统的账号注册和登录流程需要用户输入用户名和密码#xff0c;这不仅繁琐而且容易造成用户流失。 华为账号服务(Account Kit)提供简单、快速、安全的登录功能#xff0c;让用户快… 随着智能手机和移动应用的普及用户需要在不同的应用中注册和登录账号传统的账号注册和登录流程需要用户输入用户名和密码这不仅繁琐而且容易造成用户流失。 华为账号服务(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; 1.2.3.4. 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);// 应用需要展示其他登录方式。
} 1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36. 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?codeCNlanguagezh-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.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50.51.52.53.54.55.56.57.58.59.60.61.62.63.64.65.66.67.68.69.70.71.72.73.74.75.76.77.78.79.80.81.82.83.84.85.86.87.88.89.90.91.92.93.94.95.96.97.98.99.100.101.102.103.104.105.106.107.108.109.110.111.112.113.114.115.116.117.118.119.120.121.122.123.124.125.126.127.128.129.130.131.132.133.134.135.136.137.138.139.140.141.142.143.144.145.146.147.148.149.150.151.152.153.154.155.156.157.158.159.160.161.162.163.164.165.166.167.168.169.170.171.172.173.174.175.176.177.178.179.180.181.182.183.184.185.186.187.188.189.190.191.192.193.194.195.196.197.198.199.200.201.202.203.204.205.206.207.208.209.210.211.212.213.214.215.216.217.218.219.220.221.222.223.224.225.226.227.228.229.230.231.232.233.234.235.236.237.238.239.240.241. 服务端开发 1.应用服务器使用Client ID、Client Secret、Authorization Code调用 获取凭证Access Token的接口向华为账号服务器请求获取Access Token、Refresh Token。 2.使用Access Token调用 获取用户信息接口获取用户信息从用户信息中获取用户绑定的完整手机号和华为账号用户标识UnionID。 3.应用通过获取到的完整手机号或UnionID查询该用户是否已登录应用。如已登录则绑定获取的UnionID或手机号到已有用户上(如已绑定则可忽略)完成用户登录如未登录则创建新用户并绑定手机号与UnionID到该用户上。 了解更多详情\\ 访问 华为账号服务联盟官网 获取 华为账号一键登录服务开发指导文档
