2016-11-07 21:06:55 CyanSkye 阅读数 1362
微信开发——网页授权
项目需求:通过用户在微信中打开网页获取用户的openid来实现绑定消费卡的功能。
项目开发:首先我们需要配置微信的运行环境,这里请参考我的第一篇关于微信开发的日志。
第一步我们得去平台配置网页回调授权的页面,位于网页服务——>网页账号——>修改,可以参照图一:修改回调域名参见图二
图一:设置回调域名地址
图二:设置OAuth2.0网页授权回调域名
第一步完成之后,我们去做第二步,我们分析需要何种授权方式?
方式一:以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面),这种方式只能获取openid;
方式二:以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。
第三步:两种方式的对比,这个请大家参照微信开发者文档。
第四步:介绍一下它的流程
1、引导用户进入授权页面(上面我们配置好的域名)同意授权,获取code
2、通过code换取网页授权access_token(与基础支持中的access_token不同)
3、如果需要,开发者可以刷新网页授权access_token,避免过期
4、通过网页授权access_token和openid获取用户基本信息(支持UnionID机制)
step1:获取code
<?php
public function getCode()
{//定义数组
	$dt = array(
            'appid'         => WX_APPID,     //微信APPID
            'redirect_uri'  => REDIRECT_URI, //回调地址
            'response_type' => 'code',
            'scope'         => 'snsapi_base',//授权方式 snsapi_base 或者 snsapi_userinfo
            'state'         => $_SERVER['REQUEST_TIME']
        );
        $api = 'https://open.weixin.qq.com/connect/oauth2/authorize?'#wechat_redirect';
        header('Refresh:0; url='.$api);
}
?>

step2:获取openid
<?php
  public function executeGetOid()
 {
        $code = $_GET["code"];
        $dt = array(
          'appid'      => WX_APPID,
          'secret'     => WX_APPSECRET,
          'code'       => $code,
          'grant_type' => 'authorization_code'
        );
        $get_token_url = 'https://api.weixin.qq.com/sns/oauth2/access_token?'.http_build_query($dt);
        $json_obj = $this->DoCurl($get_token_url);
        $openid = $json_obj['openid'];
}

step3:获取用户信息(当scope为snsapi_userinfo时有效)
<?php
     public function executeGetuserinfo()
    { 
        $access_token = file_get_contents('access_token.txt');
        $dt = array(
          'access_token' => $access_token,
          'openid'       => $this->openid,
          'lang'         => 'zh_CN'
        );
        $get_userinfo_url = 'https://api.weixin.qq.com/sns/userinfo?'.http_build_query($dt);
        $json_obj = $this->DoCurl($get_userinfo_url);
    }
?>

step4:封装方法DoCurl()(这个的配置是在服务器中开启的 具体百度 (windows直接开就行,linux需要phpize编译安装加入模块)
<?php
 public function DoCurl($url)
    {
        $ch = curl_init();
        curl_setopt($ch,CURLOPT_URL,$url);
        curl_setopt($ch,CURLOPT_HEADER,0);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1 );
        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
        $res = curl_exec($ch);
        curl_close($ch);
        $json_obj = json_decode($res,true);
        return $json_obj;
    }
?>


最后的最后,本人博客水平有限,希望有问题的大家指证出来,我好修改。我的邮件是cyanskye0513@outlook.com




2017-12-25 15:31:15 cslp517 阅读数 41154

微信开发是件非常蛋疼的事情,微信网页的缓存是更加蛋疼的东西,今天遇到的问题:一个页面在web开发工具上可以正常授权并获取到openid,放在手机上就死活不行,网上找来的办法如下:

  1. 使用微信内置的浏览器打开“debugx5.qq.com”清理
  2. 使用微信内置的浏览器打开“http://debugtbs.qq.com”重新安装tbs内核
  3. 退出微信账号重新登陆
  4. 安卓手机进入应用管理删除微信缓存
  5. 取关公众号再重新关注
  6. 清空公众号内容
  7. URL上加参数
  8. 退出微信账号重新登陆
  9. 清理微信后台
  10. 重启手机
  11. 在js里加$.ajaxSetup({cache: false});
  12. header里加no-cache等代码

以上办法我都试过,都没用,就差点重装微信了。
最后找到的解决办法如下:
微信-我的-设置-通用-微信存储空间,等这个页面的进度走完,什么都不要点,返回重新进网页,终于可以授权登陆了!
页面如下:
这里写图片描述

最后一张图表示心情:
这里写图片描述

2016-11-15 11:38:46 qq_24091555 阅读数 20061

           由于项目需要,需要接触微信开发,并要调用微信的JS-SDK里面的接口。

       因为经验缺乏,我百度一下关于微信开发的资料,但收集的资料都不尽人意。网上的主流的微信开发是采用PHP开发的,而本人学的Java。所以对PHP微信开发只能看懂思路。更有的是,网上一些微信开发视频,也是和PHP有关的,关于用Java开发的甚少。

       无奈之下,我只好苦啃微信开发文档。大家都知道,微信官方给的开发文档真的有点那个啥,一个功能实现非要分几个地方来说,看完这块,又得点击另一个页面看完另一块,甚是麻烦。这样的设定也让我走了好多坑。

但功夫不负有心,在研究透了微信开发文档之后,我顺利在在项目中完成微信开发。现在我将微信开发的经验分享一下,希望对大家有所帮助。

       微信JS-SDK是微信公众号平台面向网页开发这提供基于微信内的网页开发工具包。接口大类分为:基础接口、分享接口、图像接口、音频接口、智能接口、设备信息、地址位置、摇一摇周边、界面操作、微信扫一扫、微信小店、微信卡劵和微信支付。一般使用频率高的就是分享接口、地理微信、微信扫一扫和微信支付。

接下来,我将主要讲解如何调用微信分享接口。

第一步,准备内网映射工具,ngrok。不清楚这个的同学可以去百度一下。https://ngrok.com为ngrok官网。要进行微信开发,内网映射工具是不可少。毕竟,我们程序员进行开发,要测试开发的产品是否能用,都先在自己的电脑跑一下。但由于ngrok的服务器在外国的,鉴于天朝的墙太高,访问可能不稳定。所以我推荐的是国内的natapp,免费和收费的都有,服务毕竟稳定可靠,只不过要想自定义二级域名就得交费成为VIP咯。

第二步,配置JS接口安全域名。登录要进行开发的公众号,点击公众设置--->功能设置。设置JS接口安全域名,要注意三点:①填写域名前面不需加上http://,例如你的域名是http://test.com,直接填写test.com即可;②域名默认80端口,只支持80和443端口,所以域名后面不能添加端口号。③该域名为你调用微信JS-SDK接口域名。

第三步,引用JS文件。在需要调用JS接口的页面引入http://res.wx.qq.com/open/js/jweixin-1.0.0.js 。


第四步,通过config接口注入权限验证配置 。具体参数有什么用处,在截图都有注释讲解。其中jsApiList为我们要使用的接口,我在下面共引用了五个接口,分别为微信好友分享、QQ好友分享、腾讯微博分享、QQ空间分享和朋友圈分享。调用的都是分享的接口。至于其他接口列表,可以去微信开发文档那浏览一下。这里就不详说。

        第五步,在服务器生成相关参数传到调用JS-SDK页面,完成授权。这是最重要的一步。如上图所示,appId,timestamp,nonceStr,signature都为必填参数。下面我将会详细说说如何生成这些参数并传回页面。

appId为开发的微信公众号的AppID(应用ID),我们可以在登录微信公众号,在开发选项中点击基本配置来查看。

timestamp为系统生成的时间戳。


nonceStr为服务器随机生成的字符串。



signature为微信JS-SDK使用权限算法。在生成signature之前,我们要拿到jsapi_ticket。官方文档是这样解释的:


我们要注意三个地方。jsapi_ticket要缓存两个小时,每过两个小时,向微信那边请求一次。获取jsapi_ticket要通过access_token。那么我们该如何获取access_token呢?


从文档可以看出,access_token需要AppID和AppSercet两个参数。而且access_token和jsapi_ticket一样,有效期皆为两小时。这就要求我们服务器要缓存access_token和jsapi_ticket,当有效期一过,就重新请求。有的人采用是用数据库来存取这两个参数,而我采用的是用Quartz定时器。关于Quartz定时器的使用,可浏览我上篇博客《SSH与Quartz集成》,里面有关于Quartz的使用方法。

AppSercet可在与APPID同一页面获取。接下来,调用接口,获取access_token。



接下来,我们用access_token去获取jsapi_ticket。


获取jsapi_ticket,就可以进行生成签名。在此之前,先看一下官方文档的签名算法。



用代码实现。


第六步,传生成的参数给网页。



第七步,调用已授权的JS接口。


第八步,利用微信Web开发者工具调试,看看是否授权成功。(微信web开发者工具可在微信开发下载)。



2019-04-11 13:41:07 weixin_39706415 阅读数 782

微信有两种关闭的操作

一种是获取微信签名执行jsAPI进行操作、还有一种就是下面的操作、获取api的操作需要后台开发接口的

简单点就用下面的操作实现

 

let state = {
              title: "title",
              url: "#"
            };
            window.history.pushState(state, "title", "#");
            window.addEventListener("popstate", function (e) {
              if (window.location.href.includes("/bind/login") && !window.location.href.includes("/bind/login#")) {
                //关闭当前浏览器
                window.WeixinJSBridge.call("closeWindow");
              }
            }, false);

我们有个问题就是使用了微信的静默登录用户执行返回的时候又到达了静默登录、静默登录成功跳转到自己的登录界面,然后就导致无法返回需要点击好多次 然后就可以使用上述的 监听返回操作关闭微信的浏览器回到会话列表 ,上面的pushState这个会给路由后面携带一个#符号参数、你可以对当前路由判断进行返回操作、为了避免用户进入了忘记密码或者注册界面返回退出、需要作出判断只有用户点击返回不携带#符号直接操作关闭。你试试就知道了 

送上一波福利

微信公众号开发、企业建站开发、小程序、vue、h5、css3、react等前端视频学习资料关注公众号【码兄】免费获取

有问题请留言

 

2018-04-20 14:59:43 one_girl 阅读数 3772

开发场景:
在微信客户端打开某个网页可以获取到用户的openId。

获取用户openid步骤如下:参考微信公众平台开发文档

第一步:引导微信公众平台的用户打开如下链接

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
参数说明

参数               是否必须   说明
appid               是      公众号的唯一标识
redirect_uri        是      授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理
response_type       是      返回类型,请填写code
scope               是      应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),     snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )
state               否      重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
#wechat_redirect    是      无论直接打开还是做页面302重定向时候,必须带此参数
参考链接(请在微信客户端中打开此链接体验):
scope为snsapi_base
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect
scope为snsapi_userinfo
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

注意事项:
1、redirect_uri 授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理。进行urlEncode处理戳这里
2、appid必须是服务号的开发者ID(订阅号是没有权限通过网页授权来获取用户基本信息的),并且该服务号开通了微信网页授权的功能,且配置了微信授权回调域名,这样才能获取到code码用于进一步获取用户openid。(微信公众号的区分–服务号和订阅号有何不同?
如下图:
这里写图片描述
这里写图片描述

第二步:在重定向的回调页面(redirect_uri)里获取code,并请求openid

    // 获取code   
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
        }
    var code = getQueryString("code");  
    alert(code)   // 获取code值可以在客户端打开链接的时候alert出来查看
    // 请求openid
    $.ajax({ 
      async: false, 
      url: "http://api.xxx.com/member/platformDict/getOpenId", //后端提供的获取openid的接口
      type: "GET", 
      data: {code:code}, //传递本页面获取的code到接口,以便获取openid
      timeout: 5000, 
      success: function (result) { 
        // 根据后台接口返回的参数 result里应该会包含openid,就可以获取到了
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
          alert(textStatus); 
      } 
  })
</script>

code

微信开发资源下载

阅读数 2209

没有更多推荐了,返回首页