2018年9月 - 网页微信登录(扫二维码登录)开发教程

最终效果如下图:

112-1

本文对谁有用

需要给网站做微信登录的程序员。

本文目的

节省你时间,快速把这个二维码微信登录搞定

前言

之前2017年1月我其实做过一次微信登录,那次写了博客:https://medium.com/@1003211008/微信登录-ruby-on-rails-5-总结-aba4673fe6fa
注意,2017年1月这一次,是手机里点个按钮一键登录这种。
而这篇博客是电脑上扫二维码登录。这两个是不一样的。

电脑端扫二维码,是微信开放平台。
手机上一键登录,是微信公众平台。

背景

我的技术栈如下
前端:Vue.js 单页应用(Vuex + vue-router + axios)
后端:Ruby on Rails 5

注意:是个前后端分离的应用。

简单概括

我因为时间紧,就不一步步讲的非常清楚了。我这里先写下整体流程,看看啥时候有空再来补细节。
其他我没说的地方你参考微信文档就好了:

  1. 在你的网站里,用户点击"微信登录"的图标时。Javascript 直接构建一个符合微信文档说明的 URL。然后跳转过去。
    URL 里有你的 APPID, 回调地址等等。回调地址你要填前端应用的地址。我这里是直接跳到 Vue 来处理。

  2. 用户扫二维码,确认授权。微信会跳到回调地址。

  3. 回调地址(我这里是 Vue) 会收到 code 这个 GET 参数。
    拿这个 code 去获得 access token。(注意这个 code 只能使用一次。用了就失效了)

  4. 用 access token 再发个 HTTP 请求。
    拿用户的信息。微信会返回:open id, union id, 头像,名字,电话,邮件。

  5. (重点来了)拿着 union id 去数据库里找,找得到就返回,找不到就新建然后返回。

这就成功登录了。我这里是后端返回 JWT 给前端应用。

全文完。

2018年9月 - 网页微信登录(扫二维码登录)开发教程
Share this

Subscribe to 1c7 的博客