微信公众号分享自定义标题、内容、图片 + php后台封装签名signature生成函数

最新推荐文章于 2023-06-24 07:44:56 发布
最新推荐文章于 2023-06-24 07:44:56 发布
阅读量3.1k 收藏 3
点赞数 1
分类专栏： H5+Css3 php 文章标签： 微信自定义分享标题 微信自定义分享内容 微信自定义分享图片 微信分享自定义
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abs1004/article/details/83930900
版权

php 微信公众号签名signature生成方法


因为要做网页的微信分享，分享的时候想自定义 分享标题 分享摘要 和分享缩略图，所以要用到微信公众号的jssdk，必然就牵扯到微信签名。

以thinkphp5为例，展示整个生成和使用的过程。
步骤：
1、获取微信access_token ： 自定义函数 getWxAccessToken();
2、根据1 的access_token，获取ticket: 自定义函数 getWxTicket();
3、根据2 的ticket，自己拼装字符串，并生成签名sign: 自定义函数 makeWxSha1Sign();

后台php代码如下：

/**
     * 生成微信公众号签名
     * @param string url 前端微信分享页面的url全地址
     */
    public function getWxShareSign()
    {
        $signData = input('');
        if( !$signData['url'] ){
            $this->_error('参数错误');
        }
        $ticket = '';
        if($redis_ticket = cache::get('wx_share_ticket')){
            $ticket = $redis_ticket;
        }else{
            $access_token = $this->getWxAccessToken(); //获取微信access_token
            $ticket = $this->getWxTicket($access_token); //获取微信ticket
        }
        $signData['jsapi_ticket'] = $ticket;
        $signData['noncestr'] = 'abs1004';
        $signData['timestamp'] = time();
        $sign = $this->makeWxSha1Sign($signData); // 生成微信签名
        $signData['sign'] = $sign;

        $this->_success($signData); // jsapi_ticket, noncestr, timestamp, sign 都返回给前端，供前端页面微信验签使用
    }

    //生成 sha1 签名
    private function makeWxSha1Sign($arr){
        $str = "";
        //升序数组的键
        $keyArr = [];
        foreach ($arr as $k => $v) {
            array_push($keyArr,$k);
        }
        sort($keyArr);
        reset($keyArr);

        //升序数组的字符串拼接，删除signature
        foreach ($keyArr as $key => $value) {
            $linker = '';
            if($key!=0){
                $linker = '&';
            }
            $str .= $linker.$value.'='.$arr[$value];
        }
        log_result('wxshare signStr='.$str);

        //字符串SHA1
        $signature = sha1($str);
        return $signature;
    }

    //微信公众号 票据
    private function getWxTicket($access_token){
        $ticketUrl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$access_token.'&type=jsapi';
        $ticketResp = file_get_contents($ticketUrl);
        if(!$ticketResp) $this->_error('ticket 获取失败');
        $ticketData = json_decode($ticketResp, true);
        if( isset($ticketData['ticket']) ){
            $ticket = $ticketData['ticket'];
            cache::set('wx_share_ticket',$ticket,7200);
            log_result('ticket='.$ticket);
            return $ticket;
        }else{
            $this->_error('ticket 解析错误');
        }

    }
    //微信公众号 token
    private function getWxAccessToken(){
        $tokeUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".config('wxgzh_appid')."&secret=".config('wxgzh_secret');
        $tokenResp = file_get_contents($tokeUrl);
        if(!$tokenResp) $this->_error('token 服务器返回失败');
        $tokenData = json_decode($tokenResp, true);
        if( !isset($tokenData['access_token']) ) $this->_error($tokenData['errmsg']);
        return $tokenData['access_token'];
    }
    
// 成功返回封装  json格式的数据给前端
protected function _success ($data=null, $info='操作成功', $status=1000)
	{
		$result = array(
			'status' => $status,
			'msg'	=>	$info,
			'data'	=>	$data,
		);
		die( json_encode($result) );
	}
// 失败返回封装  json格式的数据给前端	
protected function _error ($info='系统错误', $status=-1004)
	{
		$result = array(
			'status' => $status,
			'msg'	=>	$info,
		);
		die( json_encode($result) );
	}

前端代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" >
    <meta name="description" content="正方形口腔 ">
    <meta name="keywords" content="正方形口腔 ">
    <title>正方形口腔 - 送牙币</title>
    <link rel="stylesheet" href="/res/css/bootstrap.css">
    <link rel="stylesheet" href="/res/css/font-awesome.css">
    <script src="/res/js/jquery.min.js"></script>
    <script src="/res/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <style>

        body{
            background:#fc471e url("/res/img/share/bg@2x.png") no-repeat 100% 100%;
            font-weight: 200;
        }
        #content {
            background: transparent;
        }
        ::-webkit-input-placeholder { /* WebKit browsers */
            color:    #F06D4A;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:    #F06D4A;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color:    #F06D4A;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
            color:    #F06D4A;
        }
        header{
            height: 48px;
            width:100%;
            background: #fff;
            color: #333;
            text-align: center;
            line-height: 48px;
            font-size: 17px;
        }
        .quan {
            vertical-align: middle;
            border: 0;
            width: 100%;
            height: auto;
        }

        .form-control{
            /*height: 48px;*/
            border:none;
            font-size: 14px;
            padding-right: 0;
        }


        input{
        }
        .abs-input-box{
            width: 90%;
            margin: 1px 5%;
        }
        .btn-code{
            height: 38px;
            padding: 0;
            font-weight: 200;
            width:100%;
            background: #fad142;
        }
        .input-mobile-box{
            border-radius: 5px;
            background: #fff;
            background-image: url('/res/img/share/icon_username@2x.png');
            background-repeat: no-repeat;
            background-size: 20px 20px;
            background-position: 8px 8px;
            overflow: hidden;
            height: 40px;
            line-height: 40px;
            padding: 0 0;
        }
        .input-mobile{
            height: 30px;
            width: 100%;
            border:none;
            line-height: 30px;
            color: #262626;
            margin-left: 40px;
            font-weight: 300;
            margin-top:5px ;
        }
        .input-code-box{
            border-radius: 5px;
            background: #fff;
            width:60%;
            float:left;
            background-image: url('/res/img/share/icon_yanzhengma@2x.png');
            background-repeat: no-repeat;
            background-size: 20px 20px;
            background-position: 8px 8px;
            overflow: hidden;
            height: 38px;
            line-height: 38px;
        }
        .input-code{
            color: #262626;
            width: 100%;
            border:none;
            height: 30px;
            line-height: 30px;
            margin-top: 4px;
            margin-left: 40px;
            font-weight: 300;
            padding: 0 0;
        }

        .btn-quan{
            height: 48px;
            border-radius: 5px;
            background: #feec34;
            width:100%;
            font-weight: 400;
            font-size: 18px;
        }

        .mt-35{
            margin-top: 35px;
        }
        .btn.focus, .btn:focus, .btn:hover{
            color:inherit;
        }

        .bg-gray{
            background: #999;
            color:#f3f3f3;
        }
        .bg-red{
            background: #fa6262;
        }
        .color-white{
            color:#fff;
        }
        .color-red{
            color:rgb(219,43,19);
        }

        .test-before:before{
            content: 'abs';
        }
        td{line-height: 180%;}
    </style>
</head>
<body>

    <div class="container">
        <!-- 优惠券券 -->
        <div class="row mt-35">
                <img class="quan"  src="/res/img/share/pic_lihe@2x.png" alt="正方形口腔-分享领券">
        </div>

        <!-- 手机号 -->
        <div class="row ">
            <div class="abs-input-box">
                <form role="form">
                    <div class="form-group">
                        <div class="input-mobile-box">
                            <input type="text" required class="input-mobile" id="mobile" placeholder="请输入11位中国大陆手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <div style="height: 40px;">
                            <div class="input-code-box" >
                                <input type="text" required class=" input-code" id="code" placeholder="输入短信验证码">
                            </div >
                            <div style="width:30%;float:right;height:40px;">
                                <button  class="btn btn-code color-red" type="button" id="btn_get_code">获取验证码</button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="button" class=" btn btn-quan color-red" id="btn_download">下载领币</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="mt-35 color-white">

            <p>
                活动规则：<br />
            </p>
            <table>
                <tr>
                    <td style="vertical-align: top">1、</td>
                    <td>活动时间：2018年11月1日-2019年6月30日。</td>
                </tr>
                <tr>
                    <td style="vertical-align: top">2、</td>
                    <td>已在正方形口腔建档的用户（以下简称“老用户”）可以通过此链接邀请好友下载注册正方形口腔APP，并参照以下规则获得相应牙币：</td>
                </tr>
                <tr>
                    <td style="vertical-align: top">a、</td>
                    <td>老用户每邀请一名未在正方形口腔建档的用户（以下简称“新用户”）注册登录正方形APP后，老用户即可获得50牙币；</td>
                </tr>
                <tr>
                    <td style="vertical-align: top">b、</td>
                    <td>被邀请的新用户注册登录正方形口腔APP后，即可获得100牙币。</td>
                </tr>
                <tr>
                    <td style="vertical-align: top">3、</td>
                    <td>1牙币=1元人民币，牙币可用于诊费支付及礼品兑换。</td>
                </tr>
                <tr>
                    <td style="vertical-align: top">4、</td>
                    <td>活动过程中凡是以恶意手段（包括但不限于作弊、攻击系统等）参与的用户，正方形口腔有权利终止其参与活动并取消获取牙币的资格。</td>
                </tr>
                <tr>
                    <td style="vertical-align: top">5、</td>
                    <td>在法律范围内正方形口腔拥有本活动解释权。</td>
                </tr>
            </table>

        </div>

    </div>
</body>
<script>
    var domain = "{$Think.config.site_url}"; // 域名 https://www.zhipur.com
    var curUrl = window.location.href;

    //微信设置
    var shareLink = curUrl;
    var shareIcon = domain+"/logo.png";
    var shareDesc = "微信分享内容摘要";
    
    // ajax请求后台接口，获取微信签名
    $.ajax({
        url: domain+"/api/webview/getWxShareSign",
        data:{
            url: curUrl
        },
        type: 'POST',
        dataType: 'json',
        success: function (res) {
            if(res.status===1000){
                wx.config({
                    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: 'wx112312312321312312', // 必填，换成你公众号里的appid
                    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: res.data.noncestr, // 必填，生成签名的随机串
                    signature: res.data.sign,// 必填，签名
                    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
                });
            }else{
                console.log(res.msg);
            }
        },
        error: function (e) {
            console.log(e);
        }
    });
    wx.ready(function(){
        wx.onMenuShareAppMessage({
            title: '微信分享标题文字', // 分享标题
            desc: shareDesc, // 分享描述
            link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: shareIcon, // 分享图标
            success: function () {
                // 用户点击了分享后执行的回调函数
                console.log('用户点击了分享');
            }
        });

    });
    wx.error(function(res){
        console.log('wx jsapi fail');
    });

</script>
</html>
武当山道士
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
php版微信公众号自定义分享内容实现方法
10-21
主要介绍了php版微信公众号自定义分享内容实现方法,结合实例形式分析了php实现微信公众号自定义分享内容的接口调用与相关使用技巧,需要的朋友可以参考下
php实现微信公众号创建自定义菜单功能的实例代码
01-02
创建自定义菜单，实现菜单事件。 首先获取Access_Token 接口： https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 我用的是测试号，修改APPID和APPSECRET，然后...
php对接微信公众号扫码登录开发实录(H5微信扫描登录、服务出现故障调试、模版消息设置、扫码轮询交互)
最新发布
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
06-24 1729
微信公众号扫码登录在安全性、用户体验和数据收集方面优势明显，是目前许多应用程序采用的登录方式之一。无需记住账号密码：用户无需输入和记住账号和密码，只需使用微信扫描二维码即可快速登录。安全性高：微信采用 OAuth2.0 协议，将用户信息传递给第三方应用程序，而不会向第三方应用程序公开用户的微信账号和密码，有效保护用户隐私和安全。用户体验好：扫码登录可以在移动设备上快速完成登录操作，无需输入许多文字，提高用户体验和用户参与度。
使用uniapp微信公众号和小程序踩坑全过程
selfsummer的博客
01-23 5451
uniapp公众号开发 授权登录，分享，公众号使用地图导航 安卓调用微信sdk正常，ios报invalid signature的错误 uniapp 启动本地域名开发 使用微信JSSDK 明明配置了权限 却不是能使用改权限 或者SDK初始化错误
微信公众号开发过程整理
qq_38021767的博客
11-13 832
温馨提示：为保证数据传输安全，提高业务安全性，公众平台将不再支持HTTP方式调用。避免影响正常使用中含有HTTP方式调用的服务，请开发者尽快调整，将现有通过HTTP方式调用的切换成HTTPS调用，平台将于2017年12月30日停止对HTTP方式调用的支持。 一、微信公众开发前期准备     申请公众号-微信公众号： 外网服务器资源（互联网可以访问到的），也就是说我们的后台应用要...
微信公众号开发笔记（二）：微信分享接口实现和问题
TOP__ONE的博客
12-25 1667
上篇文章写到了公众号开发的基本配置（不明白的可以参考https://blog.csdn.net/TOP__ONE/article/details/78183209），这里继续写微信分享接口功能代码实现。 如果以下代码涉及到微信工具类方法,而我没有提到的,请到链接下载:https://download.csdn.net/download/top__one/10875681 实现微信页面的分享自定...
微信公众号开发技术要点
热门推荐
博采众长，自成一派；
07-29 1万+
微信公众号开发技术要点 微信公众号开发技术要点 微信公众号及其接口功能介绍 基本概念 公众号开发者模式 代码验证及图示 Open ID与Union ID 基本概念 使用说明 Access_token 基本介绍 注意事项 获取流程 代码验证及图示 自定义菜单 基本介绍 创建菜单 查询菜单 删除菜单 个性化菜单 自定义菜单事件推送 用户管理 标签管理 用户标签管理 设置用户备注名...
微信公众号网页开发，登录授权和微信支付
weixin_43180359的博客
12-27 1024
微信公众号的网页开发基本和H5移动端开发一致，主要是涉及到网页授权获取用户信息和使用js-sdk获取微信原生能力支持。 开发前准备 申请一个测试号：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 用自己微信扫码登录，然后扫码关注当前测试号，这里注意js接口安全域名和网页授权回调域名，需要配置为当前项目地址。使用测试号时用ip即可，但是线上必须是域名。 网页授权 类似把系统自己的登录体系移除，通过微信授权方式获取微信用户信息。
微信公众号php从0开发，包括功能（自定义菜单，分享）
weixin_30622107的博客
07-17 213
之前写的一篇微信公众号文章。 工作需要，进行此次调研，并记录开发过程。 开发目的，页面授权，页面获取用户头像，用户昵称 微信id, 分享页面。 微信订阅号 无法获取用户个人信息 写在记录前，公众号也是第二次搞了，每次看完心里都是一阵苦，究其原因就是没有彻底搞懂他，不明白各个文档直接的关系，这次从头到尾搞一下，记录下整个流程，备忘。 微信服务号开发： 微信公众号开发从0到配置相关功能 //由于微...
TP5 实现微信网页自定义分享
葬爱家族王富贵
12-09 1944
荆轲刺秦王 文章部分借鉴于：https://www.cnblogs.com/sunshineliulu/p/8034286.html 在实际操作中还有一些需要注意的问题： 1.登录微信公众平台，设置—公众号设置—功能设置里，填写『JS接口安全域名』。填写的域名须通过ICP备案的验证，并将平台给的txt文件放到域名指向的web服务器之下。 注意：在 TP5 框架下，web服务器根目录表示的是...
VUE项目引入微信JSSDK 实现微信自定义分享
阿……莫西林杀菌室
03-18 1212
VUE项目引入微信JSSDK 实现自定义分享 前端vue、后端php 问题：后端获取config参数所需的url 需要和请求自定义分享页面url一致 一、微信公众号后台添加 js安全域名（白名单） 二、(前端) VUE引入微信JSSDK 1、yarn add weixin-js-sdk或者npm install weixin-js-sdk --save-dev 2、封装wx分享功能 在asset中新建wx.js import axios from "axios"; import wx from 'weix
微信公众号Java后台自定义分享源代码
08-17
微信公众号开发 从前台到Java后台 调用微信JS接口分享朋友圈，博客中的源代码。数据库请到博客中的GitHub链接自取，建好数据库后需要修改数据库的配置信息。
PHP实现微信公众号企业号自定义菜单接口示例
10-19
主要介绍了PHP实现微信公众号企业号自定义菜单接口,结合实例形式分析了php自定义微信菜单类及微信接口相关操作技巧,需要的朋友可以参考下
[DOM] Input elements should have autocomplete attributes (suggested: autocomplete='tel', confirm at
武当山道士的博客
03-19 1万+
控制台显示： [DOM] Input elements should have autocomplete attributes (suggested: autocomplete=’tel’, confirm at https://goo.gl/6KgkJg) 这只是个提示，无关紧要，但是在控制台里显示好多感觉很不爽，去掉它！ 译文概要：输入元素应该有自动完成的属性，比如： au...
九宫格抽奖- 前后端代码
武当山道士的博客
11-21 1万+
前言： 前端：jq+h5 实现九宫格动效 后端：thinkphp3.2.3 实现中奖概率算法 功能：支持读取数据库预设的中奖率及奖品池，中奖率可以自定义，必须是整数 最终效果如下： 代码： choujiang.html代码如下：&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//E
H5 js点击按钮复制文本到粘贴板
武当山道士的博客
12-18 4610
准备：先去下载clipboard.js: 官网 移动端效果如下： 应用：html+js 代码如下： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;zh-CN&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &am
二维码-下载APP和识别码中信息 功能合一
武当山道士的博客
09-04 2506
场景：app实现一物一码的防伪功能需求：一个二维码，实现功能 1、如果没安装指定app，扫描二维码后，跳转至app下载页面 |—1.1、如果用微信扫描，提示在浏览器中打开 |—1.2、非微信中打开 |——1.2.1、安卓手机，直接跳转到apk下载地址，自动下载app |——1.2.2、苹果手机，跳转到a
H5 获取地理位置
武当山道士的博客
07-22 690
js获取地理位置navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options); 演示 Local Twitter Search function startSearch(){ var gps = navigator.geolocation; if (gps){ gps.getCurrentPosi
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值