Huawei認証サービスをFlutterに統合する方法

最近、HuaweiのAGC認証サービスがFlutterフレームワークをサポートしていることが発見されました。このプラットフォームのサポートを長い間楽しみにしていたので、このプラットフォームにアクセスしてメールアカウントを関連付けるのが待ちきれません。

統合手順

Flutter環境をインストールするa）Flutter sdkパッケージをダウンロードします。アドレス：https：//flutter.dev/docs/get-started/install/windows

ここに画像の説明を挿入
圧縮されたパッケージをD：\ Flutterなどの任意のフォルダーに解凍します

b）flutterコマンドファイルを環境変数に追加します。ここで追加したパスはD：\ Flutter \ flutter_windows_1.22.2-stable \ flutter \ binです。

c）Android Studioで[ファイル-設定-プラグイン]をクリックし、FlutterおよびDartプラグインをダウンロードし、AndroidStudioを再起動してプラグインを有効にします。

ここに画像の説明を挿入

サービスを開き、プロジェクトを作成する

a）AGCでAndroidアプリケーションを作成し、認証サービスをアクティブ化します

b）認証サービスで匿名アカウント、携帯電話アカウント、および電子メールアカウントを開きます

ここに画像の説明を挿入

c）AndroidStudioで新しい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でAppGalleryConnectプラグインアドレスを構成します。

ここに画像の説明を挿入

コンパイルの依存関係と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

次に、[公開]をクリックして同期します

ここに画像の説明を挿入

アクセス機能
匿名アカウントのログイン
匿名アカウントは、signInAnonymouslyインターフェイスを呼び出すだけでログインできます

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

値を通じて、ユーザー情報を取得できます。たとえば、ここではユーザー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));
 }

最後はログイン機能です。2つのログインモードがあります。1つはパスワードログインモードです。

携帯電話のアカウントで、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}';
     });
   });
 }

もう1つは、確認コードのログイン方法です。

携帯電話アカウント：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の作成などの手順はサーバー側の手順であり、エンド側でログインするためにトークンを取得するだけで済みます。

_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と同じです。クリックするだけで、AndroidStudioで実行できます。

詳細については、以下を参照してください。

認証サービス開発ガイド：

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

認証サービスコードラボ（Android）：

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

元のリンク：https://developer.huawei.com/consumer/cn/forum/topic/0201436847294530241?fid=0101271690375130218

著者：メイズム

Huawei認証サービスをFlutterに統合する方法

統合手順

おすすめ