[Huawei Developers] John Wo:
More information like this, you can visit HUAWEI Developer Forum​

Original link: https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201346110142010150&fid=0101187876626530001

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

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

Preparation

1. Create an app or project in the Huawei app gallery connect, click My apps, as shown below.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904133149.39089371744340909256039322507733:50510916013343:2800:FEDB58D136D588DAC9B21422982E9EE3F5D2C63EA859730256C87C2031A0AF6C.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904133149.39089371744340909256039322507733:50510916013343:2800:FEDB58D136D588DAC9B21422982E9EE3F5D2C63EA859730256C87C2031A0AF6C.png[/IMG]

1.0 Click on New app.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904133934.06374519899040719646333764220307:50510916013343:2800:6B76405ACADB2EDCFA930CE19FB1DAB80485CA90D49970BFF03235579AD683EE.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904133934.06374519899040719646333764220307:50510916013343:2800:6B76405ACADB2EDCFA930CE19FB1DAB80485CA90D49970BFF03235579AD683EE.png[/IMG]

2. Provide the SHA Key and App Package name of the project in App Information Section and enable the required API.

2.0 Add the below information to create a new app and project

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904134033.84016870532733978708582955682000:50510916013343:2800:3C38B0BE7D4527A3390DB4CE3ADA0DA02920E41CD3EAD42971C40D8028A7C08C.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904134033.84016870532733978708582955682000:50510916013343:2800:3C38B0BE7D4527A3390DB4CE3ADA0DA02920E41CD3EAD42971C40D8028A7C08C.png[/IMG]

2.1 Once app is created, navigate to My projects

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904134117.23964801324082571589957568133303:50510916013343:2800:EA1D1087D97BD85A34279D0A8D7D98A3AFE2D738968D66E790AF953136D645FD.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904134117.23964801324082571589957568133303:50510916013343:2800:EA1D1087D97BD85A34279D0A8D7D98A3AFE2D738968D66E790AF953136D645FD.png[/IMG]

2.2 Click on the created project, as shown below.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904134153.78383587492143196293312153530321:50510916013343:2800:39C229E0823B2BD06A3723452D4DD0BB332C01855E714F2DE3CAFDE4FE76FEC1.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904134153.78383587492143196293312153530321:50510916013343:2800:39C229E0823B2BD06A3723452D4DD0BB332C01855E714F2DE3CAFDE4FE76FEC1.png[/IMG]

2.3 Enable the AccountKit API

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904134759.11305513506775122078147865808154:50510916013343:2800:A48CF9077822F9A66FB6ACDC86AE445350A0A73073BB7A89545DA49815F6B1E6.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904134759.11305513506775122078147865808154:50510916013343:2800:A48CF9077822F9A66FB6ACDC86AE445350A0A73073BB7A89545DA49815F6B1E6.png[/IMG]

2.4 Put SHA signature generated using Android Studio

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904134935.78808736189335881423930463503273:50510916013343:2800:88F6D9A80E2EDDF8B65434604D1034EE16CCEB58AEC419DC7BF73D691788F9B3.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904134935.78808736189335881423930463503273:50510916013343:2800:88F6D9A80E2EDDF8B65434604D1034EE16CCEB58AEC419DC7BF73D691788F9B3.png[/IMG]

2.5 Download agconnect-services.json services file and paste it under App folder of the project.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904135304.18985511336497936914725310858894:50510916013343:2800:0C4380A8574266BC47B88FDD769DFBCAD4D268564F715052BD0391265E3AFE79.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904135304.18985511336497936914725310858894:50510916013343:2800:0C4380A8574266BC47B88FDD769DFBCAD4D268564F715052BD0391265E3AFE79.png[/IMG]

3. Create a react native project, use the below command

“react-native init project name”

4. Download the React Native Account Kit SDK and paste it under Node Modules directory of React Native project.

Tips

1. Run below command under project directory using CLI if you cannot find node modules.

“npm install” & “npm link”

Integration

1. Configure android level build.gradle

Add to buildscript/repositories and allprojects/repositories

maven {url '<a href="http://developer.huawei.com/repo/" target="_blank">http://developer.huawei.com/repo/'}</a>

2. Configure app level build.gradle. (Add to dependencies)

Implementation project (“:react-native-hms-account”)

3. Linking the HMS Account Kit Sdk.

Run below command in the project directory

react-native link react-native-hms-account

Adding permissions

Add below permissions to Android.manifest file.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

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

Silent Sign In

On Cancel Authorization

On Adding Authorization Scopes

Retrieve SMS Verification Code

Testing

Import the SDK

Add below line of code in the app.js file

import RNHMSAccount from "react-native-hms-account";

Silent Sign In

With silent sign in, the users can sign in without using their login credientials 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 below code on the “SILENT SIGN IN” button click

const onSilentSignIn = () => {
RNHMSAccount.HmsAccount.silentSignIn()
.then((response) => {
logger(JSON.stringify(response));
})
.catch((err) => {
logger(err);
});
};

On Cancel Authorization

Cancelling authorization is intended to increase security by forcing the users to use login credentials while signing in. To cancel 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 below code on the “ONCANCELAUTHORIZATION” button click.

const onCancelAuthorization = () => {
RNHMSAccount.HmsAccount.cancelAuthorization()
.then((response) => {
logger(JSON.stringify(response));
})
.catch((err) => {
logger(err);
});
};

On Adding Authorization Scopes

Auth Manager class is responsible for creating the authorization scopes to build the data.

Add below code on the “ONADDAUTHSCOPES” button click.

const onAddAuthScopes = () => {
let buildData = {
requestCode: 888,
scopes: [RNHMSAccount.HmsAccount.SCOPE_ID_TOKEN],
};
RNHMSAccount.HuaweiIdAuthManager.addAuthScopes(buildData)
.then((response) => {
logger(JSON.stringify(response));
})
.catch((err) => {
logger(err);
});
};

Retrieve SMS Verification Code

Read SMS manager is a service to listen verification code SMS events. To start read SMS manager, invoke the startReadSMSManager method of the module.

const onStartReadSMSManager = () => {
RNHMSAccount.SMSManager.startReadSMSManager()
.then((response) => {
logger(JSON.stringify(response));
})
.catch((err) => {
logger(err);
});
};

Testing

Run the below command to build the project

React-native run-android.

After successful build, run the below command in the android directory of the project to create the signed apk.

gradlew assembleRelease

Results

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904140357.51814661810997677848064649847589:50510916013343:2800:EEB8E2B028CF7CB3BEDFA4F173B8670AAF677B0B7BAF5B05A198302AE2E46ABE.gif"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/834/235/2640091000001834235.20200904140357.51814661810997677848064649847589:50510916013343:2800:EEB8E2B028CF7CB3BEDFA4F173B8670AAF677B0B7BAF5B05A198302AE2E46ABE.gif[/IMG]

References

https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides/introduction-0000001050725712

Conclusion

Adding Account kit functions seem easy.