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实现支付宝小程序用户授权的工具类
背景 最近项目需要上线支付宝小程序,同时需要走用户的授权流程完成用户信息的存储,以前做过微信小程序的开发,本以为实现授权的过程是很简单的事情,但是再实现的过程中还是遇到了不少的坑,因此记录一下实现的过 ...
随机推荐
- opencv-python保存视频
import cv2 class WVideoManager: def __init__(self, write_path: str, width: int, height: int, FPS: in ...
- MOEAD实现、基于分解的多目标进化、 切比雪夫方法-(python完整代码)
确定某点附近的点 答:每个解对应的是一组权重,即子问题,红点附近的四个点,也就是它的邻居怎么确定呢?由权重来确定,算法初始化阶段就确定了每个权重对应的邻居,也就是每个子问题的邻居子问题.权重的邻居通过 ...
- SpringBoot启动代码和自动装配源码分析
随着互联网的快速发展,各种组件层出不穷,需要框架集成的组件越来越多.每一种组件与Spring容器整合需要实现相关代码.SpringMVC框架配置由于太过于繁琐和依赖XML文件:为了方便快速集成第三 ...
- [ 1 x 1 ] Convolution-1*1卷积的作用
一.卷积神经网络中的卷积(Convolution in a convoluted neural network) 具体内容亲参考<深度学习>. 二.1*1卷积(one by one con ...
- idea 内置tomcat jersey 跨服务器 上传文件报400错误
报错内容 com.sun.jersey.api.client.UniformInterfaceException: PUT http://.jpg returned a response status ...
- IIS部署的H5的单页面跳转的配置
<?xml version="1.0" encoding="UTF-8"?><configuration> <system.web ...
- ORM框架介绍——什么是ORM框架?
1.什么是ORM?对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.ORM框架是连接数据库的桥梁,只要提供 ...
- Mysql性能调优-工具篇
EXPLAIN 首先祭出官方文档(这是5.7的,请自行选择版本): Understanding the Query Execution Plan 英文不想看,就看这篇吧: 全网最全 | MySQL E ...
- 解气!哈工大被禁用MATLAB后,国产工业软件霸气回击
提起哈尔滨工业大学,相信很多人都不会陌生. 它是中国顶级的C9院校之一,从1920年建校的百余年来,哈工大一直享誉"工科强校"的美称,因其在航天领域的不凡成就,更是被人们誉为&qu ...
- python 读取yaml文件
简介 在实际开发过程中,我们可能需要读取一些配置文件的配置信息,例如ini.yaml.property等格式,本文将讲述怎么去获取和设置yaml文件的相关参数. 示例yaml文件 test1: tes ...