vue 前后端分离 如何实现微信后端授权

[jss]

前端授权会多次跳转，用户体验不佳。。。

[yulitian888]

难道不是在服务器端把 token 存起来，请求时候验证授权么？

[lelouchyang]

前端获取 code 发给后端 后端请求微信服务器获取用户信息 登陆／注册 返回 token。

[jss]

@yulitian888 还没拿到 token 之前的授权登陆。在微信端用户同意授权，获取 code 传给后台，后台通过 code 换取网页授权 access_token，最后拿到用户 openid，openid 换系统的 token 返回给前端；

[jss]

@lelouchyang 我先去试试

[yulitian888]

code 换 openid 的过程一律由后端包办了就完了啊，并不需要多次前端往复。
自己看文档，时序图里仅一次用户请求。https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=&lang=zh_CN

[whypool]

授权和前端没啥关系，都是后端发请求的；
前端不会获取任何东西，不会发给后端任何东西

[phpcxy]

在前端拿 code 的话，网页授权域名就要用前端的域名，如果我想多个应用公用的话就不行了吧？我现在都是在后端做，后端获取到 openid 后再生成 jwt token 再重定向回前端。但是这样重定向回前端的 url 就带了 token，用户复制链接到别的地方就能通过身份验证～有没有好点的解决办法呢

[alinwu05]

@phpcxy 我看大部分的解决方法是, open 一个新窗口做授权,然后在这个窗口授权完之后, 把 token 传给 parentwindow,就是前端的这个窗口。

[codeDreamfy]

会跳转到一个页面做授权处理然后后端再跳转回之前的即将转向的地址

[chechengpeng]

的确不佳，但也找不到啥更好的方法啊。

[scofieldpeng]

解决方法是这样的，前端用户点击我要用微信登录按钮->此时请求应用 API 接口，我们叫他小张把，小张做啥呢？就是给你生成跳转收到微信的 URL，然后，前端拿到 url 后 location.href=xxxx 进行跳转，然后微信跳转回来后不是带了 code 么？你现在应该卡在 code 这儿了吧，该怎么做呢？记得生成小张这个接口么？前端请求小张的时候啊，小张需要让你带上一个叫做 redirect_uri 或者其他名字的参数，这个参数就是微信跳转回来跳转的接口，然后，你的页面就拿到了 code 了，这个时候，让写接口的哥们儿给你写一个叫做小王的接口，小王做什么呢？小王就等你拿 code，他去根据 code 获取你们这边的用户信息，如果没有，他可以无私地自动创建一个，也可以告诉你用户没有在系统中注册，你手动告诉用户进行注册或者绑定你们的账号，完了

[scofieldpeng]

好了，说下小张这个接口，这个接入我们可以让他变得更牛逼点，做啥呢？小张接收我们应用的 redirect_uri，然后小张生成跳转微信的 uri 的时候优雅一点，假设我们应用的 hostname 是 baidusb.cn ，前端想要收到 code 的 url 是 baidusb.com/wechat/code,之前说的是让微信直接跳转 baidusb.com/wechat/code，现在不这样做了，让我们应用来跳转，比如我们的应用也就是服务端的小伙伴写了一个固定的接口叫做 api.baidusb.com/wechat/code/callback，微信先跳这个 URL，然后这里做 code 和 state 校验，完事儿了之后再跳到 baidusb.com/wechat/code 这儿来，baidusb.com/wechat/code，这样很多个子应用都可以用啦，当然，这只是其中一种比较好的办法，仅供参考

[wen4034]

可以在公众号入口跳转的时候申请授权，前端拿到 code 之后发送给后台，后台请求到 token

[wen4034]

如果不用获取用户地理信息之类的数据可以静默授权，不需要用户确认。直接在后台请求就好了

[wen4034]

防止楼主踩坑，可以看看这篇文章 https://segmentfault.com/a/1190000010753247

[jss]

@wen4034 对的，就是这种方法。但是第 4 步返回如何处理

[kanganxi]

获取微信 openid 都需要服务器端接口来完成，而跳转在 vue 使用 window.location.href="/access"，来完成； vue 端只需要获取到服务器传回的 openid 或者其他值来保存到本地，是否授权都是服务器来进行判断的

[jss]

@kanganxi 我打算让获取 code 的 window.location.href 里 redirect_uri 指向服务器后台，不再重定向到前台（而前端直接进入 index ），后台处理完成返回 token 到前端，这样减少一次前端重定向

[kanganxi]

@jss 如果后台能完成重定向那当然甚好，不过我们之前处理过，貌似不太好操作，遂放弃，希望你能成功！