基于微信公眾號(hào)的廣播技術(shù)管理平臺(tái)

代志勇 陳姍姍 江蘇省廣播電視總臺(tái)廣播技術(shù)部

基于微信公眾號(hào)的廣播技術(shù)管理平臺(tái)

代志勇 陳姍姍 江蘇省廣播電視總臺(tái)廣播技術(shù)部

本文通過對(duì)微信公眾號(hào)進(jìn)行接口開發(fā)，利用新浪云搭建云服務(wù)平臺(tái)，實(shí)現(xiàn)自主設(shè)計(jì)微信公眾號(hào)的功能，為江蘇廣播的技術(shù)管理工作提供便捷的技術(shù)平臺(tái)。

微信開發(fā) 廣播技術(shù)管理 實(shí)名認(rèn)證 新浪云SAE

一、需求設(shè)計(jì)

為滿足融合媒體下江蘇廣播技術(shù)管理的需求，自主設(shè)計(jì)開發(fā)建立了基于微信公眾號(hào)的廣播技術(shù)管理平臺(tái)。廣播技術(shù)管理平臺(tái)中集合了多項(xiàng)功能模塊，其中包括查詢通訊錄、通知發(fā)布、故障報(bào)修、發(fā)布培訓(xùn)通知、故障制度、推送教學(xué)視頻等，滿足了工作生產(chǎn)和技術(shù)管理的需要。

二 、相關(guān)技術(shù)

2.1 Web前端開發(fā)工具

? HTML5

HTML5是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言，它具有很多優(yōu)點(diǎn)：

（1）多設(shè)備跨平臺(tái)

HTML5的優(yōu)點(diǎn)主要在于跨平臺(tái)性非常強(qiáng)大，這個(gè)技術(shù)可以進(jìn)行跨平臺(tái)的使用?？梢詫㈤_發(fā)的HTML5程序移植到各種應(yīng)用平臺(tái)上。

（2）自適應(yīng)網(wǎng)頁設(shè)計(jì)

可以自動(dòng)識(shí)別屏幕寬度、做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)。“一次設(shè)計(jì)，普遍適用”，同一張網(wǎng)頁自動(dòng)適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動(dòng)調(diào)整布局。

（3）其他優(yōu)點(diǎn)

提高可用性和改進(jìn)用戶的友好體驗(yàn)；有新的標(biāo)簽，有助于開發(fā)人員定義重要的內(nèi)容；當(dāng)涉及到網(wǎng)站的抓取和索引的時(shí)候，對(duì)于SEO很友好；被大量應(yīng)用于移動(dòng)應(yīng)用程序；可移植性好；即時(shí)更新。

? JavaScript

JavaScript一種直譯式腳本語言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。

使用JavaScript就可以在客戶端進(jìn)行數(shù)據(jù)驗(yàn)證。JavaScript可以方便地操縱各種瀏覽器的對(duì)象，可以使用JavaScript來控制瀏覽器的外觀，狀態(tài)甚至運(yùn)行方式，可以根據(jù)用戶的需要“定制”瀏覽器，從而使網(wǎng)頁更加友好。

JavaScript可以使多種任務(wù)僅在用戶端就可以完成，而不需要網(wǎng)絡(luò)和服務(wù)器的參與，從而支持分布式的運(yùn)算和處理。

? 層疊樣式表（CSS）

CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。CSS能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力。

2.2 微信公眾號(hào)接口開發(fā)

微信提供了開放的API接口，目前眾多的互聯(lián)網(wǎng)應(yīng)用紛紛接入微信，就是通過其接口開發(fā)實(shí)現(xiàn)的。其基本原理是：微信服務(wù)器相當(dāng)于一個(gè)轉(zhuǎn)發(fā)服務(wù)器，終端（手機(jī)、Pad等）發(fā)起請(qǐng)求至微信服務(wù)器，微信服務(wù)器然后將請(qǐng)求轉(zhuǎn)發(fā)給自定義服務(wù)，就是我們的具體實(shí)現(xiàn)。服務(wù)處理完畢，然后發(fā)給微信服務(wù)器，微信服務(wù)器再將具體響應(yīng)回復(fù)到終端。

通信協(xié)議為：HTTP、數(shù)據(jù)格式為：XML。具體的交互流程如圖1所示：

圖1 交互流程圖

對(duì)HTTP請(qǐng)求，做出響應(yīng)。具體的請(qǐng)求內(nèi)容，按照特定的XML格式去解析。處理完畢后，也要按照特定的XML格式返回。只需要一個(gè)簡(jiǎn)單的實(shí)現(xiàn)HttpHandler即可。

當(dāng)然，微信平臺(tái)還能實(shí)現(xiàn)更加復(fù)雜的業(yè)務(wù)，比如微信可以作為內(nèi)嵌的瀏覽器，可以通過微信的鏈接，打開htm界面，實(shí)現(xiàn)自己的邏輯。

2.3 新浪云服務(wù)器（SAE）

SAE全名為：Sina App Engine，是新浪公司對(duì)外開放的云服務(wù)平臺(tái)，可以提供代碼管理、數(shù)據(jù)庫管理等。新浪SAE是用來放網(wǎng)站的，跟谷歌的GAE云計(jì)算比較相似。新浪SAE主要是提供了一個(gè)PHP運(yùn)行環(huán)境，用戶只需像普通主機(jī)空間那樣上傳PHP代碼和數(shù)據(jù)庫，然后做點(diǎn)修改就可以運(yùn)行了。用戶不用關(guān)心硬件架設(shè)，也不用知道新浪SAE上運(yùn)行的是什么操作系統(tǒng)，更不需配置運(yùn)行環(huán)境等各項(xiàng)設(shè)置。SAE是本項(xiàng)目最佳的應(yīng)用平臺(tái)。

三 、系統(tǒng)總體方案

3.1 基礎(chǔ)環(huán)境搭建

本系統(tǒng)采用新浪云（SAE）調(diào)用微信公眾平臺(tái)接口的方式，進(jìn)行功能開發(fā)，在新浪云端可以進(jìn)行前端頁面開發(fā)以及數(shù)據(jù)存儲(chǔ)。

圖2 SAE代碼管理頁面

3.2 接口對(duì)接

登錄“JSBC廣播技術(shù)”公眾號(hào)，在開發(fā)-基本設(shè)置頁面，勾選協(xié)議成為開發(fā)者，點(diǎn)擊“修改配置”按鈕，填寫服務(wù)器地址（URL）、Token和 EncodingAESKey，其中URL是開發(fā)者用來接收微信消息和事件的接口URL。Token可由開發(fā)者任意填寫，用作生成簽名（該Token會(huì)和接口URL中包含的Token進(jìn)行比對(duì)，從而驗(yàn)證安全性）。EncodingAESKey手動(dòng)填寫或隨機(jī)生成，將用作消息體加解密密鑰。接口對(duì)接設(shè)置見圖3。

圖3 接口對(duì)接設(shè)置

3.3 自定義菜單

自定義菜單的接口調(diào)用，http請(qǐng)求方式：POST（請(qǐng)使用https協(xié)議）https://api.weixin.qq.com/cgi-bin/ menu/create?access_token=ACCESS_TOKEN

本項(xiàng)目中創(chuàng)建微信公眾號(hào)菜單的PHP代碼：

＜?php

$appid = "??????";

// JSBC廣播技術(shù)微信公眾號(hào)的APPID

$appsecret = "??????";

//JSBC廣播技術(shù)微信公眾號(hào)的密鑰

$url="https://api.weixin.qq.com/cgi-bin/token?grant_

type=client_credential&appid=$appid&secret=$appsecr

et";

$output = https_request($url);

$jsoninfo = json_decode($output, true);

$access_token = $jsoninfo["access_token"];

echo "$access_token";

$jsonmenu = '{

"button":[

{

"name":"對(duì)內(nèi)服務(wù)"

"sub_button":[

{

"type":"view",

"name":"實(shí)名認(rèn)證",

"url":"??????" //實(shí)名認(rèn)證網(wǎng)頁url

},

{

"type":"view",

"name":"故障報(bào)修",

"url":"??????" //故障報(bào)修網(wǎng)頁url

},

{

"type":"view",

"name":"本地天氣",

"url":"??????" //本地天氣網(wǎng)頁url

}]

},

{

"name":"對(duì)外服務(wù)",

"sub_button":[

{

"type":"view",

"name":"通知公告",

"url":"??????" //通知公告網(wǎng)頁url

},

{

"type":"view",

"name":"通訊錄",

"url":"??????" //通訊錄網(wǎng)頁url

}]

}]

}';

$url = "https://api.weixin.qq.com/cgi-bin/menu/

create?access_token=".$access_token;

$result = https_request($url, $jsonmenu);

var_dump($result);

functionhttps_request($url,$data = null){

$curl = curl_init();

curl_setopt($curl, CURLOPT_URL, $url);

curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);

curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);

if (!empty($data)){

curl_setopt($curl, CURLOPT_POST, 1);

curl_setopt($curl, CURLOPT_POSTFIELDS, $data);

}

curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

$output = curl_exec($curl);

curl_close($curl);

return $output;

}

?＞

創(chuàng)建后的微信公眾號(hào)菜單欄頁面見圖4。

圖4 微信公眾號(hào)菜單欄

3.4 獲取用戶openid并進(jìn)行實(shí)名認(rèn)證

在自主開發(fā)的網(wǎng)頁上進(jìn)行用戶實(shí)名認(rèn)證，首先需要獲取登陸網(wǎng)頁的微信用戶openid，根據(jù)openid判斷是否為認(rèn)證用戶，從而展示不同的頁面。

第一步：用戶同意授權(quán)，獲取code：

在確保微信公眾賬號(hào)擁有授權(quán)作用域（scope參數(shù)）的權(quán)限前提下（服務(wù)號(hào)獲得高級(jí)接口后，默認(rèn)擁有scope參數(shù)中的snsapi_base和snsapi_userinfo），引導(dǎo)關(guān)注者打開如下頁面：

https://open.weixin.qq.com/connect/oauth2/ authorize?appid=APPID&redirect_uri=REDIRECT_ URI&response_type=code&scope=SCOPE&state=STA TE#wechat_redirect

scope為snsapi_base 時(shí)：https://open.weixin.qq.com/ connect/oauth2/authorize?appid=$appid&redirect_ uri=$url&response_type=code&scope=snsapi_ base&state=STATE#wechat_redirect

第二步：通過code換取網(wǎng)頁授權(quán)access_token及用戶的openid：

獲取code后，請(qǐng)求以下鏈接獲取openid及access_ token：

https://api.weixin.qq.com/sns/oauth2/access_token?a ppid=APPID&secret=SECRET&code=CODE&grant_ type=authorization_code本項(xiàng)目中通過code獲取用戶openid的php代碼：

＜?php

$code = $_GET['code'];//獲取code

$weixin =

file_get_contents("https://api.weixin.qq.com/sns/ oauth2/access_token?appid=$appid&secret=$secret&co de=".$code."&grant_type=authorization_code");//通過code換取網(wǎng)頁授權(quán)access_token及用戶openid

$jsondecode = json_decode($weixin);

//對(duì)JSON格式的字符串進(jìn)行編碼

$array = get_object_vars($jsondecode); //

轉(zhuǎn)換成數(shù)組

$openid = $array['openid'];

//獲取用戶openid

?＞

獲取用戶openid后，再經(jīng)人工認(rèn)證，將用戶信息錄入系統(tǒng)，用于后期用戶比對(duì)。

3.5 用戶認(rèn)證判斷

本項(xiàng)目中用戶認(rèn)證判斷的JS代碼：

＜script language="javascript"＞

var result;

var value = '＜?php echo $openid;?＞';

for(var i=0;i＜myarray.length;i++)

{

if(value==myarray[i])

{

result=1;

break;

}

result=0;

}

if(result){

// alert("通過實(shí)名認(rèn)證，可以查看！");

window.location.href="??????"; //

菜單鏈接的實(shí)際網(wǎng)址

}

else{

alert("未經(jīng)過實(shí)名認(rèn)證，請(qǐng)申請(qǐng)認(rèn)證！");

window.location.href="??????" ;

//重定向到認(rèn)證頁面

}

＜/script＞

根據(jù)獲取的用戶openid，遍歷用戶信息數(shù)組，如果包含該用戶信息，則返回菜單鏈接的實(shí)際地址；如果不包含該用戶信息，則重定向到認(rèn)證頁面。

四、功能模塊

主要功能模塊包括：對(duì)內(nèi)服務(wù)、對(duì)外服務(wù)、通訊錄、實(shí)名認(rèn)證、故障報(bào)修、通知公告、技術(shù)學(xué)苑、常見問答、培訓(xùn)教程等。

對(duì)于申請(qǐng)實(shí)名認(rèn)證的用戶，我們后臺(tái)采取人工審核的方式，將認(rèn)證通過的用戶信息錄入系統(tǒng)，即可查看公眾號(hào)發(fā)布的內(nèi)部資料。

圖5 實(shí)名認(rèn)證申請(qǐng)

圖6 后臺(tái)記錄的認(rèn)證信息

用戶在訪問微信公眾號(hào)的內(nèi)容時(shí)，系統(tǒng)將進(jìn)行認(rèn)證信息判斷，如果用戶沒有通過認(rèn)證，則無法訪問菜單鏈接，彈出提示框，重定向到認(rèn)證頁面。

通過認(rèn)證的用戶可以查看公眾號(hào)菜單鏈接的所有內(nèi)容，包括：故障報(bào)修、通知公告、技術(shù)學(xué)苑、常見問答、培訓(xùn)教程等等。

圖7 未通過認(rèn)證時(shí)彈出提示框

圖8 故障報(bào)修

圖9 通訊錄

圖10 通知公告

圖11 技術(shù)學(xué)苑

五、結(jié)束語

江蘇廣播技術(shù)部建立廣播技術(shù)管理平臺(tái)后，管理更加規(guī)范、服務(wù)更加便捷，得到了各廣播部門的一致好評(píng)，也為技術(shù)部在融合媒體態(tài)勢(shì)下做好面向全臺(tái)的技術(shù)服務(wù)打下了堅(jiān)實(shí)的基礎(chǔ)。