HarmonyOS应用开发JSAPI—js获取华为账号登录

前置：
Api：6

语言：js开发

添加编译依赖参考地址：

文档中心

需要权限：

ohos.permission.INTERNET

开始：
1.创建项目：

2.示例代码

test.hml

<div class="container">
<!--    顶部导航-标题--><div class="header-router"><div class="header-box"><text class="header-box-back" onclick="back"><span>＜返回</span></text></div></div><div class="login-box"><image class="user-img" src="{{ userImg }}"></image><text class="user-name" onclick="goGetUserNumber"><span>{{ userName }}</span></text></div><text class="btnText" onclick="getNumber"><span>一键授权华为账号登录</span></text><div class="changeDiv"><input type="checkbox" checked="{{ isCheck }}" onchange="changeBtn"></input><text class="privacy"><span>我已阅读并同意</span></text><text class="privacy" onclick="goPrivacyContent"><span style="color: dodgerblue;">《用户隐私协议》</span></text></div>
</div>

test.css

import '../../common/css/header-router.css';
.container {flex-direction: column;justify-content: flex-start;align-items: center;width: 100%;
}
.login-box{flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 50%;background-color: dodgerblue;
}
.user-img{width: 120px;height: 120px;border-radius: 60px;object-fit: cover;
/*    border: 1px;*/background-color: #eee;
}.user-name{margin-top: 10px;width: 150px;font-size: 20px;color: #fff;text-align: center;max-lines: 1;text-overflow: ellipsis;
}
.btnText{width: 240px;height:40px;text-align: center;color: #fff;font-size: 20px;background-color: dodgerblue;border-radius: 4px;margin-top: 30px;
}
.btnText:active{background-color: #999;
}
.changeDiv{flex-direction: row;align-items: center;justify-content: center;
}
.privacy{font-size: 16px;color: #333;text-decoration: underline;
}

test.js

import prompt from '@system.prompt';
import router from '@system.router';
import { HuaweiIdAuthParamsHelper, HuaweiIdAuthManager } from '@hmscore/hms-jsb-account';export default {data: {isLogin: false,//是否登录userImg: "common/images/userH.png",userName: "......",signInResult: null,isCheck: false, //是否勾选协议//        timer:null,},onShow() {},//获取用户华为账号getNumber() {let that = this;let signInOption = new HuaweiIdAuthParamsHelper().setId().setProfile().setAuthorizationCode().build();let num = 4;let btnT = this.isCheck;if (btnT == true) {// HuaweiIdAuthManager.getAuthApi方法返回huaweiIdAuth对象，在huaweiIdAuth对象中调用huaweiIdAuth.getSignInIntent方法HuaweiIdAuthManager.getAuthApi().getSignInIntent(signInOption).then((result) => {// 登录成功，获取用户的华为帐号信息
console.log("授权登录成功")console.info("signIn success");console.info(JSON.stringify(result));console.info("昵称: " + result.data);console.info("头像: " + result.status);prompt.showToast({message: "授权登录中...", duration: 2000});let setTime = setInterval(() => {num--;if (num == 2) {prompt.showToast({message: "登陆成功", duration: 2000});that.userName = result.datathat.userImg = result.statusthat.isLogin = true}if (num == 0) {router.replace({uri: "pages/index/index",params: {userImg: that.userImg,userName: that.userName,isLogin: that.isLogin}});clearInterval(setTime);}}, 1000);}).catch((error) => {// 登录失败
console.error("signIn fail");console.error(JSON.stringify(error));prompt.showToast({message: "授权登录中...", duration: 2000});let setTime = setInterval(() => {num--;if (num == 2) {prompt.showToast({message: "授权登录失败：" + error, duration: 8000,});}if(num == 0){clearInterval(setTime);}}, 1000);});} else {prompt.showToast({message: "请勾选用户隐私协议"})console.log("请先勾选用户隐私协议")}},//监听是否勾选隐私声明changeBtn(e) {this.isCheck = !this.isCheckif (this.isCheck) {console.log("已勾选阅读")} else {console.log("未勾选阅读")}},//跳转用户隐私协议goPrivacyContent(){},//返回上一个pageback() {router.back();}
}

3.效果如图：（用的previewer，所以肯定报错哈，要用有账号的真机测试哈）

4.代码地址

HarmonyOSAPP开发相关组件: 深圳市蛟龙腾飞网络科技有限公司 - Gitee.com

HarmonyOS应用开发JSAPI—js获取华为账号登录相关推荐

HarmonyOS应用开发JSAPI—js获取相册权限调用相册图片
前置: Api:8 语言:js开发需要权限: ohos.permission.READ_USER_STORAGE ohos.permission.WRITE_USER_STORAGE 开始: 1.创 ...
【AGC】通过AGC认证服务在Android平台实现华为账号登录功能
简介 AppGallery Connect认证服务提供了云侧服务和SDK,可以帮助开发者为应用快速构建安全可靠的用户认证系统,以便应用可以对用户进行身份认证.AppGallery Connect认证服 ...
Android项目中集成华为账号登录、支付
最近项目中集成了华为账号登录与支付的功能,把踩过的坑和过程记录下来. 先看下支付效果图: 支付价格0.01请忽略,因为这是为了测试用的. 刚开始接到这个项目的时候我很奇怪,为什么要集成华为支付呢,原有 ...
华为账号登录的手游如何在雷电(MuMu等)模拟器上登录游戏（以三国杀为例）
自己使用的是华为手机 ,通过华为应用市场下载了三国杀,后来想在电脑上使用模拟器玩三国杀,下载下来发现没有华为账号登录的途径,后来在模拟器上下载了华为应用市场解决了.方法如下: 1.下载模拟器. 2.下 ...
HTML5+CSS3实现华为账号登录
一.前言对于华为账号登录是自学时做的一个作品,想要学习的小伙伴,可以借鉴的,下面我会展示效果图和部分代码.这个页面相对的简单,页面元素较少,对于初学者可以自己尝试一下! (注:此次做了华为的一系列网 ...
JS实现华为账号授权服务，一键登录！
0.效果 1.集成HMS服务 1.1 新建项目工程新建项目所设定的包名就是后面在AGC创建项目所用到的包名 1.2 添加依赖 1.2.1 项目级build.gradle dependencies { ...
HarmonyOS报名选择应用,HarmonyOS应用开发系列课，华为内部官方培训来袭！
距离HarmonyOS 2.0发布已有一个月,广大开发者学习热情高涨,为助力开发者能够运用HarmonyOS顺利开应用,华为开发者学院正式推出"HarmonyOS应用开发系列课", ...
华为游戏中心登录无法连接服务器,如何电脑登陆华为账号登录不了游戏
我是用华为帐号自动登录游戏为什么直接输入华为帐号确登不上? 根据你的描述,建议你: 1.可能你手机或者电脑运行问题.可重新启动手机胡或者电脑. 2.可能是内存不够接收不到新的信息.可用软件清理一下垃圾 ...
前端开发：JS获取当前日期方法
在前端开发过程中,有时候会需要获取当前时间和已知时间做对比的需求,也有单纯的获取当前时间然后传给后台,还有各种需要把获取到的当前时间转化成特定的时间格式传给后台,这虽然不是一个复杂的操作,但是不同的产 ...

HarmonyOS应用开发JSAPI—js获取华为账号登录

HarmonyOS应用开发JSAPI—js获取华为账号登录相关推荐

最新文章

热门文章