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

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

作者: zhangyanpi_ba21 | 来源:发表于2018-06-20 10:39 被阅读0次

    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:第一次写文章,表达不是很清楚,请见谅!

    相关文章

      网友评论

          本文标题:微信公众号的网页开发(用户授权、微信分享)

          本文链接:https://www.haomeiwen.com/subject/lhzgsftx.html