詳解如何在Flutter中集成華為認證服務

最近發現華為AGC認證服務支持Flutter框架瞭,期待這個平臺的支持已經很久瞭,所以迫不及待接入瞭,關聯瞭自己的郵箱等賬號。

集成步驟

安裝flutter環境

a) 下載Flutter sdk包,地址:https://flutter.dev/docs/get-started/install/windows

在這裡插入圖片描述

將壓縮包解壓到任意文件夾,例如D:\Flutter

b) 將flutter命令文件添加到環境變量中,此處我添加的Path為D:\Flutter\flutter_windows_1.22.2-stable\flutter\bin。

c) 在Android Studio中點擊“File-Settings-Plugins”,下載Flutter和Dart插件,重啟Android Studio使插件生效。

在這裡插入圖片描述

開通服務&創建工程

a) 在AGC創建Android應用並開通認證服務

b) 開啟認證服務中的匿名帳號,手機帳號,郵箱帳號

在這裡插入圖片描述

c) 在Android Studio中新建Flutter工程

在這裡插入圖片描述

d) 將agconnect-services.json文件放入Android/app目錄下

在這裡插入圖片描述

e) 配置Maven倉地址和AGC插件地址。

a. 打開Flutter項目android文件夾下的build.gradle文件。

b. 在allprojects ->repositories裡面配置maven倉地址。

c. 在buildscript->repositories中配置maven倉地址。

d. 在buildscript->dependencies中配置AppGallery Connect插件地址。

在這裡插入圖片描述

添加編譯依賴和AGC插件地址。
a. 打開Flutter項目android/app文件夾下的build.gradle文件。
b. 在文件中添加如下配置。

在這裡插入圖片描述

集成SDK

在Flutter項目的pubspec.yaml文件中添加依賴:

dependencies:
  flutter:
  sdk: flutter
# Add the following line:
  agconnect_auth: ^1.1.0

然後點擊Pub get進行同步

在這裡插入圖片描述

接入功能

匿名帳號登錄

匿名帳號隻需要調用signInAnonymously接口進行登錄

_signIn() async {
 AGCAuth.instance.signInAnonymously().then((value) {
  setState(() {
   _log =
     'signInAnonymously = ${value.user.uid} , ${value.user.providerId}';
  });
 });
}

通過value,我們可以獲取到用戶信息,例如這裡我們獲取到瞭user的id。

手機號&郵箱認證

手機號郵箱賬號認證首先需要發送驗證碼,

手機號請求驗證碼,即調用requestVerifyCode方法,傳入手機號、國傢碼、設置項作為參數:

_requestPhoneVerifyCode(VerifyCodeAction action) {
 String countryCode = _countryCodeController.text;
 String phoneNumber = _phoneNumberController.text;
 VerifyCodeSettings settings = VerifyCodeSettings(action, sendInterval: 30);
 PhoneAuthProvider.requestVerifyCode(countryCode, phoneNumber, settings).then((value) => print(value.validityPeriod));
}

郵箱請求驗證碼,即調用requestVerifyCode方法,傳入郵箱、設置項作為參數:

_requestEmailVerifyCode(VerifyCodeAction action) {
 String email = _emailController.text;
 VerifyCodeSettings settings = VerifyCodeSettings(action, sendInterval: 30);
 EmailAuthProvider.requestVerifyCode(email, settings)
   .then((value) => print(value.validityPeriod));
}

而後是創建用戶的操作:

創建手機賬號用戶,需要調用createPhoneUser方法,傳入封裝好的PhoneUser對象

_createPhoneUser() async {
  bool result = await _showPhoneDialog(VerifyCodeAction.registerLogin);
  if (result == null) {
   print("cancel");
   return;
  }
  String countryCode = _countryCodeController.text;
  String phoneNumber = _phoneNumberController.text;
  String verifyCode = _verifyCodeController.text;
  String password = _passwordController.text;
  AGCAuth.instance.createPhoneUser(PhoneUser(countryCode, phoneNumber, verifyCode, password: password)) .then((value) {
   setState(() {
    _log = 'createPhoneUser = ${value.user.uid} , ${value.user.providerId}';
   });
  }).catchError((error)=>print(error));
 }

創建郵箱賬號用戶,需要調用createEmailUser方法,傳入封裝好的EmailUser對象。

_createEmailUser() async {
  bool result = await _showEmailDialog(VerifyCodeAction.registerLogin);
  if (result == null) {
   print("cancel");
   return;
  }
  String email = _emailController.text;
  String verifyCode = _verifyCodeController.text;
  String password = _passwordController.text;
  AGCAuth.instance
    .createEmailUser(EmailUser(email, verifyCode, password: password))
    .then((value) {
   setState(() {
    _log = 'createEmailUser = ${value.user.uid} , ${value.user.providerId}';
   });
  }).catchError((error) => print(error));
 }

最後是登錄功能,有兩種登錄模式,一種是密碼登錄方式:

手機賬號,調用signIn方法,傳入使用手機號等生成的認證憑據。

_signInWithPassword() async {
  bool result = await _showPhoneDialog(VerifyCodeAction.registerLogin);
  if (result == null) {
   print("cancel");
   return;
  }
  String countryCode = _countryCodeController.text;
  String phoneNumber = _phoneNumberController.text;
  String password = _passwordController.text;
  AGCAuthCredential credential = PhoneAuthProvider.credentialWithPassword(countryCode, phoneNumber, password);
  AGCAuth.instance.signIn(credential).then((value) {
   setState(() {
    _log = 'signInWithPassword = ${value.user.uid} , ${value.user.providerId}';
   });
  });
 }

郵箱賬號:調用signIn方法,傳入通過郵箱和密碼生成的認證憑據。

_signInWithPassword() async {
  bool result = await _showEmailDialog(VerifyCodeAction.registerLogin);
  if (result == null) {
   print("cancel");
   return;
  }
  String email = _emailController.text;
  String password = _passwordController.text;
  AGCAuthCredential credential =
    EmailAuthProvider.credentialWithPassword(email, password);
  AGCAuth.instance.signIn(credential).then((value) {
   setState(() {
    _log =
      'signInWithPassword = ${value.user.uid} , ${value.user.providerId}';
   });
  });
 }

另一種是驗證碼登錄方式:

手機賬號:調用signIn方法,傳入通過手機、驗證碼和密碼生成的認證憑據。

_signInWithVerifyCode() async {
  bool result = await _showPhoneDialog(VerifyCodeAction.registerLogin);
  if (result == null) {
   print("cancel");
   return;
  }
  String countryCode = _countryCodeController.text;
  String phoneNumber = _phoneNumberController.text;
  String verifyCode = _verifyCodeController.text;
  String password = _passwordController.text;
  AGCAuthCredential credential = PhoneAuthProvider.credentialWithVerifyCode(countryCode, phoneNumber, verifyCode, password: password);
  AGCAuth.instance.signIn(credential).then((value) {
   setState(() {
    _log = 'signInWithVerifyCode = ${value.user.uid} , ${value.user.providerId}';
   });
  });
 }

郵箱賬號:調用signIn方法,傳入通過郵箱、驗證碼和密碼生成的認證憑據。

_signInWithVerifyCode() async {
  bool result = await _showEmailDialog(VerifyCodeAction.registerLogin);
  if (result == null) {
   print("cancel");
   return;
  }
  String email = _emailController.text;
  String verifyCode = _verifyCodeController.text;
  String password = _passwordController.text;
  AGCAuthCredential credential = EmailAuthProvider.credentialWithVerifyCode(
    email, verifyCode,
    password: password);
  AGCAuth.instance.signIn(credential).then((value) {
   setState(() {
    _log =
      'signInWithVerifyCode = ${value.user.uid} , ${value.user.providerId}';
   });
  });
 }

自有賬號

自有賬號創建jwt獲取token等步驟為server端步驟,端側隻需要取到token進行登錄即可。

_signIn() async {
  bool result = await _showSelfBuildDialog(VerifyCodeAction.registerLogin);
  if (result == null) {
   print("cancel");
   return;
  }
  String token = _selfBuildController.text;
  AGCAuthCredential credential = SelfBuildAuthProvider.credentialWithToken(token);
  AGCAuth.instance.signIn(credential).then((value) {
   setState(() {
    _log = 'signIn = ${value.user.uid} , ${value.user.providerId}';
   });
  });
 }

打包

與Android相同,隻需要在Android Studio中點擊運行即可

欲瞭解更多詳情請參見:

認證服務開發指南:

https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-auth-introduction-0000001053732605

認證服務codelab(Android):

https://developer.huawei.com/consumer/cn/codelab/AuthenticationService/index.html#0

原文鏈接:https://developer.huawei.com/consumer/cn/forum/topic/0201436847294530241?fid=0101271690375130218

原作者:Mayism

到此這篇關於詳解如何在Flutter中集成華為認證服務的文章就介紹到這瞭,更多相關Flutter集成華為認證服務內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: