微信

这里写图片描述

序言

由于微信分享比较严格, 因此需要准备认证公众号来获取分享权限.

前期准备工作

公众号设置 => 功能设置 => 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 (具体返回内容https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183)

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",
  "expires_in":7200
}

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&timestamp=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" />

微信和钉钉网页分享流程

微信

序言

前期准备工作

流程: 服务端配置

流程: 前端配置

钉钉

猜你喜欢