通过大白话理解微信小程序的授权登录

 更新时间:2022年12月08日 14:35:36   作者:π指针  
很多人会把微信小程序的登录和授权搞混淆,下面这篇文章主要给大家介绍了如何通过大白话理解微信小程序授权登录的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

学习改文章,您就有清晰的微信小程序授权思路,前后端遵循开发规矩即可

当然更加完善的实现办法要去看官方文档的推荐

学习前建议看看授权大白话理解-微信小程序获取授权

大白话讲步骤:

按照最常见的,点击一个按钮进行登录

1. 前端写一个button 按钮点击调用一个方法

2. 前端点击button后,该调用的该方法里面写wx.login( ) 方法,这时候你会获得一些数据

其中code才是我们需要的

代码展示

有了code之后,我们应该用wx.request( )发送一个请求把他传给后端,因为后端才可以通过这个code来进行登录凭证

3. 后端怎么进行登录凭证?

  1. 后端要通过微信提供的接口,然后把从前端拿到的code,再转发发送到微信服务器获得信息
  2. 微信服务器提供的接口是:https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code
    后端就是通过这个发送get请求给微信服务器的
  3. 上面的appid , secret , js_code 后面的三个参数就是要替换的
    1. appid是应用id,通过登录微信公众号后台去获取的
    2. secret是应用秘钥,也是通过微信公众号后台去获取的
    3. js_code就是我们前段发送wx.request()传过来的code数据
  4. 为什么这么做?因为appid,secret是微信给每一个开发者账号独一无二的"身份证",让你们合法合规的去获取用户的微信账号信息,如果你们敢乱来的话,那就…,微信小程序也是实名了的。嗯…
  5. 这时候后端通过get请求获取到了官方给你们返回的用户信息了(返回的信息里面openid和session_key 等信息),我们就是要取openid和session_key这两个信息(openid是独一无二的)
  6. 拿到这两个数据后后端服务器要保存,然后返回一个token给前端(这个token能和openid和session_key关联就可以,但是非常不推荐直接返回openid 和 session_key)

4. 前端拿到后端返回的数据了

拿到token,就存进storage里面了,有这个token且未过期就代表你是合法的了,你可以结合微信授权用户信息–wx.getUserInfo( )来拿他个人具体信息了

微信服务器返回的res就是他本人授权登录的账号信息,但是res里面有很多信息,想要她的具体数据,我们需要哪一些?

1. encrytedData:(这一段非常长的数据正是用户信息严格加密后的数据)

2. iv:是加密算法的初始向量

我们拿到上面的encrytedData,iv,再加上之前向后端要的能和openid、session_key关联上的token,一并wx.request( )发给后端

5. 后端拿到数据后

用他传过来的【encrypted 结合 iv】 对 【openid 和session_key】进行解密

然后解密得到重要的数据,返回给了前端

6. 前端拿到数据后:

  1. 渲染数据
  2. 或进一步对数据做出处理

以上总结

  1. 以上整一个过程就是前后端的执行过程,先是wx.login( )登录,得到了code,然后去微信服务器上面换取openid 和 session_ky
  2. 前端得到用户授权,然后就有了用户的独一无二的encrypted 和 iv,这是用户的信息
  3. 把这个encrypted 和 iv 给到后端 ,后端就结合之前用户登录得到的session_key进行解密
  4. 解密后得到他的具体信息,返回前端

在微信文档里面都有了 — 点我跳转去看

官方文档安排的明明白白的

疑问2:下载了里面有什么类型的后端代码?

1.有以上四种类型的代码,可以直接复制粘贴来跑,按照他的接口就可以

2. 像Java之类的,百度上面有很成熟好用的解密类,百度就可以下载

总结

到此这篇关于通过大白话理解微信小程序的授权登录的文章就介绍到这了,更多相关微信小程序授权登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js利用clipboardData实现截屏粘贴功能

    js利用clipboardData实现截屏粘贴功能

    这篇文章主要为大家详细介绍了js利用clipboardData实现截屏粘贴功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • jQuery检查元素存在性(推荐)

    jQuery检查元素存在性(推荐)

    这篇文章主要介绍了JavaScript检查元素存在性的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 微信小程序淘宝首页双排图片布局排版代码(推荐)

    微信小程序淘宝首页双排图片布局排版代码(推荐)

    这篇文章主要介绍了微信小程序淘宝首页双排图片布局排版代码,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • JavaScript简写技巧

    JavaScript简写技巧

    这篇文章主要介绍了JavaScript简写技巧,运用简写技巧,可以加快开发速度,让开发工作事半功倍,大家感兴趣的话可以参考本篇文章
    2021-08-08
  • web前端页面生成exe可执行文件的方法

    web前端页面生成exe可执行文件的方法

    这篇文章给大家介绍了Electron 怎么将网页打包成桌面应用(web前端页面怎么生成exe可执行文件),感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-02-02
  • js实现异步循环实现代码

    js实现异步循环实现代码

    这篇文章主要介绍了js实现异步循环实现代码,需要的朋友可以参考下
    2016-02-02
  • 微信小程序(六):列表上拉加载下拉刷新示例

    微信小程序(六):列表上拉加载下拉刷新示例

    本篇文章主要介绍了微信小程序(六):列表上拉加载下拉刷新示例,非常具有实用价值,需要的朋友可以参考下。
    2017-01-01
  • 微信小程序音乐播放器开发

    微信小程序音乐播放器开发

    这篇文章主要为大家详细介绍了微信小程序音乐播放器开发,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • javascript手风琴下拉菜单实现代码

    javascript手风琴下拉菜单实现代码

    手风琴效果的下拉菜单大家都有见到过吧,实现的方法也有很多,这篇文章就为大家分享了javascript手风琴下拉菜单实现代码,纯手写的,感兴趣的朋友不要错过。
    2015-11-11
  • chrome下判断点击input上标签还是其余标签的实现方法

    chrome下判断点击input上标签还是其余标签的实现方法

    下面小编就为大家带来一篇chrome下判断点击input上标签还是其余标签的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09

最新评论