隨著智能手機(jī)和移動(dòng)應(yīng)用的普及，用戶需要在不同的應(yīng)用中注冊(cè)和登錄賬號(hào)，傳統(tǒng)的賬號(hào)注冊(cè)和登錄流程需要用戶輸入用戶名和密碼，這不僅繁瑣而且容易造成用戶流失。

?華為賬號(hào)服務(wù)(Account Kit)提供簡(jiǎn)單、快速、安全的登錄功能，讓用戶快捷地使用華為賬號(hào)登錄應(yīng)用。用戶授權(quán)后，華為賬號(hào)可提供頭像、昵稱(chēng)、手機(jī)號(hào)碼等信息，幫助應(yīng)用更了解用戶。其中?一鍵登錄功能是基于?OAuth 2.0協(xié)議標(biāo)準(zhǔn)和?OpenID Connect協(xié)議標(biāo)準(zhǔn)構(gòu)建的OAuth2.0 授權(quán)登錄系統(tǒng)，應(yīng)用可以通過(guò)華為賬號(hào)一鍵登錄能力方便地獲取華為賬號(hào)用戶的身份標(biāo)識(shí)和手機(jī)號(hào)，快速建立應(yīng)用內(nèi)的用戶體系。

簡(jiǎn)化登錄流程，助力應(yīng)用建立用戶體系_用戶認(rèn)證

一鍵登錄技術(shù)通過(guò)簡(jiǎn)化登錄流程，用戶無(wú)需記住額外的用戶名和密碼，只需點(diǎn)擊一下按鈕即可快速登錄，省去了填寫(xiě)注冊(cè)表單和登錄表單的繁瑣步驟，提升了用戶體驗(yàn)，降低了用戶因忘記密碼而不能訪問(wèn)應(yīng)用的幾率，減少了用戶的流失率。

對(duì)于開(kāi)發(fā)者和運(yùn)營(yíng)者來(lái)說(shuō)，一鍵登錄技術(shù)不僅能夠簡(jiǎn)化用戶管理和支持流程，還能減少因賬號(hào)管理帶來(lái)的運(yùn)營(yíng)成本和風(fēng)險(xiǎn)。通過(guò)集成一鍵登錄，開(kāi)發(fā)者可以專(zhuān)注于應(yīng)用的核心功能開(kāi)發(fā)，提升開(kāi)發(fā)效率和用戶體驗(yàn)。

能力優(yōu)勢(shì)

應(yīng)用可以通過(guò)華為賬號(hào)一鍵登錄功能獲取手機(jī)號(hào)授權(quán)并完成登錄，幫助應(yīng)用建立用戶體系或者打通原有的用戶體系。

  1. 便捷性：一鍵完成登錄和手機(jī)號(hào)授權(quán)，為用戶提供更加便捷易用的登錄體驗(yàn)。
  2. 效率高：無(wú)需單獨(dú)集成SDK，減少開(kāi)發(fā)者開(kāi)發(fā)和運(yùn)營(yíng)成本。
登錄組件

賬號(hào)服務(wù)提供了登錄按鈕、登錄面板兩種一鍵登錄組件，可滿足應(yīng)用不同的界面風(fēng)格。

  1. 華為賬號(hào)一鍵登錄按鈕：應(yīng)用可以將華為賬號(hào)一鍵登錄按鈕嵌入自有的登錄頁(yè)，滿足應(yīng)用對(duì)界面風(fēng)格一致性和靈活性的要求。
  2. 華為賬號(hào)一鍵登錄面板：應(yīng)用可以直接調(diào)用華為賬號(hào)一鍵登錄面板，無(wú)需自行開(kāi)發(fā)登錄頁(yè)，簡(jiǎn)化開(kāi)發(fā)步驟。
【華為賬號(hào)一鍵登錄】按鈕

用戶體驗(yàn)設(shè)計(jì)

簡(jiǎn)化登錄流程，助力應(yīng)用建立用戶體系_用戶認(rèn)證_02

登錄頁(yè)面UX規(guī)范設(shè)計(jì)

簡(jiǎn)化登錄流程，助力應(yīng)用建立用戶體系_用戶認(rèn)證_03

【華為賬號(hào)一鍵登錄】面板

用戶體驗(yàn)設(shè)計(jì)

登錄頁(yè)面UX規(guī)范設(shè)計(jì)

簡(jiǎn)化登錄流程，助力應(yīng)用建立用戶體系_Text_04

開(kāi)發(fā)步驟
客戶端開(kāi)發(fā)

1.導(dǎo)入?authentication模塊及相關(guān)公共模塊。

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.調(diào)用?authentication模塊的?AuthorizationWithHuaweiIDRequest請(qǐng)求獲取華為賬號(hào)用戶的UnionID、OpenID、匿名手機(jī)號(hào)。匿名手機(jī)號(hào)用于登錄頁(yè)面展示。

getQuickLoginAnonymousPhone() {// 創(chuàng)建授權(quán)請(qǐng)求，并設(shè)置參數(shù)。let authRequest = new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();// 獲取手機(jī)號(hào)需傳quickLoginAnonymousPhone這個(gè)scope，傳參之前需要先申請(qǐng)"華為賬號(hào)一鍵登錄"權(quán)限,后續(xù)才能獲取手機(jī)號(hào)數(shù)據(jù)；// 獲取UnionID、OpenID需傳openid這個(gè)scope，這個(gè)scope不需要申請(qǐng)權(quán)限。authRequest.scopes = ['quickLoginAnonymousPhone','openid'];// 用于防跨站點(diǎn)請(qǐng)求偽造。authRequest.state = util.generateRandomUUID();// 一鍵登錄場(chǎng)景該參數(shù)只能設(shè)置為false。authRequest.forceAuthorization = false;let controller = new authentication.AuthenticationController();try {controller.executeRequest(authRequest).then((response: authentication.AuthorizationWithHuaweiIDResponse) => {// 獲取到UnionID、OpenID、匿名手機(jī)號(hào)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');// 未獲取到匿名手機(jī)號(hào)需要跳轉(zhuǎn)到應(yīng)用自定義的登錄頁(yè)面。}).catch((error: BusinessError) => {this.dealAllError(error);})} catch (error) {this.dealAllError(error);}
}// 錯(cuò)誤處理
dealAllError(error: BusinessError): void {hilog.error(0x0000, 'testTag', 'Failed to auth, errorCode=%{public}d, errorMsg=%{public}s', error.code, error.message);// 應(yīng)用需要展示其他登錄方式。
}
  • 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.將獲取到的匿名手機(jī)號(hào)設(shè)置給下面示例代碼中的quickLoginAnonymousPhone變量，調(diào)用LoginWithHuaweiIDButton組件，實(shí)現(xiàn)應(yīng)用自己的登錄頁(yè)面，并展示華為賬號(hào)一鍵登錄按鈕和華為賬號(hào)用戶認(rèn)證協(xié)議(Account Kit提供跳轉(zhuǎn)鏈接，應(yīng)用需實(shí)現(xiàn)協(xié)議跳轉(zhuǎn)，參見(jiàn)使用與約束第2點(diǎn))，用戶同意協(xié)議、點(diǎn)擊一鍵登錄按鈕后，可獲取到Authorization Code，將該值傳給應(yīng)用服務(wù)器用于獲取用戶信息(完整手機(jī)號(hào)、UnionID)。

import { loginComponentManager, LoginWithHuaweiIDButton } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';@Entry
@Component
struct PreviewLoginButtonPage {// 設(shè)置步驟二中獲取到的匿名手機(jī)號(hào)。quickLoginAnonymousPhone: string = '';// 展示應(yīng)用的用戶服務(wù)協(xié)議、隱私協(xié)議和華為賬號(hào)用戶認(rèn)證協(xié)議。// 華為賬號(hào)用戶認(rèn)證協(xié)議跳轉(zhuǎn)鏈接：https://privacy.consumer.huawei.com/legal/id/authentication-terms.htm?code=CN&language=zh-CNprivacyText: loginComponentManager.PrivacyText[] = [{text: '已閱讀并同意',type: loginComponentManager.TextType.PLAIN_TEXT}, {text: '《用戶服務(wù)協(xié)議》 ',tag: '用戶服務(wù)協(xié)議',type: loginComponentManager.TextType.RICH_TEXT}, {text: '《隱私協(xié)議》',tag: '隱私協(xié)議',type: loginComponentManager.TextType.RICH_TEXT}, {text: '和',type: loginComponentManager.TextType.PLAIN_TEXT}, {text: '《華為賬號(hào)用戶認(rèn)證協(xié)議》',tag: '華為賬號(hào)用戶認(rèn)證協(xié)議',type: loginComponentManager.TextType.RICH_TEXT}];// 構(gòu)造LoginWithHuaweiIDButton組件的控制器。controller: loginComponentManager.LoginWithHuaweiIDButtonController =new loginComponentManager.LoginWithHuaweiIDButtonController()/*** 當(dāng)應(yīng)用使用自定義的登錄頁(yè)時(shí)，如果用戶未同意協(xié)議，需要設(shè)置協(xié)議狀態(tài)為NOT_ACCEPTED，當(dāng)用戶同意協(xié)議后再設(shè)置* 協(xié)議狀態(tài)為ACCEPTED，才可以使用華為賬號(hào)一鍵登錄功能。*/.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;}});// 錯(cuò)誤處理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('應(yīng)用描述').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('華為賬號(hào)綁定號(hào)碼').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支持的登錄類(lèi)型。loginType: loginComponentManager.LoginType.QUICK_LOGIN,// LoginWithHuaweiIDButton支持按鈕的樣式跟隨系統(tǒng)深淺色模式切換。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(() => {// 應(yīng)用需要根據(jù)item.tag實(shí)現(xiàn)協(xié)議頁(yè)面的跳轉(zhuǎn)邏輯。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.
服務(wù)端開(kāi)發(fā)

1.應(yīng)用服務(wù)器使用Client ID、Client Secret、Authorization Code調(diào)用?獲取憑證Access Token的接口向華為賬號(hào)服務(wù)器請(qǐng)求獲取Access Token、Refresh Token。

2.使用Access Token調(diào)用?獲取用戶信息接口獲取用戶信息，從用戶信息中獲取用戶綁定的完整手機(jī)號(hào)和華為賬號(hào)用戶標(biāo)識(shí)UnionID。

3.應(yīng)用通過(guò)獲取到的完整手機(jī)號(hào)或UnionID查詢(xún)?cè)撚脩羰欠褚训卿洃?yīng)用。如已登錄，則綁定獲取的UnionID或手機(jī)號(hào)到已有用戶上(如已綁定，則可忽略)，完成用戶登錄；如未登錄，則創(chuàng)建新用戶并綁定手機(jī)號(hào)與UnionID到該用戶上。

了解更多詳情\>\>

訪問(wèn)?華為賬號(hào)服務(wù)聯(lián)盟官網(wǎng)

獲取?華為賬號(hào)一鍵登錄服務(wù)開(kāi)發(fā)指導(dǎo)文檔