iOS平臺 | 快速整合華為AGC認證服務

華為開發者論壇發表於2021-10-19
iOSGC

介紹

如何讓使用者根據已有的賬號來進行登入註冊呢？在應用中整合華為AGC認證服務SDK來輕鬆快速地實現這個功能。

本篇內容根據官網文件指導整合過程總結完成，關於整合步驟，官網的資料寫的有點多，現在我總結一下步驟：

1、開通華為認證服務

2、在iOS專案中整合SDK

3、設計登入註冊頁面

4、開啟認證方式

5、註冊登入功能開發

6、打包測試

開通華為認證服務

在AppGallery Connect頁面點選"我的專案"，在專案的應用列表中選擇需要開通認證的應用，導航選擇"構建 > 認證服務"。如果是首次使用認證服務，請點選"立即開通"開通服務。

整合SDK

針對Xcode開發環境，您可以通過Cocoapods整合方式將認證 SDK整合到您的Xcode開發環境中。

1. 在Xcode專案中新增當前應用的AppGallery Connect配置檔案。

  1. 登入AppGallery Connect網站，點選“我的專案”。

  2. 在專案列表中找到您的專案，在專案下的應用列表中選擇您需要整合SDK的應用。

  3. 點選“專案設定”中“應用”欄下的“agconnect-services.plist”下載配置檔案。

  4. 將“agconnect-services.plist”檔案拷貝到應用級根目錄下。

2. 建立Podfile檔案。

開啟命令列視窗，導航至Xcode專案所在的位置，建立Podfile檔案。如果已經存在，可跳過本步驟。

cd project-directory
pod init

3. 編輯Podfile檔案。

  1. 整合認證SDK

編輯Podfile檔案，增加pod依賴pod ‘'AGConnectAuth'。

target   'AGConnectAuthDemo' do
 pod 'AGConnectAuth'
 end
  1. 執行 pod install，然後開啟.xcworkspace檔案檢視該專案。

介面設計

本次Codelab中您可以在Xcode工程中建立一個佈局頁面，參照下圖進行UI設計，通過手機號、郵箱賬號進行註冊登入。

開啟認證方式

1. 登入AppGallery Connect網站，點選“我的專案”。

2. 在專案列表中找到您的專案，在專案下的應用列表中選擇您的應用。

3. 在“構建”欄下找到“ 認證服務”，在"認證方式"頁簽下“操作”一欄裡，點選啟用手機號碼、郵箱地址。

註冊登入功能開發

1. 在將故事板的控制元件關聯到ViewController中，以便您通過輸入框獲得登入註冊所需的引數。

  @IBOutlet weak var phoneText:   UITextField!//手機賬號輸入框
     @IBOutlet weak var phoneVertifyText:   UITextField!//手機驗證碼輸入框
     @IBOutlet weak var phonePassword:   UITextField!//手機賬號密碼輸入框
     @IBOutlet weak var emailText:   UITextField!//郵箱賬號輸入框
     @IBOutlet weak var emailVertifyText:   UITextField!//郵箱驗證碼輸入框
     @IBOutlet weak var emailPassword:   UITextField!//郵箱賬號密碼輸入框

2. 如果使用的是未註冊過的手機號，首先您需要傳送驗證碼到手機，來驗證是否本人註冊。輸入手機號碼，點選“傳送驗證碼”按鈕，程式碼執行到請求手機驗證碼的方法，在返回中可以看到傳送結果。

@IBAction func   phoneSendVertifyCode(_ sender: Any) {
         let setting =   AGCVerifyCodeSettings.init(action: AGCVerifyCodeAction.registerLogin, locale:   nil, sendInterval: 30)
           AGCPhoneAuthProvider.requestVerifyCode(withCountryCode:   "86", phoneNumber: phoneText.text ?? "", settings:   setting).onSuccess { (results) in
             //手機驗證碼傳送成功
         }.onFailure { (error) in
             //手機驗證碼傳送失敗
         }
     }

3. 手機收到驗證碼後，輸入驗證碼和您要設定的密碼，就可以進行註冊了。在頁面上點選“register”按鈕，執行手機號註冊的方法，註冊結果您也可以在block返回中看到。

@IBAction func register(_   sender: Any) {
           AGCAuth.instance().createUser(withCountryCode: "86",   phoneNumber: phoneText.text ?? "", password: phonePassword.text ??   "", verifyCode: phoneVertifyText.text ?? "").onSuccess {   (result) in
             //手機註冊成功
         }.onFailure { (error) in
             //手機註冊失敗
         }
     }

4. 註冊成功後，輸入您的手機號和設定的密碼，點選“login”按鈕進行登入。這樣您就完成了，使用AGConnectAuth進行手機號註冊登入的步驟。

@IBAction func login(_ sender:   Any) {
         let credential =   AGCPhoneAuthProvider.credential(withCountryCode: "86", phoneNumber:   phoneText.text ?? "", password: phonePassword.text ?? "")
         AGCAuth.instance().signIn(credential:   credential).onSuccess { (result) in
             //登入成功
         }.onFailure { (error) in
             //登入失敗
         }
     }

5. 如果使用的是未註冊過的郵箱賬號，首先需要傳送驗證碼到郵箱來驗證。輸入郵箱號碼，點選“傳送驗證碼”按鈕，程式碼執行到請求郵箱驗證碼的方法，在返回中您也可以看到傳送結果。

@IBAction func   emailSendVertifyCode(_ sender: Any) {
         let setting = AGCVerifyCodeSettings.init(action:   AGCVerifyCodeAction.registerLogin, locale: nil, sendInterval: 30)
           AGCEmailAuthProvider.requestVerifyCode(withEmail: emailText.text ??   "", settings: setting).onSuccess { (result) in
             //郵箱驗證碼傳送成功
         }.onFailure { (error) in
             //郵箱驗證碼傳送失敗
         }
     }

6. 郵箱收到驗證碼後，輸入驗證碼和您要設定的密碼，點選“register”按鈕，就可以完成註冊了。

@IBAction func register(_   sender: Any) {
           AGCAuth.instance().createUser(withEmail: emailText.text ??   "", password: emailPassword.text ?? "", verifyCode:   emailVertifyText.text ?? "").onSuccess { (result) in
             //郵箱註冊成功
         }.onFailure { (error) in
             //郵箱註冊失敗
         }
     }

7. 註冊成功後，輸入您的郵箱號和設定的密碼，點選“login”按鈕進行登入。這樣您就完成了，使用AGConnectAuth進行郵箱註冊登入的步驟。

@IBAction func login(_   sender: Any) {
         let credential =   AGCEmailAuthProvider.credential(withEmail: emailText.text ?? "",   password: emailPassword.text ?? "")
         AGCAuth.instance().signIn(credential:   credential).onSuccess { (result) in
             //登入成功
         }.onFailure { (error) in
             //登入失敗
         }
     }

8. 呼叫signOut方法，退出登入狀態。

@IBAction func logout(_   sender: Any) {
         AGCAuth.instance().signOut()
     }

打包測試

1. 在Xcode上點選執行按鈕，在手機或模擬器上執行應用。輸入手機號碼，點選“傳送驗證碼”按鈕，待手機收到驗證碼，輸入驗證碼和您要設定的密碼，點選“register”，打斷點檢視是否註冊成功，註冊成功後點選“login”。打斷點檢視返回結果，result可以看到登入成功後的使用者資訊。


2. 驗證郵箱註冊登入功能時，首先要點選“logout”按鈕退出登入狀態，否則再次登入會失敗。輸入郵箱賬號，點選“傳送驗證碼”按鈕，輸入驗證碼和您要設定的密碼，點選“register”，註冊成功後點選“login”。檢視result可以看到登入成功後的使用者資訊。


總結

認證服務整合簡單，SDK依賴體積小，可以實現跨平臺的分享，Android和iOS都可以支援，不需要在不同的平臺做不同的適配了，節約工作量。

運營做推廣可以再AGC介面上建立，開發做分享功能可以在端側用程式碼建立，簡直完美。

參考文件：

華為AGC認證服務開發文件：https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-auth-introduction-0000001053732605
更多精彩內容，請見華為開發者官方論壇→https://developer.huawei.com/consumer/cn/forum/home?ha_source=sanfang

相關文章