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实现支付宝小程序用户授权的工具类
背景 最近项目需要上线支付宝小程序,同时需要走用户的授权流程完成用户信息的存储,以前做过微信小程序的开发,本以为实现授权的过程是很简单的事情,但是再实现的过程中还是遇到了不少的坑,因此记录一下实现的过 ...
随机推荐
- 《ECMAScript 6 入门》【三、字符串的扩展】(持续更新中……)
前言: 本篇介绍 ES6 对字符串的改造和增强.一.字符的 Unicode 表示法 字符的 Unicode 码点必须在\u0000~\uFFFF之间,\uxxxx形式表示一个字符,其中xxxx表示字符 ...
- 安装ImageMagick7.1库以及php的Imagick扩展
由于ImageMagick7以下不支持heic等图片格式,所以重新安装了ImageMagick7.1版本支持heic格式,并写此文章记录一下. 如果安装过程中遇到一些未知的错误,https://ima ...
- 监听 Markdown 文件并热更新 Next.js 页面
Next.js 提供了 Fast-Refresh 能力,它可以为您对 React 组件所做的编辑提供即时反馈. 但是,当你通过 Markdown 文件提供网站内容时,由于 Markdown 不是 Re ...
- ssh-基于ssh的文件传输
scp 基于ssh做Linux主机间的文件传输 scp 文件路径 用户名@被传输的主机名/IP:文件要存放的路径 scp /etc/fstab root@10.0.0.2:/t ...
- 由ASP.NET Core根据路径下载文件异常引发的探究
前言 最近在开发新的项目,使用的是ASP.NET Core6.0版本的框架.由于项目中存在文件下载功能,没有使用类似MinIO或OSS之类的分布式文件系统,而是下载本地文件,也就是根据本地文件路径进行 ...
- 在linux上配置Maven环境变量
1.首先下载maven ,这里我使用的是3.8.1 Maven – Download Apache Maven 2.在linux环境中,将maven上传至 /usr/local/目录中 这里我将mav ...
- Tapdata 实时数据融合平台解决方案(五):落地
作者介绍:TJ,唐建法,Tapdata 钛铂数据 CTO,MongoDB中文社区主席,原MongoDB大中华区首席架构师,极客时间MongoDB视频课程讲师. 通过前面几篇文章,我们从企业数据整合与分 ...
- Python: 列表、数组及迭代器切片的区别及联系
1. 对列表和数组进行切片 1.1 切片索引 众所周知,Python中的列表和numpy数组都支持用begin: end语法来表示[begin, end)区间的的切片索引: import numpy ...
- 使用APICloud AVM框架开发预约应用
前段时间跟朋友一起搞了一个预约的项目,前端用的APICloud的AVM框架做的,后端用的php开发的,用的tp5框架,没几天就搞出来了.简单跟大家分享一下开发中的一些功能点的实现吧.也欢迎大家一起探讨 ...
- 【docker专栏7】容器自启动与守护进程停止后容器保活
本文为大家介绍容器自启动以及docker 守护进程挂掉或者docker升级的情况下,如何保证容器服务的正常运行.主要包含三个部分 一.守护进程开机自启 在我们安装docker的时候,介绍过启动dock ...