[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=0201346068348190148&fid=0101188387844930001

I have written series of article on Quick App. If you are new to Quick App, refer my previous articles.

Quick App set up

A Novice Journey Towards Quick App ( Part 2 )

A Novice Journey Towards Quick App ( Part 3 )

In this article, we can learn to integrate the Account kit in Quick App.

Introduction

Huawei Account kit helps to login to applications easily and quickly. Once application access account information, user do not need to enter the details like email, name, profile picture etc. It reduces the user time, once the user sign in with trusted Huawei Account kit, then no need to verify email or phone number.

Follow the steps.

1. Create project (refer Quick App Part 1)

2. Design Sign in screen

Configuration in AGC

1. Sign in in to AppGallery and select My projects.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904123702.90040004851285567608392536507324:50510916013405:2800:718BB3B06C1BDC1CA96FBB769786F277B6DC543E295BEFFACD57047BDB014A68.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904123702.90040004851285567608392536507324:50510916013405:2800:718BB3B06C1BDC1CA96FBB769786F277B6DC543E295BEFFACD57047BDB014A68.png[/IMG]

2. Click Add project.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904123801.52342127016465315180807029071710:50510916013405:2800:93FE5CDF2A8104A379E5821054B71AB8CA89F4670A28C8B29880A9A63A29C2FA.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904123801.52342127016465315180807029071710:50510916013405:2800:93FE5CDF2A8104A379E5821054B71AB8CA89F4670A28C8B29880A9A63A29C2FA.png[/IMG]

3. Click Add app in General information tab and set Data storage location.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904125247.37291214205357404568276451097145:50510916013405:2800:30A1BBB8F02317928924D1C2A911B32342A7E39FF8E24A31B53BF181243A010C.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904125247.37291214205357404568276451097145:50510916013405:2800:30A1BBB8F02317928924D1C2A911B32342A7E39FF8E24A31B53BF181243A010C.png[/IMG]

Note: App Id is very important.

4.Enable Account kit in Manage APIs.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904123945.49093154152631212258464286164893:50510916013405:2800:883DDAD14A767B15520720DD1423275251FA6CEFCFA619D718897395C7FC8014.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904123945.49093154152631212258464286164893:50510916013405:2800:883DDAD14A767B15520720DD1423275251FA6CEFCFA619D718897395C7FC8014.png[/IMG]

5. Sign in to Huawei Developer using developer id, then click Console.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124013.30068173077387408748136205427754:50510916013405:2800:7BECB5D7FA77C61933CF8D0A0428E6FC094E038D2C8870F4413E91356FDF2913.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124013.30068173077387408748136205427754:50510916013405:2800:7BECB5D7FA77C61933CF8D0A0428E6FC094E038D2C8870F4413E91356FDF2913.png[/IMG]

6. Select Huawei ID in App services page.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904125625.23037452483767967100513251195726:50510916013405:2800:1DA6BA06E4974D092D32AD907E203E7227336A35A628DA4BC02A4D768E5E7B09.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904125625.23037452483767967100513251195726:50510916013405:2800:1DA6BA06E4974D092D32AD907E203E7227336A35A628DA4BC02A4D768E5E7B09.png[/IMG]

7. Now generate certificate in the Quick App IDE(Tools-> Certificate)

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124113.65000717553779621025162135500423:50510916013405:2800:55E578E9974E0DC5107DD57B2B677DD27E20D59251E2B6E79E75B163CA6950AA.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124113.65000717553779621025162135500423:50510916013405:2800:55E578E9974E0DC5107DD57B2B677DD27E20D59251E2B6E79E75B163CA6950AA.png[/IMG]

8. Once Certificate is creation is done copy the release folder certificates to debug folder. If there is already certificates remove it and copy from release folder.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124158.85530671752945289668116741912551:50510916013405:2800:43F6126535A2899323455F13F73152BB8A96F7059569172576CDF4180AB00A91.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124158.85530671752945289668116741912551:50510916013405:2800:43F6126535A2899323455F13F73152BB8A96F7059569172576CDF4180AB00A91.png[/IMG]

9. Find the app from the list of app in which the Huawei ID service will be configured, then click Update.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124219.77477398423578854541507322413315:50510916013405:2800:270E141A1E609417AFCC048F5EE6AC84D8E37E61E9C24C3AE158AEFB156B92A4.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124219.77477398423578854541507322413315:50510916013405:2800:270E141A1E609417AFCC048F5EE6AC84D8E37E61E9C24C3AE158AEFB156B92A4.png[/IMG]

10. Add the certificate and click Submit.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124302.53551143426373590902188851954839:50510916013405:2800:32E511E30E2CD46006079645CD32DDE6603206811978312803C4908D179DCFAE.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124302.53551143426373590902188851954839:50510916013405:2800:32E511E30E2CD46006079645CD32DDE6603206811978312803C4908D179DCFAE.png[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124328.94585180949647666200947760932617:50510916013405:2800:FEEE4E614AB5255EF523F19C5955A8C7DA7AB2F51E18CCF47AD6216821445914.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124328.94585180949647666200947760932617:50510916013405:2800:FEEE4E614AB5255EF523F19C5955A8C7DA7AB2F51E18CCF47AD6216821445914.png[/IMG]

Now let us come to coding.

Add the service.account in manifest.json file

Import the service account in script.

import account from '@service.account'

<template>
<div class="container">

<div class="item-container">
<input type="button" class="btn" onclick="useAuthor" value="Login using token mode" />
</div>
<div class="item-container">
<input type="button" class="btn" onclick="getsign" value="Get Account Info" />
</div>
<div class="item-container">
<input type="button" class="btn" onclick="loginByCodeMode" value="Login using authorization code mode" />
</div>
<div class="item-container">
<input type="button" class="btn" onclick="checkUserSession" value="Check user session" />
</div>

<div class="page-title-wrap">
<text class="result" style="color: #000000;" > {{ result }}</text>
</div>
</div>
</template>

<style>

.container{
flex: 1;
flex-direction: column;
}

.page-title-wrap {
padding-top: 50px;
padding-bottom: 80px;
justify-content: center;
}
.result{
padding-top: 30px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 40px;
border-color: #bbbbbb;
color: #bbbbbb;

}

.btn {
height: 80px;
text-align: center;
border-radius: 5px;
margin-right: 40px;
margin-left: 40px;
margin-bottom: 30px;
color: #ffffff;
font-size: 30px;
background-color: #ff0f1b;
}
.item-container {
margin-top: 30px;
margin-right: 40px;
margin-left: 40px;
flex-direction: column;
}
</style>

<script>
import account from '@service.account'
import prompt from '@system.prompt'

export default {
data: {
componentName: 'account Kit',
componentData: {},
fetchData: '',
attoken: '',
accode:'',
sign: '',
result: ''
},
onInit() {
this.$page.setTitleBar({text: 'Account Kit',
textColor: '#ffffff',
backgroundColor: '#ff0f1b',
menu: false
});
this.componentData = this.$t('Account Kit');
// this.result = 'HI';
},
getsign: function () {
var that = this;
account.getProfile({
appid: "YOUR_APP_ID",
token: that.attoken,
success: function (ret) {
that.result = JSON.stringify(ret)
},
fail: function (erromsg, errocode) {
prompt.showToast({ message: 'getprofile fail --- ' + errocode + ':' + erromsg });
}
})
},
useAuthor: function () {
var that = this;
account.authorize({
appid: "YOUR_APP_ID",
type: "token",
scope: "scope.baseProfile",
state: 5,
redirectUri: "http://www.example.com/",
success: function (ret) {
that.attoken = ret.accessToken;
that.result = JSON.stringify(ret)
},
fail: function (erromsg, errocode) {
prompt.showToast({ message: 'authorize fail --- ' + errocode + ':' + erromsg });
}
})
},
// Login using Authorization Code
checkUserSession: function () {
account.checkUserSession({
success: function (data2) {
console.log('handling success profile: ' + JSON.stringify(data2));
},
fail: function (data, code) {
console.log('handling fail, code =' + code);
}
});
},
loginByCodeMode: function() {
var that = this;
account.authorize({
appid: "YOUR_APP_ID",
type: "code",
scope: "scope.baseProfile",
state:5,
redirectUri: "http://www.example.com/",
success: function (ret) {
that.atcode = ret.code;
console.log(that.componentData.result + JSON.stringify(ret));
that.result = JSON.stringify(ret)
},
fail: function (erromsg, errocode) {
prompt.showToast({ message: 'authorize fail --- ' + errocode + ':' + erromsg });
console.log({message: 'authorize fail --- ' + errocode + ':' + erromsg});

}
})
}
}
</script>

Result

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124418.68853970282388056087509364848577:50510916013405:2800:7746D1A9522FD0747C51F355DEA9E847558464722DDE1B86260D59B10C2DCED1.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124418.68853970282388056087509364848577:50510916013405:2800:7746D1A9522FD0747C51F355DEA9E847558464722DDE1B86260D59B10C2DCED1.png[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124436.49613678299958036668667360869461:50510916013405:2800:0D0BBEAA6F8BC81D97F6C886D740733E6F4AABCB1607790AB6F1FD2C03140F7E.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/768/982/2640091000001768982.20200904124436.49613678299958036668667360869461:50510916013405:2800:0D0BBEAA6F8BC81D97F6C886D740733E6F4AABCB1607790AB6F1FD2C03140F7E.png[/IMG]

Conclusion

In this article we have learnt how to integrate the Account kit in Quick App. In upcoming article, I will come up with new concept.

Reference

Account kit official document

https://developer.huawei.com/consumer/en/doc/development/quickApp-Guides/quickapp-enable-account-kit