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

  • 相关阅读:
    设计师
    仅用递归函数和栈操作逆序一个栈
    用两个栈实现队列
    设计一个有getMin功能的栈(2)
    设计一个有getMin功能的栈(1)
    Java 泛型
    servlet里获得jsp页面里select的选项之值
    mac上mysql的GUI工具sequel pro
    mac安装mysql的两种方法(含配置)
    [转]在Mac系统中安装配置Tomcat及和Eclipse 配置
  • 原文地址:https://www.cnblogs.com/web-wjg/p/11346656.html
Copyright © 2011-2022 走看看