微信中微信授权逻辑

linong

开篇我先吐槽一下微信开发者的文档,千年不更新

写文时间:2020年3月14日,先敲个时间,别那边偷偷改了有人吐槽我。

文档中写的拒绝允许都会触发回调,然后我测试拒绝的时候就不会触发回调

微信授权逻辑

image.png

  1. 进入页面,获取授权状态,(getUserid)一般是看cookie里面有用户信息吗。
  2. 有用户信息,pass。
  3. 无用户信息。这里只是打个标记,并不在一进入页面就强制授权。而是在用户操作的时候提示用户授权,因为这样体验比较好。
    体验上是可以告诉用户你浏览我们是不需要你的信息的,而你在我们平台互动是需要注册登录的。

    1. 用户拒绝授权,这里页面是无感知的,所以不做任何处理。但是页面可以知道用户是非首次互动,这时候可以先弹出一个框告知用户,用户需要允许授权。
    2. 用户允许授权,这个时候会触发刷新页面。这里建议页面给自己加个标记,就是用户触发授权的事件,刷新之后重新调用一下。

需求一: 拒绝授权的时候弹窗

嘿嘿你猜我在做的是什么

我看之前代码是有拒绝回调逻辑的,而且我也在文档中确认过了。
但是我在测试的时候发现,拒绝不会触发回调,成功的时候逻辑是对的。

那么在这个场景下,我们怎么显示呢?

  1. 我们做一个小页面藏在授权弹框后面,因为拒绝的时候页面无变化,用户就可以看到后面的小页面。
  2. 基于方案1我们发现,网慢的情况下,同意授权的用户也会看到弹窗,这对于我们要求体验的前端er来说是不好的。我们这里可以尝试给一个稍微大一点的setTimeout显示小页面
  3. 基于方案2,因为微信授权弹窗不会阻塞主进程,所以我们并不能稳定控制小页面的显示与隐藏。极端情况下用户的体验仍是不好的。那么我们应该怎么办呢?捶产品,砍需求,哈哈当然是不做这个弹框,把这部分的功能换另一种交互方式咯

需求二: 非微信绑定的域名做微信授权

因为现在微信管得太严了,怕被微信拉黑,所以考虑使用其他域名做分享外链。

但是我们又希望可以在微信授权登录一下,这样这个需求就来了。

微信中绑定的安全域名和回调域名为 a.com
我们分享到微信打开的域名为 b.com

方案一:跨域方案

首先我们要明确几个要点。

  1. 我方服务端判断登录是判断 cookie
  2. 对于前端来讲 a.comb.com跨域的。
  3. a.com 是无法把 cookie 写到 b.com 下的。
  4. 同样 b.com 也无法读取 a.comcookie

好了基于上面的要点。我们开始实现功能。

  1. a.com/wxauth 会触发微信授权,我们默认用户同意授权
  2. 微信会将页面重定向到 callback 页面。(这里是在公众号配置好的)
  3. callback 页面写 cookie。这个时候我们就能拿到用户登录信息。
  4. 但是基于上面我们跨域的cookie是无法共享的。那么我们可以开CORS来使用,a.com 的接口允许 b.com的页面发出请求。
  5. 但是跨域的情况下默认是不携带 cookie 的。这个时候我们可以配置 withCredentials 来达到携带cookie的目的。

基于上面的跨域方案,我们 b.com 下面没有任何 cookie,只有页面。
我们所有的请求和 cookie 都放在 a.com

方案二:共享,我觉得叫授权验证也可以

上个方案是所有请求都走 a.com

这个方案是所有请求都走当前域名。我网上看了几个别人做好的,也都是这种方案。

这种方案其实可以把 a.com 理解成第三方平台。

image.png

微信公众号:前端linong

clipboard.png

阅读 2.8k

javascript-lNong
只此一生,何必从众

Read-Search-Ask

22.7k 声望
4.8k 粉丝
0 条评论

Read-Search-Ask

22.7k 声望
4.8k 粉丝
文章目录
宣传栏