How to integrate Account kit in Quick App - Huawei Developers

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.
{
"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"
}
2. Click Add project.
3. Click Add app in General information tab and set Data storage location.
Note: App Id is very important.
4.Enable Account kit in Manage APIs.
5. Sign in to Huawei Developer using developer id, then click Console.
6. Select Huawei ID in App services page.
7. Now generate certificate in the Quick App IDE(Tools-> Certificate)
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.
9. Find the app from the list of app in which the Huawei ID service will be configured, then click Update.
10. Add the certificate and click Submit.
Now let us come to coding.
Add the service.account in manifest.json file
Import the service account in script.
Code:
import account from '@service.account'
Code:
<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
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

---

What is the best advantage of Quick app compare to other like ionic, ReactNative