微信和釘釘網頁分享流程
微信
序言
由於微信分享比較嚴格, 因此需要準備認證公眾號來獲取分享許可權.
前期準備工作
公眾號設定 => 功能設定 => JS介面安全域名 (注: 該域名需要通過ICP備案, 配置完此項以開啟在該域名下呼叫微信JS介面的能力)
基本設定 => IP白名單 (配置完此項以開啟可以呼叫獲取access_token介面的許可權)
流程: 服務端配置
1 . 獲取access_token, 通過公眾號後臺檢視appid和appsecret, 通過該介面獲取 (https請求方式 GET) https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
2 . 獲取jsapi_ticket, 通過剛剛拿到的access_token 請求 https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi , 返回內容如下
{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA" 3 . 生成js-sdk許可權驗證簽名, 簽名生成規則如下：參與簽名的欄位包括noncestr（隨機字串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其後面部分） 。對所有待簽名引數按照欄位名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字串string1。這裡需要注意的是所有引數名均為小寫字元。對string1作sha1加密，欄位名和欄位值都採用原始值，不進行URL 轉義. 注: 此邏輯必須在服務端實現.
例:
// 所生成的四項
noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value// 步驟1. 對所有待簽名引數按照欄位名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字串string1：
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value// 步驟2. 對string1進行sha1簽名，得到signature：
// 對於Node可以直接使用jssha包進行開發, https://github.com/Caligatio/jsSHA
0f9de62fce790f9a083d5c99e95740ceb90c27ed
具體實現程式碼, http://demo.open.weixin.qq.com/jssdk/sample.zip
流程: 前端配置
引入JS檔案 http://res.wx.qq.com/open/js/jweixin-1.4.0.js (當你看到這篇博文的時候有可能不是最新版的, 你可以在下面錯誤處理辦法的那個連結裡尋找最新版)
wx.config 注入許可權驗證
如果是在頁面載入時就要呼叫的介面, 需要寫在wx.ready裡, 當config驗證成功之後便會呼叫, 如果是使用者觸發才呼叫的介面, 則可以直接呼叫.
其餘介面以及錯誤處理辦法: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
釘釘
釘釘這種卡片配置不需要呼叫api, 只需在html寫上些許程式碼便可, 釘釘的卡片識別策略為: 基於Open Graph Data協議來識別當前網頁內容, 如果該網頁不支援OGP, 那麼基於釘釘預設規則提取網頁標題, 主圖, 正文摘要, 注: 必須靜態寫在html中, 不支援js插入
// 例
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<-- Twitter Summary card images must be at least 120x120px -->
<meta name="twitter:image" content="http://www.example.com/image.jpg">
<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="fb:admins" content="Facebook numeric ID" />