微信中微信授权逻辑

转载自 SegmentFault

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

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

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

微信授权逻辑

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

• 有用户信息，pass。

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

用户拒绝授权，这里页面是无感知的，所以不做任何处理。但是页面可以知道用户是非首次互动，这时候可以先弹出一个框告知用户，用户需要允许授权。

• 用户允许授权，这个时候会触发刷新页面。这里建议页面给自己加个标记，就是用户触发授权的事件，刷新之后重新调用一下。

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

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

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

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

• 我们做一个小页面藏在授权弹框后面，因为拒绝的时候页面无变化，用户就可以看到后面的小页面。

• 基于方案1我们发现，网慢的情况下，同意授权的用户也会看到弹窗，这对于我们要求体验的前端er来说是不好的。我们这里可以尝试给一个稍微大一点的setTimeout显示小页面。

• 基于方案2，因为微信授权弹窗不会阻塞主进程，所以我们并不能稳定控制小页面的显示与隐藏。极端情况下用户的体验仍是不好的。那么我们应该怎么办呢？捶产品，砍需求，哈哈当然是不做这个弹框，把这部分的功能换另一种交互方式咯。

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

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

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

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

方案一：跨域方案

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

我方服务端判断登录是判断 cookie 。

• 对于前端来讲 a.com 和 b.com 是跨域的。

a.com 是无法把 cookie 写到 b.com 下的。

• 同样 b.com 也无法读取 a.com 的 cookie。

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

a.com/wxauth 会触发微信授权，我们默认用户同意授权

• 微信会将页面重定向到 callback 页面。（这里是在公众号配置好的）

• callback 页面写 cookie。这个时候我们就能拿到用户登录信息。

• 但是基于上面我们跨域的cookie是无法共享的。那么我们可以开CORS来使用，a.com 的接口允许 b.com的页面发出请求。

• 但是跨域的情况下默认是不携带 cookie 的。这个时候我们可以配置 withCredentials 来达到携带cookie的目的。

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

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

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

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

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

微信公众号：前端linong

原文：SegmentFault