⼩游戏是怎么样的登录的流程?
⼀、这个流程是按照强联⽹游戏来设计的,客户端跟服务器通信⽤的是WebSocket,服务器端是Node.js。(如果你的服务器是PHP,那么流程可能更简化⼀些)
⼆、玩家以纯粹的新⼈⾝份进⼊。(也就是,不假设玩家提前关注了相关之类的)
三、最终⽬的是获取unionId。(如果你只想要openId,甚⾄连openId都不要,只要昵称头像,那可以更简单。关于unionId和openId的区别,这⾥就不啰嗦了,相信⼤家都很清楚。)
登录过程中⽐较⿇烦的是⽤户信息授权按钮的处理,我没有到合适的办法把它融合到流程中间,所以⼲脆就放最前⾯。在操作体验上,就是玩家第⼀次进⼊游戏时,需要先点⼀个【登录】的按钮,授权游戏获取⽤户信息,然后再开始游戏。当然,以后再进游戏的话,因为已经授权过,所以就不会再有这个按钮了。
那么下⾯就开始介绍流程了。
1、在客户端,调⽤wx.getSetting检查是否获得授权。如果已经授权,进⼊下⼀步;否则,调⽤wx.createUserInfoButton显⽰授权按钮。
这⼀步通常会在游戏的登录界⾯上,这个时候不会有【开始游戏】、【选择服务器】之类的,⽽是⼀个【登录】按钮。点击【登录】,会提⽰⽤户是否允许游戏访问他的信息。允许之后,【登录】消失,界⾯上会出现【开始游戏】或者【选择服务器】的画⾯。
如果⽤户拒绝的话,最好也给⼀个弹窗,解释为什么需要授权。
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,
}
});
{
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.login
onConnected: function()
{
wx.login({
success: function(res)
{
// res中包含code
// 获取⽤户信息
withCredentials: true,      // 必须在wx.login之后,这⾥才能为true
success: function(result)
{
// result中包含encryptedData和iv
// 将de、ptedData、result.iv发送到服务器
},
fail: function(result)
{
// 错误处理
},
});
},
fail: function(res)
{
// 错误处理
},
});
},
这⼀步需要code,以及你的⼩游戏AppID和AppSecret,这两个可以在公众平台管理后台拿到。
值得⼀提的是,在后台上,AppSecret只能查看⼀次,然后你需要⾃⼰把它保存在某个隐秘的地⽅。如果你忘了保存,那么只能再重新⽣成⼀个AppSecret。
调⽤成功之后,可以拿到sessionKey。(同时还有openId)
然后,⽤sessionKey以及之前客户端传来的encryptedData、iv,解密得到unionId、openId、昵称、头像等等。有了这些数据,就可以开始游戏⾥的登录了。
需要注意的是,⼩游戏要绑定了才有unionId。
// 服务器端的代码
let https = require("https");
let iconv = require("iconv-lite");
// WXBizDataCrypt是提供的模块,⽤来执⾏解密
// 可以在developers.weixin.qq/minigame/dev/tutorial/open-ability/signature.html到下载链接
let WXBizDataCrypt = require("../lib/WXBizDataCrypt.js");
// WX_APP_ID是⼩游戏AppID,WX_APP_SECRET是⼩游戏AppSecret,code由客户端发送上来
let url = "api.weixin.qq/sns/jscode2session?appid=" + WX_APP_ID + "&secret=" + WX_APP_SECRET + "&js_code=" + code + "&grant_type=authorization_code"; let req = (url, function(res)
{
let datas = [];
let size = 0;
<("data", function(data)
{
datas.push(data);
size += data.length;
});
<("end", function()
{
let buff = at(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
{
function怎么记忆
// 错误处理
}
}
catch (error)
{
/
/ 错误处理
}
});
});
<("error", function(err)
{
// 错误处理
});

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。