CocosCreator微信小遊戲入門實戰《小貓釣魚》(八):微信登陸
前面我們已經基本完成了一個微信小遊戲的開發,還剩下一些細節需要去完善的,例如魚線,背景豐富這些我就不細述了。相信通過前面幾節,剩下的這些細節我們也可以很簡單的處理完。
接下來我們進入微信小遊戲SDK的接入部分。
在這之前,你可以看一下以下幾個官方的文件:
微信小遊戲API:
微信小遊戲官方文件:
Cocoscreator關於接入微信的官方文件:
同時你得準備兩個東西:
- 伺服器,我這邊是弄了一個騰訊雲伺服器
準備完後我們先看下微信官方對於登陸的文件說明,我們主要看下官方給的登陸流程:
也就是說需要我們在小程式中使用wx.login()獲取到code,然後再將code給到伺服器,伺服器去呼叫code2Session介面得到OpenID完成登陸。
在這裡我們用Node.js+Express完成一個簡單的登陸伺服器用以幫助小遊戲完成登陸流程。
首先下載並安裝NodeJS,下載地址:
安裝完後執行
node –v
npm –v
顯示如下證明安裝成功:
安裝完成後新建一個資料夾作為工程目錄,啟動命令列,進入工程目錄,安裝Express:
npm install express
看到以下表示安裝成功:
在工程目錄下新建一個app.js指令碼
var app = require('express')(); var fs = require('fs'); var http = require('http'); var https = require('https'); //配置https SSL證書 var privateKey = fs.readFileSync('3_zzxgame.com.cn.key'); var certificate = fs.readFileSync('2_zzxgame.com.cn.crt'); var credentials = { ssl: true, port: 18800, key: privateKey, cert: certificate }; //http服務,建立server並監聽指定埠 var httpServer = http.createServer(app); var PORT = 18800; httpServer.listen(PORT, function() { console.log('HTTP Server is running on: http://www.zzxgame.com.cn:%s', PORT); }); //https服務 var httpsServer = https.createServer(credentials, app); var SSLPORT = 18801; httpsServer.listen(SSLPORT, function() { console.log('HTTPS Server is running on: https://www.zzxgame.com.cn:%s', SSLPORT); }); //http請求解析中介軟體 var bodyParser = require('body-parser'); // 建立 application/x-www-form-urlencoded 編碼解析 var urlencodedParser = bodyParser.urlencoded({ extended: false }) //Welcome app.get('/', function(req, res) { if(req.protocol === 'https') { res.status(200).send('Welcome to Safety Land!'); } else { res.status(200).send('Welcome!'); } }); //test 帶引數POST app.post('/test', urlencodedParser, function(req, res) { //console.log(req); console.log(req.query.id); console.log(req.query.name); res.send('Welcome!ID:' + req.query.name + ',name:' + req.query.name); });
別忘了把證書檔案放在工程目錄下
完成後,命令列輸入node app.js啟動:
你也可以通過一些線上測試工具去測試你的介面
注意我們使用bodyParser.urlencoded 來解析 request 中 body的 urlencoded字元, 只支援utf-8的編碼的字元。
OK,沒問題,接下來我們依葫蘆畫瓢,做一個接受code並請求獲取openid的介面
app.post('/token', urlencodedParser, function(request, response) { var wxUrl = "https://api.weixin.qq.com/sns/jscode2session?appid= xxxxxxxxxxxxxxxxxx&secret=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&js_code=" + request.query.code +"&grant_type=authorization_code"; var content = ''; var req = https.request(wxUrl, function(res) { res.on('data',function(body){ console.log('return'); content+=body; }).on("end", function () { response.write(content); response.end(); }); }).on('error', function(e) { console.log("Got error: " + e.message); }); req.end(); });
code2Session的API參考:
appid和secret從微信公眾平臺,設定->開發設定 中獲取
頁面往下拉一拉,同時請配置允許訪問的合法域名,正式上線的話域名要求備案……,不備案的話只能除錯用,我就是因為懶得去弄備案的東西,所以做了一些小遊戲都沒辦法上線 T_T
OK,server這邊搞定。
接下來我們來看客戶端的程式碼。
start () {
if (cc.sys.platform === cc.sys.WECHAT_GAME)
{
wx.login({
success: function(res){
wx.request({
url : "https://www.zzxgame.com.cn:18801/token?code=" + res.code,
method : "POST",
success : function (data) {
if (data.statusCode == 200) {
console.log("request" , data);
}
}
});
}
});
}
},
我們把返回的openid和session_key列印一下,以便測試。
現在構建一下,注意釋出平臺選擇Wechat Game,md5 cache請勾選上,appid請正確填寫:
構建完後,點選執行,在微信開發者工具中進行預覽。
注意在CocosCreator的設定中,配置好微信開發者工具的路徑。
執行後,我們看下log:
OK沒問題,微信登陸完成。
最後說一下session_key的用處。
Session_key表示的是微信使用者的登陸態。
微信使用者通過wx.login登陸後獲得的session_key是擁有一定時效性的,也就是說會持續一段時間,同時也會存在過期的情況。我們可以看到平常我們玩的小遊戲在第一次完的時候都會進行微信登陸,同時後續再開啟玩的時候就不需要登陸了,如果有很長一段時間沒有玩,再次開啟的時候又需要登陸,其實這就是session_key過期了。
我們可以通過wx.checkSession去檢測session_key是否過期,如果wx.checkSession呼叫成功,則我們不需要使用者再進行登陸,如果wx.checkSession呼叫不成功,說明session_key過期需要重新登陸,這時候我們再呼叫wx.login。