微信小程序前段+java后端实现登陆功能（未完成）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

先说说小程序的原理

小程序登陆时获取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文件：（没什么东西，就是绑定了一个按钮）

<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

<text class="userinfo-nickname">{{userInfo.nickName}}</text>

</block>

</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();

   }

}