JS实现华为账号授权服务，一键登录！

0.效果

1.集成HMS服务

1.1 新建项目工程

新建项目所设定的包名就是后面在AGC创建项目所用到的包名

1.2 添加依赖

1.2.1 项目级build.gradle

 dependencies {/*工程自带*/classpath 'com.huawei.ohos:hap:3.0.5.11'classpath 'com.huawei.ohos:decctest:1.2.7.9'classpath 'com.huawei.ohos:hap:2.4.4.2'/*要添加的项目： 添加agconnect服务依赖*/ classpath 'com.huawei.agconnect:agcp-harmony:1.0.0.300'}

1.2.2 应用级build.gradle

添加

apply plugin: 'com.huawei.agconnect'
dependencies {implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])testImplementation 'junit:junit:4.13.1'ohosTestImplementation 'com.huawei.ohos.testkit:runner:2.0.0.200'/*要添加的项目内容*/implementation 'com.huawei.hms:jsb-ohos-adapter:5.3.0.303'implementation 'com.huawei.agconnect:agconnect-core-harmony:1.0.0.300'
}

1.3 下载HMS CORE SDK

利用命令行窗口进入到项目工程的entry目录下
输入以下命令进行安装

npm install @hw-hmscore/hms-js-base
npm install @hmscore/hms-jsb-account

1.4 在AGC控制台创建项目

AGC控制台

创建项目，注意包名一致，并且创建应用，进入项目界面，找到应用信息栏。
SHA256证书指纹
这里我们采用的是自动签名方式，打开工程项目进行自动签名。
点击第一行最右侧的指纹按键可以获得SHA246证书指纹
补充证书指纹
进入到刚刚创建好的项目界面，找到应用信息的位置，补充证书指纹。

同时记录这里的Client ID（绿色框）

1.5 配置config.json

1.5.1 module节点

在module节点下增加以下内容，这里的ClientID就是不久前记录下的应用的ClientID。

 "metaData": {"customizeData": [{"name": "com.huawei.hms.client.appid",//value的值就是前文获得到的ClientID"value": "106712139"}]},

1.5.2 补充deviceConfig

"deviceConfig": {"default": {"allowComponentsProxy": true}},

1.5.3 添加权限

这里的权限不是集成HMS服务必备的，方便后续的案例实现。

"reqPermissions": [{"name": "ohos.permission.GET_WIFI_INFO"},{"name": "ohos.permission.GET_NETWORK_INFO"},{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.SET_NETWORK_INFO"},{"name": "ohos.permission.LOCATION"},{"name": "ohos.permission.LOCATION_IN_BACKGROUND"},{"name": "ohos.permission.READ_MEDIA"}]

1.6 初始化

在MainApplication中添加如下代码

package com.yzj.account;import com.huawei.hms.jsb.adapter.har.bridge.HmsBridge;
import ohos.aafwk.ability.AbilityPackage;public class MyApplication extends AbilityPackage {private HmsBridge mHmsBridge;@Overridepublic void onInitialize() {mHmsBridge = HmsBridge.getInstance();mHmsBridge.initBridge(this);super.onInitialize();}@Overridepublic void onEnd() {// 结束JSBmHmsBridge.destoryBridge();super.onEnd();}
}

重新编译工程项目，至此，HMS账号认证服务以及集成完毕。

2. 编写案例

2.1 界面

华为账号服务提供了几个重要的功能，账号授权，退出账号，取消授权。
这里简单设置一个头像框，昵称，以及三个按键。

2.2 CSS and HML

.container {display: flex;flex-direction: column;justify-content: center;align-items: center;left: 0px;top: 0px;width: 100%;height: 100%;background-color: #fff2f2f2;
}.title {font-size: 40px;text-align: center;width: 100%;height: 40%;margin: 10px;
}@media screen and (device-type: tablet) and (orientation: landscape) {.title {font-size: 100px;}
}
@media screen and (device-type: wearable) {.title {font-size: 28px;color: #FFFFFF;}
}
@media screen and (device-type: tv) {.container {background-image: url("/common/images/Wallpaper.png");background-size: cover;background-repeat: no-repeat;background-position: center;}.title {font-size: 100px;color: #FFFFFF;}
}
@media screen and (device-type: phone) and (orientation: landscape) {.title {font-size: 60px;}
}
.account{background-image: url('common/btn_hw+text_singin_light_normal.png');background-repeat: no-repeat;background-size: 100%;
}

<div class="container"><image id="header" shareid="img"  style="width: 100px;height: 100px;border-radius: 50px ;background-color: aqua;"></image><text style="font-size: 32px;">{{name}}</text><text style="font-size: 32px;">姓氏: {{fname}}</text><text style="font-size: 32px;">名字:{{rname}}</text><text style="font-size: 32px;">邮箱: {{mail}}</text><button class="account" style="width: 60%;height: 7%;margin-top: 20px;" onclick="signin"></button><button onclick="logout"type="capsule" style="width: 60%;height: 5%;margin-top: 20px">退出登录</button><button onclick="cancelauthorization"type="capsule" style="width: 60%;height: 5%;margin-top: 20px">取消授权</button></div>

2.3 JS侧

2.3.1 账号授权登录

result中有以下方法，注意到这里能够返回头像的下载链接，我们将其下载下来。

getDisplayName()	获取用户昵称。
getEmail()	获取用户的邮箱地址。
getGivenName()	获取用户的名字。
getFamilyName()	获取用户的姓氏。
getAvatarUri()	获取用户头像的URI地址

 signin(){var signInOption = new HuaweiIdAuthParamsHelper().setId().setProfile().setAuthorizationCode().build();HuaweiIdAuthManager.getAuthApi().getSignInIntent(signInOption).then((result)=>{// 登录成功，获取用户的华为帐号信息console.info(this.TAG+"登录成功");console.info(this.TAG+JSON.stringify(result));console.info(this.TAG+"账号名称: " + result.getDisplayName());console.info(this.TAG+"头像: " + result.getAvatarUri());console.info(this.TAG+"姓"+result.getFamilyName());console.info(this.TAG+"名字"+result.getGivenName());console.info(this.TAG+"邮箱:"+result.getEmail());this.name=result.getDisplayName();this.fname=result.getFamilyName();this.rname=result.getGivenName()this.mail=JSON.stringify(result.getEmail());this.download(result.getAvatarUri());}).catch((error)=>{// 登录失败console.error(this.TAG+"登录失败");console.error(this.TAG+JSON.stringify(error));});},

2.3.2 下载头像

路径下载到应用沙盒中，由于文件管理API暂未完全开放，还不能够直接将下载的头像设置进来，暂且用来判断是否获取成功。

   download(add){let downloadTask;request.download({ url: add ,filepath:"/data/data/com.yzj.account/files/head.jpg"}).then((data) => {downloadTask = data;console.info(this.TAG+"正在下载"+JSON.stringify(data))}).catch((err) => {console.error('Failed to request the download. Cause: ' + JSON.stringify(err));})},

2.3.3 退出登录

logout(){HuaweiIdAuthManager.getAuthApi().signOut().then((result)=>{//帐号退出成功console.info(this.TAG+"退出成功");console.info(this.TAG+JSON.stringify(result));}).catch((error) => {//帐号退出失败console.error(this.TAG+"退出失败");console.error(this.TAG+JSON.stringify(error));});},

2.3.4 取消授权

    cancelauthorization(){HuaweiIdAuthManager.getAuthApi().cancelAuthorization().then((result)=>{// 帐号取消授权成功console.info(this.TAG+"取消授权成功");console.info(this.TAG+JSON.stringify(result));}).catch((error) => {// 帐号取消授权失败console.error(this.TAG+"取消授权失败");console.error(this.TAG+JSON.stringify(error));});},

3.测试

3.1 账号授权

可以看到，账号名称，姓名，头像等信息均已获取到。

3.2 退出登录

退出成功

3.3 取消授权

4. 结语

账号授权，便于在实际开发中提供便捷的登录方式。碍于目前API功能未完全开放，否则可以直接生成账号界面。期待HarmonyOS3.0的到来。

JS实现华为账号授权服务，一键登录！相关推荐

HarmonyOS应用开发JSAPI—js获取华为账号登录
前置: Api:6 语言:js开发添加编译依赖参考地址: 文档中心需要权限: ohos.permission.INTERNET 开始: 1.创建项目: 2.示例代码 test.hml <di ...
第二十九课如何实现MetaMask签名授权后DAPP一键登录功能？
1, 摘要网站太多,各种用户名/密码实在记不住.所以我们逐渐接受了BAT账号的授权登录功能.在以太坊DAPP应用中,也可以使用MetaMask实现授权后一键登录功能.MetaMask是去中心化钱包, ...
rs多个设备同时传输_华为账号真的能同时登陆多个设备吗？华为官方的介绍来了...
在KAIOS花开正盛的5月,华为自主研制系统鸿蒙也出现在媒体视线中,下面内容是华为官方给出的HMSCORE具体介绍,当用户开始体验一个移动应用时,复杂的注册流程经常令用户半途而废,然而熟悉用户的身份进 ...
使用华为云服务一键构建部署发布前端和Node.js服务
如何使用华为云服务一键构建部署发布前端和Node.js服务构建部署,一直是一个很繁琐的过程作为开发,最害怕遇到版本发布,特别是前.后端一起上线发布,项目又特别多的时候例如你有10个项目,前后端都 ...
【华为账号服务】【FAQ】Account Kit常见咨询合集--登录相关问题
1.开发者有自己的帐号管理,是否可以接入华为帐号? 可以,很多应用都有三方帐号登录功能,这是个很常见的场景. 2.是否有办法在不下载HMS Core(APK)的情况下,实现华为帐号授权登录? 在没有H ...
选择华为账号第三方登录，让你无法拒绝的3个理由
什么是第三方登录第三方登录是基于OAUTH协议向应用提供除用户名和密码等信息以外的用户ID授权:应用接入第三方平台的Open API,让用户快速完成登录:用户无需注册新的帐号即可在应用拥有唯一ID并 ...
华为账号服务内容讲解
华为账号服务内容讲解 1.业务简介华为帐号服务(HUAWEI Account Kit)为您提供了简单.安全的登录授权功能,方便用户快捷登录.用户不必输入帐号.密码和繁琐验证,就可以通过"华 ...
cloud华为云服务登录(华为云服务平台登录入口)
想从荣耀6换到华为荣耀7,华为云服务需要重新登录吗?会自动同步吗? 有两种方法,其一是使用华为的一个APP叫手机克隆,一键迁移手机的所有数据,而且IOS和EMUI系统的手机也是无缝连接,其二是登陆华为 ...
干货|JustAuth三方账号授权登录免费搭建全流程
三方登录的方式想必大家都很熟悉,基本健全的网页都会整几个入口,比如日常的微信.QQ,金融的支付宝,音视频的抖音.快手,码农领域的Github.Gitee等. 作为功能测试,我们就随机取一个简单的三方授 ...