微信js-sdk开发获取签名和获取地理位置接口示例

### 微信js-sdk开发获取签名和获取地理位置接口示例

前言:在做微信公众号开发时需要获取用户的地理位置信息,之前通过高德或者百度、腾讯等地图的api时发现经常获取不到,毕竟第三方的东西,后来改为采用微信内置的js-sdk中的获取地理位置接口,在这主要记录下签名的获取(麻烦点)和一个获取地理位置的例子。

准备工作:

  1. 微信测试号appid和appsecret
    获取地址:微信测试账号获取
  2. 在测试账号里先填写接口配置信息和js接口安全域名(这个是必须的)
  3. 示例:页面中需要点击图标获取地理位置信息
    流程如下:
    点击按钮->触发事件去获取->ajax异步获取签名->拿签名去获取地理位置->得到经纬度->高德api再去逆地理编码获取真实地址信息
前端代码如下:(主要是使用js-sdk,直接拿来用就行,换下ajax请求地址)
<!--引入js-sdk-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

<!--点击图标触发事件-->
<img onclick="getCurrentLocation()" src="__PUBLIC__/img/gap.png">

//根据微信js-sdk内置接口 getCurrentLocation
function getCurrentLocation11(){
    //这个是获取签名时的url,动态变化,所以在前段获取,后端传入直接使用
    var url = location.href.split('#')[0];
    var ajaxUrl = '/*****/getWxsdkSign';   //ajax异步获取微信签名sign
    $.get(ajaxUrl, {url : url}, function(json){
        if(json.code == 0){
            let sdkSign = json.data; // 后台返回的值
            wx.config({
                debug: false, // ture会alert全部信息,上线时改为false
                appId: sdkSign.appId, // 必填,公众号唯一标识
                timestamp: sdkSign.timestamp, // 必填,生成签名的时间戳
                nonceStr: sdkSign.nonceStr, // 必填,生成签名的随机串
                signature: sdkSign.signature,// 必填,签名
                jsApiList: ['getLocation',] // 必填,需要调用的接口列表,本需求里只是获取位置信息,具体的接口名称查阅js-sdk文档
            });
            //获取地理位置(经纬度)
            wx.getLocation({
                type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                success: function (res) {
                    var latitude = res.latitude;   //纬度,浮点数
                    var longitude = res.longitude; //经度,浮点数
                    //以下这部分内容就是再通过异步操作逆地理编码获取真实的地址信息
                    getLocationBylatlng(latitude, longitude);
                }
            });
        }else{
            //TODO 获取签名失败的处理,未获取到地理位置
            *****************
            *****************
        }
    },'json');
}
后端代码如下:(主要是用来获取js-sdk的签名,非常重要)
/*---------------------------------获取js-sdk签名   start--------------------------------*/
    /**
     * 获取js-sdk调用权限,获取签名
     */
    public function getWxsdkSign(){
        $appId = $this->appid; //这里填appid
        $appsecret = $this->appsecret; //这里填appsecret
        //一般$url是固定的,可以写死,但是我的项目中地址是动态的,所以由前段传入
        $url = I('get.url');   //获取签名的页面的url地址,由于是动态地址,所以由前段传入
        // 获取accesstoken
        $accessToken = $this->getAccessToken();
        if(empty($accessToken)){
            $this->ajaxReturn(['code'=>-1, 'msg'=>'accessToken未获取到']);
        }
        // 获取jsapi_ticket
        $jsapi_ticket = $this->_getJsapiTicket($accessToken);
        if(empty($jsapi_ticket)){
            $this->ajaxReturn(['code'=>-1, 'msg'=>'jsapi_ticket未获取到']);
        }
        $nonceStr = $this->make_nonceStr();        //获取随机字符串
        $timestamp = time();
        $signature = $this->make_signature($nonceStr,$timestamp,$jsapi_ticket,$url);
        $sdkSign = array(
            'appId'     => $this->appid,      //appid
            'signature' => $signature,        //签名
            'timestamp' => $timestamp,        //时间戳
            'nonceStr'  => $nonceStr,         //随机字符串
        );
        $this->ajaxReturn(['code'=>0, 'data'=>$sdkSign]);
    }

    /**
     * 此AccessToken   与 getUserAccessToken不一样,注意一下定要全局缓存,否则每日次数限制很快就GG了
     * 获得AccessToken
     */
    private function getAccessToken()
    {
        //获取缓存(我用的是自己封装的Memcached类,Vender引入的直接使用)
        Vendor('Memcacheds.Memcacheds');
        $memcached = new \Memcacheds();
        $access = $memcached->get_cache('access_token');
        // 缓存不存在-重新创建
        if (empty($access)) {
            // 获取 access token
            $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$this -> appid}&secret={$this->appsecret}";
            $accessToken = file_get_contents($url);
            $accessToken = json_decode($accessToken);
            // 保存至缓存
            $access = $accessToken->access_token;
            $memcached->set_cache('access_token', $access, 7000);
        }
        return $access;
    }

    /**
     * 获取JS证明 注意一下定要全局缓存,否则每日次数限制很快就GG了
     * @param $accessToken
     */
    private function _getJsapiTicket($accessToken)
    {
        Vendor('Memcacheds.Memcacheds');
        $memcached = new \Memcacheds();
        //获取缓存
        $ticket = $memcached->get_cache('jsapi_ticket');
        //缓存不存在-重新创建
        if (empty($ticket)) {
            // 获取js_ticket
            $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" . $accessToken . "&type=jsapi";
            $jsTicket = file_get_contents($url);
            $jsTicket = json_decode($jsTicket);
            //保存至缓存
            $ticket = $jsTicket->ticket;
            $memcached->set_cache('jsapi_ticket', $ticket, 7000);
        }
        return $ticket;
    }

    //获取随机字符串
    public function make_nonceStr(){
        $codeSet = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        for ($i = 0; $i<16; $i++) {
            $codes[$i] = $codeSet[mt_rand(0, strlen($codeSet)-1)];
        }
        $nonceStr = implode($codes);
        return $nonceStr;
    }

    /**
     * 获取签名
     * @param string $nonceStr  随机字符串
     * @param int    $timestamp 时间戳
     * @param string $jsapi_ticket 获取的ticket凭据
     * @param string $url       获取签名的页面的url 'http://*****' eg:'http://wx.alisleept.top/index.php'
     */
    function make_signature($nonceStr,$timestamp,$jsapi_ticket,$url){
        $tmpArr = array(
            'noncestr' => $nonceStr,
            'timestamp' => $timestamp,
            'jsapi_ticket' => $jsapi_ticket,
            'url' => $url
        );
        ksort($tmpArr, SORT_STRING);
        $string1 = http_build_query( $tmpArr );
        $string1 = urldecode( $string1 );
        $signature = sha1( $string1 );
        return $signature;
    }
    /*---------------------------------获取js-sdk签名   end--------------------------------*/

以上php部分就是完全的异步获取签名的代码,里边只需要注意

  1. appidappsecret 修改为自己的
  2. 注意access_tokenjsapi_ticket的缓存
  3. 注意$url换成自己的,我这个是动态的,所以前段传回的

原文地址:https://www.cnblogs.com/alisleepy/p/10610303.html

时间: 2024-10-09 22:45:15

微信js-sdk开发获取签名和获取地理位置接口示例的相关文章

实战微信JS SDK开发:贺卡制作与播放(1)

前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细说吧. 最近同事用CanTK开发了一个基于微信的贺卡制作APP,我虽然没有参与开发,但是提供CanTK和GameBuilder的技术支持,觉得有些东西比较有意思,写几篇博客和大家分享吧.这个贺卡APP完全开源,有需要的朋友可以随意修改和发布. CanTK(Canvas ToolKit)是一个开源的游

微信JS SDK开发 共享问题小结

首先,我要吐槽一下这个SDK,看了第一遍,完全不知所云,一会获取这个,一会获取那个,也没确切的告诉怎么获取. 和腾讯客服(拿钱不干事的好工作)讨教,人家不懂技术,不知道怎么解决,也没有相关技术人员对应这一块.总共费时 将近一周的时间才把这块弄懂.期间遇到的部分问题以及如何解决分享给大家,欢迎大家一起讨论并指正. 问题1:JS接口安全域名,你所有想要使用的微信接口,要在这个域名内部进行,不能在本地进行相关调试. 问题2:公众账号要求:必须是已经认证的. 问题3:配置config(PS:开启debu

微信-js sdk invalid signature签名错误 问题解决

如果出现 invalid signature,首先可以确定的是你的签名算法有问题.建议:首先查看微信官方网站给出的解决方案,链接为: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 1. invalid signature签名错误 建议按如下顺序检查: 确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验

实战微信JS SDK开发:贺卡制作与播放(2)

最近同事用CanTK开发了一个基于微信的贺卡制作APP,我虽然没有参与开发,但是提供CanTK和GameBuilder的技术支持,觉得有些东西比较有意思,写几篇博客和大家分享吧.这个贺卡APP完全开源,有需要的朋友可以随意修改和发布. CanTK(Canvas ToolKit)是一个开源的游戏引擎和APP框架,是开发HTML5游戏和APP的利器,如果你喜欢它,请在github上给它加星,您的支持是我们努力的动力:https://github.com/drawapp8/cantk 0.先Show一

微信js sdk invalid signature签名错误 解决。

签名之前用得好好的,突然一个新的站点上去签名错误. 到 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 做了验证是一样的. 那么问题肯定出在url上面, 看到 微信校验工具写的 接下来对 string1 作 sha1 加密,字段名和字段值都采用原始值,不进行 URL 转义.即 signature=sha1(string1). 好蛋疼,我的url有差别的就是Query 多了个  /  把这个 / 转义一下就通过了...... 官方

微信公众平台开发(99) 自定义菜单获取OpenID

关键字 微信公众平台 自定义菜单 OpenID作者:方倍工作室原文:http://www.cnblogs.com/txw1958/p/weixin-menu-get-openid.html 在这篇微信公众平台开发教程中,我们将介绍如何在自定义菜单中获得用户的OpenID. 本篇开发教程的实质是微信自定义菜单及OAuth2.0授权的灵活运用. 本文分为以下四个部分: 拥有高级接口权限时的获取(基于view事件) 没有高级接口权限时的获取(基于click事件) 一.拥有高级接口权限 拥有高级接口权限

微信支付SDK开发教程

今天研究了一下微信的SDK开发教程,下面我就简单的把步骤介绍下,希望对你们有所帮助 现在的支付都是使用V3接口的,2014年9月之前都是使用V2接口,现在我就介绍下V2和V3接口的申请方法吧 一.微信支付v2 1. 使用网页授权接口 使用网页授权接口获取用户的基本信息. [微信公众号]OAuth2.0授权.pdf点击下载 2. 使用共享收货地址控件 使用共享收货地址控件,获取用户在微信的收货地址.[微信公众号支付]收货地址共享接口文档V1.6.pdf点击下载 3. 使用公众号发起支付请求 使用J

微信js sdk上传多张图片

微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="11111111111111111111"; $secret="11111111111111111111"; $token = S('access_token'); if (!$token) { $res = file_get_contents("https://api.weixin.qq.c

微信js sdk分享开发摘记java版

绑定域名和引入js的就不说了 废话不说直接上代码 1 public void share(HttpServletRequest request) throws Exception { 2 3 StringBuffer homeUrl = request.getRequestURL(); 4 String queryString =request.getQueryString(); 5 if(StringUtils.isNotBlank(queryString)){ 6 homeUrl.appen