华为HarmonyOS 让应用快速拥有账号能力 -- 1 华为账号一键登录

admin 管理员组

文章数量: 887016

概述

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

优势：

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

场景介绍

若应用需同时获取手机号和UnionID完成用户登录，可使用Account Kit提供的华为账号一键登录按钮同时获取手机号和UnionID。应用可以将华为账号一键登录按钮嵌入自有的登录页，使用登录按钮获取手机号和UnionID，实现用户登录。设备登录华为账号（该账号已绑定手机号）后，一键登录获取手机号可不依赖设备插SIM卡。华为账号一键登录详细接入体验可参考Account Kit提供的SampleCode示例工程。

说明

手机号验证机制说明：

Account Kit调用系统能力获取华为账号登录设备上的手机号码，与华为账号绑定的手机号进行校验（有网络即可，无需使用SIM卡移动数据）。用户点击一键登录按钮后，结合华为账号使用过程中的短信验证记录，90天内有验证通过的记录，则正常返回手机号；若90天内没有验证通过的记录，则触发Account Kit默认提供的短信验证流程（Account Kit提供的验证页，暂不可自定义），确保返回的手机号经过正确验证。

约束与限制

1、应用满足《常见类型移动互联网应用程序必要个人信息范围规定》中使用个人信息的必要业务场景。

2、使用华为账号一键登录功能用户必须同意《华为账号用户认证协议》，当用户点击《华为账号用户认证协议》，应用需跳转到如下链接。

3、应用在用户同意后获取到手机号，需要根据自身业务场景判断使用的方式，必要时增加其他安全验证手段，比如对二次放号的判断。

4、华为账号一键登录服务当前仅限中国大陆用户可用。

5、应用服务器获取华为账号绑定号码时，该服务器必须部署在中国大陆境内。

用户体验设计

图1

图2

登录页面UX设计规范

一键登录按钮的用户体验和UX设计需符合【华为账号一键登录】按钮规范，用户体验设计图2中的华为标志按钮可参考华为账号登录视觉规范中的样式三。不符合规范的UX设计可能会对应用上架和用户体验带来影响。一键登录按钮的样式设计具体可以参考华为账号登录按钮类型。

用户场景设计

用户使用华为账号一键登录能力，注册/登录应用时，可能存在多种场景，应用可参考如下流程，根据自身业务场景进行设计。

用户已经使用华为账号登录过该应用后，再次使用华为账号一键登录的场景体验（对应上述流程图中的“展示UnionID、OpenID已关联的应用账号，由用户选择是否使用华为账号登录该应用”）。以下示例图可供参考。

图3 非首次登录一键登录示例图

说明

将UnionID/OpenID和手机号同时与应用账号建立关联，可以为用户带来更多便利的功能。如：实现静默登录、获取华为账号用户信息等。

实现免用户操作登录，获得安全快捷地应用登录体验。

业务流程

流程说明：

1. 用户打开应用后，应用传对应的scope调用AuthorizationWithHuaweiIDRequest请求获取AuthorizationWithHuaweiIDResponse响应结果。
2. 通过响应结果判断系统华为账号是否已登录，如未登录，则应用需要展示其他登录方式；如已登录，则从响应结果中解析出UnionID、OpenID和匿名手机号。
3. 应用查询UnionID、OpenID是否已关联用户。如已关联，结合风控、安全因素及自身业务场景判断，可展示已关联的账号，由用户选择是否使用华为账号登录应用，或免用户操作，静默登录应用；如未关联，则参考下面步骤继续开发。
4. 判断匿名手机号是否为空，如为空，则应用需要展示其他登录方式；不为空，则设置相关参数调用LoginWithHuaweiIDButton组件拉起一键登录页面。
5. 用户同意协议后，点击华为账号一键登录按钮，应用可以获取到Authorization Code等数据。
6. 将获取的Authorization Code数据传给应用服务器，应用服务器通过调用获取用户级凭证接口和获取用户信息接口获取用户完整手机号和UnionID、OpenID。
7. 应用通过用户手机号和UnionID、OpenID完成用户关联。

接口说明

华为账号一键登录按钮关键接口如下表所示，具体API说明详见API参考。

注意

上述接口需在页面或自定义组件生命周期内调用。

开发前提

1. 在进行代码开发前，请先确认已完成开发准备工作。
2. 应用使用华为账号一键登录功能之前，需要完成quickLoginMobilePhone（华为账号一键登录）的scope权限申请，详情参见配置scope权限。scope权限申请审批未完成或未通过，将报错1001502014 应用未申请scopes或permissions权限。

   细分场景	对应scope	权限名称	权限描述	权限是否需要申请
   华为账号一键登录	quickLoginAnonymousPhone	quickLoginMobilePhone	华为账号一键登录，包含获取完整手机号	是

客户端开发

自行开发

1. 导入Account Kit的authentication模块及相关公共模块。
   1. import { authentication } from '@kit.AccountKit';
   2. import { util } from '@kit.ArkTS';
   3. import { hilog } from '@kit.PerformanceAnalysisKit';
   4. import { BusinessError } from '@kit.BasicServicesKit';
2. 调用authentication模块的AuthorizationWithHuaweiIDRequest请求获取华为账号用户的UnionID、OpenID、匿名手机号。匿名手机号用于登录页面展示。

   注意

   该场景下forceAuthorization参数需设置为false。

   根据获取的响应结果判断，可能存在以下场景：
   • 已正确获取到用户身份标识UnionID、OpenID，应用可通过用户身份标识查询该用户是否已关联。

     1）如已关联，结合风控、安全因素及自身业务场景判断，可展示已关联的账号，由用户选择是否使用华为账号登录应用，或免用户操作，静默登录应用，客户端开发结束。

     2）如未关联，再判断是否存在下面的异常场景，如无，则参考下面步骤3继续开发。

   • 存在如下返回ArkTS错误码的异常场景：

     1）返回1001502001 用户未登录华为账号错误码，说明华为账号未登录。

     2）返回1001500003 不支持该scopes或permissions错误码，说明华为账号用户注册地非中国大陆。

     3）获取到的匿名手机号为空，说明华为账号没有绑定手机号、权限未申请或未生效、登录的华为账号是儿童账号。

     上述异常场景应用需要展示其他登录方式。
     1. getQuickLoginAnonymousPhone() {
     2. // 创建授权请求，并设置参数
     3. const authRequest = new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();
     4. // 获取匿名手机号需传quickLoginAnonymousPhone这个scope，传参之前需要先申请“华为账号一键登录”权限
     5. authRequest.scopes = ['quickLoginAnonymousPhone'];
     6. // 用于防跨站点请求伪造
     7. authRequest.state = util.generateRandomUUID();
     8. // 一键登录场景该参数只能设置为false
     9. authRequest.forceAuthorization = false;
     10. const controller = new authentication.AuthenticationController();
     11. try {
     12. controller.executeRequest(authRequest).then((response: authentication.AuthorizationWithHuaweiIDResponse) => {
     13. // 获取到UnionID、OpenID、匿名手机号
     14. const unionID = response.data?.unionID;
     15. const openID = response.data?.openID;
     16. const anonymousPhone = response.data?.extraInfo?.quickLoginAnonymousPhone as string;
     17. if (anonymousPhone) {
     18. hilog.info(0x0000, 'testTag', 'Succeeded in authentication.');
     19. const quickLoginAnonymousPhone: string = anonymousPhone;
     20. return;
     21. }
     22. hilog.info(0x0000, 'testTag', 'Succeeded in authentication. AnonymousPhone is empty.');
     23. // 未获取到匿名手机号需要跳转到应用自定义的登录页面
     24. }).catch((error: BusinessError) => {
     25. this.dealAllError(error);
     26. })
     27. } catch (error) {
     28. this.dealAllError(error);
     29. }
     30. }
     32. // 错误处理
     33. dealAllError(error: BusinessError): void {
     34. hilog.error(0x0000, 'testTag',
     35. `Failed to login, errorCode is ${error.code}, errorMessage is ${error.message}`);
     36. }
3. 将获取到的匿名手机号设置给下面QuickLoginButtonComponent组件示例代码中的quickLoginAnonymousPhone变量，调用LoginWithHuaweiIDButton组件，实现应用自己的登录页面，并展示华为账号一键登录按钮和华为账号用户认证协议（Account Kit提供跳转链接，应用需实现协议跳转，参见约束与限制第2点），用户同意协议并点击一键登录按钮后，可获取到Authorization Code，将该值传给应用服务器用于获取用户信息（完整手机号、UnionID、OpenID）。
   1. import { loginComponentManager, LoginWithHuaweiIDButton } 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';
   7. @Component
   8. struct QuickLoginButtonComponent {
   9. logTag: string = 'QuickLoginButtonComponent';
   10. domainId: number = 0x0000;
   11. // 第二步获取的匿名化手机号传到此处
   12. @State quickLoginAnonymousPhone: string = '';
   13. // 是否勾选协议
   14. @State isSelected: boolean = false;
   15. // 华为账号用户认证协议链接，此处仅为示例，实际开发过程中，域名不建议硬编码在本地
   16. private static USER_AUTHENTICATION_PROTOCOL: string =
   17. 'https://privacy.consumer.huawei/legal/id/authentication-terms.htm?code=CN&language=zh-CN';
   18. private static USER_SERVICE_TAG = '用户服务协议';
   19. private static PRIVACY_TAG = '隐私协议';
   20. private static USER_AUTHENTICATION_TAG = '华为账号用户认证协议';
   21. // 定义LoginWithHuaweiIDButton展示的隐私文本，展示应用的用户服务协议、隐私协议和华为账号用户认证协议
   22. privacyText: loginComponentManager.PrivacyText[] = [{
   23. text: '已阅读并同意',
   24. type: loginComponentManager.TextType.PLAIN_TEXT
   25. }, {
   26. text: '《用户服务协议》',
   27. tag: QuickLoginButtonComponent.USER_SERVICE_TAG,
   28. type: loginComponentManager.TextType.RICH_TEXT
   29. }, {
   30. text: '《隐私协议》',
   31. tag: QuickLoginButtonComponent.PRIVACY_TAG,
   32. type: loginComponentManager.TextType.RICH_TEXT
   33. }, {
   34. text: '和',
   35. type: loginComponentManager.TextType.PLAIN_TEXT
   36. }, {
   37. text: '《华为账号用户认证协议》',
   38. tag: QuickLoginButtonComponent.USER_AUTHENTICATION_TAG,
   39. type: loginComponentManager.TextType.RICH_TEXT
   40. }, {
   41. text: '。',
   42. type: loginComponentManager.TextType.PLAIN_TEXT
   43. }];
   44. // 构造LoginWithHuaweiIDButton组件的控制器
   45. controller: loginComponentManager.LoginWithHuaweiIDButtonController =
   46. new loginComponentManager.LoginWithHuaweiIDButtonController()
   47. /**
   48. * 当应用使用自定义的登录页时，如果用户未同意协议，需要设置协议状态为NOT_ACCEPTED，当用户同意协议后再设置
   49. * 协议状态为ACCEPTED，才可以使用华为账号一键登录功能
   50. */
   51. .setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED)
   52. .onClickLoginWithHuaweiIDButton((error: BusinessError | undefined,
   53. response: loginComponentManager.HuaweiIDCredential) => {
   54. this.handleLoginWithHuaweiIDButton(error, response);
   55. })
   56. .onClickEvent((error: BusinessError, clickEvent: loginComponentManager.ClickEvent) => {
   57. if (error) {
   58. this.dealAllError(error);
   59. return;
   60. }
   61. hilog.info(this.domainId, this.logTag, `onClickEvent clickEvent: ${clickEvent}`);
   62. });
   63. agreementDialog: CustomDialogController = new CustomDialogController({
   64. builder: AgreementDialog({
   65. privacyText: this.privacyText,
   66. cancel: () => {
   67. this.agreementDialog.close();
   68. this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED);
   69. },
   70. confirm: () => {
   71. this.agreementDialog.close();
   72. this.isSelected = true;
   73. this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.ACCEPTED);
   74. // 调用此方法，同意协议与登录一并完成，无需再次点击登录按钮
   75. this.controller.continueLogin((error: BusinessError) => {
   76. if (error) {
   77. hilog.error(this.domainId, this.logTag,
   78. `Failed to click agreementDialog continueLogin. errCode is ${error.code}, errMessage is ${error.message}`);
   79. } else {
   80. hilog.info(this.domainId, this.logTag,
   81. 'Succeeded in clicking agreementDialog continueLogin.');
   82. }
   83. });
   84. },
   85. clickHyperlinkText: () => {
   86. this.agreementDialog.close();
   87. this.jumpToPrivacyWebView();
   88. }
   89. }),
   90. autoCancel: false,
   91. alignment: DialogAlignment.Center,
   92. });
   94. // 传递页面渲染所需的数据，如匿名手机号等
   95. aboutToAppear(): void {
   96. }
   98. // Toast提示
   99. showToast(resource: string) {
   100. try {
   101. promptAction.showToast({
   102. message: resource,
   103. duration: 2000
   104. });
   105. } catch (error) {
   106. const message = (error as BusinessError).message
   107. const code = (error as BusinessError).code
   108. hilog.error(this.domainId, this.logTag, `showToast args errCode is ${code}, errMessage is ${message}`);
   109. }
   110. }
   112. // 跳转华为账号用户认证协议页,该页面需在工程main_pages.json文件配置
   113. jumpToPrivacyWebView() {
   114. try {
   115. // 需在module.json5中配置“ohos.permission.GET_NETWORK_INFO”权限
   116. const checkNetConn = connection.hasDefaultNetSync();
   117. if (!checkNetConn) {
   118. this.showToast('服务或网络异常，请稍后重试');
   119. return;
   120. }
   121. } catch (error) {
   122. const message = error.message as string;
   123. const code = error.code as string;
   124. hilog.error(0x0000, 'testTag', `Failed to hasDefaultNetSync, errCode is ${code}, errMessage is ${message}`);
   125. }
   126. router.pushUrl({
   127. // 需在module.json5配置“ohos.permission.INTERNET”网络权限
   128. url: 'pages/WebPage',
   129. params: {
   130. isFromDialog: true,
   131. url: QuickLoginButtonComponent.USER_AUTHENTICATION_PROTOCOL,
   132. }
   133. }, (err) => {
   134. if (err) {
   135. hilog.error(this.domainId, this.logTag,
   136. `Failed to jumpToPrivacyWebView, errCode is ${err.code}, errMessage is ${err.message}`);
   137. }
   138. });
   139. }
   141. handleLoginWithHuaweiIDButton(error: BusinessError | undefined,
   142. response: loginComponentManager.HuaweiIDCredential) {
   143. if (error) {
   144. hilog.error(this.domainId, this.logTag,
   145. `Failed to click LoginWithHuaweiIDButton. errCode is ${error.code}, errMessage is ${error.message}`);
   146. if (error.code === ErrorCode.ERROR_CODE_NETWORK_ERROR) {
   147. AlertDialog.show(
   148. {
   149. message: "网络未连接，请检查网络设置。",
   150. offset: { dx: 0, dy: -12 },
   151. alignment: DialogAlignment.Bottom,
   152. autoCancel: false,
   153. confirm: {
   154. value: "知道了",
   155. action: () => {
   156. }
   157. }
   158. }
   159. );
   160. } else if (error.code === ErrorCode.ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED) {
   161. // 未同意协议，弹出协议弹框，推荐使用该回调方式
   162. this.agreementDialog.open();
   163. } else if (error.code === ErrorCode.ERROR_CODE_LOGIN_OUT) {
   164. // 华为账号未登录提示
   165. this.showToast("华为账号未登录，请重试");
   166. } else if (error.code === ErrorCode.ERROR_CODE_NOT_SUPPORTED) {
   167. // 不支持该scopes或permissions提示
   168. this.showToast("该scopes或permissions不支持");
   169. } else {
   170. // 其他提示系统或服务异常
   171. this.showToast('服务或网络异常，请稍后重试');
   172. }
   173. return;
   174. }
   175. try {
   176. if (this.isSelected) {
   177. if (response) {
   178. hilog.info(this.domainId, this.logTag, 'Succeeded in clicking LoginWithHuaweiIDButton.');
   179. // 开发者根据实际业务情况使用以下信息
   180. const authCode = response.authorizationCode;
   181. const openID = response.openID;
   182. const unionID = response.unionID;
   183. const idToken = response.idToken;
   184. }
   185. } else {
   186. this.agreementDialog.open();
   187. }
   188. } catch (err) {
   189. hilog.error(this.domainId, this.logTag,
   190. `Failed to LoginWithHuaweiIDButton, errCode: ${err.code}, errMessage: ${err.message}`);
   191. AlertDialog.show(
   192. {
   193. message: '服务或网络异常，请稍后重试',
   194. offset: { dx: 0, dy: -12 },
   195. alignment: DialogAlignment.Bottom,
   196. autoCancel: false,
   197. confirm: {
   198. value: '知道了',
   199. action: () => {
   200. }
   201. }
   202. }
   203. );
   204. }
   205. }
   207. // 错误处理
   208. dealAllError(error: BusinessError): void {
   209. hilog.error(this.domainId, this.logTag,
   210. `Failed to login, errorCode is ${error.code}, errorMessage is ${error.message}`);
   211. }
   213. build() {
   214. Scroll() {
   215. Column() {
   216. Column() {
   217. Column() {
   218. Image($r('app.media.app_icon'))
   219. .width(48)
   220. .height(48)
   221. .draggable(false)
   222. .copyOption(CopyOptions.None)
   223. .onComplete(() => {
   224. hilog.info(this.domainId, this.logTag, 'appIcon loading success.');
   225. })
   226. .onError(() => {
   227. hilog.error(this.domainId, this.logTag, 'appIcon loading fail.');
   228. })
   230. Text($r('app.string.app_name'))
   231. .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
   232. .fontWeight(FontWeight.Medium)
   233. .fontWeight(FontWeight.Bold)
   234. .maxFontSize($r('sys.float.ohos_id_text_size_headline8'))
   235. .minFontSize($r('sys.float.ohos_id_text_size_body1'))
   236. .maxLines(1)
   237. .fontColor($r('sys.color.ohos_id_color_text_primary'))
   238. .constraintSize({ maxWidth: '100%' })
   239. .margin({
   240. top: 12,
   241. })
   243. Text('应用描述')
   244. .fontSize($r('sys.float.ohos_id_text_size_body2'))
   245. .fontColor($r('sys.color.ohos_id_color_text_secondary'))
   246. .fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
   247. .fontWeight(FontWeight.Regular)
   248. .constraintSize({ maxWidth: '100%' })
   249. .margin({
   250. top: 8,
   251. })
   252. }.margin({
   253. top: 100
   254. })
   256. Column() {
   257. Text(this.quickLoginAnonymousPhone)
   258. .fontSize(36)
   259. .fontColor($r('sys.color.ohos_id_color_text_primary'))
   260. .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
   261. .fontWeight(FontWeight.Bold)
   262. .lineHeight(48)
   263. .textAlign(TextAlign.Center)
   264. .maxLines(1)
   265. .constraintSize({ maxWidth: '100%', minHeight: 48 })
   267. Text('华为账号绑定号码')
   268. .fontSize($r('sys.float.ohos_id_text_size_body2'))
   269. .fontColor($r('sys.color.ohos_id_color_text_secondary'))
   270. .fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
   271. .fontWeight(FontWeight.Regular)
   272. .lineHeight(19)
   273. .textAlign(TextAlign.Center)
   274. .maxLines(1)
   275. .constraintSize({ maxWidth: '100%' })
   276. .margin({
   277. top: 8
   278. })
   279. }.margin({
   280. top: 64
   281. })
   283. Column() {
   284. LoginWithHuaweiIDButton({
   285. params: {
   286. // LoginWithHuaweiIDButton支持的样式
   287. style: loginComponentManager.Style.BUTTON_RED,
   288. // 账号登录按钮在登录过程中展示加载态
   289. extraStyle: {
   290. buttonStyle: new loginComponentManager.ButtonStyle().loadingStyle({
   291. show: true
   292. })
   293. },
   294. // LoginWithHuaweiIDButton的边框圆角半径
   295. borderRadius: 24,
   296. // LoginWithHuaweiIDButton支持的登录类型
   297. loginType: loginComponentManager.LoginType.QUICK_LOGIN,
   298. // LoginWithHuaweiIDButton支持按钮的样式跟随系统深浅色模式切换
   299. supportDarkMode: true,
   300. // verifyPhoneNumber：如果华为账号用户在过去90天内未进行短信验证，是否拉起Account Kit提供的短信验证码页面
   301. verifyPhoneNumber: true
   302. },
   303. controller: this.controller
   304. })
   305. }
   306. .height(40)
   307. .margin({
   308. top: 56
   309. })
   311. Column() {
   312. Button({
   313. type: ButtonType.Capsule,
   314. stateEffect: true
   315. }) {
   316. Text('其他方式登录')
   317. .fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
   318. .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
   319. .fontWeight(FontWeight.Medium)
   320. .fontSize($r('sys.float.ohos_id_text_size_button1'))
   321. .focusable(true)
   322. .focusOnTouch(true)
   323. .textOverflow({ overflow: TextOverflow.Ellipsis })
   324. .maxLines(1)
   325. .padding({ left: 8, right: 8 })
   326. }
   327. .fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
   328. .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
   329. .fontWeight(FontWeight.Medium)
   330. .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
   331. .focusable(true)
   332. .focusOnTouch(true)
   333. .constraintSize({ minHeight: 40 })
   334. .width('100%')
   335. .onClick(() => {
   336. hilog.info(this.domainId, this.logTag, 'click optionalLoginButton.');
   337. })
   338. }.margin({ top: 16 })
   339. }.width('100%')
   341. Row() {
   342. Row() {
   343. Checkbox({ name: 'privacyCheckbox', group: 'privacyCheckboxGroup' })
   344. .width(24)
   345. .height(24)
   346. .focusable(true)
   347. .focusOnTouch(true)
   348. .margin({ top: 0 })
   349. .select(this.isSelected)
   350. .onChange((value: boolean) => {
   351. if (value) {
   352. this.isSelected = true;
   353. this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.ACCEPTED);
   354. } else {
   355. this.isSelected = false;
   356. this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED);
   357. }
   358. hilog.info(this.domainId, this.logTag, `agreementChecked: ${value}`);
   359. })
   360. }
   362. Row() {
   363. Text() {
   364. ForEach(this.privacyText, (item: loginComponentManager.PrivacyText) => {
   365. if (item?.type == loginComponentManager.TextType.PLAIN_TEXT && item?.text) {
   366. Span(item?.text)
   367. .fontColor($r('sys.color.ohos_id_color_text_secondary'))
   368. .fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
   369. .fontWeight(FontWeight.Regular)
   370. .fontSize($r('sys.float.ohos_id_text_size_body3'))
   371. } else if (item?.type == loginComponentManager.TextType.RICH_TEXT && item?.text) {
   372. Span(item?.text)
   373. .fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
   374. .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
   375. .fontWeight(FontWeight.Medium)
   376. .fontSize($r('sys.float.ohos_id_text_size_body3'))
   377. .focusable(true)
   378. .focusOnTouch(true)
   379. .onClick(() => {
   380. // 应用需要根据item.tag实现协议页面的跳转逻辑
   381. hilog.info(this.domainId, this.logTag, `click privacy text tag: ${item.tag}`);
   382. // 华为账号用户认证协议
   383. if (item.tag === QuickLoginButtonComponent.USER_AUTHENTICATION_TAG) {
   384. this.jumpToPrivacyWebView();
   385. }
   386. })
   387. }
   388. }, (item: loginComponentManager.PrivacyText, index: number) => `${item.text}_${index}}`)
   389. }
   390. .width('100%')
   391. }
   392. .margin({ left: 12 })
   393. .layoutWeight(1)
   394. .constraintSize({ minHeight: 24 })
   395. }
   396. .alignItems(VerticalAlign.Top)
   397. .margin({
   398. bottom: 16
   399. })
   400. }
   401. .justifyContent(FlexAlign.SpaceBetween)
   402. .constraintSize({ minHeight: '100%' })
   403. .margin({
   404. left: 16,
   405. right: 16
   406. })
   407. }
   408. .width('100%')
   409. .height('100%')
   410. }
   411. }
   413. @CustomDialog
   414. export struct AgreementDialog {
   415. logTag: string = 'AgreementDialog';
   416. domainId: number = 0x0000;
   417. dialogController?: CustomDialogController;
   418. cancel: () => void = () => {
   419. };
   420. confirm: () => void = () => {
   421. };
   422. clickHyperlinkText: () => void = () => {
   423. };
   424. privacyText: loginComponentManager.PrivacyText[] = [];
   425. private static USER_AUTHENTICATION_TAG = '华为账号用户认证协议';
   427. build() {
   428. Column() {
   429. Row() {
   430. Text('用户协议与隐私条款')
   431. .id('loginPanel_agreement_dialog_privacy_title')
   432. .maxFontSize($r('sys.float.ohos_id_text_size_headline8'))
   433. .minFontSize($r('sys.float.ohos_id_text_size_body1'))
   434. .fontColor($r('sys.color.ohos_id_color_text_primary'))
   435. .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
   436. .fontWeight(FontWeight.Bold)
   437. .textAlign(TextAlign.Center)
   438. .textOverflow({ overflow: TextOverflow.Ellipsis })
   439. .maxLines(2)
   440. }
   441. .alignItems(VerticalAlign.Center)
   442. .constraintSize({ minHeight: 56, maxWidth: 400 })
   443. .margin({
   444. left: $r('sys.float.ohos_id_max_padding_start'),
   445. right: $r('sys.float.ohos_id_max_padding_start')
   446. })
   448. Row() {
   449. Text() {
   450. ForEach(this.privacyText, (item: loginComponentManager.PrivacyText) => {
   451. if (item?.type == loginComponentManager.TextType.PLAIN_TEXT && item?.text) {
   452. Span(item?.text)
   453. .fontSize($r('sys.float.ohos_id_text_size_body1'))
   454. .fontColor($r('sys.color.ohos_id_color_text_primary'))
   455. .fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
   456. .fontWeight(FontWeight.Regular)
   457. } else if (item?.type == loginComponentManager.TextType.RICH_TEXT && item?.text) {
   458. Span(item?.text)
   459. .fontSize($r('sys.float.ohos_id_text_size_body1'))
   460. .fontColor('#CE0E2D')
   461. .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
   462. .fontWeight(FontWeight.Medium)
   463. .focusable(true)
   464. .focusOnTouch(true)
   465. .onClick(() => {
   466. // 应用需要根据item.tag实现协议页面的跳转逻辑
   467. hilog.info(this.domainId, this.logTag, `click privacy text tag: ${item.tag}`);
   468. // 华为账号用户认证协议
   469. if (item.tag === AgreementDialog.USER_AUTHENTICATION_TAG) {
   470. hilog.info(this.domainId, this.logTag, 'AgreementDialog click.');
   471. this.clickHyperlinkText();
   472. }
   473. })
   474. }
   475. }, (item: loginComponentManager.PrivacyText, index: number) => `${item.text}_${index}}`)
   476. }
   477. .width('100%')
   478. .textOverflow({ overflow: TextOverflow.Ellipsis })
   479. .maxLines(10)
   480. .textAlign(TextAlign.Start)
   481. .focusable(true)
   482. .focusOnTouch(true)
   483. .padding({ left: 24, right: 24 })
   484. }.width('100%')
   486. Flex({
   487. direction: FlexDirection.Row
   488. }) {
   489. Button('取消',
   490. { type: ButtonType.Capsule, stateEffect: true })
   491. .id('loginPanel_agreement_cancel_btn')
   492. .fontColor($r('sys.color.ohos_id_color_text_primary'))
   493. .fontSize($r('sys.float.ohos_id_text_size_button1'))
   494. .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
   495. .backgroundColor(Color.Transparent)
   496. .fontWeight(FontWeight.Medium)
   497. .focusable(true)
   498. .focusOnTouch(true)
   499. .constraintSize({ minHeight: 40, maxWidth: 400 })
   500. .width('50%')
   501. .onClick(() => {
   502. hilog.info(this.domainId, this.logTag, 'AgreementDialog cancel.');
   503. this.cancel();
   504. })
   506. Button('同意并登录',
   507. { type: ButtonType.Capsule, stateEffect: true })
   508. .id('loginPanel_agreement_dialog_huawei_id_login_btn')
   509. .fontColor(Color.White)
   510. .backgroundColor('#CE0E2D')
   511. .fontSize($r('sys.float.ohos_id_text_size_button1'))
   512. .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
   513. .fontWeight(FontWeight.Medium)
   514. .focusable(true)
   515. .focusOnTouch(true)
   516. .constraintSize({ minHeight: 40, maxWidth: 400 })
   517. .width('50%')
   518. .onClick(() => {
   519. hilog.info(this.domainId, this.logTag, 'AgreementDialog confirm.');
   520. this.confirm();
   521. })
   522. }
   523. .margin({
   524. top: 8,
   525. left: $r('sys.float.ohos_id_elements_margin_horizontal_l'),
   526. right: $r('sys.float.ohos_id_elements_margin_horizontal_l'),
   527. bottom: 16
   528. })
   529. }.backgroundColor($r('sys.color.ohos_id_color_dialog_default_bg'))
   530. .padding({
   531. left: 16,
   532. right: 16
   533. })
   534. }
   535. }
   537. export enum ErrorCode {
   538. // 账号未登录
   539. ERROR_CODE_LOGIN_OUT = 1001502001,
   540. // 该账号不支持一键登录，如海外账号
   541. ERROR_CODE_NOT_SUPPORTED = 1001500003,
   542. // 网络错误
   543. ERROR_CODE_NETWORK_ERROR = 1001502005,
   544. // 用户未同意用户协议
   545. ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED = 1005300001
   546. }

   以下是华为账号用户认证协议展示页示例代码：

   1. import { webview } from '@kit.ArkWeb';
   2. import { hilog } from '@kit.PerformanceAnalysisKit';
   3. import { router } from '@kit.ArkUI';
   5. // 华为账号用户认证协议展示页
   6. @Entry
   7. @Component
   8. struct WebPage {
   9. @State webUrl?: string = '';
   10. @State progress: number = 0;
   11. logTag: string = 'WebPage';
   12. domainId: number = 0x0000;
   13. controller: webview.WebviewController = new webview.WebviewController();
   15. build() {
   16. Column() {
   17. Column() {
   18. Button({ type: ButtonType.Normal }) {
   19. Image($r('sys.media.ohos_ic_compnent_titlebar_back'))
   20. .backgroundColor(Color.Transparent)
   21. .borderRadius(20)
   22. .width(24)
   23. .height(24)
   24. .draggable(false)
   25. .autoResize(false)
   26. .focusable(true)
   27. .fillColor($r('sys.color.ohos_id_color_titlebar_icon'))
   28. .matchTextDirection(true)
   29. }
   30. .alignSelf(ItemAlign.Start)
   31. .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
   32. .borderRadius(20)
   33. .width(40)
   34. .height(40)
   35. .onClick(() => {
   36. router.back();
   37. })
   38. }
   39. .height(56)
   40. .width('100%')
   41. .justifyContent(FlexAlign.Center)
   42. .margin({
   43. top: 36,
   44. left: 16
   45. })
   47. Progress({ value: this.progress, type: ProgressType.Linear })
   48. .width('100%')
   49. .visibility(this.progress <= 99 ? Visibility.Visible : Visibility.None)
   51. Web({ src: this.webUrl ?? '', controller: this.controller })
   52. .backgroundColor(Color.Transparent)
   53. .margin({ bottom: 60 })
   54. .onProgressChange((event) => {
   55. hilog.info(this.domainId, this.logTag,
   56. 'onProgressChange: ', (event !== undefined ? event.newProgress : -1));
   57. this.progress = event !== undefined ? event.newProgress : 0;
   58. })
   59. .darkMode(WebDarkMode.Auto)
   60. .forceDarkAccess(true)
   61. .onLoadIntercept((event) => {
   62. hilog.info(this.domainId, this.logTag, 'onLoadIntercept');
   63. return false;
   64. })
   65. .onErrorReceive((event) => {
   66. if (event) {
   67. hilog.error(this.domainId, this.logTag, `onErrorReceive,errorInfo: ${event?.error?.getErrorInfo()}`);
   68. }
   69. })
   70. }
   71. .alignItems(HorizontalAlign.Start)
   72. .padding({ left: 12, right: 12, bottom: 60 })
   73. .width('100%')
   74. .height('100%')
   75. }
   77. aboutToAppear(): void {
   78. hilog.info(0x0000, 'testTag', 'aboutToAppear');
   79. const params = router.getParams() as Record<string, string>;
   80. this.webUrl = params.url ?? '';
   81. hilog.info(0x0000, 'testTag', `webUrl: ${this.webUrl}`);
   82. }
   84. aboutToDisappear(): void {
   85. hilog.info(0x0000, 'testTag', 'aboutToDisappear');
   86. if (this.webUrl) {
   87. this.controller.stop();
   88. }
   89. }
   90. }

借助DevEco Studio辅助开发（可选）

1. 打开需要提供一键登录功能的页面，在页面的build()中创建一个容器（如Column）。
2. 在DevEco Studio菜单栏点击View > Tool Windows > Kit Assistant，或使用快捷键Alt + K，进入Kit Assistant页面。
3. 在左侧目录中点击选中AccountKit > QuickLoginButton，并拖拽至新创建的容器中。即可在当前位置插入相应的代码片段。

   若代码片段插入失败，可查询快速插入的说明排查原因。

4. 在自动生成的代码段的getQuickLoginAnonymousPhone函数中，执行executeRequest函数可获取响应结果。根据获取的响应结果判断，可能存在以下场景：
   • 已正确获取到用户身份标识UnionID、OpenID，应用可通过用户身份标识查询该用户是否已关联。

     1）如已关联，结合风控、安全因素及自身业务场景判断，可展示已关联的账号，由用户选择是否使用华为账号登录应用，或免用户操作，静默登录应用，客户端开发结束。

     2）如未关联，再判断是否存在下面的异常场景，如无，则参考下面步骤5继续开发。

   • 存在如下返回ArkTS错误码的异常场景：

     1）返回1001502001 用户未登录华为账号错误码，说明华为账号未登录。

     2）返回1001500003 不支持该scopes或permissions错误码，说明华为账号用户注册地非中国大陆或登录的华为账号是儿童账号。

     3）获取到的匿名手机号为空，说明华为账号没有绑定手机号、权限未申请或未生效。

     上述异常场景应用需要展示其他登录方式。

5. 根据上述代码实现应用的登录页面，并展示华为账号一键登录按钮和华为账号用户认证协议（Account Kit提供跳转链接，应用需实现协议跳转，参见约束与限制第2点），用户同意协议并点击一键登录按钮后，可获取到Authorization Code，将该值传给应用服务器用于获取用户信息（完整手机号、UnionID、OpenID）。

服务端开发

1. 应用服务器使用Client ID、Client Secret、Authorization Code调用获取用户级凭证的接口向华为账号服务器请求获取Access Token、Refresh Token。
2. 使用Access Token调用获取用户信息接口获取用户信息，从用户信息中获取用户绑定的完整手机号和华为账号用户标识UnionID。

   Access Token过期处理

   由于Access Token的有效期仅为60分钟，当Access Token失效或者即将失效时（可通过REST API错误码判断），可以使用Refresh Token（有效期180天）通过刷新凭证向华为账号服务器请求获取新的Access Token。

   说明

   1. 当Access Token失效时，若应用不使用Refresh Token向华为账号服务器请求获取新的Access Token，账号的授权信息将会失效，导致使用Access Token的功能都会失败。
   2. 当Access Token非正常失效（如修改密码、退出账号、删除设备）时，应用可重新登录授权获取Authorization Code，向华为账号服务器请求获取新的Access Token。

   Refresh Token过期处理

   由于Refresh Token的有效期为180天，当Refresh Token失效后（可通过REST API错误码判断），应用服务器需要通知客户端，重新调用授权接口，请求用户重新授权。

3. 应用通过获取到的完整手机号或UnionID查询该用户是否已关联应用系统数据库。如已关联，则绑定获取的UnionID与手机号到已有用户上（如已绑定，则可忽略），完成用户登录；如未关联，则创建新用户并绑定手机号与UnionID到该用户上。

客户端与服务端交互开发

应用客户端到应用服务端的开发

业务流程：

• 准备：

1. 请先完成应用客户端一键登录的相关开发，相关开发指导参考客户端开发；
2. 参考基于RCP的网络请求开发实践完成客户端到服务端的接口请求；
   • 开发步骤：

   在应用客户端，根据实现基础的网络请求的使用说明进行网络请求；

   1. 在应用客户端调用服务端提供的接口，将Authorization Code传输给应用的服务端；

      注意

      应用客户端与应用服务端的交互安全需要应用自行保证。

      1. import { rcp } from '@kit.RemoteCommunicationKit';
      2. import { hilog } from '@kit.PerformanceAnalysisKit';
      3. import { util } from '@kit.ArkTS';
      4. import { BusinessError } from '@kit.BasicServicesKit';
      6. // 客户端请求接口示例代码
      7. export function rcpRequest(authCode: string) {
      8. // 定义请求头
      9. const headers: rcp.RequestHeaders = {
      10. 'accept': 'application/json'
      11. };
      12. // 定义要传递的参数
      13. const postMessage: Record<string, string> = {
      14. 'authorizationCode': authCode
      15. };
      16. const securityConfig: rcp.SecurityConfiguration = {
      17. tlsOptions: {
      18. tlsVersion: 'TlsV1.3'
      19. }
      20. };
      21. // 假设"http://localhost:6687"为应用服务器地址
      22. const baseUrl = 'http://localhost:6687/account/login';
      23. // 定义请求对象
      24. const req = new rcp.Request(baseUrl, 'POST', headers, postMessage);
      25. // 创建通信会话对象
      26. const session = rcp.createSession({ requestConfiguration: { security: securityConfig } });
      27. // 发起请求
      28. session.fetch(req).then((response) => {
      29. hilog.info(0x0000, 'getRcpResult', 'Succeeded in getting result from server.');
      30. if (response.body) {
      31. const decoder = util.TextDecoder.create('utf-8');
      32. const result = JSON.parse(decoder.decodeToString(new Uint8Array(response.body))) as Record<string, Object>;
      33. const phoneNumber: string = JSON.stringify(result['phone'] ?? '');
      34. if (phoneNumber) {
      35. // 应用处理相关逻辑
      36. }
      37. } else {
      38. hilog.error(0x0000, 'getRcpResult', 'Failed to get response body.');
      39. }
      40. }).catch((err: BusinessError) => {
      41. hilog.error(0x0000, 'getRcpResult', `err: err code is ${err.code}, err message is ${JSON.stringify(err)}`);
      42. });
      43. }
   2. 应用服务端提供接口用于接收应用客户端获取到的Authorization Code；
      1. // 服务端接口示例代码（Java）
      2. @PostMapping("/login")
      3. public Response login(@RequestBody LoginRequesBody requestBody) throws IOException {
      4. UserInfo userInfo = loginService.loginWithHuawei(requestBody.getAuthorizationCode());
      5. return new Response(userInfo, 200, "login success!");
      6. }
   3. 应用服务端获取到Authorization Code之后，对接华为账号服务器，参考服务端开发，获取Access Token和Refresh Token，并调用获取用户信息接口获取用户信息；
   4. 根据获取的UnionID、OpenID、完整手机号，判断登录用户是否为新用户、是否已关联等等（根据实际业务开发）；
   5. 保存或更新用户信息到应用服务器，并可根据登录设计方案选择是否保存Refresh Token；完成处理后，返回登录用户的信息至应用客户端；
      1. /*
      2. * 服务端接口示例代码（Java）
      3. * 服务端使用Authorization Code获取Access Token，获取用户信息的示例代码
      4. */
      5. public UserInfo loginWithHuawei(String authorizationCode) {
      6. AccessTokenRequestBody requestBody = new AccessTokenRequestBody();
      7. requestBody.setClient_id(agcProperties.getClientId());
      8. requestBody.setClient_secret(agcProperties.getClientSecret());
      9. requestBody.setGrant_type("authorization_code");
      10. requestBody.setCode(authorizationCode);
      11. /*
      12. * 若使用refresh_token获取Access Token，则传refresh_code、grant_type设为"refresh_token"。
      13. * requestBody.setRefresh_token("******");
      14. */
      15. log.info("account rest api requestBody is : " + requestBody.toString());
      17. // 使用authCode获取Access Token
      18. TokenEntity response = httpService.callHttpPost("https://oauth-login.cloud.huawei/oauth2/v3/token", requestBody, TokenEntity.class).getBody();
      19. log.info("the output of oauth2/v3/token Access_token is: " + response.toString());
      21. // 使用Access Token获取用户信息
      22. AccountInfoRequestBody accountInfoBody = new AccountInfoRequestBody();
      23. accountInfoBody.setAccess_token(response.getAccess_token());
      24. accountInfoBody.setGetNickName("1");
      25. AccountInfoEntity accountInfo = httpService.callHttpPost("https://account.cloud.huawei/rest.php?nsp_svc=GOpen.User.getInfo", accountInfoBody, AccountInfoEntity.class).getBody();
      26. log.info("the output of rest.php?nsp_svc=GOpen.User.getInfo is: " + accountInfo.toString());
      28. // 组装用户信息，用于接口返回数据到客户端
      29. UserInfo userInfo = new UserInfo();
      30. userInfo.setPhone(accountInfo.getLoginMobileNumber());
      31. /**
      32. * 根据业务设计流程，在数据库中查询用户信息，比如：
      33. * 1、使用UnionID查询用户，匹配到了则返回用户信息；
      34. * 2、未匹配到则使用手机号查询用户，查到了则将华为账号UnionID关联到该用户，返回用户信息；
      35. * 3、UnionID和手机号均没有匹配到，则进入注册流程
      36. *
      37. * （可选）保存Refresh Token
      38. * 由于Access Token的有效期仅为60分钟，当Access Token失效或者即将失效时（可通过REST API错误码判断），
      39. * 可以使用Refresh Token（有效期180天）通过获取凭证Access Token向华为账号服务器请求获取新的Access Token。
      40. */
      41. return userInfo;
      42. }

客户端与服务端联调

前提：根据应用登录方案设计及实现，完成客户端和服务端开发，开发指导参见客户端开发、服务端开发和应用客户端到应用服务端的开发。

1. 在客户端获取到Authorization Code之后，传送给服务端接口；在服务端使用Authorization Code获取Access Token，再用Access Token获取华为账号绑定的手机号、UnionID、OpenID。

2. 根据应用登录方案使用华为账号绑定的手机号、UnionID、OpenID登录成功后，应用服务器返回用户信息给应用客户端，应用客户端可根据需要进行本地持久化存储，例如：登录状态、用户账号名、手机号、用户唯一标识等。
3. 在应用客户端首页或个人信息页等位置，对当前登录用户信息进行展示，举例如下图：

开发后验证

集成华为账号一键登录能力应用用户体验质量建议

应用完成开发后，可参照以下标准检查集成华为账号一键登录后的用户体验是否符合预期：

本文标签： 华为 账号 一键 能力 快速