微信網頁授權Oauth2.0 某高校合唱團報名表單

原創 桜智神座一诚·木 2020-02-21 18:19

首先在Application/Weih5/gkchorus目錄新建一個Oauth2.0授權登錄頁面gkchorus_oauth2.php

<meta charset="utf-8">
<?php
	// error_reporting(0);
	// $get_openid=$_GET['state'];
	$appid = '微信公衆號appid';// 微信公衆號appid
	$REDIRECT_URI = 'http://你的域名/index.php/Home/Gkchorus/gkchorus';
	
	// $SCOPE = 'snsapi_base';
	$SCOPE = 'snsapi_userinfo';
	// 
	$uri = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='.$appid.'&redirect_uri='.$REDIRECT_URI.'&response_type=code&scope='.$SCOPE.'&state=1314#wechat_redirect';
	header("Location:$uri");
?>

前面CommonController.class.php控制器中已經獲取到了access_token和jsapi_ticket，新建GkchorusController.class.php

<?php
    namespace Home\Controller;

    Class GkchorusController extends CommonController{
	public function gkchorus(){
	    $this->display();
	}

	public function enrol(){
	    $data['nickname'] = I('post.nickname');
            $data['name'] = I('post.name');
            $data['dept'] = I('post.dept');
            $data['phone'] = I('post.phone');
            $data['chorus'] = I('post.chorus');
            $data['create'] = date("Y-m-d H:i:s");
             // dump($data);

        	if ($data!=''&&$data!=null) {
        		$db=M('enrol');
	        	$db->create();
	        	$rs = $db->add($data);
	        	if($rs){
	                print("
	                	<meta charset='utf-8'>
	                	<script src='https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js'></script>
	                	<script src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>
	                	<script>
	                        alert('".$data['name']." 同學，"."您已報名成功，期待你的加入！');
	                        setTimeout(function(){WeixinJSBridge.call('closeWindow');},200);
	                    </script>");
	            }
	            else{
					print("
						<meta charset='utf-8'>
						<script>
	                        alert('服務器繁忙，請重新報名！');
	                        window.history.back();
	                    </script>");
	            }
        	}
        }
    }

在Application/Home/View/gkchorus目錄新建一個模板，gkchorus.html模板

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <link rel="stylesheet" href="__PUBLIC__/Weih5/gkchorus/main.css">
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
</head>
<body>
	<?php
		// 打開session
		// session_start();

		// 當用戶授權登陸，openid出入session
		// if(!isset($_SESSION['openid'])){
			$code = $_GET['code'];	// 獲取code
			// print_r($code);

			// curl請求，用於獲取oauth2.0的access_token，微信openid等
			$url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" . $appID . "&secret=" . $appSecret . "&code=" . $code . "&grant_type=authorization_code";

			// 獲取oauth2.0的access_token，微信openid等
			$ch = curl_init($url); 
			curl_setopt($ch, CURLOPT_URL, $url);  
			curl_setopt($ch, CURLOPT_HEADER, 0);  			//不顯示頭部信息
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);  
			curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);// 這個是主要參數  
			$output = curl_exec($ch); 
			curl_close($ch);
			$jsoninfo = json_decode($output, true);
			$access_token = $jsoninfo["access_token"];		// oauth2的access_token
			$openid = $jsoninfo["openid"];					// openid

			// 當用戶刷新頁面，失去openid，跳轉oauth2.php重新授權
			if (empty($openid)||$openid==null) {
				echo ("
					<script>
						window.location='http://你的域名/Weih5/gkchorus/gkchorus_oauth2.php';
					</script>
				");
			}

			// 將oauth2的access_token和openid，獲取用戶信息
			$url_info = 'https://api.weixin.qq.com/sns/userinfo?access_token='.$access_token.'&openid='.$openid.'&lang=zh_CN';

			$ch = curl_init($url_info); 
			curl_setopt($ch, CURLOPT_URL, $url_info);  
			curl_setopt($ch, CURLOPT_HEADER, 0);  			// 不顯示頭部信息
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);  
			curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);	// 這個是主要參數  
			$output_info = curl_exec($ch); 
			curl_close($ch);
			$jsonuser = json_decode($output_info, true);
			// var_dump($jsonuser);

	                // 存入數據庫
	                $openid = $jsonuser['openid'];
    	                $nickname = $jsonuser['nickname'];
    	                $headimgurl = $jsonuser['headimgurl'];
		// }
	?>


  <div class="content_all">
    <div class="content_all_top">
      <div>
        <p><h2>廣科合唱團報名</h2></p>
        <p><span>我們的夢想！在飛！在翱翔！</span></p>
      </div>
    </div>
    <div class="content_all_middle">
      <form name="chorusform" οnsubmit="return check()" action="{:U('Gkchorus/enrol')}" method="post">
    <?php 
      if ($nickname) {
      ?>
        <p><label>{$nickname}</label></p>
        <p><img src="{$headimgurl}" width="70" height="70"></p><br/>
      <?php 
      }
    ?>
        <p><input type="hidden" name="nickname" value="{$nickname}"></p>
        <p><label>姓名：<span>*</span></label></p>
        <p><input type="text" name="name" maxlength="10"></p><br/>
        <p><label>系別：<span>*</span></label></p>
        <p><input type="text" name="dept" maxlength="10"></p><br/>
        <p><label>手機：<span>*</span></label></p>
        <p><input type="number" name="phone" maxlength="11"></p><br/>
        <p><label>選擇方向：<span>*</span></label></p>
        <p>
          <div class="radio" style="width: 85%!important;height: 100px;margin: auto;">
            <div><input type="radio" name="chorus" value="獨唱歌手"/><span>獨唱歌手</span></div>
            <div><input type="radio" name="chorus" value="鋼琴伴奏"/><span>鋼琴伴奏</span></div>
            <div><input type="radio" name="chorus" value="合唱團員"/><span>合唱團員</span></div>
          </div>
        </p>
        <div style="clear: both;"></div>
        <p><input class="submit" type="submit"></p>
      </form>
    </div>
    <div class="content_all_bottom">
      <p>By 廣科合唱-Vegeta</p>
    </div>
  </div>
  

</body>
<script>
  /*
   * 注意：
   * 1. 所有的JS接口只能在公衆號綁定的域名下調用，公衆號開發者需要先登錄微信公衆平臺進入“公衆號設置”的“功能設置”裏填寫“JS接口安全域名”。
   * 2. 如果發現在 Android 不能分享自定義內容，請到官網下載最新的包覆蓋安裝，Android 自定義分享接口需升級至 6.0.2.58 版本及以上。
   * 3. 常見問題及完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 開發中遇到問題詳見文檔“附錄5-常見錯誤及解決辦法”解決，如仍未能解決可通過以下渠道反饋：
   * 郵箱地址：[email protected]
   * 郵件主題：【微信JS-SDK反饋】具體問題
   * 郵件內容說明：用簡明的語言描述問題所在，並交代清楚遇到該問題的場景，可附上截屏圖片，微信團隊會盡快處理你的反饋。
   */
  wx.config({
      debug: false,
      appId: '{$signPackage.appId}',
      timestamp: {$signPackage.timestamp},
      nonceStr: '{$signPackage.nonceStr}',
      signature: '{$signPackage.signature}',
      jsApiList:[
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'getNetworkType',
        'hideOptionMenu',
        'showOptionMenu']
  });

  wx.ready(function () {
    // config信息驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
        
    // 註冊分享朋友圈事件。
    wx.onMenuShareTimeline({
      title: '廣科合唱團報名', // 分享標題
      link: 'http://你的域名/Weih5/gkchorus/gkchorus_oauth2.php', // 分享鏈接，該鏈接域名必須與當前企業的可信域名一致
      imgUrl: 'https://avatar.csdn.net/B/8/E/3_cai181191.jpg', // 分享圖標
      success: function () {
          alert('success!');
      },
      cancel: function () {
          alert('cancel!');
      }
    });

	// 註冊分享朋友事件
    wx.onMenuShareAppMessage({
      title: '廣科合唱團報名', // 分享標題
      desc: '我們的夢想！在飛！在翱翔！',
      link: 'http://你的域名/Weih5/gkchorus/gkchorus_oauth2.php', // 分享鏈接，該鏈接域名必須與當前企業的可信域名一致
      imgUrl: 'https://avatar.csdn.net/B/8/E/3_cai181191.jpg', // 分享圖標
      success: function () {
          alert('success!');
      },
      cancel: function () {
          alert('cancel!');
      }
    });
    

  });

  	wx.uploadImage({
	  localId: '', // 需要上傳的圖片的本地ID，由chooseImage接口獲得
	  isShowProgressTips: 1, // 默認爲1，顯示進度提示
	  success: function (res) {
	    var serverId = res.serverId; // 返回圖片的服務器端ID
	  }
	});

  wx.error(function(res){
      // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裏更新簽名。
  });

</script>
<script type="text/javascript">
    function check(){
      var name = document.chorusform.name.value.trim();
      var dept = document.chorusform.dept.value.trim();
      var mobile = document.chorusform.phone.value.trim();
      var chorus = document.chorusform.chorus.value.trim();
      

      if(name == "") {
        alert("請輸入姓名");
        document.chorusform.name.focus();
        return false;
      }  

      if(dept == "") {
        alert("請輸入系別");
        document.chorusform.dept.focus();
        return false;
      }

      if(!(/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(mobile))){
        alert("不是完整的11位手機號！");
        document.chorusform.phone.focus();
        return false;
      }

      if(chorus == "") {
        alert("請選擇方向");
        return false;
      }

      else{
        return true;
      }
    }
  </script>
</html>

在Public/Weih5/gkchorus目錄新建一個層疊樣式表，main.css

*{margin: 0;padding: 0;font-family: "Microsoft YaHei";}
body{background-image: url(./bg.png);background-repeat: repeat;}
.content_all{width: 95%;min-width: 300px;background-color: #fff;margin: 2.5%;}

.content_all_top{width: 100%;height: 100px;margin:auto;border-bottom: 1px solid #eee;position: relative;}
.content_all_top div{width: 85%;margin: auto;position: relative;top: 15px;}
.content_all_top div h2{font-weight: 400!important;height:40px;line-height: 40px;}
.content_all_top div p span{height:30px;line-height:30px;font-size: 12px;}

.content_all_middle{width: 100%;margin:auto;background-color: #fff;}
.content_all_middle form p{width: 85%;margin: auto;}
.content_all_middle form p label{line-height: 30px;}
.content_all_middle form p input{width: 100%;height: 30px;outline: none;}

.content_all_middle form p label span{color: red}

.content_all_middle form div input{display: block;float: left;width: 15%;height: 20px;line-height: 25px;margin: 2.5px 0 2.5px 0;}
.content_all_middle form div span{display: block;float: left;width: 85%;height: 25px;line-height: 25px;font-size: 14px;}

.content_all_middle form .radio{width: 85%!important;height: 100px;margin: auto;}
.content_all_middle form p .submit{border-radius: 5px;height: 35px;color: #fff;border:0;outline: none;background-color: rgb(55,185,210);}

.content_all_bottom{width: 100%;margin:auto;background-color: #fff;border-top: 1px solid #eee;position: relative;margin: 30px 0 0 0;}
.content_all_bottom p{font-size: 12px;padding: 10px 0;text-align: center;}

將gkchorus.sql導入mysql數據庫

-- phpMyAdmin SQL Dump
-- version 4.1.14
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: 2018-04-14 12:39:52
-- 服務器版本： 5.6.17
-- PHP Version: 5.5.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `gkchorus`
--
CREATE DATABASE IF NOT EXISTS `gkchorus` DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
USE `gkchorus`;

-- --------------------------------------------------------

--
-- 表的結構 `enrol`
--

CREATE TABLE IF NOT EXISTS `enrol` (
  `id` int(8) NOT NULL AUTO_INCREMENT,
  `name` varchar(10) COLLATE utf8_unicode_ci NOT NULL,
  `dept` varchar(10) COLLATE utf8_unicode_ci NOT NULL,
  `phone` bigint(15) NOT NULL,
  `chorus` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
  `create` datetime NOT NULL,
  `nickname` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

效果：


（網頁授權Oauth2.0，分享到朋友圈接口，分享給朋友接口）

桜智神座一誠·木
發佈了54 篇原創文章 · 獲贊 21 · 訪問量 23萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

常用Linux命令、包括vi 、svn

PS: http://man.linuxde.net/vi /etc/init.d/network restart //=========================================== 更新腳本 cd /www/scr

Ocean_K 2023-08-15 21:24:17

幾種網絡異常的原因

低級錯誤 文件名和類名 不一致,導致找不到類 這種最好不要複製粘貼,而是用命令生成文件.  複製粘貼太容易出錯了. 數據庫連接端口寫錯了,結果頁面總是超時, 記住:沒開啓報錯,  遇到錯誤先開啓報錯,查日誌 // .html結尾的,或者一些

原創 2023-02-27 21:46:28

寫好php程序

編寫安全的代碼,做好輸入校驗過濾, 空值情況,邊界條件 可讀性好,別人容易接手.易展性,可維護. 持續優化,重構 不使用引用 ,會造成不可預知的錯誤. unset 只是取消引用,不會銷燬空間; 考慮 php版本兼容問題

原創 2023-02-27 21:46:24

JetBrains 官宣：PHP 基金會成立

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

闫园园 2021-11-23 17:28:57

服務器端編程語言報告出爐，PHP 獨佔鰲頭十幾年

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

辛晓亮 2021-09-14 16:43:53

PHP沒你想的那麼糟糕

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

Iain Cambridge 2021-07-28 14:58:50

PHP Git服務器被入侵，黑客向源代碼中添加後門

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

万佳 2021-03-31 13:03:50

InfoQ 編程語言 2 月排行榜，更好的投票活動來了

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

InfoQ 中文站 2021-03-22 18:34:58

基於Thrift的java和PHP互相調用範例

首先我們看看 Thrift是什麼？ thrift是一個軟件框架，用來進行可擴展且跨語言的服務的開發。它結合了功能強大的軟件堆棧和代碼生成引擎，以構建在 C++, Java, Go,Python, PHP, Ruby, Erlang, Per

原創 2021-02-01 09:08:26

php中??和?:區別

??和?:區別: $headerVal = 0; $this->params = $headerVal ?? 2; 相當於 isset($headerVal) ? $headerVal : 2; //結果是0 $this->params

原創 2021-01-30 10:16:08

php函數in_array()被你忽略的東西.

php函數in_array()在未啓用嚴格模式情況下,廢話不多說直接上代碼,如下: #php.net官網實例 $array = array( 'egg' => true, 'cheese' => false, 'hair' => 76

原創 2021-01-30 10:16:08

phpDoc reference

PHPDoc reference @api 表示這是一個提供給第三方使用的API接口 @author 作者 [@author](https://my.oschina.net/arthor) 名稱 <郵箱> 例 [@author](https

原創 2021-01-30 10:16:08

PHP規範PSR2

PSR標準 - PSR-2 爲了儘可能的提升閱讀其他人代碼時的效率，下面例舉了一系列的通用規則，特別是有關於PHP代碼風格的。 各個成員項目間的共性組成了這組代碼規範。當開發者們在多個項目中合作時，本指南將會成爲所有這些項目中共用的一組代碼

技客大爆炸 2021-01-30 10:16:08

InfoQ 編程語言1月排行榜：邀你投票

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

InfoQ 中文站 2021-01-21 17:28:56

2021年最值得學習的10種編程語言

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

Statistics and Data 2021-01-19 14:13:58