源码分类
 

[教程] 微信小游戏登录流程小游戏制作用户登陆验证

108
回复
2667
查看
  [复制链接]
发表于 2019-9-1 15:23:28 | 显示全部楼层 |阅读模式
                                                花了好几天时间,总算解决了微信小游戏的登录。本来微信登录就比较复杂,再加上前前后后改了些接口,更是痛苦。网上找到的资料总是些零零散散有新有旧,微信自己的文档大致有一个流程,但一些要点和注意事项又语焉不详。今天就从头到尾整理一遍登录过程吧,算是造福一下本就很苦鳖的程序猿,顺便给自己也留个记录。
    首先介绍下这个流程的背景,这样的话各位读者就可以判断,这对自己是不是有用了。当然,我相信在大多数情况下都是有用的。

一、这个流程是按照强联网游戏来设计的,客户端跟服务器通信用的是WebSocket,服务器端是Node.js。(如果你的服务器是PHP,那么流程可能更简化一些)
二、玩家以纯粹的新人身份进入游戏。(也就是,不假设玩家提前关注了相关公众号之类的)
三、最终目的是获取unionId。(如果你只想要openId,甚至连openId都不要,只要昵称头像,那可以更简单。关于unionId和openId的区别,这里就不啰嗦了,相信大家都很清楚。)

登录过程中比较麻烦的是用户信息授权按钮的处理,我没有找到合适的办法把它融合到流程中间,所以干脆就放最前面。在操作体验上,就是玩家第一次进入游戏时,需要先点一个【微信登录】的按钮,授权游戏获取用户信息,然后再开始游戏。当然,以后再进游戏的话,因为已经授权过,所以就不会再有这个按钮了。

那么下面就开始介绍流程了。

1、在客户端,调用wx.getSetting检查是否获得授权。如果已经授权,进入下一步;否则,调用wx.createUserInfoButton显示授权按钮。
    这一步通常会在游戏的登录界面上,这个时候不会有【开始游戏】、【选择服务器】之类的,而是一个【微信登录】按钮。点击【微信登录】,微信会提示用户是否允许游戏访问他的信息。允许之后,【微信登录】消失,界面上会出现【开始游戏】或者【选择服务器】的画面。
    如果用户拒绝的话,最好也给一个弹窗,解释为什么需要授权。

wx.getSetting({        success(res)        {                // 已授权                if (res.authSetting["scope.userInfo"])                {                        // 进入下一步,比如【选择服务器】                }                // 显示授权按钮                else                {                        let sysInfo = wx.getSystemInfoSync();                        let button = wx.createUserInfoButton({                                type: "text",                                text: "微信登录",                                style: {                                        left: sysInfo.windowWidth / 2 - 50,                                        top: sysInfo.windowHeight / 2 - 30,                                        width: 100,                                        height: 60,                                        backgroundColor: "#c7a976",                                        color: "#5c5941",                                        borderColor: "#5c5941",                                        textAlign: "center",                                        fontSize: 16,                                        borderWidth: 4,                                        borderRadius: 4,                                        lineHeight: 60,                                }                        });                        button.onTap(function(res)                        {                                if (res.userInfo)                                {                                        button.destroy();                                        // 进入下一步,比如【选择服务器】                                }                                else                                {                                        wx.showModal({                                                title: "温馨提示",                                                content: "《XXX》是一款在线对战游戏,需要您的用户信息登录游戏。",                                                showCancel: false,                                        });                                }                        });                        button.show();                }        }});2、对于需要分区跨服的游戏,显示【选择服务器】的界面。
    ​如果不需要分区,那么可以显示一个【开始游戏】的界面(你也许觉得这一步可以省掉,但是为了结构清晰,我建议还是留着)。
    ​这一步是游戏自己处理,跟微信无关,所以就没代码了。

3、连接游戏服务器;
    在连接成功的回调里,调用wx.login,获得code;
    再调用wx.getUserInfo,获得encryptedData和iv;
    最后将code、encryptedData、iv发送给服务器。
    因为用的是WebSocket,需要连接服务器的步骤,就在这里了。如果是PHP,可以省掉连接服务器,直接开始调用wx.login。
    这一步获得的参数很重要:code将被用来获取sessionKey;而sessionKey、encryptedData、iv三者一起解出用户的敏感数据(包括unionId等)。
// 连接游戏服务器成功的回调。如果服务器用的是PHP,这里直接调用wx.loginonConnected: function(){    wx.login({        success: function(res)        {            // res中包含code                        // 获取用户信息            wx.getUserInfo({                withCredentials: true,      // 必须在wx.login之后,这里才能为true                success: function(result)                {                    // result中包含encryptedData和iv                                        // 将res.code、result.encryptedData、result.iv发送到服务器                },                fail: function(result)                {                    // 错误处理                },            });        },        fail: function(res)        {            // 错误处理        },    });},4、在服务器上收到数据后,首先调用微信的接口 https://api.weixin.qq.com/sns/jscode2session
    这一步需要code,以及你的小游戏AppID和AppSecret,这两个可以在微信公众平台管理后台拿到。
    值得一提的是,在微信后台上,AppSecret只能查看一次,然后你需要自己把它保存在某个隐秘的地方。如果你忘了保存,那么只能再重新生成一个AppSecret。

    调用成功之后,可以拿到sessionKey。(同时还有openId)
   然后,用sessionKey以及之前客户端传来的encryptedData、iv,解密得到unionId、openId、昵称、头像等等。有了这些数据,就可以开始游戏里的登录了。
    需要注意的是,小游戏要绑定了公众号才有unionId。
// 服务器端的代码let https = require("https");let iconv = require("iconv-lite");// WXBizDataCrypt是微信提供的模块,用来执行解密// 可以在https://developers.weixin.qq.com ... lity/signature.html找到下载链接let WXBizDataCrypt = require("../lib/WXBizDataCrypt.js");// WX_APP_ID是小游戏AppID,WX_APP_SECRET是小游戏AppSecret,code由客户端发送上来let url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + WX_APP_ID + "&secret=" + WX_APP_SECRET + "&js_code=" + code + "&grant_type=authorization_code";let req = https.get(url, function(res){    let datas = [];    let size = 0;    res.on("data", function(data)    {        datas.push(data);        size += data.length;    });      res.on("end", function()    {        let buff = Buffer.concat(datas, size);        let result = iconv.decode(buff, "utf8");                try        {            let d = JSON.parse(result);            if (d.session_key)            {                try                {                    let wxCrypt = new WXBizDataCrypt(WX_APP_ID, d.session_key);                    // encryptedData和iv都是客户端传递的数据                    let res = wxCrypt.decryptData(encryptedData, iv);                    // res中包含了openId、unionId、nickName、avatarUrl等等信息                    // 注意,如果你的小游戏没有绑定微信公众号,这里可能也不会有unionId                    // 微信登录完成,可以开始进入游戏了                }                catch (error)                {                    // 错误处理                }            }            else            {                // 错误处理            }        }        catch (error)        {            // 错误处理        }    });});req.on("error", function(err){    // 错误处理});
    整个微信小游戏登录过程,大致就是这样了。最后顺便提一下,调用https://api.weixin.qq.com/sns/jscode2session这一步,因为是https请求,所以你可能会觉得,也可以直接在客户端调用。毕竟code就在客户端,AppID和AppSecret也是固定的。但微信并不建议这么做(想想看,微信甚至不会替你保存AppSecret,你愿意把它放客户端里吗?)https://blog.csdn.net/SingleWizard/article/details/85252875
                                    

0

主题

2759

帖子

4691

积分

高级会员

Rank: 4

积分
4691
发表于 2019-9-1 15:23:44 | 显示全部楼层
有一种回帖叫做抢沙发

0

主题

2778

帖子

4762

积分

高级会员

Rank: 4

积分
4762
发表于 2019-9-1 16:44:04 | 显示全部楼层
发表于 2019-9-2 16:48:10 | 显示全部楼层
肯定覅那份科技馆

0

主题

2934

帖子

5064

积分

金牌会员

Rank: 6Rank: 6

积分
5064
发表于 2019-9-3 16:38:00 | 显示全部楼层
太兴奋了,终于找到了。

0

主题

3030

帖子

5226

积分

金牌会员

Rank: 6Rank: 6

积分
5226
发表于 2019-9-3 16:58:32 | 显示全部楼层
正在寻找,感谢分享!

0

主题

2726

帖子

4609

积分

高级会员

Rank: 4

积分
4609
发表于 2019-9-5 17:22:20 | 显示全部楼层
太好了!
发表于 2019-9-5 19:34:22 | 显示全部楼层

0

主题

3151

帖子

5468

积分

金牌会员

Rank: 6Rank: 6

积分
5468
发表于 2019-9-7 16:29:09 | 显示全部楼层
太兴奋了,终于找到了。
发表于 2019-9-7 16:33:17 | 显示全部楼层
官方微信

微信号:yyv8top

QQ1:1103770588

QQ2:2677628560

草根助力平台:

云牛品论坛

(工作日:周一至周五 9:00-16:00)
北京市YUNNIUPIN.com
WWW.VIP1ZW.COM

手机版- 云牛品源码,会员一折网,1元云购网商城官网,一站网官网,霸屏天下源码,站长源码下载,网站模板,源码交易 在线客服系统

版权声明: 本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。 如侵犯版权,请给我们来信提供版权信息:[email protected]

Powered by 云牛品 X3.4© 2014-2019yunniupin.com