问题描述
最近在开发微信小程序出了问题,除了使用微信登录外,还做了一个绑定后台账号的功能,先使用wx.login获得code给后端返回openid,而后拿openid做后台账号绑定,相当于是账号密码登录,但是上线后发现一种现象就是:ios、微信开发者调试工具、电脑端都没有问题,只有Android端(真机调试也只是Android端)在登录完成之后立马退出,发现调用其他接口依然是未登录状态,偶尔会好的,针对此问题,我们一步步做断点打印查原因。
所使用平台及框架
- 前端:微信小程序原生框架
- 后端:PHP
- 前后端身份识别使用的是cookie,由于原生的微信小程序框架不支持cookie,使用前端模拟存储
处理问题
1. 问题分析:
登录成功之后,访问其他接口的时候返回依然没有登录成功,那么可能是以下情况:
- 后端没有登录成功,没有存储起用来做身份识别的唯一标识,或者在Response Header中的cookie内容有问题
- 前端没有拿到 Response Header 中的cookie信息或者是拿到的Response Header 中的cookie信息是错误的
2. 发现原因:
提出两点猜测,开始分别求证
- 使用wx.login获取openid一直能成功,但随后的跟后台账号绑定请求报错,这个过程能打印出后端返回的sessionid,也就是PHPSESSID,说明后端返回正常,于是开始求证第二点猜测,我们发现发送请求的时候却没携带phpid(有几率会成功),说明可能是返回的PHPSESSID信息可能出了什么问题,因为这个问题只有安卓机才有,所以只能通过在页面渲染的方式打印出能正常发送请求和不正常发送请求的phpid信息,然后手机截图对比,发现了问题所在:
这是正常登录而且能成功发送请求的phpid信息
PHPSESSID=qgmf7g45h5h1alt.....(省略后面部分)
这是正常登录但不能成功发送请求的phpid信息
SameSite=Lax,PHPSESSID=qgmf7g45h5h1alt.....(省略后面部分)
通过对比发现在使用Android手机时,后端Response Header中的cookie不但顺序是不一样的,而且请求失败的时候PHPSESSID前面被拼接了一段“SameSite=Lax,”导致后端识别请求PHPSESSID失败。我也不明白为什么只有安卓机会这样,希望有懂得大佬能告知。
3. 解决方案:
通过对比发现改动前端的方案性价比最高,于是我们在前端添加了这样的一段代码。
因为发送请求需要在请求头header里携带cookie信息,通常的处理办法是登录成功后返回的PHPSESSID通过setStorage存储到本地以便在配置request请求时获取PHPSESSID放在请求头。我们可以在登录成功后端返回response信息里处理一下response.header[‘Set-Cookie’]里的信息。
if (response && response.header && response.header['Set-Cookie']) {
let cookie = response.header['Set-Cookie']
cookie.replace('SameSite=Lax,', '')
wx.setStorageSync('cookieKey', cookie); //保存Cookie到Storage
}
至此,问题解决。微信小程序开发会遇到千千万万个坑,有时候解决问题不难,难在发现问题,希望可以给遇到同样问题的人一点思路。