微信小程序前段+java后端实现登陆功能(未完成)
先说说小程序的原理
小程序登陆时获取code,然后将code传到后台,后台通过code换取openID,openID就是用户小程序的唯一标识符(在你的小程序里是唯一的,在其他小程序可能相同),然后通过openID获取密码实现登陆,这里可能有的小伙伴会问我了,至于为什么不在小程序前段获取呢?这样不是更方便吗?因为小程序官方规定,appid,secret不应该出现在网络传输上,目的是为了防止不法人员的抓包获取,而且,在前度获取,小程序线上发布审核不会通过,好了,小面就正式开工了,一起动手做个小程序吧
需要准备的东西:
appid:在微信公告号后台获取(开发->开发设置,如下图),如果没有注册请先注册,https://mp.weixin.qq.com/
secret:在微信公告号后台获取(开发->开发设置,如下图),如果没有注册请先注册,https://mp.weixin.qq.com/
js_code:动态验证码,微信小程运行时动态获取
grant_type:固定值,固定填入authorization_code
微信小程序代码(主要是红色部分,可以省略直接看红色部分,这里提示一下,如果访问本机的地址,一定要勾上不校验合法域名,一定要勾上,否则不成功)
wxml文件:(没什么东西,就是绑定了一个按钮)
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<button bindtap="sign">点击签到</button>
</view>
</view>
js文件
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
tip:function(){
console.log(1);
},
sign:function(){
console.log(1);
wx.login({
success: function (res) {
console.log(res.code)
var code=res.code;
wx.request({
url: 'http://127.0.0.1:8080/Sign/test.servlet', //本地服务器地址
data:{
code:code,
},
method:'GET',
header:{ 'content-type':'application/json' },
success:function(res){
console.log(res.data);
if(res.data==="Already"){ ///////////判断返回 标识,成功跳到下一个页面
wx.redirectTo({
url: '/pages/sucess/sucess', ////////////这个改成自己的,没有就做个打印算了
})
}
},
fail:function(res){ console.log("失败"); }
})
},})
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
java后台代码
@WebServlet("/test.servlet")
public class test extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public test() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=utf-8");
/*设置响应头允许ajax跨域访问*/
response.setHeader("Access-Control-Allow-Origin", "*");
/* 星号表示所有的异域请求都可以接受, */
response.setHeader("Access-Control-Allow-Methods", "GET,POST");
//获取微信小程序get的参数值并打印
String code = request.getParameter("code");
////////////////////////////////////////读取openid
String params="https://api.weixin.qq.com/sns/jscode2session?appid=wxba12d9bf63797022&secret=72ba21baa0597a051243c4c25998d0b7&"
+ "js_code="+code+"&grant_type=authorization_code";//网址;
read r= new read();
String openid=r.getopnid(params);
////////////////////////////////////////////////////写入数据库
/*这里实现查找匹配,需要自己动手写语句
*/
////////////////////////////////////////////////////////////////////这里设置成功返回什么,失败返回什么,这是返回给小程序的数据,我只写了成功的,/////失败的自己可以用if语句判定,然后返回
Writer out = response.getWriter();
out.write("yes");
out.flush();
}
}