前言

AppGallery Connect(簡(jiǎn)稱AGC)是華為整合內(nèi)部各項(xiàng)優(yōu)質(zhì)服務(wù)，將其在全球化、質(zhì)量、安全、工程管理等領(lǐng)域長(zhǎng)期積累的能力開放給開發(fā)者。通過(guò)集成AGC構(gòu)建服務(wù)，可以降低企業(yè)開發(fā)、運(yùn)維、人力成本；通過(guò)集成AGC增長(zhǎng)服務(wù)能夠使企業(yè)產(chǎn)品快速實(shí)現(xiàn)用戶增長(zhǎng)，加速企業(yè)應(yīng)用商業(yè)成功率；通過(guò)集成AGC質(zhì)量服務(wù)，可以精準(zhǔn)定位應(yīng)用異常，從而為應(yīng)用的性能保駕護(hù)航。AGC一站式服務(wù)可以集成到Android、IOS、Web、小程序、HarmonyOS/OpenHarmony應(yīng)用中，如傳統(tǒng)開發(fā)登錄認(rèn)證服務(wù)在集成AGC后可以調(diào)用少量接口即可實(shí)現(xiàn)多類型的登錄方式。

本節(jié)以AGC構(gòu)建應(yīng)用基礎(chǔ)能力認(rèn)證服務(wù)為例，將其集成到OpenHarmony應(yīng)用程序中。

流程

• 搭建開發(fā)環(huán)境
• 創(chuàng)建項(xiàng)目和應(yīng)用
• 開通認(rèn)證服務(wù)
• 集成SDK
• 郵箱登錄認(rèn)證

1. 搭建開發(fā)環(huán)境

下載適合自己操作系統(tǒng)版本的DevEco Studio 3.1 Canary1，安裝和配置開發(fā)環(huán)境在社區(qū)已經(jīng)有很多操作教程，此處不做贅述。

2. 創(chuàng)建項(xiàng)目和應(yīng)用

2.1 創(chuàng)建項(xiàng)目

在操作之前讀者需要擁有一個(gè)華為開發(fā)者賬號(hào)，然后登錄AppGallery Connect管理中心，點(diǎn)擊界面“我的項(xiàng)目”，打開項(xiàng)目創(chuàng)建界面。

在“我的項(xiàng)目”界面點(diǎn)擊“添加項(xiàng)目”，輸入項(xiàng)目信息，點(diǎn)擊“創(chuàng)建并繼續(xù)”。

接著可選擇是否開通分析服務(wù)，筆者默認(rèn)開通。

2.2 添加應(yīng)用

創(chuàng)建項(xiàng)目完成后，定位在“常規(guī)”頁(yè)簽，點(diǎn)擊該頁(yè)簽中的“添加應(yīng)用”按鈕，填寫應(yīng)用的實(shí)際信息后，點(diǎn)擊“確認(rèn)”按鈕完成應(yīng)用創(chuàng)建。本次以O(shè)penHarmony應(yīng)用為例，此處需要選擇“APP(HarmonyOS)”，應(yīng)用名稱和應(yīng)用包名與使用DevEco Studio創(chuàng)建項(xiàng)目的名稱和包名一致，建議選擇有實(shí)際意義的字段。

3 開通認(rèn)證服務(wù)

在左側(cè)菜單欄中點(diǎn)擊“構(gòu)建”-->“認(rèn)證服務(wù)”，打開認(rèn)證服務(wù)開通界面。

在“認(rèn)證方式”頁(yè)簽中，點(diǎn)擊“郵箱地址”列后的啟用，開啟通過(guò)郵箱驗(yàn)證碼方式登錄。

4 集成SDK

4.1 下載SDK配置文件

回到“項(xiàng)目設(shè)置” --> "常規(guī)"頁(yè)簽，下拉找到“應(yīng)用”，SDK配置，然后點(diǎn)擊下載“agconnect-services.json”，已備創(chuàng)建項(xiàng)目后使用。

4.2 創(chuàng)建項(xiàng)目

打開DevEco Studio點(diǎn)擊Create Project，進(jìn)入創(chuàng)建項(xiàng)目向?qū)ы?yè)，選擇OpenHarmony標(biāo)簽，創(chuàng)建OpenHarmony項(xiàng)目(當(dāng)然你也可以直接創(chuàng)建HarmonyOS項(xiàng)目，在配置中改動(dòng)少量的代碼讓其能夠運(yùn)行在OpenHarmony設(shè)備上)。

添加項(xiàng)目信息，其中Project name和Bundle name需要與2.2小節(jié)應(yīng)用名稱和包名保持一致。

4.3 集成SDK

在項(xiàng)目AppScope/resouces目錄下創(chuàng)建rawfile文件夾，將4.1小節(jié)下載的“agconnect-services.json”拷貝到rawfile目錄下。

官方示例中提供的是基于Java版本，而筆者基于ArkTS語(yǔ)言的應(yīng)用程序，那么引入的依賴文件是什么呢？打開華為提供的DevEco Marketpalce資源倉(cāng)，點(diǎn)擊“應(yīng)用及服務(wù)組件”，輸入“auth”進(jìn)行查找。

agconnect-auth-component是一個(gè)自定義arkui組件，可以直接引入相對(duì)簡(jiǎn)陋，此處筆者選擇agconnect-auth，其可以根據(jù)自己的需求來(lái)構(gòu)建頁(yè)面，當(dāng)然agconnect-auth-component中關(guān)于組件封裝可以詳細(xì)閱讀一下，能夠幫助你進(jìn)一步學(xué)習(xí)組件的封裝。

打開終端定位到OhAGCAuth/entry目錄，輸入npm install --save @ohos/agconnect-auth或者直接在entry目錄下的package.json文件中引入。

5 郵箱登錄認(rèn)證

5.1 構(gòu)建登錄頁(yè)面

頁(yè)面元素：

• 郵箱地址輸入框(TextInput)
• 驗(yàn)證碼獲取按鈕(Button)
• 驗(yàn)證碼輸入框(TextInput)
• 登錄按鈕(Button)
• 登錄信息回顯(Text)

5.2 引入AGC認(rèn)證服務(wù)組件

// OhAGCAuth/entry/entryability/EntryAbility.ts
import agconnect from '@ohos/agconnect-api';
import '@ohos/agconnect-core'
import '@ohos/agconnect-auth'

5.3 初始化SDK并配置apikey及clientSecret，并將auth對(duì)象保存為全局變量

• apikey為AGC管理中心項(xiàng)目設(shè)置常規(guī)頁(yè)簽下項(xiàng)目參數(shù)中API密鑰(憑據(jù))；
• clientSecret為為AGC管理中心項(xiàng)目設(shè)置常規(guī)頁(yè)簽下項(xiàng)目參數(shù)中客戶端ID項(xiàng)Client Secret。

export default class EntryAbility extends Ability {
    onCreate(want, launchParam) {
        hilog.isLoggable(0x0000, 'testTag', hilog.LogLevel.INFO);
        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
        hilog.info(0x0000, 'testTag', '%{public}s', 'want param:' + JSON.stringify(want) ?? '');
        hilog.info(0x0000, 'testTag', '%{public}s', 'launchParam:' + JSON.stringify(launchParam) ?? '');
        
        agconnect.instance().init(this.context);
        agconnect.instance().setApiKey(apikey);
        agconnect.instance().setClientSecret(clientSecret);
        globalThis.auth = agconnect.auth();
        
    }
  
  ...
}

AGC認(rèn)證服務(wù)需要網(wǎng)絡(luò)請(qǐng)求權(quán)限，在entry/modules.json5中添加網(wǎng)絡(luò)權(quán)限。

{
  "module": {
    ...
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

5.4 完善功能

1. 在Index.ets文件中導(dǎo)入郵箱認(rèn)證需要的包

import {
  AGConnectAuth,
  VerifyCodeAction,
  VerifyCodeSettingBuilder,
  EmailAuthProvider } from '@ohos/agconnect-auth';
import { Logger } from '@ohos/agconnect-base';

2. 接受全局auth對(duì)象。

// 接受auth對(duì)象
let auth: AGConnectAuth = globalThis.auth;

3. 實(shí)現(xiàn)點(diǎn)擊“獲取驗(yàn)證碼”發(fā)送驗(yàn)證碼能力，需要調(diào)用requestEmailVerifyCode()方法

Button('獲取驗(yàn)證碼')
  .width('40%').height(48)
  .fontSize(16)
  .onClick(() => {
    // 申請(qǐng)郵箱驗(yàn)證碼配置參數(shù)
    let verifyCodeSettings = new VerifyCodeSettingBuilder()
      .setAction(VerifyCodeAction.REGISTER_LOGIN)
      .setLang('zh_CN')
      .setSendInterval(60)
      .build();
    // 發(fā)送請(qǐng)求獲取郵箱驗(yàn)證碼
    auth.requestEmailVerifyCode(this.email, verifyCodeSettings).then(res => {
      Logger.info(TAG, "請(qǐng)求郵箱驗(yàn)證碼成功！result: " + JSON.stringify(res));
      this.result = "請(qǐng)求郵箱驗(yàn)證碼成功！result: " + JSON.stringify(res);
    }).catch(err => {
      Logger.error(TAG, "請(qǐng)求郵箱驗(yàn)證碼失??！error: " + JSON.stringify(err));
      this.result = "請(qǐng)求郵箱驗(yàn)證碼失?。rror: " + JSON.stringify(err);
    })
  })

4. 最后一步，將驗(yàn)證碼輸入后點(diǎn)擊登錄，調(diào)用``方法構(gòu)建登錄用戶credential憑證，并調(diào)用signIn()方法進(jìn)行登錄。

Button('登錄')
  .width('50%')
  .height(64)
  .fontSize(20)
  .backgroundColor(0x025684)
  .onClick(() => {
    // 通過(guò)郵箱和驗(yàn)證碼獲取憑證
    let credential = EmailAuthProvider.credentialWithVerifyCode(this.email, this.verifyCode);
    // 登錄接口，通過(guò)第三方認(rèn)證來(lái)登錄AGConnect平臺(tái)
    auth.signIn(credential).then(res => {
      Logger.info(TAG, "登錄成功！result: " + JSON.stringify(res));
      this.result = "登錄成功！result: " + res.getUser().getUid();
    }).catch(err => {
      Logger.error(TAG, "登錄失?。rror: " + JSON.stringify(err));
      this.result = "登錄失??！error: " + JSON.stringify(err);
    })
  })

6 打包測(cè)試及效果演示

1. 使用DevEco Studio一鍵配置簽名
2. 連接DAYU200(OpenHarmony v3.2Beta3)

審核編輯 黃昊宇