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

?華為賬號服務(wù)(Account Kit)提供簡單、快速、安全的登錄功能,讓用戶快捷地使用華為賬號登錄應(yīng)用。用戶授權(quán)后,華為賬號可提供頭像、昵稱、手機(jī)號碼等信息,幫助應(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)用可以通過華為賬號一鍵登錄能力方便地獲取華為賬號用戶的身份標(biāo)識和手機(jī)號,快速建立應(yīng)用內(nèi)的用戶體系。

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

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

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

能力優(yōu)勢

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

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

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

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

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

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

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

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

【華為賬號一鍵登錄】面板

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

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

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

開發(fā)步驟
客戶端開發(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請求獲取華為賬號用戶的UnionID、OpenID、匿名手機(jī)號。匿名手機(jī)號用于登錄頁面展示。

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

import { loginComponentManager, LoginWithHuaweiIDButton } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';@Entry
@Component
struct PreviewLoginButtonPage {// 設(shè)置步驟二中獲取到的匿名手機(jī)號。quickLoginAnonymousPhone: string = '';// 展示應(yīng)用的用戶服務(wù)協(xié)議、隱私協(xié)議和華為賬號用戶認(rèn)證協(xié)議。// 華為賬號用戶認(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: '《華為賬號用戶認(rèn)證協(xié)議》',tag: '華為賬號用戶認(rèn)證協(xié)議',type: loginComponentManager.TextType.RICH_TEXT}];// 構(gòu)造LoginWithHuaweiIDButton組件的控制器。controller: loginComponentManager.LoginWithHuaweiIDButtonController =new loginComponentManager.LoginWithHuaweiIDButtonController()/*** 當(dāng)應(yīng)用使用自定義的登錄頁時(shí),如果用戶未同意協(xié)議,需要設(shè)置協(xié)議狀態(tài)為NOT_ACCEPTED,當(dāng)用戶同意協(xié)議后再設(shè)置* 協(xié)議狀態(tài)為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('應(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('華為賬號綁定號碼').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支持按鈕的樣式跟隨系統(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é)議頁面的跳轉(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ù)端開發(fā)

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

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

3.應(yīng)用通過獲取到的完整手機(jī)號或UnionID查詢該用戶是否已登錄應(yīng)用。如已登錄,則綁定獲取的UnionID或手機(jī)號到已有用戶上(如已綁定,則可忽略),完成用戶登錄;如未登錄,則創(chuàng)建新用戶并綁定手機(jī)號與UnionID到該用戶上。

了解更多詳情\>\>

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

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