V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaomajia008
V2EX  ›  程序员

微信授权遇到点问题,能帮忙看看嘛?

  •  
  •   xiaomajia008 · 2017-02-10 09:42:42 +08:00 · 8727 次点击
    这是一个创建于 2843 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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 我填写的地址 带了 # 号, 导致不能授权,有遇到过这样问题的嘛?
    26 条回复    2017-03-30 21:15:20 +08:00
    snailsir
        1
    snailsir  
       2017-02-10 09:44:35 +08:00   ❤️ 2
    url_encode 一下啊
    xiaomajia008
        2
    xiaomajia008  
    OP
       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
        3
    bombless  
       2017-02-10 10:09:41 +08:00 via Android
    微信就是这样设计的。看来你要让路由更聪明点自己处理查询串,或者把你 hash 带到查询串里面再由后端跳到一个没有查询串且 hash 也正常的地址
    congminghaoxue92
        4
    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
        5
    qiayue  
       2017-02-10 10:20:42 +08:00
    redirect_uri 你用一个新网址,这个网址对应的程序是没有界面的,后端处理完之后,你自己跳转回 vue 做的页面
    Sunyanzi
        6
    Sunyanzi  
       2017-02-10 10:26:18 +08:00
    我想知道你用前端接微信返回的话你准备怎么处理 code 和 state ..?

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

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

    同时 redirect_uri 也是后端维护的 ... 接收返回获得用户的信息和登录态才会再跳回前端 ...
    jarlyyn
        7
    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
        8
    KeepPro  
       2017-02-10 11:10:27 +08:00 via Android
    @jarlyyn 这个 api 要支持 h5 才行吧
    jarlyyn
        9
    jarlyyn  
       2017-02-10 11:13:32 +08:00
    @KeepPro

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

    其次,如果是说后台的话,前端是 ie6/h5/app/客户端,和后台 api 没什么关系吧?
    Sunyanzi
        10
    Sunyanzi  
       2017-02-10 11:32:26 +08:00
    @jarlyyn 这里似乎有我事儿我就再多句嘴 ... 所以你是怎么处理的 code 和 state ..?

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

    那 code 呢 ..? 无论如何还是要丢给后端吧 ... 既然如此为什么不直接让后端来接这个回调 ..?
    jarlyyn
        11
    jarlyyn  
       2017-02-10 12:00:40 +08:00
    @Sunyanzi

    "跳转链接和返回"

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

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

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

    让后台来处理调整,那岂不是前端的结构和入口要跟着后端来?前端页面结构重构一下的话还必须要要后台配合?
    jarlyyn
        12
    jarlyyn  
       2017-02-10 12:09:56 +08:00
    @Sunyanzi

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

    这个项目难道应该通过后端来接这个回调?
    sighforever
        13
    sighforever  
       2017-02-10 12:15:59 +08:00 via Android
    做个自己的跳转页面吧,把当前页的 url 做成一个参数穿个跳转页,自己处理就好了
    thundernet8
        14
    thundernet8  
       2017-02-10 12:50:52 +08:00 via iPhone
    vue 路由用 history hash 吧
    hellocy
        15
    hellocy  
       2017-02-10 13:05:01 +08:00
    我记得 redirect_uri 不能带任何参数
    DeepCold
        16
    DeepCold  
       2017-02-10 14:16:29 +08:00
    我的解决办法是放弃用 history 模式,改用 hash 模式。
    可以借鉴我的线上项目, https://wx.wcar.net.cn/weiche-oil.php?station_id=83764
    kanezeng
        17
    kanezeng  
       2017-02-10 15:06:30 +08:00
    @jarlyyn 我觉得问题是微信授权后要做什么吧,比如至少基本授权拿到用户的 open-id ?那样的话拿到 code 后需要 appid 和 appkey 去取用户的 open-id ?这一步如果在前端做的话,是要把 appkey 也写到前端去么?这部分就是我一直没想明白的。
    learnshare
        18
    learnshare  
       2017-02-10 15:12:14 +08:00 via Android
    没错的,微信是这样。我在 Angular 里手动解析跳转回来的 URL ,然后取 code 出来
    jarlyyn
        19
    jarlyyn  
       2017-02-10 15:12:16 +08:00
    @kanezeng

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

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

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

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

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

    数据的归后端,浏览器的表现归前端。
    qiayue
        20
    qiayue  
       2017-02-10 15:14:40 +08:00
    @jarlyyn 不管你前端几个版本,微信授权都应该是一个独立的服务,给前端调用。
    比如我同时几个 web app 都要用同一个服务号来授权,难道每一个 web app 都重复写一套授权逻辑?
    jarlyyn
        21
    jarlyyn  
       2017-02-10 15:17:33 +08:00
    @qiayue

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

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

    按他们的说法,做一个 wx/authorize ,改跳转到哪个 Webapp 呢?还是每个 webapp 写一个接口?
    klgd
        22
    klgd  
       2017-02-10 15:20:17 +08:00
    我觉得微信授权好像没前端( h5 )什么事啊,开始跳转到微信页面,用户授权,在跳转回来,通过 code+appid+secret 获取 access_token,再获取用户信息,这应该由服务端处理(不可能说把 secret 暴漏给前端吧)
    这整个过程 h5 如果硬要加进来,反而变的复杂了
    jarlyyn
        23
    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
        24
    klgd  
       2017-02-10 17:22:20 +08:00
    @jarlyyn 是事情变的复杂了,不是代码变的复杂了
    本来没前端的事呢 现在你前端要写代码,要去跟后端交互了
    本来后端一个 controller 就可以解决了 现在要拆成 2 个接口了
    不是说前端不可以这样做,只是觉得没必要这样做
    jarlyyn
        25
    jarlyyn  
       2017-02-10 17:31:00 +08:00
    @klgd

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

    其次,本来也有前端的事情,只不过前端是写模板文件还是写 html+hs 的问题。
    mrzhanyouwei
        26
    mrzhanyouwei  
       2017-03-30 21:15:20 +08:00
    请问楼主最后怎么解决的呢?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1027 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 23:15 · PVG 07:15 · LAX 15:15 · JFK 18:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.