首页 微信使用 JSSDK 分享 OAuth 链接的问题
Post
Cancel

微信使用 JSSDK 分享 OAuth 链接的问题

使用微信的JSSDK,可以在转发图文给朋友或者转发到朋友圈的时候,对转发的标题,描述以及图片进行自定义,这是个很好的功能,然而最近测试的时候发现一个Bug,当转发的链接是OAuth链接的时候,这段定义就失效了。

问题描述

先简单说一下什么是OAuth链接,参考微信的说明文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

微信OAuth的链接格式是这样的 https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 其中的 REDIRECT_URI 就是我们自己的网页链接,这段链接只能在微信里面访问,微信会得到通过用户授权得到用户的信息,然后跳转到 REDIRECT_URL 将用户信息传过来

关于JSSDK的分享自定义,微信的说明文档在此处 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
获取分享给朋友按钮点击状态及自定义分享内容接口
wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

上面的代码中,注意link的描述,”该链接域名或路径必须与当前页面对应的公众号JS安全域名一致”,就是说你转发的链接必须与你公众号的JS安全域名一致,因为安全问题,这个设置无可厚非。 你不能自己的图文在 http://www.mydomain.com 而分享其他链接如 http://www.baidu.com, 当你这么设置的时候,这段分享自定义的脚本就全部失效。

现在问题来了,如果我想使用微信自己的OAuth链接进行分享的话,也会失效,虽然是他自家的域名,微信同样认为这个链接和JS安全域名不一致,而如果直接分享 http://www.mydomain.com/xxx 的链接时,是无法从微信里得知用户信息的。

JS安全域名是可以在公众号管理后台设置的,但是无法把open.weixin.qq.com或者qq.com设置为JS安全域名的。

看起来似乎是无解了

解决方法

经过思考,归纳一下问题就是在于两点

  1. JSSDK只能转发同域名下的链接 http://www.mydomain.com
  2. 必须使用 https://open.weixin.qq.com 开头的OAuth链接才能识别微信用户的身份

解决方法其实很简单,把OAuth的链接编码,并且传给自己的代码,使用后台跳转如

1
2
3
4
$oauth_url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect";
$encoded_url = base64_encode($oauth_url);
$new_url = "http://www.mydomain.com/jump?url="+encoded_url;
此处 $new_url 代替之前的转发url,他的域名是符合JSSDK安全域名定义的

Jump里的处理规则就是解码以及后台跳转,伪代码如下

1
2
3
$encoded_url = request['url'];
$url = base64_decode($encoded_url);
header("location: ".$url);

这个问题困扰了我好久,还好终于解决了

2019-02-27 补充

这个问题不是微信的bug,其实转发的时候可以直接转发自己域名下的地址,比如 http://www.mydomain.com/share/news/123 然后,在这个具体的页面里面,如果需要OAuth,进行二次跳转,而不是必须一开始就拼接OAuth的地址,这个问题是开始钻了牛角尖了。。。

【全文完】

This post is licensed under CC BY 4.0 by the author.

《软技能》读书笔记

微信小程序TLS大于等于1.2版本的问题解决