Conversation about Integration of Account Kit in Flutter. - Huawei Developers

View attachment 5208391​
In this article, you guys can read how I had conversation with my girlfriend about Account kit integration in the Flutter.
Rita: Hey, Happy morning.
Me: Happy morning.
Rita: I heard that Huawei supports Account kit in flutter. Does it really support? Do you have any idea about it?
Me: Yes it supports. I’ve idea about account kit in flutter.
Rita: That’s great, can you explain me?
Me: Why not definitely.
Me: But what exactly you want to know about account kit in flutter?
Rita: I have couple of question check below questions.
1. What is account kit?
2. What is the benefit of account kit?
3. How much time it takes to integrate in flutter?
4. How to integrate Huawei account kit in flutter?
Me: OMG so many questions. I should rename your name to Question bank instead of your name. But fine I’ll answer all your questions. Let me answer one by one.
Rita: Okay.
Me: Here is your answer for first question.
What is account kit?
To answer this question let me give introduction about account kit.
Introduction
Huawei Account Kit is a development kit and account service developed by Huawei. Easy to integrate Sign In-based functions into your applications. It save user’s long authorization period and also two factor authorization user information is very safe. Flutter account kit plugin allows users to connect with Huawei Ecosystem using Huawei IDs. It supports both mobiles and tablets. User can sign any application from Huawei account.
Rita: Awesome introduction (@Reader its self-compliment. If you have any questions/compliments/comments about account kit in flutter. I’m expecting it in comments section.)
Me: I hope now you got answer for what is account kit?
Rita: Yes, I got it.
Me: Let’s move to next question
What is the benefit of account kit?
Me: Before answering this question, let me ask you one question. How do you sign up for application?
Rita: Traditional way.
Me: Traditional way means?
Rita: I’ll ask user information in the application.
Me: Okay, let me explain you one scenario, if you are referring same thing let me know.
Rita: Fine
Me: Being a developer, what we usually do is we collect user information in sign up screen manually. User first name, last name, email id, mobile number, profile picture etc. These are the basic information required to create account. Let me share you one screen.
{
"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"
}
Me: This is how you ask for sign up right?
Rita: Exactly you are right, I’m referring same things.
Me: See in this traditional way user has to enter everything manually it is very time consuming. You know nowadays users are very specific about time. User needs everything in one click for that, being a developer we need to fulfill user requirement. So Huawei built a Flutter plugin for account kit to overcome the above situation.
Me: Now you got the problem right?
Rita: Yes.
Me: So, to avoid above situation you can sign up using Huawei account kit and get user information in one click more over user information is safe.
Me: I hope I have answered your question what is the benefit of account kit?
Rita: Yes
Me: Now let me explain about features of Account Kit.
Features of Account kit
1. Sign in
2. Silent sign in
3. Sign out
4. Revoke authorization.
Me: Now let’s move to next question.
How much time it takes to integrate in flutter?
Me: this is very simple question it hardly takes 10 minutes.
Rita: Oh is it? It means Integration will be very easy.
Me: Yes, you are clever.
Rita: ha ha ha. I’m not clever Huawei made it very easy, I just guessed it.
Me: Okay, are you getting bored?
Rita: No, why?
Me: If you are bored, I just wanted to crack a joke.
Rita: Joke? That’s too from you? No buddy because I’ll get confuse where to laugh and you know sometimes I don’t even get you have finished your joke.
Me: Everybody says the same thing.
Rita: Then imagine, how bad you in joke.
Me: Okay Okay, lets come back to concept (In angry).
Rita: Don’t get angry man I’m in mood of learning not in mood of listening joke.
Me: Okay, let’s move to next question.
How to integrate Huawei account kit in flutter?
To answer your question follow the steps.
Step 1: Register as a Huawei Developer. If you have already a Huawei developer account ignore this step.
Step 2: Create a Flutter application in android studio or any other IDE.
Step 3: Generate Signing certificate fingerprint.
Step 4: Download Account Kit Flutter package and decompress it.
Step 5: Add dependencies pubspec.yaml. Change path according to your downloaded path.
Step 6: After adding the dependencies, click on Pub get.
Step 7: Navigate to any of the *.dart file and click on Get dependencies.
Step 8: Sign in to AppGallery Connect and select My projects.
Step 9: Click your project from the project list.
Step 10: Navigate to Project Setting > General information and click Add app.
Step 11: Navigate to Manage API and Enable Account kit.
Step 12: Download agconnect-services.json and paste in android/app folder.
Step 13: Open the build.gradle file in the android directory of your Flutter project.
Step 14: Configure the Maven repository address for the HMS Core SDK in your allprojects.
Step 15: Open the build.gradle file in the android > app directory of your Flutter project. Add apply plugin: 'com.huawei.agconnect' after other apply entries.
Step 16: Set minSdkVersion to 19 or higher in defaultConfig.
Add dependencies
implementation 'com.huawei.hms:hwid:4.0.4.300'
Step: 18: Add internet permission in the manifest.
1<uses-permission android:name="android.permission.INTERNET" />
Step 17: Build Flutter sample Application.
Rita: Thanks man. Really integration is so easy.
Me: Yeah.
Rita: Hey you did not explain more about features of Account kit.
Me: Oh, yeah I forgot to explain about it, let me explain. As you already know what are features, so let me explain one by one.
Sign In: The signIn method is used to obtain the intent of the HUAWEI ID sign-in authorization page. It takes an HmsAuthParamHelper object as a parameter which is optional. This parameter allows you to customize the sign-in request. When this method is called, an authorization page shows up. After a user successfully signs in using a HUAWEI ID, the HUAWEI ID information is obtained through the HmsAuthHuaweiId object.
Me: Add button or image in application and on tap of button use the below code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30void signInWithHuaweiAccount() async {
HmsAuthParamHelper authParamHelper = new HmsAuthParamHelper();
authParamHelper
..setIdToken()
..setAuthorizationCode()
..setAccessToken()
..setProfile()
..setEmail()
..setScopeList([HmsScope.openId, HmsScope.email, HmsScope.profile])
..setRequestCode(8888);
try {
final HmsAuthHuaweiId accountInfo =
await HmsAuthService.signIn(authParamHelper: authParamHelper);
setState(() {
var accountDetails = AccountInformation(accountInfo.displayName,
accountInfo.email, accountInfo.givenName, accountInfo.familyName, accountInfo.avatarUriString);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Homepage(
accountInformation: accountDetails,
),
));
print("account name: " + accountInfo.displayName);
});
} on Exception catch (exception) {
print(exception.toString());
print("error: " + exception.toString());
}
}
Silent Sign In: The silentSignIn method is used to obtain the HUAWEI ID that has been used to sign in to the app. In this process, the authorization page is not displayed to the HUAWEI ID user. The method takes an HmsAuthParamHelper object as a parameter which is optional, returns an HmsAuthHuaweiId object upon a successful operation.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19void silentSignInHuaweiAccount() async {
HmsAuthParamHelper authParamHelper = new HmsAuthParamHelper();
try {
final HmsAuthHuaweiId accountInfo =
await HmsAuthService.silentSignIn(authParamHelper: authParamHelper);
if (accountInfo.unionId != null) {
print("Open Id: ${accountInfo.openId}");
print("Display name: ${accountInfo.displayName}");
print("Profile DP: ${accountInfo.avatarUriString}");
print("Email Id: ${accountInfo.email}");
Validator()
.showToast("Signed in successful as ${accountInfo.displayName}");
}
} on Exception catch (exception) {
print(exception.toString());
print('Login_provider:Can not SignIn silently');
Validator().showToast("SCan not SignIn silently ${exception.toString()}");
}
}
Sign Out: The signOut method is called to sign out from a HUAWEI ID.
1
2
3
4
5
6
7
8
9
10Future signOut() async {
final signOutResult = await HmsAuthService.signOut();
if (signOutResult) {
Validator().showToast("Signed out successful");
Route route = MaterialPageRoute(builder: (context) => SignInPage());
Navigator.pushReplacement(context, route);
} else {
print('Login_provider:signOut failed');
}
}
Revoke Authorization: The revokeAuthorization method is used to cancel the authorization from the HUAWEI ID user. All user data will be removed after this method is called. On another signing-in attempt, the authorization page is displayed.
1
2
3
4
5
6
7
8Future revokeAuthorization() async {
final bool revokeResult = await HmsAuthService.revokeAuthorization();
if (revokeResult) {
Validator().showToast("Revoked Auth Successfully");
} else {
Validator().showToast('Login_provider:Failed to Revoked Auth');
}
}
Rita: Great…
Me: Thank you.
Rita: Do you have any application to see how it looks?
Me: Yes I’m building an application for taxi booking in that I have integrated account kit you see that.
Rita: Can you show how it looks?
Me: Off course. Check how it looks in result section?
Result
Sign In and Sign Out.
​
Silent Sign In.
​
Revoke authorization.
​
Rita: Looking nice!
Rita: Hey should I remember any key points in this account kit.
Me: Yes, let me give you some tips and tricks.
Tips and Tricks
Make sure you are already registered as Huawei developer.
Enable Account kit service in the App Gallery.
Make sure your HMS Core is latest version.
Make sure you added the agconnect-services.json file to android/app folder.
Make sure click on Pub get.
Make sure all the dependencies are downloaded properly.
Rita: Really, thank you so much for your explanation.
Me: I hope now you can integrate Account kit in flutter right?
Rita: Yes, I Can.
Me: Than can I conclude on this account kit?
Rita: Yes, please
Conclusion
In this chat conversation, we have learnt how to integrate Account kit in Flutter. Following topics are covered in the article.
1. What exactly Account kit is.
2. Benefits of account kit.
3. Time required to integrate.
4. Integration of account kit in the flutter.
Girlfriend: Can I get some reference link?
Me: Follow the below reference.
Reference
Account Kit official document
Account kit Flutter package
Happy coding
​