微信網頁版掃一掃登錄

記得第一次做這個的時候看文檔看的一篇茫然，不知怎么下手。其實根本不需要想那么多，先將代碼敲起來，一步步梳理沒有完不成的。

具體的操作步驟在https://mp.weixin.qq.com/wiki/4/9ac2e7b1f1d22e9e57260f6553822520.html;

網上相關的互相copy的實例有很多。最后其實發現跟着微信的公眾平台開發者文檔一步步來就行了;

當然首先開發者需要先到公眾平台官網中的開發者中心頁配置授權回調域名，不然就沒有下文了。我是根據公司的正義貓公眾號(推銷一波[嘿嘿嘿])來開發的。授權回調域名配置規范為全域名;

好了重點說下具體步驟(附上官方步驟):

• 1 第一步：用戶同意授權，獲取code
• 2 第二步：通過code換取網頁授權access_token
• 3 第三步：刷新access_token（如果需要）
• 4 第四步：拉取用戶信息(需scope為 snsapi_userinfo)
• 5 附：檢驗授權憑證（access_token）是否有效

對於第一步其實就是一個鏈接:"https://open.weixin.qq.com/connect/qrconnect?appid="+WeiXinAppId+ "&redirect_uri="+WX_CALLBACK_URL+ "&response_type=code&scope=snsapi_login&state=***#wechat_redirect"
以上需要兩個參數:WeiXinAppId就是公司正義貓公眾號(繼續推銷[陰險臉.jpg])的appID，
還有就是WX_CALLBACK_URL顧名思義就是回調地址了，這個你自己來定義回調地址的，你想回調到自己配置的controller層的哪個接口就是哪個，由你掌控開心就好。
還是不懂就例如附上我的接口:

@Hitlog
@RequestMapping(value = "/weixin/callback", method = RequestMethod.GET)
public String weixinCallback(HttpServletRequest request, HttpServletResponse response, Model model,
@RequestParam(value = "state", defaultValue = "") String state,
@RequestParam(value = "code", defaultValue = "") String code) {
WxUser wxUser = oAuthService.loginByWeiXin(code);
if (wxUser == null) {
// 登錄失敗
model.addAttribute("status", "fail");
model.addAttribute("message", "授權登入失敗");
return "oauth/register";
}
UserOAuth uo = oAuthService.getWechatUserOAuthByOpenId(wxUser.getOpenId());

if (uo == null) {
model.addAttribute("status", "success");
model.addAttribute("message", "用戶請注冊");
model.addAttribute("username", wxUser.getNickname());
model.addAttribute("avatar", wxUser.getHeadImgUrl());
model.addAttribute("userOAuthType", UserOAuth.TYPE_WECAHT);
model.addAttribute("accessToken", wxUser.getAccessToken());
model.addAttribute("openId", wxUser.getOpenId());
return "oauth/register";
}else{
oAuthService.updateWechatAccessToken(uo.getUserId(), wxUser.getAccessToken());
User u = userService.getUserById(uo.getUserId());
if (u != null) {
doLogin(u.getId(), request, response);
model.addAttribute("status", "success");
model.addAttribute("message", "登錄成功");
return "oauth/register";
}
}

return "oauth/register";
}

這里你可以獲得兩個參數state和code，重點是code，你可以根據code后端再去發送請求獲取accesstoken。繼續附上我的代碼:

public static WeixinOauth2Token getOauth2AccessToken(String appId,String appSecret,String code) {
WeixinOauth2Token wat = null;
// 拼接請求地址
String requestUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";
requestUrl = requestUrl.replace("APPID", appId);
requestUrl = requestUrl.replace("SECRET", appSecret);
requestUrl = requestUrl.replace("CODE", code);
JSONObject jsonObject = httpsRequest(requestUrl, "GET", null);
if (null != jsonObject) {
try {
wat = new WeixinOauth2Token();
wat.setAccessToken(jsonObject.getString("access_token"));
wat.setExpiresIn(jsonObject.getInt("expires_in"));
wat.setRefreshToken(jsonObject.getString("refresh_token"));
wat.setOpenId(jsonObject.getString("openid"));
wat.setScope(jsonObject.getString("scope"));
} catch (Exception e) {
wat = null;
int errorCode = 0;
String errorMsg = null;
try {
errorCode = jsonObject.getInt("errcode");
errorMsg = jsonObject.getString("errmsg");
} catch (JSONException e1) {
e1.printStackTrace();
}
log.error("獲取網頁授權憑證失敗 errcode:{} errmsg:{}", errorCode, errorMsg);
}
}
return wat;
}

再根據code獲取用戶的基本信息，繼續參上代碼:

public WxUser loginByWeiXin(String code) {
if(code==null){
return null;
}
WeixinOauth2Token result = WxAuthorizeUtil.getOauth2AccessToken(WeiXinAppId,WeiXinAppSecret,code);
if(result==null){
return null;
}
WxUser wxUser = WxAuthorizeUtil.getWxUserInfo(result.getAccessToken(), result.getOpenId());
if(null!=wxUser){
wxUser.setAccessToken(result.getAccessToken());
}
return wxUser;
}

public static WeixinOauth2Token getOauth2AccessToken(String appId,String appSecret,String code) {
WeixinOauth2Token wat = null;
// 拼接請求地址
String requestUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=***&grant_type=authorization_code";
requestUrl = requestUrl.replace("APPID", appId);
requestUrl = requestUrl.replace("SECRET", appSecret);
requestUrl = requestUrl.replace("CODE", code);
JSONObject jsonObject = httpsRequest(requestUrl, "GET", null);
if (null != jsonObject) {
try {
wat = new WeixinOauth2Token();
wat.setAccessToken(jsonObject.getString("access_token"));
wat.setExpiresIn(jsonObject.getInt("expires_in"));
wat.setRefreshToken(jsonObject.getString("refresh_token"));
wat.setOpenId(jsonObject.getString("openid"));
wat.setScope(jsonObject.getString("scope"));
} catch (Exception e) {
wat = null;
int errorCode = 0;
String errorMsg = null;
try {
errorCode = jsonObject.getInt("errcode");
errorMsg = jsonObject.getString("errmsg");
} catch (JSONException e1) {
e1.printStackTrace();
}
log.error("獲取網頁授權憑證失敗 errcode:{} errmsg:{}", errorCode, errorMsg);
}
}
return wat;
}

以上可以獲取微信用戶的頭像、昵稱、詳細地址(如果用戶自己微信賬號有填寫)、年齡、性別等等;

關於封裝類的參數:

public class WeixinOauth2Token {
// 網頁授權接口調用憑證
private String accessToken;
// 憑證有效時長
private int expiresIn;
// 用於刷新憑證
private String refreshToken;
// 用戶標識
private String openId;
// 用戶授權作用域
private String scope;}

public class WxUser {

// 用戶標識
private String openId;
// 用戶昵稱
private String nickname;
// 性別（1是男性，2是女性，0是未知）
private int sex;
// 國家
private String country;
// 省份
private String province;
// 城市
private String city;
// 用戶頭像鏈接
private String headImgUrl;
// 用戶特權信息
private List<String> privilegeList;
//微信用戶accessToken
private String accessToken;}

其他的像Evernote、微博的授權登錄步驟都相似，套路都是一樣的。看完有幫助的童鞋留個言就好，輕噴(づ￣3￣)づ╭❤～