Coding-free Integration of AppGallery Connect Crash into an Android App - Huawei Developers

According to Huawei official document, AppGallery Connect Crash is a lightweight crash analysis service, in which Huawei provides a Crash SDK that can be quickly integrated into your app, without the need for coding. The SDK integrated into your app can automatically collect crash data and report the data to AppGallery Connect when your app crashes, helping you understand the version quality of your app, quickly locate the causes of crashes, and evaluate the impact scope of crashes.
In other words, Huawei provides an SDK. You can view the crash information of your app as long as you integrate it. No code is required. Isn't it great? Let's see how it works.
Creating Your Project and App
First, you need to create a project in AppGallery Connect and add an app to it. For details, see the AppGallery Connect documentation.
Enabling HUAWEI Analytics
The Crash service uses capabilities of HUAWEI Analytics when reporting crash events. Therefore, you must enable HUAWEI Analytics before integrating the Crash SDK. For details, please refer to the AppGallery Connect documentation.
Integrating SDKs
If you are using Android Studio, you need to integrate the Crash SDK into your Android Studio project before development.
1. Sign in to AppGallery Connect and click My projects.
2. Find the project you created from the project list, and click the app for integration on the project card.
3. Go to Project Settings > General information, and click agconnect-services.json under App information to download the configuration file.
{
"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"
}
4. Copy the agconnect-services.json file to the app's root directory of your Android Studio project.
5. Open the build.gradle file in the root directory of your Android Studio project, and configure the Maven repository address and AppGallery Connect plug-in address.
HTML:
buildscript {
repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
dependencies {
classpath 'com.android.tools.build:gradle:3.5.3'
classpath 'com.huawei.agconnect:agcp:1.4.1.300'
}
}
HTML:
allprojects {
repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}
}
6. Integrate the latest versions of the Analytics SDK and Crash SDK.
HTML:
dependencies {
implementation 'com.huawei.hms:hianalytics:5.0.4.200'
implementation 'com.huawei.agconnect:agconnect-crash:1.4.1.300'
}
7. Click Sync Now to synchronize the configuration.
Testing the Crash Service
You can create a test button CrashTest in your demo project, and call the testIt method provided by AppGallery Connect to trigger a crash.
The sample code for creating the button is as follows:
HTML:
<Button
android:id="@+id/btn0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize= "22dp"
android:textAllCaps="false"
android:text="CrashTest" />
The sample code for a tapping event is as follows:
HTML:
Button btn_crash0 = findViewById(R.id.btn0);
btn_crash0.setOnClickListener(new View.OnClickListener() {
[user=439709]@override[/user]
public void onClick(View view) {
AGConnectCrash.getInstance().testIt(MainActivity.this);
}
});
Package and run your app, and tap the CrashTest button to trigger a crash.
Viewing a Crash Report
You can view the details of the crash that you just triggered in AppGallery Connect.
1. Sign in to AppGallery Connect, go to My projects, and click your app.
2. Go to Quality > Crash. On the Crash page, click the Statistics tab, and view crash statistics of your app. The crash information is displayed 1 or 2 minutes after you run your app.
3. Click the Problems tab, and view the crash of your app. For example, in the following figure, java.lang.NullPointerException is the null pointer issue triggered during the test.
Click the crash to view its details. The possible causes of the crash are displayed, as shown in the following figure, helping you analyze the crash.
Summary:
1. It is easy to integrate the Crash service. During testing, you can either write code yourself, or use the testIt method provided by AppGallery Connect.
2. Crash reports are available in only 1 or 2 minutes.
3. All you need to write is just a few lines of code during testing. The service integration for app release is coding-free.
4. The Crash service also provides features including monitoring NDK crash reports, restoring obfuscated reports, and generating custom reports.
For more details, check:
HUAWEI AppGallery Connect Crash documentation: https://developer.huawei.com/consum...Gallery-connect-Guides/agc-crash-introduction
Huawei AGC Crash codelab:
https://developer.huawei.com/consumer/en/codelab/CrashService/index.html#0

Crash service supports to track Run time expectation data.

sujith.e said:
Crash service supports to track Run time expectation data.
Click to expand...
Click to collapse
yes, it begins to supports to track Runtime exception from 1.4.2.300 SDK version in November 20.

Related

Unleashing Effortless Authentication : Huawei Account Kit feat. React Native

More information like this, you can visit HUAWEI Developer Forum​
HUAWEI Account Kit offers very simple, quick and secure sign in and authorization functionalities which help many developers to implement hassle free and quick sign in functionalities for their 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
Development Overview
Prerequisite
1. Must have a Huawei Developer Account
2. Must have a Huawei phone with HMS 4.0.0.300 or later
3. React Native environment with Android Studio, Node Js and Visual Studio code.
Major Dependencies
1. React Native CLI : 2.0.1
2. Gradle Version: 6.0.1
3. Gradle Plugin Version: 3.5.2
4. React Native Account Kit SDK : 5.0.0.300
5. React-native-hms-account kit gradle dependency
6. AGCP gradle dependency
7. Enable Auth Services
Preparation
1. Create an app or project in the Huawei app gallery connect.
{
"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"
}
Describes the Step 1.0
Describes the Step 1.1
2. Provide the SHA Key and App Package name of the project in App Information Section and enable the required API.
Describes the Step 2.0
Describes the Step 2.1
Describes the Step 2.2
Describes the Step 2.3: Enable Account Kit Api on Manage Api page
Describes the Step 2.4: Put SHA signature generated using Android Studio
Describes the Step 2.5: Download agc services file and paste it under App folder of the project.
3. Create a react native project, use the below command
Code:
“react-native init project name”
4. Download the React Native Account Kit SDK and paste it under Node Modules directory of React Native project.
5. Enable Auth services
Describes the Step 5.1: Redirect to Auth Services and enable the required authorization service.
Describes the Step 5.2: copy the App ID and App Secret from “My Apps “ page and paste them here.
Tips
1. agconnect-services.json is not required for integrating the hms-ads-sdk.
2. Run below command under project directory using CLI if you cannot find node modules.
Code:
“npm install” & “npm link”
Integration
1. Configure android level build.gradle
Add to buildscript/repositories and allprojects/repositories
Code:
maven {url 'http://developer.huawei.com/repo/'}
2. Configure app level build.gradle. (Add to dependencies)
Code:
Implementation project (“: react-native-hms-ads”)
3. Linking the HMS Account Kit Sdk.
Run below command in the project directory
Code:
react-native link react-native-hms-account
Development Process
Once sdk is integrated and ready to use, add following code to your App.js file which will import the API’s present.
Import the SDK
Sign In
Sign Out
Testing
Import the SDK
Add below line of code in the app.js file
Code:
import RNHMSAccount from "react-native-hms-account";
Sign In
To sign in, create a signInData object and set the field values. Then invoke the signIn method of the HMSAccount module, setting the signInData object as the argument. If the sign in is successful, an AuthHuaweiId object will be returned, an exception object is returned otherwise.
Add below code on the “SIGN IN” button click
Code:
const onSignIn = () => {
let signInData = {
huaweiIdAuthParams:
RNHMSAccount.HmsAccount
.CONSTANT_HUAWEI_ID_AUTH_PARAMS_DEFAULT_AUTH_REQUEST_PARAM,
scopes: [RNHMSAccount.HmsAccount.SCOPE_ID_TOKEN],
};
RNHMSAccount.HmsAccount.signIn(signInData)
.then((response) => {
logger(JSON.stringify(response));
})
.catch((err) => {
logger(err);
});
};
Sign Out
To sign out, invoke the signOut method of the HMSAccount module. The promise is resolved if the sign in is successful, is rejected otherwise.
Add below code on the “SIGN OUT” button click.
Code:
const onSignOut = () => {
RNHMSAccount.HmsAccount.signOut()
.then((response) => {
logger(JSON.stringify(response));
})
.catch((err) => {
logger(err);
});
};
Testing
Run the below command to build the project
Code:
React-native run-android
Upon successful build, run the below command in the android directory of the project to create the signed apk.
Code:
gradlew assembleRelease
Results
References
https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides/introduction-0000001050725712
Conclusion
Adding SignIn and SignOut functionalities seems easy.
thanks. very helpful.
Useful sharing, thanks!!

Integrating Huawei Analytics Kit to Flutter Projects and Sending Events

In this article, I am going to create a Flutter project –actually a tiny game- and explain how to implement Analytics Kit. But first, let me inform you about Huawei Analytics Kit a little.
{
"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"
}
Huawei Analytics Kit
Huawei Analytics Kit offers you a range of analytics models that help you not only to analyze users’ behavior with preset and custom events, but also gain an insight into your products and contents. So that you can improve your skills about marketing your apps and optimizing your products.
HUAWEI Analytics Kit identifies users and collects statistics on users by anonymous application identifier (AAID). The AAID is reset in the following scenarios:
1) Uninstall or reinstall the app.
2) The user clears the app data.
After the AAID is reset, the user will be counted as a new user.
HUAWEI Analytics Kit supports event management. For each event, maximum 25 parameters; for each app maximum 100 parameters can be defined.
There are 3 types of events: Automatically collected, predefined and custom.
Automatically collected events are collected from the moment you enable the kit in your code. Event IDs are already reserved by HUAWEI Analytics Kit and cannot be reused.
Predefined events include their own Event IDs which are predefined by the HMS Core Analytics SDK based on common application scenarios. The ID of a custom event cannot be the same as a predefined event’s ID. If so, you will create a predefined event instead of a custom event.
Custom events are the events that you can create for your own requirements.
More info about the kit and events.
Configuration in AppGallery Connect
Firstly, you will need a Huawei developer account. If you don’t have one, click here and register. It will be activated in 1–2 days.
After signing in to AppGallery Connect, you can add a new project or select an existing project. In the project you choose, add an app. While adding app, make sure you enter the package name right. It should be the same as your Flutter project’s package name.
Also, make sure you set data storage location, enable Analytics kit and add SHA-256 fingerprint to AppGallery Connect.
How to generate SHA-256 Fingerprint?
In Android Studio, right click on android folder under your project and select Flutter > Open Android module in Android Studio.
On the right panel, select Gradle and follow the steps that are shown in the picture below. Open signingReport and there is your SHA-256 fingerprint.
Copy the code and paste it on the project settings in the AppGallery Connect.
Integrate HMS to your project
Download agconnect-services.json file and place it under project_name > android > app.
Add Signing Configuration
Create a file named key.properties under android folder and add your signing configs here.
Code:
storeFile file(‘<keystore_file>.jks’)
storePassword ‘<keystore_password>’
keyAlias ‘<key_alias>’
keyPassword ‘<key_password>’
Define your key.properties file by adding the code below, before android block in your app-level build.gradle file.
Code:
def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file(‘key.properties’)
if (keystorePropertiesFile.exists()) {
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}
TO-DOs in project-level build.gradle
Code:
buildscript {
repositories {
google()
jcenter()
maven {url 'http://developer.huawei.com/repo/'} //add this line
}
dependencies {
classpath 'com.android.tools.build:gradle:3.5.0'
classpath 'com.huawei.agconnect:agcp:1.1.1.300' //add this line
}
}
allprojects {
repositories {
google()
jcenter()
maven {url 'http://developer.huawei.com/repo/'} //add this line
}
}
TO-DOs in app-level build.gradle
Code:
defaultConfig {
...
minSdkVersion 19 //Increase this to 19
}
//Add these lines
signingConfigs {
release {
keyAlias keystoreProperties['keyAlias']
keyPassword keystoreProperties['keyPassword']
storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
storePassword keystoreProperties['storePassword']
}
}
//Edit buildTypes
buildTypes {
debug {
signingConfig signingConfigs.release
}
release {
signingConfig signingConfigs.release
}
}
//Add dependencies
dependencies {
implementation 'com.huawei.agconnect:agconnect-core:1.0.0.300'
implementation 'com.huawei.hms:hianalytics:5.0.1.300'
}
apply plugin: 'com.huawei.agconnect' //Add this line to the bottom of the page
Add Analytics Kit to your project
There are 2 ways to do this step.
1) Go to developer website and download plugin. In Android Studio create a new folder in your root directory and name it “hms”. Unzip the plugin and paste it in “hms” folder.
Then, go to pubspec.yaml and add the plugin under dependencies.
2) This way is much easier and also more familiar to Flutter developers. In pub.dev copy the plugin and add it under dependencies as usual.
For both ways, after running pub get command, the plugin is ready to use!
For more information about HMS Core integration, click.
We are all done. Let’s begin coding.
I will make a tiny and very easy game that I belive most of you know the concept: Guess the number!
As you play the game and try to guess the number, Huawei Analytics Kit will collect statistics how many times you guessed.

Coding-free Integration of AppGallery Connect Crash in Flutter

HUAWEI AppGallery Connect Crash supports multiple platforms. Here’s how you can integrate the AppGallery Connect Flutter plug-in.If you want to quickly experience this service, see the demo on GitHub.
Integration Procedure
1. Install the Flutter environment.
a) Download the Flutter SDK package from https://flutter.dev/docs/get-started/install/windows.
{
"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"
}
Decompress the package to any directory.
b) Add the Flutter command file to the environment variable.
c) Download the Flutter and Dart plug-ins in Android Studio.
2. Create a project and enable Crash.
a) In AppGallery Connect, create an Android app, add the app to a project, and enable Crash and HUAWEI Analytics for it.
b) In Android Studio, create a Flutter project.
c) Add the agconnect-services.json file to the android/app directory.
d) Configure the Maven repository address and AppGallery Connect plug-in address.
1) Open the build.gradle file in the android directory of the Flutter project.
Go to allprojects > repositories and configure the Maven repository address for the AppGallery Connect SDK.
Go to buildscript > repositories and configure the Maven repository address for the AppGallery Connect SDK.
Go to buildscript > dependencies and configure the AppGallery Connect plug-in address.
2) Add build dependencies and the AppGallery Connect plug-in address.
Open the build.gradle file in the android/app directory of the Flutter project and add the plug-in address.
3. Integrate the Crash SDK.
Add the SDK dependency of Crash to the pubspec.yaml file.
Click Pub get to synchronize the data.
After the data is synchronized, you can view the downloaded file here.
4.Test the Crash service.
You can set two buttons to determine whether to report crashes. Create another button for testing. Click the button, call setUserId to set a custom user ID, call setCustomKey to set a custom key-value pair, call LogLevel to customize the log level, and call testIt to trigger a crash.
5. Package the APK file.
Similar to Android, you only need to run your project in Android Studio.
Viewing a Crash Report
After integration, click the test button to trigger a crash and generate a custom crash report. You can view the report in AppGallery Connect.
1、 Select Last hour.
2、View details about crash stack information.
3、 View custom key-value pairs.
4、 View custom log levels.
5、 View custom user IDs.
6、Generate and upload a mapping file to de-obfuscate the crash report.
For more details, please check:
1、HUAWEI AppGallery Connect Crash documentation: https://developer.huawei.com/consum...Gallery-connect-Guides/agc-crash-introduction
2、HUAWEI AppGallery Connect Crash codelab: https://developer.huawei.com/consumer/en/codelab/CrashService/index.html#0
https://github.com/AppGalleryConnect/agc-demos/tree/main/Flutter/agc-crash-flutter

Beginner: Guideline to Integrate Huawei Mobile Services Account Kit using React Native

{
"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"
}
Introduction
In this article, we will be integrating Huawei Account Kit in an Application.
Account Kit
Account Kit: Account Kit provides you with simple, secure and quick sign-in and authorization functions. Instead of entering accounts and passwords and waiting for authentication, users can just tap the Sign in with HUAWEI ID button to quickly and securely sign in to your app with their HUAWEI IDs.
React Native
REACT Native helps you create real and exciting mobile apps with the help of JavaScript only, which is supportable for both android and iOS platforms.
Just code once, and the REACT Native apps are available for both iOS and Android platforms which helps to save development time.
React Native is a framework that builds a hierarchy of UI components to build the JavaScript code.
It uses the same fundamental UI building blocks as regular iOS and Android apps.
Requirements
Any operating system (MacOS, Linux and Windows).
Must have a Huawei phone with HMS 4.0.2.300 or later.
Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
Minimum API Level 21 is required.
Required EMUI 9.0.0 and later version devices.
Integrate HMS Dependencies
First register as Huawei developer and complete identity verification in Huawei developers website, refer to register a Huawei ID.
Create a project in android studio, refer Creating an Android Studio Project.
Generate a SHA-256 certificate fingerprint.
To generate SHA-256 certificate fingerprint. Choose View > Tool Windows > Gradle > Signingreport > SHA256 code or use cmd as explained in SHA256 CODE
Create an App in AppGallery Connect.
Download the agconnect-services.json file from App information, copy and paste in android Project under app directory, as follows.
Enter SHA-256 certificate fingerprint and click Save, as follows.
Click Manage APIs tab and enable Account Kit.
React Native Project Preparation
Environment set up, refer below link.
Setting up the development environment · React Native
This page will help you install and build your first React Native app.
reactnative.dev
Create project using below command.
Code:
react-native init project name
Download the React Native Account Kit SDK and paste it under Node Modules directory of React Native project. If you cannot find node modules run below command under project directory using CLI.
Code:
“npm install” & “npm link”
Configure android level build.gradle
Add to buildscript/repositories and allprojects/repositories
Code:
maven {url 'http://developer.huawei.com/repo/'}
Configure app level build.gradle. (Add to dependencies)
Code:
Implementation project (“:react-native-hms-account”)
Linking the HMS Account Kit Sdk.
Run below command in the project directory
Code:
react-native link react-native-hms-account
Add below permissions to Android.manifest file.
Code:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
Development
Account Kit provides APIs for normal sign-in, silent sign-in, sign-out, and authorization revoking. Create a UI in your Android Studio project. An example is shown in the following figure.
1. signIn()
Sign In securely to the application using Huawei ID.
JavaScript:
import HMSAccount, {
HMSAuthParamConstants,
HMSAuthRequestOptionConstants,
} from "react-native-hms-account";
let signInData = {
huaweiIdAuthParams: HMSAuthParamConstants.DEFAULT_AUTH_REQUEST_PARAM,
authRequestOption: [
HMSAuthRequestOptionConstants.ID_TOKEN,
HMSAuthRequestOptionConstants.EMAIL,
],
};
HMSAccount.signIn(signInData)
.then((response) => {
console.log(response);
})
.catch((err) => {
console.log(err);
});
2. signOut()
Signing out securely using the signOut() method.
JavaScript:
HMSAccount.signOut()
.then(() => {
console.log("signOut -> Success")
})
.catch((err) => {
console.log(err)
});
3. silentSignIn()
With silent sign-in, users can sign in without using their credentials for consecutive sign-ins
JavaScript:
import HMSAccount, { HMSAuthParamConstants } from "react-native-hms-account";
let silentSignInData = {
huaweiIdAuthParams: HMSAuthParamConstants.DEFAULT_AUTH_REQUEST_PARAM,
};
HMSAccount.silentSignIn(silentSignInData)
.then((response) => {
console.log(response)
})
.catch((err) => {
console.log(err)
});
4. cancelAuthorization()
Revoking authorization is intended to increase security by forcing the users to use sign-in credentials while signing in.
JavaScript:
HMSAccount.cancelAuthorization()
.then(() => {
console.log("cancelAuthorization -> Success")
})
.catch((err) => {
console.log(err)
});
5. HMSReadSMSManager
Read SMS manager is a service that listens to verification code SMS events.
JavaScript:
import { HMSReadSMSManager } from "react-native-hms-account";
HMSReadSMSManager.smsVerificationCode()
.then((response) => {
console.log(response)
})
.catch((err) => {
console.log(err)
});
Testing
Run the android App using the below command.
Code:
react-native run-android
Result
Conclusion
In this article, we have learnt that how to integrate HMS Account Kit using React Native. HMS Toolkit helps us to Connects users from a wide range of devices, including phones, tablets, and smart displays. It serves over 900 million users from 190+ countries and regions worldwide and supports 70+ Languages. It guarantees two-factor authentication, real-time risk prediction, and GDPR compliance.
Reference
Account Kit: Documentation
Account Kit: Training Video

Guideline to Integrate Huawei ID button to Sign in (Account Kit) using React Native

{
"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"
}
Introduction
In this article, I will be integrating Huawei Account Kit in a Travel application. Account Kit provides you with simple, secure and quick sign-in and authorization functions. Instead of entering accounts and passwords and waiting for authentication, users can just tap the Sign in with HUAWEI ID button to quickly and securely sign in to your app with their HUAWEI IDs.
React Native
REACT Native helps you create real and exciting mobile apps with the help of JavaScript only, which is supportable for both android and iOS platforms.
Just code once, and the REACT Native apps are available for both iOS and Android platforms which helps to save development time.
React Native is a framework that builds a hierarchy of UI components to build the JavaScript code.
It uses the same fundamental UI building blocks as regular iOS and Android apps.
Requirements
1. Any operating system (MacOS, Linux and Windows).
2. Must have a Huawei phone with HMS 4.0.2.300 or later.
3. Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
4. Minimum API Level 21 is required.
5. Required EMUI 9.0.0 and later version devices.
Integrate HMS Dependencies
1. First register as Huawei developer and complete identity verification in Huawei developers website, refer to register a Huawei ID.
2. Create a project in android studio, refer Creating an Android Studio Project.
3. Generate a SHA-256 certificate fingerprint.
4. To generate SHA-256 certificate fingerprint. Choose View > Tool Windows > Gradle > Signingreport > SHA256 code.
Or use cmd as explained in SHA256 CODE
5. Create an App in AppGallery Connect.
6. Download the agconnect-services.json file from App information, copy and paste in android Project under app directory, as follows.
7. Enter SHA-256 certificate fingerprint and click Save, as follows.
8. Click Manage APIs tab and enable Account Kit.
React Native Project Preparation
9. Environment set up, refer below link.
Setting up the development environment · React Native
This page will help you install and build your first React Native app.
reactnative.dev
10. Create project using below command.
Code:
react-native init project name
11. Download the React Native Account Kit SDK and paste it under Node Modules directory of React Native project. If you cannot find node modules run below command under project directory using CLI.
Code:
“npm install” & “npm link”
12. Configure android level build.gradle
Code:
Add to buildscript/repositories and allprojects/repositories
maven {url 'http://developer.huawei.com/repo/'}
13. Configure app level build.gradle. (Add to dependencies)
Code:
Implementation project (“:react-native-hms-account”)
14. Linking the HMS Account Kit Sdk.
Run below command in the project directory
Code:
react-native link react-native-hms-account
15. Add below permissions to Android.manifest file.
XML:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
Development
Sign in and sign out (Without Auth Button)
signIn()
Sign In securely to the application using Huawei ID.
JavaScript:
import HMSAccount, {
HMSAuthParamConstants,
HMSAuthRequestOptionConstants,
} from "react-native-hms-account";
let signInData = {
huaweiIdAuthParams: HMSAuthParamConstants.DEFAULT_AUTH_REQUEST_PARAM,
authRequestOption: [
HMSAuthRequestOptionConstants.ID_TOKEN,
HMSAuthRequestOptionConstants.EMAIL,
],
};
HMSAccount.signIn(signInData)
.then((response) => {
console.log(response);
})
.catch((err) => {
console.log(err);
});
Sign Out
JavaScript:
HMSAccount.signOut()
.then(() => {
console.log("signOut -> Success")
})
.catch((err) => {
console.log(err)
});
Sign in using HMSAuthButton
JavaScript:
import HMSAccount, { HMSAccountAuthService, HMSAuthParamConstants, HMSAuthScopeListConstants, HMSAuthRequestOptionConstants } from "@hmscore/react-native-hms-account";
signIn = () => {
let signInData = {
accountAuthParams: HMSAuthParamConstants.DEFAULT_AUTH_REQUEST_PARAM,
authRequestOption: [HMSAuthRequestOptionConstants.ID_TOKEN, HMSAuthRequestOptionConstants.ACCESS_TOKEN],
authScopeList: [HMSAuthScopeListConstants.EMAIL]
};
HMSAccountAuthService.signIn(signInData)
.then((response) => { console.log(response) })
.catch((err) => { console.log(err) });
};
...
<HMSAuthButton
style={styles.viewcontainer}
colorPolicy={
HMSAccount.HUAWEI_ID_AUTH_BUTTON_COLOR_POLICY_RED
}
enabled={true}
theme={HMSAccount.HUAWEI_ID_AUTH_BUTTON_THEME_FULL_TITLE}
cornerRadius={
HMSAccount.HUAWEI_ID_AUTH_BUTTON_CORNER_RADIUS_MEDIUM
}
onPress={signIn}
/>
Testing
Run the android App using the below command.
react-native run-android
Result
Tips and Tricks
1. Set minSDK version to 24 or later, otherwise you will get AndriodManifest merge issue.
2. Make sure you have added the agconnect-services.json file to app folder.
3. Make sure you have added SHA-256 fingerprint without fail.
4. Make sure all the dependencies are added properly.
5. For project cleaning navigate to android directory and run the below command.
gradlew clean
Conclusion
In this article, we have learnt that how to integrate HMS Account Kit using React Native. HMS Toolkit helps us to Connects users from a wide range of devices, including phones, tablets, and smart displays. It serves over 900 million users from 190+ countries and regions worldwide and supports 70+ Languages. It guarantees two-factor authentication, real-time risk prediction, and GDPR compliance.
Reference
Account Kit: Documentation
Account Kit: Training Video

Categories

Resources