HMS Account Kit with Provider Pattern in Flutter
Hello everyone,
In this article, we will develop a login screen with Huawei’s account kit. We will be using the provider pattern which is one of the most preferred patterns in Flutter. In the end, our demo application will look like below.
HMS Account Kit
Apps with HUAWEI Account Kit allow users to sign in using their HUAWEI IDs with just a tap. By integrating, you can attract new users, by leveraging the enormous HUAWEI ID user base. Account Kit complies with international standards and protocols such as OAuth2.0 and OpenID Connect. It supports two-factor authentication(password authentication and mobile number authentication) to ensure high security. For a detailed explanation please refer to the documentation.
Provider Pattern
Provider pattern is a simple app state management. The idea behind it is that you have a central store or data container in the app which is called provider. Once you added your provider, so this data container to a widget, all child widgets of that widget can listen to that provider. It contains some data and notifies observers when a change occurs.
Provider pattern gives us an easy, low boiler-plate way to separate business logic from our widgets in apps. In the demo application, we are going to have a provider that is called LoginProvider and we will have all the required methods over there. From the other widgets in the app, we will be able to reach the methods and data of it.
Integration Preparations
First of all, you need to register as a HUAWEI developer and verify your identity. Please refer to the link for details. After that, you need to integrate the HUAWEI HMS Core into your application.
Software Requirements
- Android Studio 3.X or later
- JDK 1.8 or later
- SDK Platform 19 or later
- Gradle 4.6 or later
The integration flow will be like this :
For a detailed HMS core integration process you can either refer to Preparations for Integrating HUAWEI HMS Core or check the link below :
Please make sure that you have enabled the Account Kit in Manage APIs section on AppGallery Connect.
Implementation
On your Flutter project directory, open pubspec.yaml file and add the dependencies for Account kit and Provider package. In order to show toast messages on user login and logout actions, I have also added fluttertoast package as well.
dependencies:
flutter:
sdk: flutter
huawei_account: ^5.0.0+300
provider: ^4.3.2+2
fluttertoast: ^7.1.1Login Provider
In Login provider, we have all the required methods to manage Account actions like sign in, sign out, silent sign in, and revoke authorization. It gives us the flexibility to use any of these methods wherever we desire in the application.
Login Screen
On the login screen page, we are going to try if we can sign in silently first. If the revoke authorization method was not called, then the app will sign in silently and will not ask for user permissions. So that the application’s login screen will be skipped and the profile page will appear on the screen. If the user clicked the button that is called signout, then we call both sign-out and revoke authorization methods of the Account kit in our use case here. As a result, the user will be redirected to the login screen.
Profile Screen
On the profile screen page, we are taking advantage of the provider pattern. We reach out to the data related to the user and the methods that are required to sign out through the login provider.
You can find the source code of the demo app here.
In this article, we have developed a sample application of the HUAWEI Account Kit with Provider pattern in Flutter. I hope this article makes it easier for you to integrate Account Kit into your Flutter projects.
