微信公众号网页开发——授权登录，js安全域名，jssdk使用

微信的普及，好多项目开始运行在微信环境中，微信公众号算是一个很常见的平台，主要介绍微信公众号内部，网页开发的一些知识点和值得关注的点；　　

没有基础的可以先看下微信官方文档的基础介绍；

一、首先说说，我们自己开发的h5网页，配置在公众号平台内，怎么获取微信用户信息；

 1、很重要的一步，js安全域名配置配置，看下微信官方的介绍吧，如下图：

 

简单理解就是，前端h5项目运行的服务器域名，注意是域名，不是IP！

当然这个域名配置由微信公众号管理者进行配置，只要确认前端项目运行服务器域名给他们配就行；

需要注意的有两点，

1）端口必须是80端口，也就是不能这样:http://xxx.xxx:8080/xxx.html，不能带端口号！切记切记，不然你就别玩这个公众号网页开发了（微信就是这么牛逼，这是他们规定的）；

2）看到上面的图片，说有一个txt文件要放置在提供的域名目录下，可以是根目录，也可以指定目录下面，配置好之后，直接浏览器地址栏访问这个路径，能打开就成功了，此处还有一个坑：

    如果把这个txt文件放置在根目录，你的h5访问路径就不能带路径，也就是放置在根路径下面，http://xxx,xxx/index.html是没有问题的，如果h5项目是http://xxx.xxx/mp/index.html，这是行不通；

    同理，如果你把这个txt文件放置在某个文件下，如：http://xxx.xxx/mp，放在mp文件夹下，那你的h5也要放在这个路径下面，http://xxx.xxx/mp/index.html；不然肯定有问题；

至于什么问题，如果你后面要调用微信的jssdk，在wx,config时会一直提示你，config err: invalid url domain；啥意思？域名不合法啊！

这个问题搞定好了之后，后面会非常顺利，通常直接让运维或者后端大佬们，直接放根目录就行，也别搞什么其他端口，就80端口；

二、授权登录

授权登录第一步就是获取微信返回的code值，只有拿到这个code值，才能后续的获取微信用户信息，那怎么拿到微信返回的code值？很简单，文档有实例，我们要做的只是改改参数就行：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect //若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。

上面标红的几个参数值，是需要替换成自己需要的值，

APPID=>公众号的唯一标识，申请公众号已经分配好的；

REDIRECT_URL=>在成功拿到code值，你需要跳转到你项目的路径地址，比如login.html之类的；

SCOPE=>有两个固定值：snsapi_base，snsapi_userinfo ，两者任选其一，两个值区别，看文档自然明白；

STATE=>这个参数是自定义，什么值都行，你配置什么值，到时候跳转回来后，原样给你带回来，需要注意的是有格式要求（重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节）；

拿到code后，微信会自动跳转会你配置的链接地址并携带code,state参数——redirect_uri/?code=CODE&state=STATE，这种格式的，直接在url中取参数就行；

这一步搞定之后，后面就是各种调微信接口，传对应接口需要的参数就行；

三、调用jssdk

这一步的前置条件就是第1点的，js安全域名要配置通过，不然你不可能调用sdk成功的，相信我没错的；

那如何调用jssdk呢？很简单，也有文档说明=>JSSDK调用说明

1）先在你需要调用的sdk的页面，引入js文件；http://res2.wx.qq.com/open/js/jweixin-1.4.0.js 或者http://res.wx.qq.com/open/js/jweixin-1.4.0.js；

2）完善配置信息，一般前后端分离项目，都是前端调用后端接口，把这一堆参数返给前端，然后前端在js里面直接给对应参数赋值就行，（因为signature签名参数，通常要后端来生成，生成签名需要获取一个授权参数jsapi_ticket，这个需要后端请求微信接口，才能拿到，详情见文档的签名规则）

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

上面wx.config配置好之后，工作基本完成，剩下的就是根据自己项目需求调用特定的sdk，比如自定义分享，优惠券。。。。按照文档走就OK，挺简单；

总结：js安全域名配置很重要，非常重要！

 

posted @ 2019-08-13 16:25  web_study  阅读(19842)  评论(0)  编辑  收藏  举报

哈哈