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

静待湾归 發表於 2019-8-13 16:25:00

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

微信的普及，好多项目开始运行在微信环境中，微信公众号算是一个很常见的平台，主要介绍微信公众号内部，网页开发的一些知识点和值得关注的点；　　
没有基础的可以先看下微信官方文档的基础介绍；
一、首先说说，我们自己开发的h5网页，配置在公众号平台内，怎么获取微信用户信息；
 1、很重要的一步，js安全域名配置配置，看下微信官方的介绍吧，如下图： 
<img src="https://img2018.cnblogs.com/blog/1185326/201908/1185326-20190813153927021-120021227.png" alt="">
 
简单理解就是，前端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值？很简单，文档有实例，我们要做的只是改改参数就行：
<pre class="language-text"><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参数对应的授权作用域权限。</code></pre>
上面标红的几个参数值，是需要替换成自己需要的值，
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，这个需要后端请求微信接口，才能拿到，详情见文档的签名规则）
<div class="cnblogs_code">
<pre>wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});</pre>
</div>
上面wx.config配置好之后，工作基本完成，剩下的就是根据自己项目需求调用特定的sdk，比如自定义分享，优惠券。。。。按照文档走就OK，挺简单；
总结：js安全域名配置很重要，非常重要！
 

</div>
<div id="MySignature" role="contentinfo">
认真是一种态度。。。求知若饥，虚怀若愚 
来源：https://www.cnblogs.com/web-wjg/p/11346656.html

頁: [1]

琼殿技术论坛's Archiver

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