赞
踩
为优化用户体验,使用 wx.getUserInfo 接口直接弹出受权框的开发方式将逐步再也不支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将没法弹出受权询问框,默认调用失败。正式版暂不受影响。开发者可以使用如下方式获取或展现用户信息:java
UnionID 机制说明
若是开发者拥有多个移动应用、网站应用、和公众账号(包括小程序),可经过 UnionID 来区分用户的惟一性,由于只要是同一个微信开放平台账号下的移动应用、网站应用和公众账号(包括小程序),用户的 UnionID 是惟一的。换句话说,同一用户,对同一个微信开放平台下的不一样应用,unionid是相同的。因此咱们有时候须要获取这个UnionID算法
这个图简单的能够看作三部分数据库
1.微信小程序客户端json
2.微信官方服务器小程序
3.第三方服务器(这个能够看作是本身的)后端
具体步骤以下;微信小程序
1. 客户端得到code,并将code传给第三方服务端api
微信小程序端调用wx.login,获取登陆凭证(code),并调用接口,将code发送到第三方客户端服务器
2. 第三方服务端用code换session_key和openid微信
小程序端将code传给第三方服务器端,第三方服务器端调用接口,用code换取session_key和openid
3. 第三方服务端生成新的session(3rd_session)
第三方服务器端拿到请求回来的session_key和openid,先留着,不能给客户端;而后用操做系统提供的真正随机数算法生成一个新的session,叫3rd_session
4. 第三方服务端创建对应关系,并存储
将3rd_session做为key,微信服务端返回的session_key和openid做为值,保存起来
5. 第三方服务端将3rd_session发送到客户端
客户端只拿到3rd_session就够了,大人说话小孩别插嘴,小程序不须要知道session_key和openid
6. 正常请求
小程序每次请求都将3rd_session放在请求头里,第三方服务端解析判断合法性,并进行正常的逻辑处理
好了,废话很少说了,直接上代码:
1
2
3 登陆
4
//index.js
//获取应用实例
const app = getApp()
var OPEN_ID = ''//储存获取到openid
var SESSION_KEY = ''//储存获取到session_key
var AVATARURL = ''
var NICKNAME = ''
var GENDER = ''
var PROVINCE = ''
var CITY = ''
Page({
/**
* 页面的初始数据
*/
data: {
//判断小程序的API,回调,参数,组件等是否在当前版本可用。
canIUse: wx.canIUse('button.open-type.getUserInfo'),
isHide: false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
var that = this;
var nickName ='';
var avatarUrl =''
// 查看是否受权
wx.getSetting({
success: function (res) {
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: function (res) {
// 用户已经受权过,不须要显示受权页面,因此不须要改变 isHide 的值
that.setData({
nickName:res.userInfo.nickName,
avatarUrl:res.userInfo.avatarUrl
})
}
});
} else {
// 用户没有受权
// 改变 isHide 的值,显示受权页面
that.setData({
isHide: true,
});
}
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动做
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
bindGetUserInfo: function (e) {
if (e.detail.userInfo) {
//用户按了容许受权按钮
var that = this;
// 获取到用户的信息了,打印到控制台上看下
console.log("用户的信息以下:");
console.log(e.detail.userInfo);
NICKNAME = e.detail.userInfo.nickname;
GENDER = e.detail.userInfo.gender;
PROVINCE = e.detail.userInfo.province;
CITY = e.detail.userInfo.city;
//受权成功后,经过改变 isHide 的值,让实现页面显示出来,把受权页面隐藏起来
wx.login({
success: res => {
// 获取到用户的 code 以后:res.code
console.log("用户的code:" + res.code)
// 能够传给后台,再通过解析获取用户的 openid
// 或者能够直接使用微信的提供的接口直接获取 openid ,方法以下:
wx.request({
url: 'https://api.weixin.qq.com/sns/jscode2session', //接口地址
data: {
appid: '注册的appid',
secret: '生成的sercret',
js_code: res.code,
grant_type: 'authorization_code'
},
header: {
'content-type': 'application/json' //默认值
},
success: function (res) {
console.log(res.data)
OPEN_ID = res.data.openid;//获取到的openid
SESSION_KEY = res.data.session_key;//获取到session_key
console.log(OPEN_ID)
console.log(SESSION_KEY)
//若是返回成功,则将OPEN_ID和SESSION_KEY提交请求给本地服务器
wx.request({
url: 'http://127.0.0.1:8080/wxapplogin/login.jsp',
data: {
open_id: OPEN_ID,
session_key: SESSION_KEY,
gender: GENDER,
province: PROVINCE,
city: CITY
},
header: {
'content-type': 'application/json' //默认值
},
method: 'GET'
})
}
});
}
});
that.setData({
isHide: false,
});
} else {
//用户按了拒绝按钮
wx.showModal({
title: '警告',
content: '您点击了拒绝受权,将没法进入小程序,请受权以后再进入!!!',
showCancel: false,
confirmText: '返回受权',
success: function (res) {
// 用户没有受权成功,不须要改变 isHide 的值
if (res.confirm) {
console.log('用户点击了“返回受权”');
}
}
});
}
}
})
当点击按钮以后出发getUserInfo()函数,咱们在这个函数里面定义:
经过发送临时的code请求到微信的服务器,咱们经过获取这个code再来解析用户的openid和session_key
请求地址url为:
https://api.weixin.qq.com/sns/jscode2session
appid为注册小程序时给定的,每个微信小程序的appid也是惟一的,secret也会生成
当请求成功以后会从服务器返回openid和session_key,这里也能够写成
https://api.weixin.qq.com/sns/jscode2session?appid='本身的appid'&secret='本身的密钥'
完成以后咱们来获取从服务器返回的值,若是请求成功,先打印出来,再传到本身的服务器上
OK,下面这个图是当点击按钮以后自动生成的code,在控制台答打印一下,每一次的都不同
能够从控制台看到返回的数据,下面我们再把这个数据放到本身的服务器上保留之后用
这个url是本身的服务器地址,为了方便测试,咱们先用本地主机试一下,代码后续若是所有完成,再部署到服务器
这个地方有个主意事项,若是在开发者工具控制台出现如下错误:
显示。。。不在request合法域名列表中,能够在微信公众后台添加该域名,也能够在开发者工具里面临时测验:点击不校验域名就OK了
因此若是点击index.wxml后控制台打印code并请求微信服务器,接着请求本身的服务器,就是这么个流程:
咱们后端用java接受一下:
先打印到控制台,OK了,能够啊看到值传过去了,下面能够啊将值传到数据库里面,我就不用多写了,呀呀呀,有啥问题能够随时评论留言讨论
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。