Huawei Account Kit Basics Tutorial: How to integrate into your Android app easily?
If you want to publish an app on Huawei AppGallery, like most other developers, you would need to use Account Kit to easily and securely sign your users in. Huawei’s Account Kit lets you just do that and now I will tell you the steps you should follow to easily integrate it into your app, so that you do not have to lose time going over documentation and other links.
First of all, there are a few requirements to this. As per the documentation, below requirements must be met to use Account Kit.
Hardware Requirements
- A computer (desktop or laptop) that runs the Windows 10 operating system
- A HUAWEI mobile phone with HMS Core (APK) 4.0.0.300 or later, to be used for demo project running and service debugging.
Software Requirements
- Android Studio 3.X
- JDK 1.8 and later
- SDK Platform 26 and later
- Gradle 4.6 and later
Secondly, you should integrate Huawei HMS Core to your app. Details are listed here, in the official documentation. From now on, I will assume that you have readided your application and ready to go with necessary devices attached for running.
We can start now!
As default, Android Studio creates an application with MainActivity and its layout. In this tutorial, we will use MainActivity.java and an additional LoginActivity to manage the logging in process. So, now let”s create LoginActivity.
Go to your Android project folder (usually on the left)and right click to app. Select “New -> Activity -> Empty Activity” and then call your new activity ‘LoginActivity’. Do not touch others and finish the process since we do not want it to be launcher activity and we want a layout file to be created.
I do not use LoginActivity as launcher activity and do the necessary checks in MainActivity. I will talk about this later.
Implementing Huawei Sign In Icon and LoginActivity Layout File
First, we should arrange the layout file. Since this is just a tutorial app, I will only add a sign in button and implement OnClick for it. You can always add additional materials as per your needs. For the button, Huawei expects you to comply with Icon Specification Guidelines, listed here in official documentation. You can arrange this button however you feel comfortable but I will choose the most flexible way to add an image/button from an external resource. I will use VectorDrawables and will not use xhdpi, xxhdpi etc. because it is harder to implement and VectorDrawables are much flexible to use. They also can adapt to different screen resolutions easily.
Here is how you do it. Click here and download the SVG files provided by Huawei. Then again go to “app” directory in your project folder, right click and do New -> Vector Asset. Choose your downloaded preferred Huawei Sign In Icon .svg file and load. This will add the button design to your drawable folder. Then, create a button and set the background as this drawable file and give a title of “Sign In with HUAWEI ID”. Your button is ready to go. Complying with specified standards while designing this button is on your responsibility. I place my button to the center of the screen and do the padding accordingly, for the sake of simplicity.
Coding for LoginActivity
Now let’s code a bit. Retrieve this button by its ID (you can use findViewById, ButterKnife or relatively newly introduced Binding method) and set an onClickListener. I use binding method and do this in onCreate.
Here, HuaweiIdAuthParams mHuaweiIdAuthParams; is a publicly defined parameter for all activity. After settings Params and instantiating service, startActivityForResult method will return its result in onActivityResult. Check the request code and if that is your result, process it. You can obtain the authorization result, if necessary for your own requirements. Simply uncomment the code below. It should look like this:
A side note is that REQUEST_SIGN_IN_LOGIN used here is “final static int REQUEST_SIGN_IN_LOGIN = 1000;” for my case. You can use another code if you want.
LoginActivity ends here for now. Now we should head back to MainActivity to configure necessary checks and directions.
Implementing MainActivity and its layout file
Our MainActivity is our launcher activity which means that when users launch our application they will first see the MainActivity. Any other activities and fragments etc. will be seen by our (developers’) directions from here. Thus, we must check in MainActivity, that whether a user is already logged in or is logged out, so that we can direct him/her to necessary activity. If the user is logged in, which we will be checking by using silentSignIn, the normal MainActivity functionality will follow. If not, then we should take necessary precaution to prevent the user from seeing our MainActivity; i.e. we should direct the user to LoginActivity so that s/he can sign in to start using our application.
We will do a silent login in MainActivity’s onStart(). I think it is a better practice because, as mentioned earlier, the user should not see the MainActivity if s/he is not logged in and before the activity starts, onStart() is executed. This is also beneficial to keep the onCreate() more relaxed, so that one can focus his/her own work inside onCreate(). It should look like this: (service here is a public parameter, defined like this: HuaweiIdAuthService service;)
After handling user sign in with Huawei’s silentSignIn method, now it is time to implement signOut functionality. SignOut uses the service defined by SignIn functionality. Thus, there is no need to instantiate another service.
After coding as shown above, users are able to sign out and they will be directed to LoginActivity after successful signOut. They will be notified through Toast message too.
One final thing before finishing all is to override the behaviour of back button. I will not get into much details as this is supposed to be a quick and simple startup with Huawei Account Kit, but, for example, after signing in, if the user clicks back button Android would lead him back to LoginActivity from MainActivity. This is an unwanted behaviour since the user is already logged in and would not want to get back to LoginActivity and probably want to exit the app if clicks back button in MainActivity. Thus, what I do is to override back button behaviour, using onBackPressed() method of Android activity.
This can be achieved easily with an additional funtionality. Here, I also add ‘double click to exit’ functionality to enhance the user experience and to prevent unwanted exits from the app. It also refreshes the back button press every 2 seconds so that there will be no arbitrary exits after forgetting to have already pressed once. Just copy and paste this code to both MainActivity and to LoginActivity.
This is the end of my tutorial to quickly and easily integrate HMS Account Kit to your application. After signing out and removing the application from recent apps, re-opening the app may lead to automatic sign-in of a user. I am not sure what causes this and could not find a fix but since it is a user-friendly feature, I will not touch any part of my code. If you are disturbed by this, you should look for fixes. (and even share it with me in the comments)
Any problem/question/suggestion comes up to your mind, please do not hesitate to share it with me. You can also ask your questions in Huawei forums. Find it here.
I will try to get back to you asap. Do not forget to clap if you have benefitted from this. :)
