整理一下通过h5做微信分享相关配置。
登录微信公众号, 获取AppID , 配置白名单 ,然后 配置JS接口安全域名 。
登录公众号后,左侧菜单栏选择:开发 =>基本配置,直接复制开发者ID(AppID)即可:
注意使用公网IP
左侧菜单栏选择:设置 =>公众号设置:
网页授权主要是获取微信openId使用,如果只是用分享操作,本步可以略过。
网页授权介绍
大致步骤是:
在配置完前面AppId、白名单及安全域名后,开始处理网页授权。
网页授权这一块儿内容主要是后端需要处理的内容较多,前端还是很简单的,仅需要跳入微信链接即可。为什么要走这一步呢因为有些操作,例如微信支付、播放微信录音、获取微信地址、微信卡券、商品、小店等等许多功能必须在微信浏览器汇总打开操作才可以,因此需要跳入微信浏览器及微信链接来处理后续操作。当配置后,链接便只有在微信浏览器中打开才会生效了,不然会提示:
链接如下:
https://open.weixin.qq.com/connect/oauth2/authorize?appid={$appId}&redirect_uri=={$URL}&response_type=code&scope=snsapi_base#wechat_redirect
参数分解
可见,上面需要填入的变量有二,一个是前面回去的AppId,另外一个则是url,需要写的是与配置域名所对应域名下的url,并且要进行urlEncode编码处理使用。
在拿到上述完整链接后,通过 window.location.href = ${url} 进行网页授权即可。在授权成功后,页面会重定向到自己设置的url页面去,然后在该连接上会有code值,取出即可:
将拿到的code值传给后端即可,看具体需求决定是否前端使用openId,如果非必要则不在前端获取保存或者由后端加密后传给前端使用。
大致分为五个步骤:
在步骤 1.3 中已经配置。
在需要调用JS接口的页面引入如下JS文件: https://res.wx.qq.com/open/js/jweixin-1.6.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
配置需要如下几个参数:
那这些参数从哪儿来呢?依旧不用担心,依然是交给后端处理,后端返回时间戳、随机串及签名,其他的自己配置即可。
通过后端获取需要进行一个小交互,将此时的链接地址(window.location.href)传给后端即可。
于是就有了上述的除了最后一个以外的所有参数。最后一个 jsApiList 则是写分享接口,如我们想要分享到朋友圈、QQ、腾讯微博这3个,那就写:
可以发现,我们其实多配置了一个 checkJsApi ,这个是一个判断配置,可以判断当前客户端版本是否支持指定JS接口。
签名算法
所有JS接口列表
接下来就可以写分享信息配置了。配置信息一般都是通过 wx.ready 处理的:
例如我们要分享到朋友圈,配置则如下:
注意:不要出现 诱导分享
同样,一般都是通过 wx.error 处理失败相关信息:
其实微信分享(地理位置、扫一扫、卡券等微信各类接口)都是通过上述步骤配置的,可举一反三,在面对不同需求时通过微信开发文档来进行更为复杂的操作。
一、首先在微信公众平台配置授权回调地址(“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名) 二、关于网页授权的两种scope的区别说明 1、以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面) 2、以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。 3、用户管理类接口中的“获取用户基本信息接口”,是在用户和公众号产生消息交互或关注后事件推送后,才能根据用户OpenID来获取用户基本信息。这个接口,包括其他微信接口,都是需要该用户(即openid)关注了公众号后,才能调用成功的。 三、关于网页授权access_token和普通access_token的区别 1、微信网页授权是通过OAuth2.0机制实现的,在用户授权给公众号后,公众号可以获取到一个网页授权特有的接口调用凭证(网页授权access_token),通过网页授权access_token可以进行授权后接口调用,如获取用户基本信息; 2、其他微信接口,需要通过基础支持中的“获取access_token”接口来获取到的普通access_token调用。 四、具体而言,网页授权流程分为四步: 1、 引导用户进入授权页面同意授权,获取code 1)、 scope为snsapi_basehttps://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdap ter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_bas e&state=123#wechat_redirectscope为snsapi_userinfohttps://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type= code&scope=snsapi_userinfo&state=STATE#wechat_redirectcode说明 : code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期 。2、 通过code换取网页授权access_token首先请注意,这里通过code换取的是一个特殊的网页授权access_token,与基础支持中的access_token(该access_token用于调用其他接口)不同。公众号可通过下述接口来获取网页授权access_token。如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。尤其注意:由于公众号的secret和获取到的access_token安全级别都非常高,必须只保存在服务器,不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤,也必须从服务器发起。 请求方法获取code后,请求以下链接获取access_token: https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code3、 刷新access_token(如果需要)由于access_token拥有较短的有效期,当access_token超时后,可以使用refresh_token进行刷新,refresh_token有效期为30天,当refresh_token失效之后,需要用户重新授权。请求方法获取第二步的refresh_token后,请求以下链接获取access_token:https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN4、 拉取用户信息(需scope为 snsapi_userinfo) 如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openid拉取用户信息了。请求方法 http:GET(请使用https协议) https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN