Integration of Huawei Account Kit into Ionic Application

Huawei Account Kit is mainly used for providing quick,simple and secure login functionalities to the 3rd party smart phone applications.

Introduction

Huawei Account Kit is mainly used for providing quick,simple and secure login functionalities to the 3rd party smart phone applications.

You probably notice that there are millions of mobile applications with different functions. You possibly know that you need to pass registration ,approval steps and you reluctantly hold separate email password information for each application. This can gradually cause loss of valuable time on registration ,approval steps and proliferation of tons of email password combinations. To prevent such time and complexity issues, there is a Huawei Mobile Services unit uses only one (unique) Huawei ID which created first time usage on mobile phone ,provides a quick experience by lowering the steps required for whole login process. In that manner, you can guarantee the simplicity and fastness if you integrate this unit known as Huawei Account Kit with your application.

Advantages

1. Support on many variety of device types: Device support of this kit is not limited to smartphones .It is also compatible for applications of tablets, wearables like smart watches , smart screens and head units on cars that serve a great deal of user portfolio. You can easily access applications on those devices with HUAWEI ID.
2. International scope: It helps you to be the part of global mobile application network within its App Gallery Market available on 190+ countries/regions.
3. Security: Account security support is provided in compliance with global and local security standards. Account authorization can be defined as password based or device based.

Ionic Framework

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies such as HTML, CSS, and JavaScript with integrations for popular frameworks like Angular and React.

Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Unlike a responsive framework, Ionic comes with very native-styled mobile UI elements and layouts that you should get with a native SDK on Android or iOS but didn’t really exist before on the web.

Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova or Capacitor in order to run as a native app.

Here we will use Ionic framework with Angular and Capacitor as native wrapper.

Prerequisite

1. Must have a Huawei Developer Account.
2. Must have a Huawei phone with latest HMS core installed.
3. Must install node js in the system.
4. Must install Ionic in the system using below command.

Things need to be done

1. Generating a Signing Certificate Fingerprint. For generating the SHA key, refer this article.
2. Create an app in the Huawei AppGallery connect and enable ML Kit in Manage API section.
3. Provide the SHA Key in App Information Section.
4. Provide storage location.
5. Download the agconnect-services.json and store it somewhere on our computer.
6. Create a blank Ionic Project using below command.

7. Download the Cordova Account Kit Plugin. Run the following command in the root directory of your Ionic project to install it through npm.

8. If you want full Ionic support with code completion etc., install @ionic-native/core in your project.

9. Run the following command to copy the ionic/dist/hms-account folder from library to node_modules/@ionic-native” folder under your Ionic project.

10. Run the following command to compile the project.

appName is the name of your app, and appId is package_name in your agconnect-services.json file (example: com.example.app).

11. Run the following command to add android platform to your project.

12. Make sure your project has a build.gradle file with a maven repository address and agconnect service dependencies.

13. Add the Signing certificate configuration to the build.gradle file in the app directory.

14. Add plugin to the build.gradle file in the app directory.

15. Add Huawei account kit dependencies in app-level build.gradle file.

16. Add agconnect-services.json and signing certificate jks file to the app directory in your Android project.

17. To update dependencies, and copy any web assets to your project.

Usecase

1. When app is launched, first page will have Sign in with Huawei ID button.

2. Once user sign in successfully, app will navigate to result page showing user information returned through an AuthHuaweiID object.

The signIn() method is used to sign in to apps with a HUAWEI ID securely. The signIn function of the HMSAccount module is called. In case of successful sign-in, user information will be returned through an AuthHuaweiId object. Othewise, an exception object will be returned.

1. Signing in using Authorization code

Authorization code contains a unique string and an app secret which is used for one-time use authorization on OAuth Server.

2. Signing in using Id Token

Id token is and identity information including the signature of the previously logged-in user for verification. ID Token is in JWT (JSON Web Token) format.

3. Silent Signing in with Huawei ID

Authorization is required only at the first sign-in to your app using a HUAWEI ID. The silentSignIn() method allows users to use the same HUAWEI ID without authorization for subsequent sign-ins.

4. Revoking Huawei ID Authorization.

The cancelAuthorization() method is used to revoke authorization to improve privacy security on the app.

5. Signing out from Huawei ID.

Code snippet

1. home.page.ts contains implementation for Huawei sign-in. Once user sign in successfully, app will navigate to result page (results.page.html) showing user information returned through an AuthHuaweiID object.

2. Implementation for showing user information in results.page.ts

3. To run the app.

If compiled successfully, above command will open the android studio. Click Run button from android studio toolbar to install app on device.

Tips and tricks

1. Once you have copied the “ionic/dist/hms-account” folder from library to “node_modules/@ionic-native” folder under your Ionic project. Make sure to add HmsAccount inside providers in app.module.ts

2. Huawei suggests the Authorization Code.The Reason for this is that it provides faster and more comfortable access in Authorization Code mode in a very short step when the above Access Token loses its validity every time.

Conclusion

Huawei Account Kit is such an easy and secure way to carry out authorization processes, along many other kits with powerful solutions. I think these services will keep providing a nice experience for both developers and users as they get bigger and better.

References

Huawei Account kit