如何在Flutter中集成華爲認證服務

如何在Flutter中集成華爲認證服務

最近發現華爲AGC認證服務支持Flutter框架了，期待這個平臺的支持已經好久了，因此火燒眉毛接入了，關聯了本身的郵箱等帳號。

集成步驟

1. 安裝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使插件生效。

2. 開通服務&建立工程

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插件地址。

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

3. 集成SDK
   在Flutter項目的pubspec.yaml文件中添加依賴：

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

而後點擊Pub get進行同步

4. 接入功能
5. 匿名賬號登陸
   匿名賬號只須要調用signInAnonymously接口進行登陸

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

經過value，咱們能夠獲取到用戶信息，例如這裏咱們獲取到了user的id。

2. 手機號&郵箱認證

手機號郵箱帳號認證首先須要發送驗證碼，

手機號請求驗證碼，即調用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}';
     });
   });
 }

3. 自有帳號
   自有帳號建立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}';
     });
   });
 }

5. 打包
   與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