微信授权遇到点问题，能帮忙看看嘛？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2833 天前的主题，其中的信息可能已经有所发展或是发生改变。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

我用的 vue 来管理路由。

现在遇到的问题是授权 url redirect_uri 我填写的地址带了 # 号，导致不能授权，有遇到过这样问题的嘛？

授权

遇到

Vue

路由

26 条回复 • 2017-03-30 21:15:20 +08:00

snailsir

2017-02-10 09:44:35 +08:00

url_encode 一下啊

xiaomajia008

2017-02-10 10:05:05 +08:00

@snailsir

感谢你的回复，我试过了。

http://www.abc.com/acts/#/share/20170101/

encode 之后，通过那个获取 code 的 url 跳转之后
变成了

http://www.abc.com/acts/?code=xxxx&state=STATE#/share/20170101/

。。。。路由被破坏了。

bombless

2017-02-10 10:09:41 +08:00 via Android

微信就是这样设计的。看来你要让路由更聪明点自己处理查询串，或者把你 hash 带到查询串里面再由后端跳到一个没有查询串且 hash 也正常的地址

congminghaoxue92

2017-02-10 10:17:38 +08:00

微信的跳转是跳转到页面的，而不是页面上的锚点。
你的 url ：'http://www.abc.com/acts/#/share/20170101/ '改掉'#'，'#'号后面代表是锚点；'http://www.abc.com/acts/#abc/dde'和'http://www.abc.com/acts/#/share/20170101/ '是指向同一个页面的。

qiayue

2017-02-10 10:20:42 +08:00

redirect_uri 你用一个新网址，这个网址对应的程序是没有界面的，后端处理完之后，你自己跳转回 vue 做的页面

Sunyanzi

2017-02-10 10:26:18 +08:00

我想知道你用前端接微信返回的话你准备怎么处理 code 和 state ..?

跳转链接和返回本来就是后端活儿 ... 包括 state 的验证也是 ...

你需要做的是跳一个类似 /wx/authorize 这样的 URL 由后端 redirect 到微信的 authorize 去 ...

同时 redirect_uri 也是后端维护的 ... 接收返回获得用户的信息和登录态才会再跳回前端 ...

jarlyyn

2017-02-10 11:01:47 +08:00

有，去年年底某次改版改掉的，正好项目刚上线，客户反馈过来查了很久，蛋疼。之前都可以用

解决方案:

在执行前端 app 前预先处理 url ，直接 push 一个 statue 。
具体来说就是在 app.js 的头部加入
var search=location.search;
if (search.length>0){history.pushState({},'web title','#wechatreturn'+search);}

不知道那些说之前就这样设计的，还有说跳转链接和返回的后端的活的是几个意思。

做一个接口， Post 一下获取登录地址，直接 location=跳转过去就可以 oauth 登录了。

再做一个接口，把得到的 search 直接 Post 到接口取得登录信息就可以了。

如果前端或者后台只熟一个，这么自信去评论自己不熟的部分不好

KeepPro

2017-02-10 11:10:27 +08:00 via Android

@jarlyyn 这个 api 要支持 h5 才行吧

jarlyyn

2017-02-10 11:13:32 +08:00

@KeepPro

首先，如果是说浏览器兼容性的话，这不过是跑 app 自己的 router 之前先做个自己的简单 router 罢了。

其次，如果是说后台的话，前端是 ie6/h5/app/客户端,和后台 api 没什么关系吧？

Sunyanzi

2017-02-10 11:32:26 +08:00

@jarlyyn 这里似乎有我事儿我就再多句嘴 ... 所以你是怎么处理的 code 和 state ..?

state 的意义是保证回调是由当前用户发起的 ... 也就是你要判断传出和传入相等 ... 前端额外存 ..?

那 code 呢 ..? 无论如何还是要丢给后端吧 ... 既然如此为什么不直接让后端来接这个回调 ..?

jarlyyn

2017-02-10 12:00:40 +08:00

@Sunyanzi

"跳转链接和返回"

和怎么处理 code 与 state 有什么关系？

后端只需要提供是否能验证的功能。

至于验证成功后怎么处理怎么跳转怎么显示，这是前端的事情，为什么要交给后台来处理？

让后台来处理调整，那岂不是前端的结构和入口要跟着后端来？前端页面结构重构一下的话还必须要要后台配合？

jarlyyn

2017-02-10 12:09:56 +08:00

@Sunyanzi

简单来说，前台本身是 /index.html#xxx
后来需要加入新版本，对 ab 测试，新版本地址是 /v2/index.html#xxx
又要加英文版本，英文版的地址是 /en/index.html#xxx

这个项目难道应该通过后端来接这个回调？

sighforever

2017-02-10 12:15:59 +08:00 via Android

做个自己的跳转页面吧，把当前页的 url 做成一个参数穿个跳转页，自己处理就好了

thundernet8

2017-02-10 12:50:52 +08:00 via iPhone

vue 路由用 history hash 吧

hellocy

2017-02-10 13:05:01 +08:00

我记得 redirect_uri 不能带任何参数

DeepCold

2017-02-10 14:16:29 +08:00

我的解决办法是放弃用 history 模式，改用 hash 模式。
可以借鉴我的线上项目， https://wx.wcar.net.cn/weiche-oil.php?station_id=83764

kanezeng

2017-02-10 15:06:30 +08:00

@jarlyyn 我觉得问题是微信授权后要做什么吧，比如至少基本授权拿到用户的 open-id ？那样的话拿到 code 后需要 appid 和 appkey 去取用户的 open-id ？这一步如果在前端做的话，是要把 appkey 也写到前端去么？这部分就是我一直没想明白的。

learnshare

2017-02-10 15:12:14 +08:00 via Android

没错的，微信是这样。我在 Angular 里手动解析跳转回来的 URL ，然后取 code 出来

jarlyyn

2017-02-10 15:12:16 +08:00

@kanezeng

微信授权后本质是做个登录的动作。

所以需要把登录成功与否的信息返回给前端啊。

前端收到 code/status,发给后端进行登录。

登录成功的话返回系统用户 id/openid/token 之类。

不然你准备怎么把用户信息传给前端，让前端再发个请求用 cooke 里的 session 判断吗？还是作为跳转的参数？

数据的归后端，浏览器的表现归前端。

qiayue

2017-02-10 15:14:40 +08:00

@jarlyyn 不管你前端几个版本，微信授权都应该是一个独立的服务，给前端调用。
比如我同时几个 web app 都要用同一个服务号来授权，难道每一个 web app 都重复写一套授权逻辑？

jarlyyn

2017-02-10 15:17:33 +08:00

@qiayue

对啊，这就是我的意思啊。

微信授权应该是服务接口，而不是跳转页面啊。

按他们的说法，做一个 wx/authorize ，改跳转到哪个 Webapp 呢？还是每个 webapp 写一个接口？

klgd

2017-02-10 15:20:17 +08:00

我觉得微信授权好像没前端（ h5 ）什么事啊，开始跳转到微信页面，用户授权，在跳转回来，通过 code+appid+secret 获取 access_token,再获取用户信息，这应该由服务端处理（不可能说把 secret 暴漏给前端吧）
这整个过程 h5 如果硬要加进来，反而变的复杂了

jarlyyn

2017-02-10 16:07:38 +08:00

@klgd

复杂在哪？

前端要做微信首先必然要做跳转操作。所以把跳转操作全放在前端是最好处理的。

后台就是做两个接口。

一个是 func(session/token,returnurl){
if !Validate(returnurl) return http.403
MakeState(token)
return wx.getAuthUrl()
}

一个是 func(prarams){
if wx.validate(prarams) token=prarams.token
openid=wx. getUserinfo(token).openid
return User(openid).id
}

klgd

2017-02-10 17:22:20 +08:00

@jarlyyn 是事情变的复杂了，不是代码变的复杂了
本来没前端的事呢现在你前端要写代码，要去跟后端交互了
本来后端一个 controller 就可以解决了现在要拆成 2 个接口了
不是说前端不可以这样做，只是觉得没必要这样做

jarlyyn

2017-02-10 17:31:00 +08:00

@klgd

首先，后端本来也需要两个 action 。只不过这个 action 是否负责渲染 html 的问题。

其次，本来也有前端的事情，只不过前端是写模板文件还是写 html+hs 的问题。

mrzhanyouwei

2017-03-30 21:15:20 +08:00

请问楼主最后怎么解决的呢？