微信和钉钉网页分享流程

Posted 刘翾

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信和钉钉网页分享流程相关的知识，希望对你有一定的参考价值。

微信

序言

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

前期准备工作

  1. 公众号设置 => 功能设置 => JS接口安全域名 (注: 该域名需要通过ICP备案, 配置完此项以开启在该域名下调用微信JS接口的能力)

  2. 基本设置 => 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

流程: 前端配置

  1. 引入JS文件 http://res.wx.qq.com/open/js/jweixin-1.4.0.js (当你看到这篇博文的时候有可能不是最新版的, 你可以在下面错误处理办法的那个链接里寻找最新版)

  2. wx.config 注入权限验证

  3. 如果是在页面加载时就要调用的接口, 需要写在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" />

以上是关于微信和钉钉网页分享流程的主要内容，如果未能解决你的问题，请参考以下文章

微信和QQ内置浏览器为什么老是弹停止访问该网页，微信域名被屏蔽的解决办法

企业微信办公，这些方面钉钉比不了

实现手机网页调起原生微信朋友圈分享的工具nativeShare.js

当微信和支付宝遇上友盟

iOS 微信和QQ分享显示“未验证应用”问题处理(尤其是Swift 中 continueUserActivity 不执行问题)

iOS 微信和QQ分享显示“未验证应用”问题处理(尤其是Swift 中 continueUserActivity 不执行问题)