微信分享第三方连接(H5页面)自定义页面

文章目录

  • 一、准备工作
  • 二、微信公众号后台设置
  • 三、获取签名(含代码)
    • [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();
相关推荐
Rainbow_Technology3 小时前
劫持微信聊天记录并分析还原 —— 数据库结构讲解(四)
微信·微信聊天记录查看·微信聊天记录破解
陈思杰系统思考Jason15 小时前
系统思考—深层结构
百度·微信·微信公众平台·新浪微博·微信开放平台
ysdysyn2 天前
C# winfrom实现微信(其他应用)自动跟随C#窗口,拖动页面自动恢复到固定位置
开发语言·微信·c#·winform
程序员入门进阶2 天前
基于微信的追星小程序+ssm(lw+演示+源码+运行)
微信·小程序
2401_844139032 天前
Java爱情交友婚恋系统小程序源码
微信·微信小程序·小程序·微信公众平台·交友·微信开放平台
somgl3 天前
Wecom酱搭建企业微信发送消息
微信
悟空码字5 天前
使用免费的微信机器人,实现消息推送实时通知
微信·消息推送·群机器人
悟空码字5 天前
使用微信免费的内容安全识别接口,UGC场景开发检测违规内容功能
微信·ugc·内容安全识别
EasyCVR6 天前
GA/T1400视图库平台EasyCVR视频分析设备平台微信H5小程序:智能视频监控的新篇章
微信·小程序·音视频
SCRM_huke6 天前
微信商家转账到零钱完整开通说明
微信·微信小程序·小程序·微信开放平台