单页面应用在微信服务号下的登录流程
最近我们的小程序涉及到虚拟支付的问题,在ios端的支付被封掉了?,所以有了在服务号上搞一套H5版的小程序的需求。由于我们小程序是mpvue写的,为了尽量复用之前的样式和逻辑,选择了前后端分离的模式,于是一段新的踩坑之旅开始了。放下wx的jssdk暂且不表,今天来说说登录时遇到的坑。
服务号的登录流程
以前搞过服务号的同学对于它的登录流程应该不陌生,就是当后端检测到当前用户没有授权时,将会重定向到微信的授权页面,当用户点击这个授权的button时,微信会根据Url查询字符串中的重定向URL,重新回到我们的页面。
下面3幅图展示了整个过程:
当我们的服务器发现用户没有授权,返回
302
状态码,以及微信的授权页面location用户在该页面点击确认登录
微信服务器根据location里的redirectURL,返回
301
code,重定向回来
上面三步,经历了两次重定向,第一次从自己的服务器重定向到微信的服务器,微信展示授权页面。第二次重定向是当用户点击之后,微信会带一个code重定向回来,当服务器拿到这个code之后,经历一波获取openId的操作之后,生成一个session,这样用户以后访问时就不需要再次登录。
这样的模式在传统的前后端不分离,基于模板的情况下,是没有问题的,因为没有json的返回,后端进行逻辑处理后,渲染出html。但是在单页面的情况下,如果思路跑偏会出现一堆问题。
单页面遇到的问题
上面说的思路跑偏是什么意思呢?就是当用户进来时,先将单页面的index.html
发给浏览器。当浏览器执行开始js脚本(app.js)时,就会向服务器发送请求。
此时如果是一个新用户在访问,由于没有登录,服务器会返回一个302的重定向状态码,然而这次请求是通过ajax发起的。浏览器不会自动重定向到授权页面,导致请求失败。
此时你会想,浏览器不会重定向,我可以当请求失败时通过设置window.location
自己重定向到微信授权页面,这样解决了第一步的重定向问题,然后当用户点击确定登录时,马上又面临第二个重定向的问题--重定向到哪里。
由于微信重定向的url是带着code返回的,重定向的Url肯定不能是一个静态页面的Url,必须是一个api,假设还是login。后端在请求中拿到code之后,生成一个新的session,再将原先的html再次返回给浏览器,并带上set-cookie
字段,此后浏览器会带着cookie请求,登录至此完成。
这样做ok,但是却留下一个很恐怖的URL:https://example.com/login?code=001QLbSQ0Ujc162Sp5UQ0IG6SQ0QLbSD
,此后前端路由开始work,就在前面的基础上加上一个#
号,如果你的业务还涉及支付,那就完蛋了,因为支付需要配置的url应该是稳定的而code这个查询参数是动态变的。
解决方案
我画了一张图解释了重新设计的登录流程:
在这个新的流程中,当新用户第一次发起请求(login)时,不会返html给浏览器,只会进行重定向:
如果用户未登录,重定向到微信的授权页,并设置redirect url,使用户点击授权后可以重定向回来
新用户重定向回来之后,login api拿到code,经过生成session操作后,再次重定向到
home
url下如果是老用户,直接重定向到
home
url下此时由于访问
home
的用户都是已登录状态,api统一返回index.html,所以最终用户看到的是https://example.com/home
下的页面,后面的单页面路由会在这个url下展开。(虽然对服务号用户来说可能没什么区别)
总结一下这么做的好处:
少传输一次html页面,第一种方式一开始就给未登录的用户传html是没用的
美观的url(用户感知不到)
前端无需手动重定向,后端将显示页面和登录逻辑放到两个api中,逻辑更清晰
总结
了解到3xx
状态码的博大精深,尽管对普通用户感知不深,没有2xx
受群众欢迎,也没有404
,500
知名度高,属于默默无闻型的。但是在互联网世界里却扮演着重要的角色。
转载于:https://www.cnblogs.com/imgss/p/10116017.html
单页面应用在微信服务号下的登录流程相关推荐
- vue 调用共众url_vue单页面,在微信公众号支付中遇到的URL未注册BUG解决方法-Go语言中文社区...
今天在做微信公众号支付的时候,遇到一个bug,在当前支付页面点击支付,就会报错,提示当前页面的URL未注册.如下图: 但是,这个URL我们是在后台微信公众号配置了的,所以说不会出错. 但是我们刷新一次 ...
- 微信服务号前端页面开发总结
前言 参与了大半年的微信服务号开发工作,主要负责微信前端.期间遇到了不少困难,在这里做个小小的总结,希望能够帮助到和我一样遇到迷惑的朋友. 注:很多问题是我个人所遇到的,可能存在理解偏差(编程中遇到奇 ...
- php微信地图定位导航,微信公众服务号下实现地图语音导航的方案
微信公众服务号下实现地图语音导航的方案 如何在微信公众号里面实现多商家用户,店铺详情页的语音导航功能这个问题一直困惑着我. 现在有一个解决方案供大家参考. 具体步骤如下: 1.打开:http://ma ...
- vue开发的微信服务号的H5网页禁止点击时页面放大或者缩小
vue开发的微信服务号 问题:点击H5页面时,页面会放大 ,不能固定 解决方案: 1.在index.html 页面 添加以下代码 width=device-width :表示宽度是设备屏幕的宽度 in ...
- PHP 开发社区微信服务号实战图解
本博文就月初刚上线的微信服务号,图文进行总结分享给大家. 去年年底,我所在的团队讨论要开发微信号,话题由此拉开: 原来有一个3年前注册的微信号,但是后台操作无法从"订阅号"变 ...
- 商城系统开发,使用微信服务号好?还是小程序?
微信服务号和小程序都可以使用微信授权登录(获取用户微信头像.昵称.).微信支付.带参数二维码.微信红包等功能. 很多企业在开发商城时,会纠结使用微信服务号还是小程序? 了解服务号与小程序 服务号定位是 ...
- 商城系统开发使用微信服务号和小程序那个好?
"我们开发公众号不是为了媒体,我们的本意不是传播内容,我们要提供服务,但服务号没有达到预期,我们在讨论一个新的形态,叫应用号.平时不发东西,他安静的存在在那,低频的需求不需要安装App,微信 ...
- 微信服务号开发的完整人性化版攻略
前言: 本次要讲述的是一个本人完整微信服务号开发的经验分享,微信服务号的作品:请搜索微信号:zjaisino,名称:爱信诺Aisino一站式服务平台.(这里声明,这不是打广告,只是为了方便各位开花攻城 ...
- 微信服务通知消息找回_第三方平台微信服务号模板消息怎么发送
使用公众号平台模板消息功能,无法发送模板消息,如果想要发送模板消息,可以用第三方平台微号帮功能模板消息群发实现,也可自己根据公众号平台的接口开发实现,均可以为微信服务号发送模板消息,且发送模板消息不占 ...
最新文章
- Xamarin Andro教程搭建Xamarin Androidid开发环境(一)
- Android KitKat 4.4 Wifi移植AP模式和网络共享的调试日志
- 创建vue-cli项目
- fh 幅频特性曲线怎么画fl_初学者怎么练习线条?教你如何画出流畅线条的技巧...
- Spring配置项context:annotation-config/解释说明
- c# 之抽象工厂模式
- 电机的入门之路系列4--PWM控制直流电机
- redis和mecache和ehcache的特点
- Recoverit for Mac专业的数据恢复工具
- Flutter实战之Builder和StatefulBuilder
- 阿里云存储负责人吴结生:我经历的三个重大决策
- 推荐一款轻量级好用的开源PDF阅读器,确实好用~
- VS2015 C#程序打包成.exe之installshield使用教程
- 响应式web开发 许愿墙
- android悬浮窗(支持退回桌面后显示)
- gis城市模型建立之地形模型的建立
- This page can't be displayed. Contact support for additional information. The incident ID is: xxxxxx
- Python 删除列表中指定的元素
- android翻盖手机双屏显示,使用双屏翻盖手机是一种怎样的体验?
- c语言将结果原模原样输出到文件,用c语言处理文件