赞
踩
链接:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
登录成功后可以看到测试用的appid和appsecret,稍后再后台我们要用到这两个ID,如下图
紧接着需要设置网页授权(体验接口权限表 —》 网页服务 —》网页帐号 —》 网页授权获取用户基本信息)
NATAPP链接:点击注册
注册登录成功后可以看到下图,选择免费隧道
购买免费的隧道之后,可以直接按照官方的一分钟教程完成内网穿透,这样我们就拿到了我们的域名
简单来说,微信授权分为四步:
public class AuthUtil {
public static JSONObject doGetJson(String url) throws ClientProtocolException, IOException {
JSONObject jsonObject = null;
DefaultHttpClient client = new DefaultHttpClient();
HttpGet httpGet = new HttpGet(url);
HttpResponse response = client.execute(httpGet);
HttpEntity entity = response.getEntity();
if (entity != null) {
String result = EntityUtils.toString(entity, "UTF-8");
jsonObject = JSONObject.fromObject(result);
}
httpGet.releaseConnection();
return jsonObject;
}
}
/**
* Tea微信登录接口
* @throws IOException
*/
@ApiOperation(value = "微信登录接口")
@IgnoreAuth
@RequestMapping("wx_login")
public void wxLogin(HttpServletResponse response) throws IOException{
//域名(暂时写死的)
String sym = "http://c8d3v2.natappfree.cc";
//这里是回调的url
String redirect_uri = URLEncoder.encode(sym+"/front/auth/callBack", "UTF-8");
String url = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
"appid=APPID" +
"&redirect_uri=REDIRECT_URI"+
"&response_type=code" +
"&scope=SCOPE" +
"&state=123#wechat_redirect";
response.sendRedirect(url.replace("APPID",WxConstant.APPID).replace("REDIRECT_URI",redirect_uri).replace("SCOPE","snsapi_userinfo"));
}
参数 | 必须 | 说明 |
---|---|---|
appid | 是 | 公众号的唯一标识 |
redirect_uri | 是 | 授权后重定向的回调链接地址,请使用urlencode对链接进行处理 |
response_type | 是 | 返回类型,请填写code |
scope | 是 | 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息) |
state | 否 | 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节 |
#wechat_redirect | 是 | 无论直接打开还是做页面302重定向时候,必须带此参数 |
/**
* Tea微信授权成功的回调函数
*
* @param request
* @param response
* @throws ClientProtocolException
* @throws IOException
* @throws ServletException
*/
@ApiOperation(value = "微信授权回调接口")
@IgnoreAuth
@RequestMapping("/callBack")
protected void deGet(HttpServletRequest request, HttpServletResponse response)throws Exception {
//获取回调地址中的code
String code = request.getParameter("code");
//拼接url
String url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + WxConstant.APPID + "&secret="
+ WxConstant.APPSECRET + "&code=" + code + "&grant_type=authorization_code";
JSONObject jsonObject = AuthUtil.doGetJson(url);
//1.获取微信用户的openid
String openid = jsonObject.getString("openid");
//2.获取获取access_token
String access_token = jsonObject.getString("access_token");
String infoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=" + access_token + "&openid=" + openid
+ "&lang=zh_CN";
//3.获取微信用户信息
JSONObject userInfo = AuthUtil.doGetJson(infoUrl);
//至此拿到了微信用户的所有信息,剩下的就是业务逻辑处理部分了
//保存openid和access_token到session
request.getSession().setAttribute("openid", openid);
request.getSession().setAttribute("access_token", access_token);
//去数据库查询此微信是否绑定过手机
UserVo user = userService.queryByOpenId(openid);
String mobile=user==null?"":user.getMobile();
if(null == mobile || "".equals(mobile)){
//如果无手机信息,则跳转手机绑定页面
response.sendRedirect("/front/register.html");
}else{
//否则直接跳转首页
response.sendRedirect("/front/index.html");
}
}
至此,后台的代码暂时就这么多,剩下的需要前台页面了。
var vm = new Vue({
el: '#rrapp',
data: {
},
methods: {
//方法说明:首页加载时去查询Session中有没有存储openid,如果没有存储说明未经过授权,需要去授权页面
getOpenId: function () {
ApiAjax.request({
//此接口部分代码过于简单就不展示了
url: '/front/auth/getOpenId',
params: "",
type: "POST",
async: true,
successCallback: function (r) {
if(r.data.openid == null){
//返回的openid如果为空就进入微信授权接口
window.location.href = "/front/auth/wx_login";
}
}
});
}
},
mounted: function() {
//页面渲染完成后执行该方法
this.getOpenId();
}
});
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。