微信公众号的网页开发(用户授权、微信分享)

2018-06-20  本文已影响0人  zhangyanpi_ba21

1.开发前的公众平台配置

首先确定微信公众号是服务号还是订阅号(这里只介绍服务号)

1.1申请测试账号用于本地开发

   开发->开发者工具->公众平台测试账号->配置账号信息(获取用户信息公众号必须具备网页账号权限)

配置回调域名

点击修改配置授权回掉页面

回调域名

1.2正式环境配置

上线前的配置

可以在设置的js接口安全域名下调用微信开放的JS接口

用户在网页授权页同意授权给公众号后,微信会将授权数据传给一个回调页面,回调页面需在此域名下

2.网页授权

授权过程

1.用户打开推广出去的地址,页面中需要判断用户打开的地址中是否带有code参数(是否已经授权)

2.存在code(说明用户已经授权)否则调用授权页面

授权页面

(1)授权页面完整地址:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_userinfo#wechat_redirect

(2)scope有两个值分别是:(获取用户基本信息,这里scope的值选snsapi_userinfo)

 (a.)snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid)

 (b.)snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )

3.用户会看到一个如下的授权页面

4.用户确认后,页面会跳转到redirect_uri/?code=CODE&state=STATE。在后面加上code

到此为止,已经完成了用户授权

3.获取用户基本信息

    通过code换取网页授权access_token、用access_token拉取用户信息(这两部可以由后端完成),也可以前端完成

    具体可以参考网页授权的开发文档

4.微信分享

确保使用JSSDK(微信分享)的域名是第一部分平台配置中的JS接口安全域名

1.引入js文件

2.通过config接口验证配置(可以请求后台接口拿到config需要的属性值)

3.分享功能(希望在页面加载时就初始化分享)

5.遇到的问题

(1)分享出去的标题、描述、和图片与设置的不一致

授权的切入点:

(a.)开发时准备整个活动的入口就是https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=url&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect 打开活动首页就进行微信授权。拿到code换取token进行正常的页面渲染

既然入口就是微信授权,分享出去的链接也必须是授权页面(上面的地址)。此时出现了分享的标题、描述等不一致的问题。

原因:分享的地址出错了,导致分享失败

修改js安全域名????下图说明行不通,要将一个文件上传到填写的域名下,以证明此域名是有效的

此时意识到,思路出错了,分享出去的链接只能是页面地址,不可以加上微信授权。

(b.)入口是页面地址,在页面代码中进行页面授权。即(2.网页授权)中的步骤

PS:第一次写文章,表达不是很清楚,请见谅!

上一篇下一篇

猜你喜欢

热点阅读