微信中微信授权逻辑

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

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

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

微信授权逻辑

1. 进入页面，获取授权状态，（getUserid）一般是看cookie里面有用户信息吗。
2. 有用户信息，pass。

3. 无用户信息。这里只是打个标记，并不在一进入页面就强制授权。而是在用户操作的时候提示用户授权，因为这样体验比较好。
   体验上是可以告诉用户你浏览我们是不需要你的信息的，而你在我们平台互动是需要注册登录的。

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

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

嘿嘿你猜我在做的是什么。

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

那么在这个场景下，我们怎么显示呢？

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

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

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

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

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

方案一：跨域方案

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

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

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

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 理解成第三方平台。

微信公众号：前端linong