微信公众号分享+用户授权获取openid和用户授权access_token
注意事项:微信公众号分享ios端,必须在公众号进入才可以分享
php代码
function share() { $appid = Db::name('config')->where('name', 'appid')->value('value'); $appsecret = Db::name('config')->where('name', 'appsecret')->value('value'); // 分享生成signature的url必须为当前页完整url $shareUrl = request()->url(true); //http://share.gouwanmei.wang/index.php/index/index/index?code=081zYGtZ1gGeBS0QtIwZ1CfztZ1zYGt2&state=1234 /*************************用户授权获取openid开始***********************/ // 获取用户openid $openId = session('openid'); if (empty($openId)) { // ①获取code值 $code = $this->request->param('code'); if (empty($code)) { $encodeUrl = urlencode($shareUrl); $this->redirect("https://open.weixin.qq.com/connect/oauth2/authorize?appid={$appid}&redirect_uri={$encodeUrl}&response_type=code&scope=snsapi_base&state=1234#wechat_redirect"); } // ②通过code换取网页授权access_token和openid $getAccessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={$appid}&secret={$appsecret}&code=$code&grant_type=authorization_code"; $result = \fast\Http::get($getAccessTokenUrl); $result = json_decode($result, true); $openId = $result['openid']; session('openid', $openId); $data['access_token'] = $result['access_token']; $data['expires_in'] = $result['expires_in']; $data['refresh_token'] = $result['refresh_token']; $data['expire_time'] = time() + 7000; $res = Db::name('wxusers')->where('openid', $openId)->find(); if (empty($res)) { //添加用户信息 $data['openid'] = $openId; $data['createtime'] = time(); Db::name('wxusers')->insert($data); } else { //更新用户信息 Db::name('wxusers')->where('openid', $result['openid'])->update($data); } } /*************************用户授权获取openid结束***********************/ $wxGroupId = $this->request->param('id'); $group = Db::name('wxgroup')->where('id', $wxGroupId)->find(); $group['image'] = $this->request->domain() . $group['image']; /*****************获取jsapiticket开始*******************/ $ticketInfo = @file_get_contents('./ticket.txt'); $ticketInfo = json_decode($ticketInfo, true); if (empty($ticketInfo) || ($ticketInfo['createtime'] + 7000) < time() || !isset($ticketInfo['ticket'])) { //ticket过期 /*****************获取用户普通access_token开始*******************/ $accessToken = @file_get_contents('./accesstoken.txt'); $accessToken = json_decode($accessToken, true); if (empty($accessToken) || ($accessToken['createtime'] + 7000) < time()) { //accesstoken过期 $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$appsecret}"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $result = curl_exec($ch); //{"access_token":"21_smcMvbsz8qzgGk8_k7RMFHv5a4S_R5w8roBgryrt9xrr5nTFLSfnoN86OCfeW9n-V7VrNfeM_XJfIweCKKDlEBxtvh6eal7J9IuGCeZzps-bg0WCVKIl-AGpQuYB-FCrS5kBINWap83MOV8lSYNgAEAAGV","expires_in":7200,"createtime":1557566569} $result = json_decode($result, true); $result['createtime'] = time(); file_put_contents('./accesstoken.txt', json_encode($result)); $accessToken = $result; } /*****************获取用户普通access_token结束*******************/ $access_token = $accessToken['access_token']; $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $result = curl_exec($ch); //{"errcode":0,"errmsg":"ok","ticket":"LIKLckvwlJT9cWIhEQTwfMWuRdQQCNSYkj7cLzppfFVSh2PypBW9WhLEsMFU5MJ80t9rxtIsCDM2r25jcYOc7Q","expires_in":7200,"createtime":1557566570} $result = json_decode($result, true); $result['createtime'] = time(); file_put_contents('./ticket.txt', json_encode($result)); $ticketInfo = $result; } /*****************获取jsapiticket结束*******************/ $noncestr = rand(1000000, 9999999); $time = time(); $str = "jsapi_ticket={$ticketInfo['ticket']}&noncestr={$noncestr}×tamp=$time&url={$shareUrl}"; $result = Db::name('wxshare_count')->where(array('openid' => $openId, 'wxgroup_id' => $wxGroupId))->find(); if (empty($result)) { $alertContent = '请一定要分享2个不同的群,否则无效!'; } elseif ($result['count'] == 1) { $alertContent = '请一定要分享2个不同的群,否则无效!请继续分享,还差1个群!'; } elseif ($result['count'] == 2) { $alertContent = ''; } $signature = sha1($str); $this->assign(array( 'appid' => $appid, 'timestamp' => $time, 'nonceStr' => $noncestr, 'signature' => $signature, 'shareUrl' => $shareUrl, 'group' => $group, 'openId' => $openId, 'groupid' => $wxGroupId, 'alertContent' => $alertContent )); return $this->view->fetch(); } |
渲染的模板
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{$group.name}</title> <!-- Set render engine for 360 browser --> <meta name="renderer" content="webkit"> <!-- No Baidu Siteapp--> <meta http-equiv="Cache-Control" content="no-siteapp"/> <link rel="icon" type="image/png" href="/amaze/i/favicon.png"> <!-- Add to homescreen for Chrome on Android --> <meta name="mobile-web-app-capable" content="yes"> <link rel="icon" sizes="192x192" href="/amaze/i/app-icon72x72@2x.png"> <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <!-- Add to homescreen for Safari on iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Amaze UI"/> <link rel="apple-touch-icon-precomposed" href="/amaze/i/app-icon72x72@2x.png"> <!-- Tile icon for Win8 (144x144 + tile color) --> <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png"> <meta name="msapplication-TileColor" content="#0e90d2"> <link rel="stylesheet" href="/amaze/css/amazeui.min.css"> <link rel="stylesheet" href="/amaze/css/app.css"> <style> body{ background-color: #F7F7F7; } #wxgroup-image{ margin: 0 auto; width:10rem; display:block } #group-add{ text-align: center; } #div-bottom{ margin-top:1rem; bottom:0; } #div-top{ padding-top:3rem; background-color: white; } #group-name{ text-align:center; margin:1rem auto; font-weight:normal; } #group-count{ text-align:center; padding:4rem auto 8rem; color:grey; font-weight:normal; } .am-dimmer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); z-index: 1100; } </style> <!--[if (gte IE 9)|!(IE)]><!--> <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <!--<![endif]--> <!--[if lte IE 8 ]> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script> <script src="/amaze/js/amazeui.ie8polyfill.min.js"></script> <![endif]--> <script> function wxgroupAlert(){ if("{$alertContent}" != ''){ alert('{$alertContent}'); } } wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: "<?php echo $appid;?>", // 必填,公众号的唯一标识 timestamp: "<?php echo $timestamp;?>", // 必填,生成签名的时间戳$noncestr nonceStr: "<?php echo $nonceStr;?>", // 必填,生成签名的随机串 signature: "<?php echo $signature;?>",// 必填,签名$signature jsApiList: [ 'onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseWXPay', 'showOptionMenu', "updateAppMessageShareData", "hideMenuItems", "showMenuItems", "onMenuShareTimeline", 'onMenuShareAppMessage' ] }); wx.ready(function () { //需在用户可能点击分享按钮前就先调用 /* wx.updateAppMessageShareData({ title: '{$group.name}', // 分享标题 desc: '{$group.description}', // 分享描述 link: '{$shareUrl}', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '{$group.image}', // 分享图标 success: function () { // alert('自定义分享内容') // 设置成功 } })*/ wx.onMenuShareAppMessage({ title: '{$group.name}', // 分享标题 desc: '{$group.description}', // 分享描述 link: '{$shareUrl}', // 分享链接 imgUrl: '{$group.image}', // 分享图标 type: 'link', // 分享类型,music、video或link,不填默认为link success: function (res) { $.ajax({ type: "POST", url: "/index/Index/groupShareCount", data: {openid: "{$openId}",groupid:"{$groupid}"}, dataType: "JSON", success: function (e) { if(e.code == 1){ if(e.count == 1){ alert('再分享一次即可加入群聊'); location.reload(); }else if(e.count == 2){ alert('恭喜您,成功分享两次,请扫码加好友,拉你进群'); location.href = e.image } } }, error:function (e) { alert(JSON.stringify(e)); console.log(e); }}) }, cancel: function () { alert("分享成功!"); } }); }); </script> </head> <body> <div id="div-top"> <img src="{$group.image}" id="wxgroup-image"/> <h4 id="group-name">{$group.name}</h4> <h5 id="group-count">{$group.count}人</h5> </div> <div id="div-bottom"> <h1 style="text-align: center;font-size:16px;font-weight:normal">你的好朋友邀请你加入群聊</h1> <div id="group-add"> <button type="button" class="am-btn am-btn-success" data-am-modal="{target: '#my-alert'}" onclick="wxgroupAlert()">加入群聊</button> </div> </div> <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert"> <div class="am-modal-dialog" style="background-color:transparent;"> <img src="/uploads/modal.png" alt="" width="85%"> </div> </div> <script src="/amaze/js/amazeui.min.js"></script> </body> </html> |
方法二 WeixinJSBridge
wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: "<?php echo $appid;?>", // 必填,公众号的唯一标识 timestamp: "<?php echo $timestamp;?>", // 必填,生成签名的时间戳$noncestr nonceStr: "<?php echo $nonceStr;?>", // 必填,生成签名的随机串 signature: "<?php echo $signature;?>",// 必填,签名$signature jsApiList: [ 'onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseWXPay', 'showOptionMenu', "updateAppMessageShareData", "hideMenuItems", "showMenuItems", "onMenuShareTimeline", 'onMenuShareAppMessage' ] }); function sendMessage(){ if (typeof window.WeixinJSBridge == "undefined"){ $(document).on('WeixinJSBridgeReady',function(){ WeixinJSBridge.on('menu:share:appmessage', function(argv){ WeixinJSBridge.invoke('sendAppMessage',{ "appid":"", //appid 设置空就好了。 "img_url": '{$group.image}', //分享时所带的图片路径 "img_width": "240", //图片宽度 "img_height": "240", //图片高度 "link":'{$shareUrl}', //分享附带链接地址 "desc":"我是一个介绍", //分享内容介绍 "title":"标题,再简单不过了。" }, function(res){ alert(JSON.stringify(res)) }); }); }) } } sendMessage(); |