How Can I Integrate Auth Service of AppGallery Connect in Flutter? - Huawei Developers

Recently, it is found that some services of AppGallery Connect start to support Flutter. Let’s have a try on Auth Service with an email address.If you want to quickly experience this service, see the demo on GitHub.
Integration Procedure
1. Install the Flutter environment.
a) Download the Flutter SDK package from https://flutter.dev/docs/get-started/install/windows.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Decompress the package to any directory, for example, D:\Flutter.
b) Add the Flutter command file as an environment variable. Here, the path is D:\Flutter\flutter_windows_1.22.2-stable\flutter\bin.
c) In Android Studio, go to File > Settings > Plugins, download the Flutter and Dart plug-ins, and restart Android Studio for the plug-ins to take effect.
2. Create a project and enable Auth Service.
a) Create an Android app and enable Auth Service for it in AppGallery Connect.
b) Enable the mobile number, email address, and anonymous account as the authentication modes.
c) In Android Studio, create a Flutter project.
d) Add the agconnect-services.json file to the android/app directory.
e) Configure the Maven repository address and AppGallery Connect plug-in address.
a. Open the build.gradle file in the android directory of the Flutter project.
b. Go to allprojects > repositories and configure the Maven repository address.
c. Go to buildscript > repositories and configure the Maven repository address.
d. Go to buildscript > dependencies and configure the AppGallery Connect plug-in address.
1. Add build dependencies and the AppGallery Connect plug-in address.
a. Open the build.gradle file in the android/app directory of the Flutter project.
b. Add the following content to the file.
3. Integrate the AppGallery Connect SDK.
Add the dependency to the pubspec.yaml file of the Flutter project.
XML:
dependencies:
flutter:
sdk: flutter
# Add the following line:
agconnect_auth: ^1.1.0
Click Pub get to synchronize the data.
4. Integrate functions.
1. Anonymous account sign-in
Call the signInAnonymously API.
JavaScript:
_signIn() async {
AGCAuth.instance.signInAnonymously().then((value) {
setState(() {
_log =
‘signInAnonymously = ${value.user.uid} , ${value.user.providerId}’;
});
});
}
You can obtain user information from the returned value. In this example, the UID is returned.
2. Sign-in with a mobile number or an email address
A verification code needs to be sent.
For a mobile number, call the requestVerifyCode method, and pass the mobile number, country/region code, and settings.
JavaScript:
_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));
}
For an email address, call the requestVerifyCode method, and pass the email address and settings.
JavaScript:
_requestEmailVerifyCode(VerifyCodeAction action) {
String email = _emailController.text;
VerifyCodeSettings settings = VerifyCodeSettings(action, sendInterval: 30);
EmailAuthProvider.requestVerifyCode(email, settings)
.then((value) => print(value.validityPeriod));
}
Then, create a user.
To create a mobile phone user, call the createPhoneUser method, and pass the PhoneUser object.
JavaScript:
_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));
}
To create an email address user, call the createEmailUse method, and pass the EmailUser object.
JavaScript:
_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));
}
Then, configure the sign-in mode. If a user signs in with a password:
· For a mobile number, call the signIn method, and pass the user token generated using the mobile number.
JavaScript:
_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}';
});
});
}
· For an email address, call the signIn method, and pass the user token generated using the email address and its password.
JavaScript:
_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}';
});
});
}
If a user signs in with a verification code:
· For a mobile number, call the signIn method, and pass the user token generated using the mobile number, password, and verification code.
JavaScript:
_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}';
});
});
}
· For an email address, call the signIn method, and pass the user token generated using the email address, password, and verification code.
JavaScript:
_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. Self-owned account
You need to create a JWT and obtain the user token for a self-owned account on your server. In your app, you need to use the token for sign-in only.
JavaScript:
_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. Package the APK file.
Similar to Android, you only need to run your project in Android Studio.
For more details, please check:
Auth Service development guide:
https://developer.huawei.com/consum...Guides/agc-auth-introduction-0000001053732605
Auth Service codelab for Android:
https://developer.huawei.com/consumer/en/codelab/AuthenticationService/index.html#0
Auth Demo：https://github.com/AppGalleryConnect/agc-flutter-plugin/tree/master/agc-authservice-flutter