下面详细介绍微信小程序的微信登陆
第一步:获取登陆态code
微信登陆部分,首先需要使用微信小程序的api—— wx.login(OBJECT)来获取登录态
这个登陆态的作用是为了获取用户的openid(用户的唯一标识)
相关链接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject
示例:官方示例
js:
//调用登录
wx.login({
success: function(res) {
console.log(res);
if (res.code) {
//发起网络请求
//doSomething
} else {
console.log(‘获取用户登录态失败!’ + res.errMsg)
}
},
fail: function(){
console.log(“启用wx.login函数,失败!”);
},
complete:function(){
console.log(“已启用wx.login函数”);
}
});
TIPS:
上面这段代码的console.log(res);输出wx.login(OBJECT)的success成功回调函数返回值res的内容如下:
情况一:
出现这个code:”the code is a mock one”是在项目没有使用appid的情况下返回的,正常不是返回这个的!!
情况二:
项目在绑定appID后才能成功返回登录态,正确的登陆态如下图所示:
第二步:将登陆态code发送给第三方服务器(即自家的服务器)
上面通过wx.login(OBJECT)获取了登录态后,接下来就是将code发送给第三方服务器
我们先看看微信登陆的序时图:
序时图所示,通过wx.login()获取了code后,就使用wx.request()发送code给第三方服务器(也就是自家的服务器)
下面用代码来进行讲解这一步如何操作
示例:官方示例
把wx.login获取到的res.code返回值,直接以参数的形式,发起网络请求发送登陆态给自家服务器
js:
//调用登录
wx.login({
success: function(res) {
console.log(res);
if (res.code) {
//就是在这里发起网络请求,使用wx.request(),将登陆态发送给自家的服务器上
wx.request({
url: ‘https://test.com/onLogin’,
data: {
code: res.code
},
method: ‘POST’,
header: {‘content-type’: ‘application/json’},
success: function(data){
}
})
} else {
console.log(‘获取用户登录态失败!’ + res.errMsg)
}
},
fail: function(){
console.log(“启用wx.login函数,失败!”);
},
complete:function(){
console.log(“已启用wx.login函数”);
}
});
如何使用微信小程序发起网络请求?
请看如下教程:微信小程序的网络请求 ——微信小程序教程系列(14)
第三步:code 换取 session_key和openid
登陆态发送给自家的服务器后,接下来就是后台进行操作。
下面我把 自家的服务器简称 后台,方便阅读(你知道我说的后台指的是我们自己的服务器,而不是微信的服务器就行)。
后台接收到登陆态后,由后台发起网络请求给微信服务器
备注:后台没有语言要求!!任意一门后台语言都可以。
接口地址:
https://api.weixin.qq.com/sns/jscode2session
参数说明:
备注:
appid和secret登陆微信公众平台,打开设置——开发设置,即可获取(app secret需要生成)。
grant_type是固定写法,值为authorization_code即可。
返回结果:
后台发送请求成后,腾讯服务器会返回session_key 和 openid,如下图:
成功返回的结果
失败返回的结果
第四步:生成3rd_session返回给客户端
第四步也是做后台中的操作!!
此时把微信服务器返回的session_key 和 openid保留在后台中,由于考虑安全性的问题,不要直接返回给客户端。
然后用操作系统提供的随机数算法生成一个新的session,微信把它叫做3rd_session。(注意:这个session要有足够的长度,建议有2^128种组合,即长度为16B;设置一定的时效性)
以3rd_session为名作为key,返回的session_key和openid作为值,保存在后台上。
最后只需要在后台,返回一个3rd_session给客户端即可。
以后客户端部分,就使用这个3rd_session发送给后台,后台接收3rd_session获取对应的session_key和openid,再通过session_key和openid判断对应的用户返回该用户相关的数据
备注:小程序用这种方法来代替浏览器自身发送的cookie,因为web的做法是服务器A会保存起访问登录接口的这个cookie到session中,当你再次访问其他接口的时候,服务器A首先会判断这个session,是否是之间的cookie从而知道是不是对应的用户。(http协议是一种短链接的关系,其特点是客户端发起请求链接到服务端,服务端返回数据,链接断开!因此之间是不会有任何数据的储存。)
示例:接上示例
js:
wx.login({
success: function(res) {
console.log(res);
if (res.code) {
wx.request({
url: ‘https://test.com/onLogin’,
data: {
code: res.code
},
method: ‘POST’,
header: {‘content-type’: ‘application/json’},
// 在发送请求成功的部分,返回的数据是后台返回的3rd_session
success: function(data){
console.log(data)
}
})
} else {
console.log(‘获取用户登录态失败!’ + res.errMsg)
}
},
fail: function(){
console.log(“启用wx.login函数,失败!”);
},
complete:function(){
console.log(“已启用wx.login函数”);
}
});
PS:
要是阅读到这里,有不明之处,请叫上后台的小伙伴一起过来阅读这篇文章
第三步,和第四步,要交给后台的同事去处理!!!
第五步:客户端保存3rd_session
回到客户端的工作了。
从第四步后台返回的3rd_session后,需要将3rd_session存入缓存中。
小程序提供了保存到本地缓存的api,使用非常简单。
(1)wx.setStorage(OBJECT)
传入key和data即可。
(2)wx.setStorageSync(KEY,DATA)
第六步:获取用户信息
相关连接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/open.html
示例:接上示例
js:
wx.login({
success: function(res) {
console.log(res);
if (res.code) {
wx.request({
url: ‘https://test.com/onLogin’,
data: {
code: res.code
},
method: ‘POST’,
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
[外链图片转存中…(img-4oeHAvpA-1715907398174)]
[外链图片转存中…(img-SEhXjX8G-1715907398175)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!