cocos creator 微信登陆

 

前面我们已经基本完成了一个微信小游戏的开发,还剩下一些细节需要去完善的,例如鱼线,背景丰富这些我就不细述了。相信通过前面几节,剩下的这些细节我们也可以很简单的处理完。

 

接下来我们进入微信小游戏SDK的接入部分。

 

在这之前,你可以看一下以下几个官方的文档:

微信小游戏API:

https://developers.weixin.qq.com/minigame/dev/api/render/canvas/wx.createCanvas.html

微信小游戏官方文档:

https://developers.weixin.qq.com/minigame/dev/index.html

Cocoscreator关于接入微信的官方文档:

http://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame.html

 

同时你得准备两个东西:

  1. 域名以及https SSL证书,这里我准备了一个域名:www.zzxgame.com.cn
  2. 服务器,我这边是弄了一个腾讯云服务器

 

准备完后我们先看下微信官方对于登陆的文档说明,我们主要看下官方给的登陆流程:

 

 

 

也就是说需要我们在小程序中使用wx.login()获取到code,然后再将code给到服务器,服务器去调用code2Session接口得到OpenID完成登陆。

 

在这里我们用Node.js+Express完成一个简单的登陆服务器用以帮助小游戏完成登陆流程。

首先下载并安装NodeJS,下载地址:

http://nodejs.cn/download/

 

安装完后运行


 
 
  1. node –v
  2. npm –v

显示如下证明安装成功:

 

安装完成后新建一个文件夹作为工程目录,启动命令行,进入工程目录,安装Express:

npm install express
 
 

看到以下表示安装成功:

 

在工程目录下新建一个app.js脚本


 
 
  1. var app = require( 'express')();
  2. var fs = require( 'fs');
  3. var http = require( 'http');
  4. var https = require( 'https');
  5. //配置https SSL证书
  6. var privateKey  = fs.readFileSync( '3_zzxgame.com.cn.key');
  7. var certificate = fs.readFileSync( '2_zzxgame.com.cn.crt');
  8. var credentials = {
  9.     ssl: true,
  10.     port: 18800,
  11.     key: privateKey,
  12.     cert: certificate
  13. };
  14. //http服务,创建server并监听指定端口
  15. var httpServer = http.createServer(app);
  16. var PORT = 18800;
  17. httpServer.listen(PORT, function() {
  18.     console.log( 'HTTP Server is running on: http://www.zzxgame.com.cn:%s', PORT);
  19. });
  20. //https服务
  21. var httpsServer = https.createServer(credentials, app);
  22. var SSLPORT = 18801;
  23. httpsServer.listen(SSLPORT, function() {
  24.     console.log( 'HTTPS Server is running on: https://www.zzxgame.com.cn:%s', SSLPORT);
  25. });
  26. //http请求解析中间件
  27. var bodyParser = require( 'body-parser');
  28. // 创建 application/x-www-form-urlencoded 编码解析
  29. var urlencodedParser = bodyParser.urlencoded({ extended: false })
  30. //Welcome
  31. app.get( '/', function(req, res) {
  32.     if(req.protocol === 'https') {
  33.         res.status( 200).send( 'Welcome to Safety Land!');
  34.     }
  35.     else {
  36.         res.status( 200).send( 'Welcome!');
  37.     }
  38. });
  39. //test 带参数POST
  40. app.post( '/test', urlencodedParser, function(req, res) {
  41.     //console.log(req);
  42.     console.log(req.query.id);
  43.     console.log(req.query.name);
  44.     res.send( 'Welcome!ID:' + req.query.name + ',name:' + req.query.name);
  45. });

 

别忘了把证书文件放在工程目录下

 

完成后,命令行输入node app.js启动:

 

在浏览器中输入https://www.zzxgame.com.cn:18801进行测试

你也可以通过一些在线测试工具去测试你的接口

注意我们使用bodyParser.urlencoded 来解析 request 中 body的 urlencoded字符, 只支持utf-8的编码的字符。

 

OK,没问题,接下来我们依葫芦画瓢,做一个接受code并请求获取openid的接口


 
 
  1. app.post( '/token', urlencodedParser, function(request, response) {
  2.     var wxUrl = "https://api.weixin.qq.com/sns/jscode2session?appid= xxxxxxxxxxxxxxxxxx&secret=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&js_code=" + request.query.code + "&grant_type=authorization_code";
  3.     var content = '';
  4.     var req = https.request(wxUrl, function(res)
  5.         res.on( 'data', function(body)
  6.             console.log( 'return'); 
  7.             content+=body; 
  8.         }).on( "end", function ()
  9.             response.write(content); 
  10.             response.end(); 
  11.         }); 
  12.     }).on( 'error', function(e)
  13.         console.log( "Got error: " + e.message); 
  14.     }); 
  15.     req.end();
  16. });

 

code2Session的API参考:

https://developers.weixin.qq.com/minigame/dev/api/open-api/login/code2Session.html

 

appid和secret从微信公众平台,设置->开发设置 中获取

 

页面往下拉一拉,同时请配置允许访问的合法域名,正式上线的话域名要求备案……,不备案的话只能调试用,我就是因为懒得去弄备案的东西,所以做了一些小游戏都没办法上线 T_T

 

OK,server这边搞定。

 

接下来我们来看客户端的代码。


 
 
  1.     start () {
  2.         if (cc.sys.platform === cc.sys.WECHAT_GAME)
  3.         {
  4.             wx.login({
  5.                 success: function(res){
  6.                     wx.request({
  7.                         url :   "https://www.zzxgame.com.cn:18801/token?code=" + res.code,
  8.                         method  :   "POST",
  9.                         success :   function (data) {
  10.                             if (data.statusCode == 200) {
  11.                                 console.log( "request" , data);
  12.                             }
  13.                         }
  14.                     });
  15.                 }
  16.             });
  17.         }
  18.     },

我们把返回的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。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cocos Creator是一款流行的跨平台游戏开发引擎,可以支持在多个平台上进行游戏开发,其中包括微信小程序平台。下面是关于Cocos Creator微信登录的详细说明。 1. 引入微信登录功能:在Cocos Creator中,可以通过引入微信官方提供的API实现微信登录功能。首先,需要在项目中添加微信登录的依赖库,然后在对应的脚本文件中引入相关的微信登录API。 2. 获取微信登录凭证:在用户点击微信登录按钮后,可以调用微信登录API来获取用户的微信登录凭证,凭证的获取需要通过微信授权,用户需要同意授权。凭证成功获取后,可以获取到用户的唯一标识openid和会话密钥session_key。 3. 与游戏服务器进行验证:获取到微信登录凭证后,可以将凭证传递给游戏服务器进行验证。游戏服务器可以通过调用微信提供的接口验证凭证的有效性,并获取用户的微信账号信息。验证成功后,可以将用户的游戏信息与微信账号进行绑定,并生成游戏内的唯一标识token。 4. 使用微信账号登录游戏:验证成功后,可以将生成的token返回给客户端,并保存在本地。下次用户再次打开游戏时,可以直接读取本地保存的token,并传递给游戏服务器进行验证。验证通过后,用户可以直接使用微信账号登录游戏。 通过以上步骤,我们可以在Cocos Creator中实现微信登录功能。当然,在实际开发中,还需要考虑到错误处理、登录状态的管理以及用户信息的更新等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值