鸿蒙NEXT实践（一）：华为账号一键登录实现

今天开始我们就正式开始鸿蒙next的代码开辟啦，掌门人会带着大家一步步体验各种功能的实现，而且会在最后带着大家实现一个完整的项目，当然了，肯定不会是烂大街的那种商城啊、TOList啥的，大家可以放心。
  在鸿蒙开辟中，实现华为账号一键登录可以为用户提供更加便捷的登录方式。掌门人将会通过本文详细先容如安在鸿蒙应用中实现华为账号一键登录功能。
  好了，废话不多说，我们直接进入正题。
DevEco Studio下载/安装以及创建项目

下载

请前往下载中央获取并下载DevEco Studio。
   为保证DevEco Studio正常运行，发起电脑设置满意如下要求：
  Windows运行情况要求

• 操纵系统：Windows10 64位、Windows11 64位
  
• 内存：16GB及以上
  
• 硬盘：100GB及以上
  
• 分辨率：1280*800像素及以上
  

Mac运行情况要求

• 作系统：macOS(X86) 11/12/13/14 macOS(ARM) 12/13/14
  
• 内存：8GB及以上
  
• 硬盘：100GB及以上
  
• 分辨率：1280*800像素及以上
  

Windows安装

下载完成后，双击下载的“deveco-studio-xxxx.exe”，进入DevEco Studio安装向导，可以自行修改安装目次，一直点击下一步即可。

mac安装

在安装界面中，将“DevEco-Studio.app”拖拽到“Applications”中，等待安装完成。

   

• DevEco Studio提供开箱即用的开辟体验，将HarmonyOS SDK、Node.js、Hvigor、OHPM、模拟器平台等举行合一打包，简化DevEco Studio安装设置流程。
  
• HarmonyOS SDK已嵌入DevEco Studio中，无需额外下载设置
  

  创建项目

• 打开DevEco Studio，在接待页单击Create Project，创建一个新工程。
  
• 根据工程创建向导，选择创建Application或Atomic Service。选择Empty Ability模板，然后单击Next。关于工程模板的先容和支持的设备类型，请参考工程模板先容。
  
  
  
  
• 填写工程相干信息，单击Finish。关于各个参数的详细先容，请参考创建一个新的工程。
  
  
  
  

运行Hello World

• 将搭载HarmonyOS系统的真机与电脑连接。详细指导及要求，可查看运行应用/服务。
  
• 点击File > Project Structure… > Project > SigningConfigs界面勾选“Support HarmonyOS”和“Automatically generate signature”，点击界面提示的“Sign In”，使用华为账号登录。等待自动署名完成后，点击“OK”即可。如下图所示：
  
  
  
  
• 在编辑窗口右上角的工具栏，点击运行按钮运行项目。效果如下图所示：
  
  
  
  

至此一个鸿蒙next应用就创建完毕了，接下来我们来实现华为账号相干的。
开辟预备

我们需要设置以下两个东西：
设置Client ID

• 登录AppGallery Connect平台，在“我的项目”中选择目标应用，在“项目设置 > 通例 > 应用”区域获取“OAuth 2.0客户端ID（凭据）”处的Client ID。
  
  
  
  
• 在工程中entry模块的module.json5文件中，新增metadata，设置name为client_id，value为上一步获取的Client ID的值，如下所示：
  
  
  
  

设置scope权限

详细设置步调大家可以移步官网查看设置scope权限
关于UI，华为账号服务需要遵循华为登录UX筹划规范。

一、导入所需模块

起首，在代码的开头，我们需要导入一系列的模块，这些模块将为实现华为账号一键登录提供必要的功能支持。

1. import { loginComponentManager, LoginWithHuaweiIDButton, authentication } from '@kit.AccountKit';
2. import { hilog } from '@kit.PerformanceAnalysisKit';
3. import { BusinessError } from '@kit.BasicServicesKit';
4. import { promptAction, router } from '@kit.ArkUI';
5. import { connection } from '@kit.NetworkKit';
6. import { util } from '@kit.ArkTS';

复制代码

二、界说组件布局

接下来，界说一个名为QuickLoginButtonComponent的组件布局。这个组件将包罗实现华为账号一键登录所需的各种属性和方法。

1. @Component
2. export struct QuickLoginButtonComponent {
3.   logTag: string = 'QuickLoginButtonComponent';
4.   domainId: number = 0x0000;
5.   // 第二步获取的匿名化手机号传到此处
6.   @State quickLoginAnonymousPhone: string = this.getQuickLoginAnonymousPhone() || '';
7.   // 是否勾选协议
8.   @State isSelected: boolean = false;
9.   // 华为账号用户认证协议链接，此处仅为示例，实际开发过程中，域名不建议硬编码在本地
10.   private static USER_AUTHENTICATION_PROTOCOL: string =
11.     'https://privacy.consumer.huawei.com/legal/id/authentication-terms.htm?code=CN&language=zh-CN';
12.   private static USER_SERVICE_TAG = '用户服务协议';
13.   private static PRIVACY_TAG = '隐私协议';
14.   private static USER_AUTHENTICATION_TAG = '华为账号用户认证协议';
15.   // 定义LoginWithHuaweiIDButton展示的隐私文本，展示应用的用户服务协议、隐私协议和华为账号用户认证协议
16.   privacyText: loginComponentManager.PrivacyText[] = [{
17.     text: '已阅读并同意',
18.     type: loginComponentManager.TextType.PLAIN_TEXT
19.   }, {
20.     text: '《用户服务协议》',
21.     tag: QuickLoginButtonComponent.USER_SERVICE_TAG,
22.     type: loginComponentManager.TextType.RICH_TEXT
23.   }, {
24.     text: '《隐私协议》',
25.     tag: QuickLoginButtonComponent.PRIVACY_TAG,
26.     type: loginComponentManager.TextType.RICH_TEXT
27.   }, {
28.     text: '和',
29.     type: loginComponentManager.TextType.PLAIN_TEXT
30.   }, {
31.     text: '《华为账号用户认证协议》',
32.     tag: QuickLoginButtonComponent.USER_AUTHENTICATION_TAG,
33.     type: loginComponentManager.TextType.RICH_TEXT
34.   }, {
35.     text: '。',
36.     type: loginComponentManager.TextType.PLAIN_TEXT
37.   }];
38.   //... 其他方法和属性的定义
39. }

复制代码

三、获取匿名手机号的方法

在组件中，界说了一个名为getQuickLoginAnonymousPhone的方法，用于获取匿名手机号。这个方法通过创建授权哀求，并设置相应的参数，包罗哀求的范围scopes等。如果成功获取到匿名手机号，则返回该手机号；如果未获取到，则返回空字符串，并可能需要跳转到应用自界说的登录页面。

1. getQuickLoginAnonymousPhone():string {
2.   // 创建授权请求，并设置参数
3.   const authRequest = new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();
4.   // 获取匿名手机号需传quickLoginAnonymousPhone这个scope，传参之前需要先申请“华为账号一键登录”权限
5.   //(权限名称为：quickLoginMobilePhone),后续才能获取匿名手机号数据
6.   authRequest.scopes = ['quickLoginAnonymousPhone'];
7.   // 用于防跨站点请求伪造
8.   authRequest.state = util.generateRandomUUID();
9.   // 一键登录场景该参数只能设置为false
10.   authRequest.forceAuthorization = false;
11.   const controller = new authentication.AuthenticationController();
12.   try {
13.     controller.executeRequest(authRequest).then((response: authentication.AuthorizationWithHuaweiIDResponse) => {
14.       // 获取到UnionID、OpenID、匿名手机号
15.       const unionID = response.data?.unionID;
16.       const openID = response.data?.openID;
17.       const anonymousPhone = response.data?.extraInfo?.quickLoginAnonymousPhone as string;
18.       if (anonymousPhone) {
19.         hilog.info(0x0000, 'testTag', 'Succeeded in authentication.');
20.         return anonymousPhone;
21.       }
22.       hilog.info(0x0000, 'testTag', 'Succeeded in authentication. AnonymousPhone is empty.');
23.       return response;
24.       // 未获取到匿名手机号需要跳转到应用自定义的登录页面
25.     }).catch((error: BusinessError) => {
26.       this.dealAllError(error);
27.       return '';
28.     })
29.   } catch (error) {
30.     hilog.error(0x0000, 'testTag',
31.       `Failed to login, errorCode is ${error.code}, errorMessage is ${error.message}`);
32.     return '';
33.   }
34.   return '';
35. }

复制代码

四、构造登录按钮控制器

通过构造LoginWithHuaweiIDButtonController来控制华为账号一键登录按钮的举动。可以设置协议状态、处置处罚登录按钮的点击变乱等。

1. controller: loginComponentManager.LoginWithHuaweiIDButtonController =
2.   new loginComponentManager.LoginWithHuaweiIDButtonController()
3.     /**
4.      * 当应用使用自定义的登录页时，如果用户未同意协议，需要设置协议状态为NOT_ACCEPTED，当用户同意协议后再设置
5.      * 协议状态为ACCEPTED，才可以使用华为账号一键登录功能
6.      */
7.    .setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED)
8.    .onClickLoginWithHuaweiIDButton((error: BusinessError | undefined,
9.       response: loginComponentManager.HuaweiIDCredential) => {
10.       this.handleLoginWithHuaweiIDButton(error, response);
11.     })
12.    .onClickEvent((error: BusinessError, clickEvent: loginComponentManager.ClickEvent) => {
13.       if (error) {
14.         this.dealAllError(error);
15.         return;
16.       }
17.       hilog.info(this.domainId, this.logTag, `onClickEvent clickEvent: ${clickEvent}`);
18.     });

复制代码

五、协议对话框

界说一个协议对话框agreementDialog，用于展示用户服务协议、隐私协媾和华为账号用户认证协议。用户可以在这个对话框中选择同意或取消协议。

1. agreementDialog: CustomDialogController = new CustomDialogController({
2.   builder: AgreementDialog({
3.     privacyText: this.privacyText,
4.     cancel: () => {
5.       this.agreementDialog.close();
6.       this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED);
7.     },
8.     confirm: () => {
9.       this.agreementDialog.close();
10.       this.isSelected = true;
11.       this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.ACCEPTED);
12.       // 调用此方法，同意协议与登录一并完成，无需再次点击登录按钮
13.       this.controller.continueLogin((error: BusinessError) => {
14.         if (error) {
15.           hilog.error(this.domainId, this.logTag,
16.             `Failed to click agreementDialog continueLogin. errCode is ${error.code}, errMessage is ${error.message}`);
17.         } else {
18.           hilog.info(this.domainId, this.logTag,
19.             'Succeeded in clicking agreementDialog continueLogin.');
20.         }
21.       });
22.     },
23.     clickHyperlinkText: () => {
24.       this.agreementDialog.close();
25.       this.jumpToPrivacyWebView();
26.     }
27.   }),
28.   autoCancel: false,
29.   alignment: DialogAlignment.Center,
30. });

复制代码

六、页面渲染和其他方法

• aboutToAppear方法在页面即将表现时被调用，可以用于传递页面渲染所需的数据。
  
• showToast方法用于表现 Toast 提示信息。
  
• jumpToPrivacyWebView方法用于跳转华为账号用户认证协议页，需要在工程的main_pages.json文件中举行设置，并确保相应的权限已经申请。
  
• handleLoginWithHuaweiIDButton方法处置处罚华为账号一键登录按钮的点击变乱，根据差别的错误情况举行相应的提示。
  
• dealAllError方法用于处置处罚所有的错误情况。
  

七、界说协议对话框布局

1. @CustomDialog
2. export struct AgreementDialog {
3.   logTag: string = 'AgreementDialog';
4.   domainId: number = 0x0000;
5.   dialogController?: CustomDialogController;
6.   cancel: () => void = () => {
7.   };
8.   confirm: () => void = () => {
9.   };
10.   clickHyperlinkText: () => void = () => {
11.   };
12.   privacyText: loginComponentManager.PrivacyText[] = [];
13.   private static USER_AUTHENTICATION_TAG = '华为账号用户认证协议';
14.   //... 构建方法的定义
15. }

复制代码

八、界说错误码枚举

1. export enum ErrorCode {
2.   // 账号未登录
3.   ERROR_CODE_LOGIN_OUT = 1001502001,
4.   // 该账号不支持一键登录，如儿童账号、海外账号
5.   ERROR_CODE_NOT_SUPPORTED = 1001500003,
6.   // 网络错误
7.   ERROR_CODE_NETWORK_ERROR = 1001502005,
8.   // 用户未同意用户协议
9.   ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED = 1005300001
10. }

复制代码

通过以上步调，我们可以在鸿蒙应用中实现华为账号一键登录功能。在现实开辟过程中，需要根据详细的业务需求和用户体验举行得当的调整和优化。同时，确保在开辟过程中遵循鸿蒙开辟的最佳实践和安全规范，以提供稳定、安全、便捷的用户登录体验。
实现效果

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。