微信分享第三方连接（H5页面）自定义页面

杰哥的技术杂货铺2024-04-22 21:44

文章目录

  • 一、准备工作
  • 二、微信公众号后台设置
  • 三、获取签名（含代码）
    • [3.1 获取access_token](#3.1 获取access_token)
    • [3.2 获取jsapi_ticket](#3.2 获取jsapi_ticket)
    • [3.3 根据获取到的 ticket 来生成签名](#3.3 根据获取到的 ticket 来生成签名)
  • 四、H5页面配置与分享设置
    • [4.1 引入微信JS-SDK](#4.1 引入微信JS-SDK)
    • [4.2 通过 config 接口注入权限验证配置](#4.2 通过 config 接口注入权限验证配置)
    • [4.3 通过 ready 接口处理成功验证](#4.3 通过 ready 接口处理成功验证)
    • [4.4 通过 error 接口处理失败验证](#4.4 通过 error 接口处理失败验证)
    • [4.5 js代码示例](#4.5 js代码示例)

一、准备工作

  • 一个已备案的网站
  • 一个已认证的公众号（注意，个人权限是不可以的，需要企业权限）。

确保你有一个企业级的微信公众号，并完成企业认证。个人公众号可能无法获取全部接口权限。

  • 获取AppID和AppSecret

在微信公众平台登录后，进入"开发"部分，选择"基本配置"，在这里你可以找到你的AppID和AppSecret。

二、微信公众号后台设置

  • 设置JS接口安全域名：

    进入公众号设置的"功能设置"中，填写"JS接口安全域名"。需确保你的网页服务部署在此域名下，且该域名已通过ICP备案。

  • 设置IP白名单：

    在"安全中心"或"开发者中心"设置服务器IP白名单，以便微信服务器能够与之通信。

三、获取签名（含代码）

3.1 获取access_token

  • 接口说明：

使用你的AppID和AppSecret，通过GET请求到https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential\&appid=APPID\&secret=APPSECRET来获取access_token。

参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：

官方文档：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

  • golang代码示例

    /*
    获取小程序全局唯一后台接口调用凭据：
    https://developers.weixin.qq.com/minigame/dev/api-backend/open-api/access-token/auth.getAccessToken.html
    */
    package weixinclient

    import (
    "encoding/json"
    "errors"
    "fmt"
    "github.com/gin-gonic/gin"
    )

    type AccessTokenVo struct {
    AccessToken string json:"access_token"
    ExpiresIn int64 json:"expires_in"
    Errcode int64 json:"errcode"
    Errmsg string json:"errmsg"
    }

    func GetAccessToken(c *gin.Context) (*AccessTokenVo, error) {
    ctx := commonx.GetTrace(c)

      ps := fmt.Sprintf("grant_type=client_credential&appid=%s&secret=%s", config.BookAppid, config.BookSecret)

  ep := getEndPoint("GetAccessToken")
  resp, err := doGet(c, ep, ps, nil)
  dlog.Infof("%v||GetSessionBycode resp=%v,err=%v", ctx, resp, err)
  if err != nil || len(resp) == 0 {
  	return nil, errors.New("call API(GetAccessToken) fail")
  }

  var vo AccessTokenVo
  err = json.Unmarshal(resp, &vo)
  if err != nil || vo.Errcode > 0 {
  	err = fmt.Errorf("err=%v", vo.Errmsg)
  	return nil, err
  }

  return &vo, nil

    }

返回示例：

{
	"access_token": "80_PR606SNAcwOIyhsRuuOVC11eHDiy1ZqKMiWn6JoxYZH3ANGt13s5DWgiWtIbk0JAxn5LBKyZBMK5-cP5q_NBvTVdFtIf9utExtktae_7c1t4Wm9aBkEd5fuYpw4MMQfAHARRV",
	"expires_in": 7200
}

3.2 获取jsapi_ticket

  • 接口说明：

使用上一步获取的access_token，通过GET请求到https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi\&access_token=ACCESS_TOKEN来获取jsapi_ticket。

参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）

官方文档：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

jsapi_ticket是公众号用于调用微信 JS 接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的 api 调用次数非常有限，频繁刷新jsapi_ticket会导致 api 调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket （这里建议将 access_token 和 jsapi_ticket 都在服务器端进行获取并缓存，前端通过接口调取结果）。

  • golang代码示例：

    package weixinclient

    import (
    "encoding/json"
    "errors"
    "fmt"
    "github.com/gin-gonic/gin"
    )

    type GetticketVo struct {
    Ticket string json:"ticket"
    ExpiresIn int64 json:"expires_in"
    Errcode int64 json:"errcode"
    Errmsg string json:"errmsg"
    }

    func Getticket(c *gin.Context, accessToken string) (*GetticketVo, error) {
    ctx := commonx.GetTrace(c)

      ps := fmt.Sprintf("access_token=%s&type=jsapi", accessToken)

  ep := getEndPoint("Getticket")

  resp, err := doGet(c, ep, ps, nil)
  dlog.Infof("%v||Getticket resp=%v,err=%v", ctx, resp, err)
  if err != nil || len(resp) == 0 {
  	return nil, errors.New("call API(Getticket) fail")
  }

  var vo GetticketVo
  err = json.Unmarshal(resp, &vo)
  if err != nil || vo.Errcode > 0 || vo.Errmsg != "ok" {
  	err = fmt.Errorf("err=%v", vo.Errmsg)
  	return nil, err
  }

  return &vo, nil

    }

成功返回如下JSON：

{
  "errcode":0,
  "errmsg":"ok",
  "ticket":"caLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
  "expires_in":7200
}

3.3 根据获取到的 ticket 来生成签名

  • 签名说明

微信开发中，ticket 通常用于获取 JS-SDK 的配置参数，包括签名（signature）。这些参数使得你能够在网页上使用微信的 JS-SDK。以下是一个基本的步骤说明如何使用获取到的 ticket 来生成签名：

准备用于签名的参数：nonceStr （随机字符串）, timestamp （时间戳）, url （当前网页的 URL，不包含 # 及其后面部分）和 jsapi_ticket。

将这些参数按照字段名的ASCII 码从小到大排序（字典序），并且使用 URL 键值对的格式（即 key1=value1&key2=value2...）拼接成字符串。

对拼接后的字符串进行 SHA1 加密，得到的结果即是签名（signature）。

  • golang代码示例

    package main

    import (
    "crypto/sha1"
    "encoding/hex"
    "fmt"
    "sort"
    "strings"
    "time"
    )

    // GenerateSignature 生成微信JS-SDK的签名
    func GenerateSignature(nonceStr, url, jsapiTicket string) string {
    // 实时获取当前时间戳
    timestamp := fmt.Sprintf("%d", time.Now().Unix())

      // 准备用于签名的原始数据  
  params := map[string]string{  
  	"jsapi_ticket": jsapiTicket,  
  	"noncestr":     nonceStr,  
  	"timestamp":    timestamp,  
  	"url":          url,  
  }  

  // 对参数名进行排序并拼接  
  var keys []string  
  for k := range params {  
  	keys = append(keys, k)  
  }  
  sort.Strings(keys)  

  var signStrings []string  
  for _, key := range keys {  
  	signStrings = append(signStrings, fmt.Sprintf("%s=%s", key, params[key]))  
  }  
  signString := strings.Join(signStrings, "&")  

  // 使用SHA1进行签名  
  h := sha1.New()  
  h.Write([]byte(signString))  
  signature := hex.EncodeToString(h.Sum(nil))  

  return signature

    }

    func main() {
    nonceStr := "Wm3WZYTPz0wzccnW" // 这个应该是随机生成的字符串
    url := "http://mp.weixin.qq.com?params=value" // 你的网页URL
    jsapiTicket := "bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA" // 从微信服务器获取的jsapi_ticket

      // 生成签名  
  signature := GenerateSignature(nonceStr, url, jsapiTicket)  
  fmt.Println("生成的签名是:", signature)

    }

在这个示例中，GenerateSignature 函数接受四个参数：nonceStr（随机字符串），timestamp（时间戳），url（当前网页的URL），和jsapiTicket（从微信服务器获取的票据）。函数内部会对这些参数进行字典排序，拼接成一个待签名的字符串，然后使用SHA1算法生成签名。
请注意，为了简化示例，这里直接提供了nonceStr、timestamp、url和jsapiTicket的示例值。在实际应用中，我们需要根据具体情况动态获取这些值。特别是jsapiTicket，你需要先从微信服务器获取。
最后，main 函数中调用了 GenerateSignature 并打印出了生成的签名。我们可以将这段代码集成到我们的Go应用中，并根据需要进行适当的修改和调整。

  • noncestr 的含义是什么？应该如何动态获取？

noncestr是一个随机字符串，通常用于确保请求的唯一性和安全性。在微信JS-SDK、微信支付等接口中，noncestr 作为一个重要的参数，用于防止重放攻击和确保请求的时效性。
在微信开发中，noncestr 通常需要你自己生成，并确保其唯一性和随机性。以下是几种生成 noncestr 的方法：

  1. 使用随机数或UUID：

    你可以使用编程语言中的随机数生成函数或者UUID生成库来创建一个唯一的字符串。例如，在Go语言中，你可以使用crypto/rand库生成一个随机数，并将其转换为字符串，或者使用第三方库如github.com/google/uuid来生成一个UUID。

  2. 时间戳结合随机数：

    为了增加noncestr的复杂性，你也可以将当前的时间戳与随机数结合起来使用。这样既可以保证每次请求的noncestr都是唯一的，也能通过时间戳增加一定的时效性验证。

  3. 使用安全的随机数生成器：

    在安全性要求较高的场景下，应使用安全的随机数生成器来产生noncestr，以确保其不可预测性。

golang动态获取 noncestr

package main  
  
import (  
	"crypto/rand"  
	"encoding/hex"  
	"fmt"  
	"log"  
)  
  
// GenerateNonceStr 生成一个随机的 noncestr  
func GenerateNonceStr(length int) (string, error) {  
	bytes := make([]byte, length/2) // 因为一个字节可以表示为两个16进制数字  
	if _, err := rand.Read(bytes); err != nil {  
		return "", err  
	}  
	return hex.EncodeToString(bytes), nil  
}  
  
func main() {  
	nonceStr, err := GenerateNonceStr(32) // 生成一个32个字符长的noncestr  
	if err != nil {  
		log.Fatalf("Failed to generate nonceStr: %v", err)  
	}  
	fmt.Println("Generated nonceStr:", nonceStr)  
}

得到的签名：

e851776f519a6c8d716bc61a5dec87b042d14c3e

四、H5页面配置与分享设置

注意：从这一步开始，后面的部分属于前端工作

4.1 引入微信JS-SDK

在需要调用 JS 接口的页面引入如下 JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js（支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

4.2 通过 config 接口注入权限验证配置

所有需要使用 JS-SDK 的页面必须先注入配置信息，否则将无法调用（同一个 url 仅需调用一次，对于变化 url 的SPA的web app可在每次 url 变化时进行调用,目前 Android 微信客户端不支持 pushState 的H5新特性，所以使用 pushState 来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

注意：

  • 引入JS文件后，直接执行下列代码

  • debug: true 用来调试的，如果不想alert弹出，改成false即可

  • alert 弹出框中 errMsg 不一定就是错误，知识提示信息，例如 updateAppMessageShareData:ok 代表的是updateAppMessageShareData接口是没有问题的。

  • 签名用的 noncestr 和 timestamp 必须与 wx.config 中的 nonceStr 和 timestamp 相同。

  • jsApiList 接口列表：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#63

  • jsApiList 接口列表 例如 wx.updateAppMessageShareData({ 配置 }) jsApiList填写 ['updateAppMessageShareData'] 即可

    wx.config({
    debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名（这里用上面第三步得到的签名）
    jsApiList: [] // 必填，需要使用的 JS 接口列表
    });

4.3 通过 ready 接口处理成功验证

在wx.ready函数中配置onMenuShareTimeline、onMenuShareAppMessage等接口实现微信分享功能，并设置自定义的分享标题、描述、缩略图及链接。

wx.ready(function(){
  // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
});

4.4 通过 error 接口处理失败验证

使用wx.error函数处理验证失败的情况。

wx.error(function(res){
  // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
});

4.5 js代码示例

// 模拟从后端获取签名等配置信息的函数  
function getWechatConfig(url) {  
  // 通常情况下，以下代码应由后端服务生成并返回给前端  
  // 这里仅为示例，实际项目中，signature, nonceStr, timestamp 应该在服务器端生成  
  const appId = 'YOUR_APP_ID'; // 替换为你的AppID  
  const jsApiList = ['onMenuShareTimeline', 'onMenuShareAppMessage'];  
  
  // 以下为模拟数据，实际开发中应由服务器端提供  
  const nonceStr = 'Wm3WZYTPz0wzccnW'; // 随机字符串  
  const timestamp = Math.floor(Date.now() / 1000).toString(); // 当前时间戳  
  const signature = 'SOME_SIGNATURE_STRING'; // 签名，应由后端根据算法生成  
  
  return {  
    appId,  
    nonceStr,  
    timestamp,  
    signature,  
    jsApiList  
  };  
}  
  
// 调用微信JS-SDK配置  
function initWechatSDK() {  
  const currentUrl = encodeURIComponent(location.href.split('#')[0]);  
  const config = getWechatConfig(currentUrl);  
  
  wx.config({  
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
    appId: config.appId, // 必填，公众号的唯一标识  
    timestamp: config.timestamp, // 必填，生成签名的时间戳  
    nonceStr: config.nonceStr, // 必填，生成签名的随机串  
    signature: config.signature, // 必填，签名  
    jsApiList: config.jsApiList // 必填，需要使用的JS接口列表  
  });  
  
  wx.ready(function () {  
    // 在这里调用 API  
    configShare();  
  });  
  
  wx.error(function (res) {  
    // config信息验证失败会执行error函数，如签名过期(7200s)等原因触发error函数  
    console.error('微信JS-SDK配置失败', res);  
  });  
}  
  
// 配置微信分享  
function configShare() {  
  const shareData = {  
    title: '自定义分享标题', // 分享标题  
    desc: '自定义分享描述', // 分享描述  
    link: 'https://example.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致  
    imgUrl: 'https://example.com/path/to/image.jpg', // 分享图标  
    type: '', // 分享类型,music、video或link，不填默认为link  
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空  
    success: function () {  
      // 用户点击了分享后执行的回调函数  
      console.log('分享成功');  
    }  
  };  
  
  wx.onMenuShareTimeline(shareData); // 分享到朋友圈  
  wx.onMenuShareAppMessage(shareData); // 分享给朋友  
  wx.onMenuShareQQ(shareData); // 分享到QQ  
  wx.onMenuShareWeibo(shareData); // 分享到微博  
}  
  
// 初始化微信JS-SDK  
initWechatSDK();
相关推荐
wmd131643067122 天前
将微信配置信息存到数据库并进行调用
数据库·微信
陈思杰系统思考Jason2 天前
系统思考—全局思维
百度·微信·微信公众平台·新浪微博·微信开放平台
JSON_L3 天前
小程序 - 模拟时钟
微信·微信小程序·小程序
陈思杰系统思考Jason9 天前
系统思考—持续修炼
百度·微信·微信公众平台·新浪微博·微信开放平台
JSON_L9 天前
小程序 - 头像上传
微信·小程序
陈思杰系统思考Jason10 天前
系统思考—沟通成本
百度·微信·微信公众平台·新浪微博·微信开放平台
陈思杰系统思考Jason13 天前
系统思考沙盘模拟
微信·微信公众平台·oneapi·新浪微博·微信开放平台
编织幻境的妖13 天前
使用html 和javascript 实现微信界面功能2
javascript·微信·html
impossible199472713 天前
获取微信用户openid
微信·微信授权·openid
程序员入门进阶15 天前
基于微信的追星小程序+ssm
微信·小程序
热门推荐
01大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06支付宝短视频平台创作分成激励项目07怎么找小红书美食探店博主合作？08【一文读懂】NTN（非地面网络）技术介绍09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10STM32 无法烧录