上次说到了微信小程序和ECS之间完成了请求响应,那么接下来我们实现微信小程序访问后端获取Openid&session_key。
- 首先如果你只是自学微信小程序或者不涉及到发布,而不用考虑到区分用户,那么duck不必看这篇文章,因为获取Openid&session_key需要一台服务器、并且绑定好域名,之后还需要备案等操作。当然如果只是自己测试一下,那并不需要服务器,但发布以后就会有问题。
2.首先我们来理一下整个脉络,见下面两张图:
登录时序图
wx.login接口
看完这里相信你大概理解接下来我们需要做什么了,没错首先我们需要打开电脑,(逃
废话不多说,进入正题:1.我们需要在微信小程序中完成登录操作,从而获取code。 2.前端发送request请求,将code传给我们的服务器。 3.我们的服务器收到请求后,将code、appid&appsecrt传给Wechat Http API。4.官方API会将我们需要的Openid&Session_key传给我们的服务器。 5.最后我们的服务器将Openid&Session_key传给前端,也就是我们的微信小程序。
这里你可能会有疑问,为什么我们需要大费周章,将请求先发送给我们的服务器,然后再传给官方接口。首先我们需要知道2件事情,官方文档有说明,第一我们不能将Appsecret存放在前端,因为通过反编译等操作,别有用心的人会获取到Appsecret。第二我们获取到的Session_key不能在网络中传输,黑人问号?? 如果不能在网络中传输那么我们前端怎么获得Session_key,这不就是悖论了嘛。其实官方手册上的解释是,我们需要把获得的Session_key存放在我们的服务器上,而非返回给前端。
3.接下来我们来先完成一些配置吧(接上期没有讲完的完成的mysql安装):
3.1 mysql安装(我用的是xshell,前篇文章有讲,用来连上服务器执行操作):
第一步:下载mysql(这里下载的Mysql版本是5.7)
rpm -ivh http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm
第二步:安装mysql
[root@localhost ~]# yum install -y mysql-server
第三步:设置开机自动启动
systemctl enable mysqld.service
第四步:检测是否设置自启动成功
systemctl list-unit-files | grep mysqld
第五步:开启服务
systemctl start mysqld.service
第六步:查看root账户默认密码
grep 'temporary password' /var/log/mysqld.log
记下这个密码,等会我们登录修改密码需要
第七步:登录Mysql(注:Linux输入密码是不会显示字符的,输入完回车即可)
mysql -uroot -p //密码也就是第九步里面查看到的默认密码
第八步:重设密码(Mysql5.7以后是下述语句,之前版本是另一条语句)
ALTER USER 'root'@'localhost' IDENTIFIED BY'your new password';
第九步:上述第八步执行会报错,因为密码规则问题:
set global validate_password_policy=LOW;//将密码policy设置为low
第十步:再次执行第八步,设置好密码
第十一步:开启远程登录
mysql>GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'xxxxxx' WITH GRANT OPTION; //这里的xxxxx要换成你自己mysql数据库的密码
第十二步:立即生效
mysql>flush privileges;
第十三步:测试
use mysql//切到mysql数据库
select User,authentication_string,Host from user //查询
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'root用户的密码' WITH GRANT OPTION; //增加一条user&password
flush privileges //更新权限
第十四步:打开云服务器的3306端口(Mysql的默认端口)
第十五步:使用Navicat远程连接上服务器数据库(百度下载即可,不作过多介绍)
4.微信小程序逻辑代码:
onLoad: function () {
var that = this;
// 查看是否授权
wx.getSetting({
success: function (res) {
//用户授权过了
if (res.authSetting['scope.userInfo']) {
wx.switchTab({
url: '../place/place'
})
wx.getUserInfo({
success: function (res) {
wx.login({
success: res => {
console.log("用户的code:" + res.code);
if (res.code) {
wx.request({
url: 'xxxxxxxx',//写自己的服务器地址和接口
data: {
code: res.code
},
success: function (res) {
console.log("openid="+res.data.openid)
//服务器端获得是openid就是一个键值对,这里没有在服务器端处理直接
//返回前端处理,可以先在服务器端处理只返回openid也是可以的
},
fail: function () {
console.log("请求失败")
}
})
} else {
console.log('登录失败!')
}
}
});
}
});
} else {
// 用户没有授权
// 改变 isHide 的值,显示授权页面
that.setData({
isHide: true
});
}
}
});
},
5.后端代码:
package com.test.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.net.ssl.HttpsURLConnection;
import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.URL;
@Controller
public class HelloController {
@ResponseBody
@RequestMapping("/login")
public String login(String code) throws Exception{
String AppID = "xxxxxxxxxxxx";
String AppSecret="xxxxxxxxx";//这两个都可以从微信公众平台中查找
String url = "https://api.weixin.qq.com/sns/jscode2session?appid="
+ AppID + "&secret=" + AppSecret + "&js_code="
+ code + "&grant_type=authorization_code";
URL reqURL = new URL(url);
HttpsURLConnection openConnection = (HttpsURLConnection) reqURL
.openConnection();
openConnection.setConnectTimeout(10000);
//这里我感觉获取openid的时间比较长,不过也可能是我网络的问题,
//所以设置的响应时间比较长
openConnection.connect();
InputStream in = openConnection.getInputStream();
StringBuilder builder = new StringBuilder();
BufferedReader bufreader = new BufferedReader(new InputStreamReader(in));
for (String temp = bufreader.readLine(); temp != null; temp = bufreader
.readLine()) {
builder.append(temp);
}
String result = builder.toString();
in.close();
openConnection.disconnect();
return result;
}
}
6.打war包部署到tomcat的webapps下,然后来到bin目录下执行:
./startup.sh //启动tomcat
7.微信小程序端获得openid: