Delimiting Huawei Account Kit Featuring React Native
HUAWEI Account Kit offers very simple, quick, and secure sign-in and authorization functionalities. Read on!
Join the DZone community and get the full member experience.Join For Free
HUAWEI Account Kit offers very simple, quick, and secure sign-in and authorization functionalities which help developers to implement hassle-free and quick sign-in functionalities for applications.
HUAWEI Account Kit offers services on different parameters as
- Quick and Standard
- Massive user base and global services
- Secure, reliable, and compliant with international standards
- Quick sign-in to apps
1. Must have a Huawei Developer Account
2. Must have a Huawei phone with HMS 220.127.116.110 or later
3. React Native environment with Android Studio, Node Js, and Visual Studio code.
1. React to Native CLI: 2.0.1
2. Gradle Version: 6.0.1
3. Gradle Plugin Version: 3.5.2
4. React Native Account Kit SDK: 18.104.22.1680
5. React-native-hms-account kit Gradle dependency
6. AGCP Gradle dependency
1. Create an app or project in the Huawei app gallery connect, click My apps, as shown below.
1.0 Click on New app.
2. Provide the SHA Key and App Package name of the project in the App Information Section and enable the required API.
2.0 Add the below information to create a new app and project
2.1 Once the app is created, navigate to My projects
2.2 Click on the created project
2.3 Enable the AccountKit API
2.4 Put SHA signature generated using Android Studio
2.5 Download the agconnect-services.json services file and paste it under the App folder of the project.
3. Create a react native project, use the below command:
init project name”
4. Download the React Native Account Kit SDK and paste it under the Node Modules directory of the React Native project.
1. Run the below command under the project directory using CLI if you cannot find node modules.
“npm install” & “npm link”
1. Configure android level build.gradle
Add to buildscript/repositories and allprojects/repositories
2. Configure app level build.gradle. (Add to dependencies)
Implementation project (“:react-
3. Linking the HMS Account Kit SDK.
Run the below command in the project directory
Add below permissions to the Android.manifest file.
Once SDK is integrated and ready to use, add the following code to your App.js file which will import the API’s present.
- Import the SDK
- Silent Sign In
- On Cancel Authorization
- On Adding Authorization Scopes
- Retrieve SMS Verification Code
Import the SDK
Add the below line of code in the app.js file
Silent Sign In
With silent sign in, the users can sign in without using their login credentials for consecutive sign-ins. To silent sign in, invoke the silentSignIn method of the HMSAccount module. The promise is resolved if the silent sign-in is successful, is rejected otherwise.
Add the below code on the “SILENT SIGN IN” button click
On Cancel Authorization
Canceling authorization is intended to increase security by forcing the users to use login credentials while signing in. To cancel the authorization, invoke the cancel Authorization method of the HMSAccount module. The promise is resolved if the silent sign-in is successful, is rejected otherwise.
Add the below code on the “ONCANCELAUTHORIZATION” button click.
On Adding Authorization Scopes
Auth Manager class is responsible for creating the authorization scopes to build the data.
Add the below code on the “ONADDAUTHSCOPES” button click.
Retrieve SMS Verification Code
Read SMS manager is a service to listen to verification code SMS events. To start read SMS manager, invoke the startReadSMSManager method of the module.
Run the below command to build the project
After a successful build, run the below command in the android directory of the project to create the signed apk.
Adding Account kit functions seem easy.
Opinions expressed by DZone contributors are their own.