随机文章推荐

通过微信小程序实现微信扫码登录

admin 2017/12/23 22:48:31 1085

闲暇时逛掘金，偶然看见一篇文章，小程序的使用场景延伸—微信小程序实现微信扫码登录和微信支付。上次申请微信登录失败了，因为只有公司和企业才能申请微信登录。于是看到这篇文章，手痒的我就顺手撸了一个小程序来实现微信扫码登录。原文在此

需要准备的东西
  • 微信公众平台开发者账号（去微信公众平台开通就行）
  • 微信公众平台选择小程序开发（貌似一个账号只能开发一样微信公众平台的东西）
  • 基础的js基础，会点jQuery就行了（= =！！）
  • 微信小程序开发流程需要知道，官方文档值得看一看。
  • laravel框架
  • 微信开发工具包：laravel-wechat

前几天EasyWechat发布4.0版本了，热烈恭祝。。。安大大造福万千如我等屌丝 = = ！！！

小程序实现扫码登录原理

微信小程序扫码登录原理

小小讲解一下思路
  • 第一步：从服务器获取微信小程序码，服务器通过调用微信小程序接口（获取小程序接口B,因为接口B可以携带参数，这个参数在这个扫码登录中很重要，开始没有仔细看这个原理图，调用的接口A,结果怎么弄都不能实现扫码登录， = =！！真是蠢到哭，仔细看了看图片，才意识到自己弄错了。）服务端生成唯一用户标识（scene），把这个标识加入小程序码，然后传回前端。
  • 第二步：前端拿到小程序码展示到合适的位置，然后可以通过websocket和ajax轮询的方式来获取用户的登录状态，这里我是用的ajax轮询，因为考虑到我这个小博客流量并不是很大，所以对服务器压力也不大，如果你想用websocket可以参考我的文章laravel构建即时聊天程序，也能实现。
  • 第三步：用户通过手机扫码，进入微信小程序首页，小程序加载页面完成调用小程序api获取用户信息和小程序码中的scene（即开始从自己服务器生成的唯一标识，这个scene在小程序的onLoad函数中能拿到）（头像和名字和小程序的code，这个code调用wx.login就能获取到，是用来获取用户的openID必须的东西。通过code获取到的openID能在这个小程序中唯一标识一个用户，如果你要跨多个小程序或公众号唯一标识用户，推荐用同时获取到的session_key来获取用户的unionID，官方也是这么推荐的。），将用户的code，name和头像传到后端，后端保存用户的信息，同时将用户的状态保存起来。同时返回给前端用户的登录状态。
  • 第四步：前端获取到用户的登录状态，刷新浏览器，从而实现微信扫码登录。
    下面以图示的方式展示部分代码
  • 第一步获取小程序码

获取小程序码

其中的scene你可以在前端通过点击事件先请求一个自己写的接口来生成一个用户唯一标识，然后再请求这个接口来拿到小程序码。

  • 第二步ajax轮询用户状态
    服务器端：
    获取用户登录状态
    前端：
    轮询获取用户状态

  • 第三步用户扫码获取用户信息
    获取用户信息
    获取用户信息2
    用户点击登录

  • 第四步：服务器保存用户状态，将用户状态传到前端，前端根据用户状态刷新浏览器
    保存用户状态

到此整个过程完毕，如果你还有什么不清楚的地方，随时欢迎你给我留言或者QQ问我哦，由于最近工作繁忙，所以没什么时间更新博客，不过我会抽时间更新博客的，= =!!转载请注明出处，谢谢！



标签
PHP Laravel Javascript Linux
评论一下

评论列表
  • 孤单又灿烂的人 评论:
这里需要注意的是，微信小程序端访问自己服务器存在跨域问题，所以服务端做一下跨域处理。
  • 2017/12/24 10:23:37
  • 回复
  • Mr.W 评论:
可以的啊。小鑫子
  • 2017/12/26 16:54:14
  • 回复
  • 孤单又灿烂的人 回复 Mr.W
一般一般，还是王老大厉害！
  • 2017/12/26 16:55:59
  • 回复
  • 孤单又灿烂的人 评论:
占个楼。。。
  • 2018/04/01 15:11:41
  • 回复
  • Mr.W 评论:
<script>alert(‘xx’)</script>
  • 2018/04/14 14:07:23
  • 回复
  • 孤单又灿烂的人 回复 Mr.W
O(∩_∩)O哈哈~
  • 2018/04/14 18:39:28
  • 回复