微信開放平臺開發系列文章：
目錄
開發小程序需要在公衆平臺註冊一個小程序賬號，然後獲取到小程序的AppID和AppSecret。就可以進行第三方登陸授權開發。
一、需求
擁有第三方微信登錄功能，並獲取到用戶信息。
二、開發流程
小程序：
1. 微信小程序通過wx.login API進行登錄獲取code。由於AppID和AppSecret不能泄露給用戶，根據code獲取openid需要在服務端完成，所以需要將code發送給服務端
（服務端），並且帶上授權臨時票據code參數；
2. 服務端通過code和appid、APPSecret獲取到openid和SessionKey。服務端需要返回自定義登錄態給前端，不能返回SessionKey
3. 前端保存自定義登錄態，獲取用戶信息時攜帶自定義登錄態給後端。
獲取Token的流程
三、開發使用的技術及工具
1、.後端採用IDEA2017 進行開發
2、前端使用微信開發者工具V1.02進行開發
3、使用fastJson對json數據進行處理
1.前端(小程序)
目錄結構如下：
1）自定義的全局變量
globalData: {
userInfo: null,
sessionkey:null
}
自定義userInfo用於存儲用戶信息
sessionKey用於存儲服務端發回給客戶端的sessionkey
2）index加載時進行登錄
用戶登錄後，服務端會返回一個sessionkey給客戶端保存，如果爲空，說明沒有登錄過，需要調用wx.login進行登錄。
調用wx.login後，微信會返回一個code給小程序，小程序需要通過這個code發送給自身的服務端來獲取sessionkey和openid信息。
onLoad: function() {
var serverUrl = app.serverUrl;
// 加載時，檢查當前用戶信息是否登錄
if (app.globalData.sessionkey != null) { // 已經登錄了
// 是否授權
wx.getSetting({
success: function(res) {
if (res.authSetting['scope.userInfo']) {
// 已經授權，可以直接調用 getUserInfo 獲取頭像暱稱
wx.getUserInfo({
success: function(res) {
app.globalData.userInfo = JSON.parse(res.rawData);
}
})
} else {
// 還沒有授權，則需要授權
wx.redirectTo({
url: '../authorization/authorization'
})
}
}
})
} else { // 還沒有登錄
// 提示用戶登錄授權
wx.login({
success: res => {
// 發送 res.code 到後臺換取 openId, sessionKey, unionId
if (res.code) {
// 發送請求，服務端能獲取到openid和unionid，之前登錄過則可以獲取到之前的用戶信息。
wx.request({
url: serverUrl + '/miniprogram/login/' + res.code, //請求路徑
method: "GET",
success: function(res) {
app.globalData.sessionkey = res.data;
// 進入授權
wx.redirectTo({
url: '../authorization/authorization'
})
}
})
}
}
})
}
},
登錄成功後，重定向到授權頁面
3）授權頁面authorization.wxml
<view class='tag-title'>
<image mode="widthFix" style=' width: 200rpx;height: 200rpx;margin-top:150rpx' src="/images/logo.jpg"></image>
</view>
<view wx:if="{{canIUse}}">
<view style='text-align:center;margin-top:50rpx'>
允許微信授權後，可體驗更多功能</view>
<view>
<button open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo" >授權登錄</button>
<button bindtap='navigateBack'>返回首頁</button>
</view>
</view>
<view wx:else style='text-align:center;margin-top:50rpx'>
您的微信版本過低，請升級後再次體驗</view>
Button的open-type爲getUserInfo時，點擊後會調用bindgetuserinfo屬性配置的函數，同時帶上用戶基本信息（不包括Openid等）
4）用戶信息發送給後端
// 授權登錄按鈕
bindGetUserInfo: function(e) {
let that = this;
var serverUrl = app.serverUrl;
console.log(e.detail.userInfo)
if (e.detail.userInfo) { // 成功獲取到信息
app.globalData.userInfo = e.detail.userInfo
// 這裏可以將用戶信息發送給後臺
// 獲取到sessionkey
if (app.globalData.sessionkey!=null){
wx.request({
url: serverUrl + '/miniprogram/userinfo', //請求路徑,
method: "GET",
data: {
// openid: this.openid,
// unionid: this.unionid,
key: app.globalData.sessionkey,
nickname: app.globalData.userInfo.nickName, //獲取暱稱
gender: app.globalData.userInfo.gender, //獲取性別
province: app.globalData.userInfo.province, //獲取省份
city: app.globalData.userInfo.city, //獲取城市
country: app.globalData.userInfo.country, //獲取國家
avatarUrl: app.globalData.userInfo.avatarUrl, //這些是用戶的基本信息
language: app.globalData.userInfo.language
},
success: function (res) {
if (res.data.code == 0) { // 請求成功
debugger
app.globalData.userInfo = res.data.data; // 以數據庫中返回的數據爲準
// 獲取用戶信息成功
wx.switchTab({
url: '../mine/mine'
})
}
}
})
}else{
this.showZanTopTips('錯誤：SessionKey爲null');
}
} else {
this.showZanTopTips('您拒絕了微信授權');
}
},
}));
獲取用戶信息成功後，頁面跳轉到mine中顯示用戶詳情信息
5）用戶詳情頁mine.wxml
<view class="container more">
<view class="userinfo">
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
<text class="userinfo-nickname">性別：{{userInfo.gender === 1 ? '男':'女'}}</text>
<text class="userinfo-nickname">城市：{{userInfo.city}}</text>
<text class="userinfo-nickname">省份：{{userInfo.province}}</text>
<text class="userinfo-nickname">國家：{{userInfo.country}}</text>
<text class="userinfo-nickname">使用語言：{{userInfo.language}}</text>
</view>
</view>
2.服務端（Java）
服務端需要做的是：接受小程序前端發送的請求，根據發送過來的code，以及服務端保存的AppId和APPSecret等向微信服務端發送請求，獲取到sessionkey和openid，然後將二者關聯起來保存到session存儲器中（Redis），返回給前端key值。
接受小程序發送過來的key和用戶基本信息，根據key從redis中獲取openid，然後對數據庫進行查詢，若存在數據則封裝後返回給前端，若無信息則向數據庫中插入數據並返回給前端。
1).配置文件新增小程序相關配置
wechat.miniprogram.appid =
wechat.miniprogram.appsecret =
2)獲取openid以及Sessionkey
@ResponseBody
@RequestMapping("/login/{code}")
public String login(@PathVariable("code") String code) {
String url = "https://api.weixin.qq.com/sns/jscode2session?" +
"appid=" +
env.getProperty("wechat.miniprogram.appid") +
"&secret=" +
env.getProperty("wechat.miniprogram.appsecret") +
"&js_code=" +
code +
"&grant_type=authorization_code";
JSONObject object = HttpClientUtils.httpGet(url);
// 請求，獲取openid或unionid
// 從數據庫中查詢是否存儲
// 成功獲取
String unionid = (String) object.get("unionid");
String openid = (String) object.get("openid");//用戶唯一標識
// 會話密鑰session_key 是對用戶數據進行加密簽名的密鑰。爲了應用自身的數據安全，開發者服務器不應該把會話密鑰下發到小程序，也不應該對外提供這個密鑰。
String session_key = (String) object.get("session_key");
String key = "wechatminiprogramkey-" + UUID.randomUUID().toString().replaceAll("-", "");
RedisPoolUtil.setEx(key, openid + "---" + session_key, 9600);
return key;
}
3).獲取用戶信息：
小程序能夠獲取用戶基本信息，但是不包括openid等信息，僅有基本的暱稱等信息，需要通過後端傳輸的key作爲標識發送到前端，然後找到對應的openid來獲取。
@ResponseBody
@RequestMapping(value = "/userinfo", method = RequestMethod.GET) // 獲取用戶信息
public Result getOpenId(String key, MiniProgramBaseUserInfo miniProgramBaseUserInfo) {
MiniProgramBaseUserInfo result = null;
String value = RedisPoolUtil.get(key);
if (value != null) {
String values[] = value.split("---");
String openid = values[0];
// 從數據庫中查詢是否存儲（根據openid查詢）
result = null; // TODO: 這裏是查數據庫操作
if (result == null){ // 數據庫中沒有數據
// TODO: 向數據庫中執行插入操作
// insert weChatUserInfo
result = miniProgramBaseUserInfo;
}
return Result.success(result);
return Result.error(SESSION_KEY_OVER_TIME); // SessionKey失效
}