WeChat(微信登陆)

准备工作

  1. 在微信开放平台注册开发者帐号

  2. 并拥有一个已审核通过的网站应用

  3. 并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程

前端

1.在前端页面展示二维码

方法有两种 :

方法一 :

利用超链接跳到单独的页面,显示登陆二维码

// 导入相关js(注意导入的顺序,否则会报错,建议放在导入js中的最上面)
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" type="text/javascript" charset="utf-8"></script>
// 相关链接
<a href="https://open.weixin.qq.com/connect/qrconnect?appid=<#if (appid)??>${appid}</#if>&redirect_uri=<#if (domain)??>${domain}</#if>/customer_weixin_login_callback&response_type=code&scope=snsapi_login&state=#wechat_redirect" class="wx" title="微信">微信登录</a>
方法二 :

将二维码嵌在页面

参考链接 : https://www.cnblogs.com/martianShu/p/5947170.html

// 导入相关js(注意导入的顺序,否则会报错,建议放在导入js中的最上面)
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" type="text/javascript" charset="utf-8"></script>
// div显示二维码
<div id="login_container"></div>
<script type='text/javascript'>
$(document).ready(function()
{
var obj = new WxLogin
({
id:"login_container",//div的id
appid: "你的appid",
scope: "snsapi_login",//写死
redirect_uri:encodeURI("你的处理扫码事件的方法") ,
state: "",
style: "black",//二维码黑白风格
href: "https://某个域名下的css文件"
});
});
</script>

注意 : href里指向的css文件必须放在https协议下才能引用的到,不然页面上就是默认样式(显示上是一个比较大的二维码,你无法调节二维码的大小,位置)

参数概括

参考链接 : https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=⟨=zh_CN

参数 是否必须 说明
appid 应用唯一标识
redirect_uri 请使用urlEncode对链接进行处理
response_type 填code
scope 应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即
state 用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验

注意 : 1)redirect_uri 必须以http/https打头的一个链接,指向服务端的一个回调接口.

2)redirect\_uri?code=CODE&state=STATE 即 : 回调接口至少有code与state参数

服务端

回调接口需要获取的信息

1.通过code获取accesstoken、openid、refresh_token

// 需要访问的链接
http请求方式: GET
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

// 成功响应后,获取该链接返回的json,其中有我们为用户登陆所必须的openid,及为了后边获取用户基本信息的refresh_token
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

2.刷新或续期access_token使用

参考链接 : https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316518&token=⟨=zh_CN

// 需要访问的链接
http请求方式: GET
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

// 成功响应后,获取
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}

3.通过refresh_token、appid获取用户基本信息

// 需要访问的链接
http请求方式: GET
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
// 成功响应后,获取该链接返回json
{
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
"privilege":[
"PRIVILEGE1",
"PRIVILEGE2"
],
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"

}

回调接口

public String weixinCallBack(String code,String state, HttpSession session , Model model){
if(code==null) {
// 说明:code为空则是用户拒绝授权
logger.warn("weixin callback code is null, return to index page");
return ftl("login");
}

//获取 access_token url
String get_access_token_url = "https://api.weixin.qq.com/sns/oauth2/access_token?";
//参数 grant_type client_id client_secret code redirect_uri
String params ="appid="+appid+"&secret="+secret+"&code="+code+"&grant_type=authorization_code";

//获取access_token openid refresh_token返回类型:jSON字符串
String ret = HtmlUtil.getUrlContent(get_access_token_url + params);
Map<String,String> tokenMap = JSON.parseObject(ret,Map.class);
if(tokenMap==null){
logger.warn("转换JSON字符串为tokenMap结果为空: " + ret);
return ftl("login");
}
String access_token =tokenMap.get("access_token");
logger.info("第一次获取的微信access_token值:"+access_token);
String openId = tokenMap.get("openid");
logger.info("获取的微信openid:"+openId);
String refresh_token = tokenMap.get("refresh_token");
logger.info("获取的微信refresh_token:"+refresh_token);
//调用 refresh_token 获得最新的 access_token
String lastResult = HtmlUtil.getUrlContent("https://api.weixin.qq.com/sns/oauth2/refresh_token?appid="+appid+"&grant_type=refresh_token&refresh_token="+refresh_token);
Map<String,String> lastTokenMap = JSON.parseObject(lastResult, Map.class);
if(lastTokenMap==null){
logger.warn("转换JSON字符串为lastTokenMap结果为空: " + lastTokenMap);
return ftl("login");
}
String token =lastTokenMap.get("access_token");
logger.info("刷新后获取微信access_token值:"+token);
if (StringUtils.isNotEmpty(openId) && StringUtils.isNotBlank(token)) {
//获取用户基本信息 access_token openid
String get_user_info_url = "https://api.weixin.qq.com/sns/userinfo?access_token="+token+"&openid="+openId;
String userInfo = HtmlUtil.getUrlContent(get_user_info_url);
logger.info("获取用户信息:"+userInfo);
Map<String, Object> userInfoMap = JSON.parseObject(userInfo, Map.class);
logger.info("用户信息转换成map:"+userInfoMap);


// 已知用户基本信息,处理各种业务

}
return ftl("login");
}
Copyright © Sodo Tech 2014-2018 all right reserved,powered by Gitbook最后更新: 2018-08-10 23:26

results matching ""

    No results matching ""