微信公众号网页开发——授权登录,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安全域名配置很重要,非常重要!

猜你喜欢

转载自www.cnblogs.com/web-wjg/p/11346656.html
今日推荐