uniapp小程序新版授权登录
1.授权按钮:
<view>
<button class='login-btn' type='primary' @click="bindGetUserInfo"> 授权登录 </button>
</view>
2.事件方法:
<script>
export default {
data() {
return { nickName: null, //昵称
avatarUrl: null, //头像
isCanUse: uni.getStorageSync('isCanUse') || true, //默认为true
userInfo: {},
canIUse: uni.canIUse('button.open-type.getUserInfo'),
canIGetUserProfile: false,
detail: {},
openid: null,
gender: null,
city: null,
province: null,
country: null,
session_key: null,
unionid: null, }
},
onLoad() { //默认加载
var _this = this;
//console.log(uni.getUserProfile);
if (uni.getUserProfile) {
this.canIGetUserProfile = true;
}
// console.log(this.canIGetUserProfile)
//判断若是版本不支持新版则采用旧版登录方式
//查看是否授权
if (!this.canIGetUserProfile) {
uni.getSetting({
success: function(res) {
if (res.authSetting['scope.userInfo']) {
uni.getUserInfo({
provider: 'weixin',
success: function(res) {
// console.log(res);
_this.userInfo = res.userInfo;
try {
uni.setStorageSync('isCanUse', false);
_this.login();
} catch (e) {}
},
fail(res) {}
});
} else {
// 用户没有授权
console.log('用户还没有授权');
}
}
});
} },
methods: {
//第一次授权
bindGetUserInfo(e) {
var _this = this;
if (this.canIGetUserProfile) {
//新版登录方式
uni.getUserProfile({
desc: '登录',
success: (res) => {
_this.userInfo = res.userInfo;
try {
_this.login();
} catch (e) {}
},
fail: (res) => {
console.log('用户还没有授权');
}
});
} else {
if (e.detail.userInfo) {
_this.userInfo = e.detail.userInfo;
try {
_this.login();
} catch (e) {}
} else {
console.log('用户拒绝了授权');
//用户按了拒绝按钮
}
}
},
//登录
login() {
let _this = this;
// 获取登录用户code
uni.getProvider({
service: 'oauth',
success: function(res) {
if (~res.provider.indexOf('weixin')) {
uni.login({
provider: 'weixin',
success: function(res) {
// console.log(res);
if (res.code) {
let code = res.code;
uni.request({
url: 'https://api.wyzdjg.top/userinfo',
data: {
code: code,
},
method: 'GET',
header: {
'content-type': 'application/json'
},
success: (res2) => {
console.log(res2);
console.log(123)
_this.detail = res2.data.data;
_this.updateUserInfo();
uni.hideLoading();
}
});
//将用户登录code传递到后台置换用户SessionKey、OpenId等信息
//...写用code置换SessionKey、OpenId的接口
//置换成功调用登录方法_this.updateUserInfo();
} else {
uni.showToast({
title: '登录失败!',
duration: 2000
});
}
},
});
} else {
uni.showToast({
title: '请先安装微信或升级版本',
icon: "none"
});
}
}
//
});
},
//向后台更新信息
updateUserInfo() {
let _this = this;
// console.log(_this);
uni.request({
url: 'https://api.wyzdjg.top/updateinfo', //服务器端地址
data: {
openid: _this.detail.openid,
nickname: _this.userInfo.nickName,
avatarUrl: _this.userInfo.avatarUrl,
gender: _this.userInfo.gender,
city: _this.userInfo.city,
province: _this.userInfo.province,
country: _this.userInfo.country,
session_key: _this.detail.session_key,
unionid: _this.detail.unionid,
},
method: 'POST',
header: {
'content-type': 'application/json'
},
success: (res) => {
console.log(res)
if (res.data.code == 200) {
uni.reLaunch({ //信息更新成功后跳转到小程序首页
// url: '/pages/index/index'
});
}
} });
}
}, }
</script>
uniapp小程序新版授权登录的更多相关文章
- WebAPI 微信小程序的授权登录以及实现
这个星期最开始 ,老大扔了2个任务过来,这个是其中之一.下面直接说步骤: 1. 查阅微信开发文档 https://developers.weixin.qq.com/miniprogram/dev/ ...
- 微信小程序第三方授权登录
登录流程时序图: 1.调用uni.getProvider()获取服务供应商,参数service确定是选择对应的什么操作,此处选择授权登录oauth 代码如下: 2.调用登录接口uni.login(), ...
- 使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统
在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验 ...
- 微信小程序+php 授权登陆,完整代码
先上图 实现流程: 1.授权登陆按钮和正文信息放到了同一个页面,未授权的时候显示登陆按钮,已授权的时候隐藏登陆按钮,显示正文信息,当然也可以授权和正文分开成两个页面,在授权页面的onlo ...
- 微信小程序拒绝授权后提示信息以及重新授权
wx.authorize({ scope: 'scope.writePhotosAlbum', success() { // 授权成功 wx.saveImageToPhotosAlbum({ file ...
- 微信小程序实现与登录
一.小程序的实现原理 在小程序中,渲染层和逻辑层是分开的,双线程同时运行,渲染层和逻辑层这两个通信主体之间的通讯以及通讯主体与第三方服务器之间的通信,都是通过微信客户端进行转发.小程序启动运行两种情况 ...
- 微信小程序API~检查登录状态
wx.checkSession(Object object) 检查登录态是否过期. 通过 wx.login 接口获得的用户登录态拥有一定的时效性.用户越久未使用小程序,用户登录态越有可能失效.反之如果 ...
- Authing新功能——小程序扫码登录
近期,Authing 发布了新功能--小程序扫码登录. 小程序扫码登录指使用Authing小程序身份管家在网页端或其它客户端执行微信登录,目前的SDK仅支持客户端JavaScript.其它语言若想使用 ...
- PHP实现支付宝小程序用户授权的工具类
背景 最近项目需要上线支付宝小程序,同时需要走用户的授权流程完成用户信息的存储,以前做过微信小程序的开发,本以为实现授权的过程是很简单的事情,但是再实现的过程中还是遇到了不少的坑,因此记录一下实现的过 ...
随机推荐
- 使用node.js如何简单快速的搭建一个websocket聊天应用
初始化项目 npm init 安装nodejs-websocket npm install nodejs-websocket 创建并编辑启动文件 创建一个名为app.js文件,并且编辑它. var w ...
- orcal恢复delete误删除的数据
orcal的删除有3种:delete.truncate.drop. delete可以手动提交和回滚,且可以使用where:而truncate.drop执行即对表数据进行了修改,且不能使用where. ...
- ms10_002 IE浏览器漏洞
一.环境说明 kali linux 靶机:xp 二.ms10_002漏洞利用 msf5 exploit(windows/smb/ms08_067_netapi) > search ms10_00 ...
- leetcode二叉树题目总结
leetcode二叉树题目总结 题目链接:https://leetcode-cn.com/leetbook/detail/data-structure-binary-tree/ 前序遍历(NLR) p ...
- Json多层级动态结构数据解析
一.工具 (1)GSON Google Gson是一个简单的基于Java的库,用于将Java对象序列化为JSON,反之亦然. 它是由Google开发的一个开源库. 以下几点说明为什么应该使用这个库 - ...
- gnet: 一个轻量级且高性能的 Go 网络框架 使用笔记
一个偶然的机会接触到了golang,被它的高并发传说所吸引,就开始学这门语言,越学感觉越有意思^_^ 注册了博客园这么多年,第一次写东西,年纪大了,脑子不好使了,就得写下来,记下来,为了自己以后查阅, ...
- JDBC: ThreadLocal 类
1.ThreadLocal ThreadLocal用于保存某个线程共享变量.在Java中,每个线程对象都有一个ThreadLocal<ThreadLocal,Object>,其中key就是 ...
- day01 Java_JVM,JCR,JDK
精华笔记: java开发环境: 编译运行过程: 编译期:.java源文件,经过编译,生成.class字节码文件 运行期:JVM加载.class并运行.class(0和1) 特点:跨平台.一次编程到处使 ...
- Note -「因数的欧拉函数求和」
归档. 试证明:\(\sum \limits _{d | x} \varphi (d) = x\) Lemma 1. 试证明:\(\sum \limits _{d | p^k} \varphi (d) ...
- gdb调试器在windows下的相关内容
1.gdb调试器在visual studio或dev c++中也有类似的调试图形化可视界面,但是gdb不同的是它是由命令行组成,他的界面对于习惯图形化可视界面的用户来说一时间会不知所措 2.通过gcc ...