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实现支付宝小程序用户授权的工具类
背景 最近项目需要上线支付宝小程序,同时需要走用户的授权流程完成用户信息的存储,以前做过微信小程序的开发,本以为实现授权的过程是很简单的事情,但是再实现的过程中还是遇到了不少的坑,因此记录一下实现的过 ...
随机推荐
- Vuex的各个模块封装
一.各个模块的作用: state 用来数据共享数据存储 mutation 用来注册改变数据状态(同步) getters 用来对共享数据进行过滤并计数操作 action 解决异步改变共享数据(异步) 二 ...
- nginx 出现An error occurred错误
原因是我nginx中conf文件的配置里面 location中的 这一块内容是 #注释的那两行 所以报错出现这个错误. 后来将这两行注释掉,改成这两个就好了. root html; index ind ...
- 数组基础篇(对应C++ Primer plus 4.10)
概要:数组是由一组同类型的元素组成的集合,在内存上是一片连续的存储空间.C++提供了三种数组的表示方法:普通数组,模板类vector(C++98 新增的标准模板库STL提供该模板类)和模板类array ...
- Day02 HTML语法
有两种类型的标签 双标记<标记名>内容</标记名> 单标记<标记名/> 属性: 对标签的描述--属性,由属性名和属性值组成 <标记名 属性名 = " ...
- 基于InsightFace的高精度人脸识别,可直接对标虹软
一.InsightFace简介 InsightFace 是一个 2D/3D 人脸分析项目.InsightFace 的代码是在 MIT 许可下发布的. 对于 acadmic 和商业用途没有限制. 包含注 ...
- Java 技术栈中间件优雅停机方案设计与实现全景图
欢迎关注公众号:bin的技术小屋,阅读公众号原文 本系列 Netty 源码解析文章基于 4.1.56.Final 版本 本文概要 在上篇文章 我为 Netty 贡献源码 | 且看 Netty 如何应对 ...
- Unity3D学习笔记9——加载纹理
目录 1. 概述 2. 详论 2.1. Resources方式 2.2. API方式 2.3. Web方式 1. 概述 理论上,Unity中加载纹理并没有什么难度,只需要将图片放置在Assets文件夹 ...
- 「Python实用秘技09」更好用的函数运算缓存
本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第9期 ...
- 一些JS库汇总
作者:wlove 链接:https://www.zhihu.com/question/429436558/answer/2348777302 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权, ...
- ASP.NET Core 6框架揭秘实例演示[29]:搭建文件服务器
通过HTTP请求获取的Web资源很多都来源于存储在服务器磁盘上的静态文件.对于ASP.NET应用来说,如果将静态文件存储到约定的目录下,绝大部分文件类型都是可以通过Web的形式对外发布的." ...