收藏
回答

微信H5纯签约唤起后,返回后跳转到域名根目录下

微信纯H5签约唤起签约页面后,重新返回到唤起页面,iphone13 或某些浏览器直接返回域名根目录下了。而不是当前唤起页面。

回答关注问题邀请回答
收藏

5 个回答

  • Memory
    Memory
    2021-11-25

    Q:h5纯签约或公众号纯签约签约完成后点击完成按钮返回的是商户首页,不是发起签约请求的页面

    A:

    1.浏览器发起签约场景:

    问题根因:referer由于客户端webview内核安全策略变更,需要源页面进行授权后,才能获取完整URL,否则无法在签约完成后,原路跳回商户的H5

    解决方案:

    商户跳转前的源H5页面,需要在html中做referrer-policy的授权声明:

    方法一(推荐):

    <meta name="referrer" content="no-referrer-when-downgrade">

    方法二:

    <meta name="referrer" content="unsafe-url">

    安全策略详情可参考:https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default

    Referrer-Policy声明的用法可参考:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy

    注意:

    ① 商户需要检查一下html里面是否有多个meta name="Referrer"的声明(比如声明了一个<meta name="Referrer" content="origin" />,会覆盖开头的声明,需要删掉)

    ② 检查发起签约页面跳转微信时是否有处理过(比如中转页面或着在后台跳转的),必须是商户前端发起的跳转,否者不会生效

    ③由于iOS15对referrer policy更加严格,referer只带了host没有带path,但iOS14以及之前版本的referer带了host和path,导致了iOS15以上目前只能返回商户域名页面


    2.商户发起签约页面地址中有片段标识符:

    片段标识符(URI Fragment,即URL中#号后面的部分)仅用作浏览器端的处理,不会参与到服务端请求中,故签约完成回跳不会带上这部分信息。


    2021-11-25
    有用 3
    回复 5
    • 叫我小施就好了
      叫我小施就好了
      2022-02-15
      按照方案一进行调整后,小米手机浏览器仍出现相同的情况
      2022-02-15
      回复
    • Awalker
      Awalker
      2022-03-31
      ios 15 没有办法吗?
      2022-03-31
      1
      回复
    • 陈布丁
      陈布丁
      2022-05-17
      我在签约时通过localStorage设置一个标识,在返回域名时判断如果有这个标识就跳转到支付页面,在其他浏览器上是可行的,可是在safari中却不行。这个是什么问题导致的,有什么处理方法吗?
      2022-05-17
      回复
    • 小小小石头
      小小小石头
      2022-07-13回复陈布丁
      老师,您这个问题解决了吗,怎么处理的,我也遇到同样的问题
      2022-07-13
      回复
    • 胡小桃
      胡小桃
      07-16回复小小小石头
      老师,您这个问题解决了吗,怎么处理的,我也遇到同样的问题
      07-16
      回复
  • Jayce Yao
    Jayce Yao
    2023-04-10

    针对使用hash进行路由的项目,不管是Vue还是React,都不在适合作为唤起纯签约的主体界面,很多人用本地存储来标识状态,但如果遇到跨浏览器,这个标识就废了,referer跳转根本就不行了。

    分享一下我们项目里的做法, 背景是:我们项目里是把整个支付抽离,作为一个支付中心,跟业务区分开来,支付/签约完成后都会跳转到业务需要的指定returnUrl进行结果渲染。(当然这个做法也有缺点,就是我们的签约链接在使用过一次后就会跳转到业务,用户如果没有签约,点了返回,那基本无法识别到,只能说在我们的业务架构上,这样的操作基本可以满足需求而已,这个案例就提供一个思路~~~)

    具体步骤:

    1、项目里新建一个contract.html,作为签约业务的中间页,专门用来进行纯签约跳转。

    2、在原有业务逻辑中添加逻辑,判断如果是进行纯签约操作,则跳转到签约中间页进行操作。

    // redirectUrl 是微信h5签约链接
    // returnUrl 是需要执行前往的返回结果链接
    // payTag 当前链接执行状态,操作过一次就回更新
    window.location.href = `${url}/contract.html?redirectUrl=${encodeURIComponent(redirectUrl)}&returnUrl=${encodeURIComponent(returnUrl)}&payTag=1`;
    

    3、当签约完成后,用户在微信点击“完成”按钮后,根据referer进入contract.html界面后,会执行跳转到returnUrl结果界面。

    HTML示例如下,可作参考:

    <!DOCTYPE html>
    <html lang="en">
    
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="referrer" content="no-referrer-when-downgrade">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>签约</title>
      <style>
        html,
        body {
          width: 100%;
          height: 100%;
          position: relative;
        }
    
    
        .loading {
          font-size: 16px;
          color: #999;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      </style>
    </head>
    
    
    <body>
      <p id="loading" class="loading">Loading...</p>
      <script>
        window.onload = function () {
          // 获取URI参数 
          const getURIParam = (paramName) => {
            const currentUrl = window.location.href;
            const regex = new RegExp("[?&]" + paramName + "(=([^&#]*)|&|#|$)");
            const results = regex.exec(currentUrl);
            if (!results || !results[2]) {
              return "";
            } else {
              const paramValue = decodeURIComponent(results[2].replace(/\+/g, " "));
              return paramValue;
            }
          }
          // 更新url参数
          function updateUrl(key, value) {
            var newurl = updateQueryStringParameter(key, value)
            window.history.replaceState({ path: newurl }, '', newurl);
          }
          // 更新url参数
          function updateQueryStringParameter(key, value) {
            var uri = window.location.href;
            if (!value) {
              return uri;
            }
            var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
            var separator = uri.indexOf('?') !== -1 ? "&" : "?";
            if (uri.match(re)) {
              return uri.replace(re, '$1' + key + "=" + value + '$2');
            } else {
              return uri + separator + key + "=" + value;
            }
          }
    
    
          const { href } = window.location;
          const redirectUrl = getURIParam("redirectUrl");
          const returnUrl = getURIParam("returnUrl");
          const hrefTag = getURIParam("payTag"); // payTag  1(可用)  0(已使用) 
          if (redirectUrl && hrefTag && hrefTag === "1") {
            const copyUrl = decodeURIComponent(redirectUrl); updateUrl("payTag", "0"); // 更新链接状态 
            setTimeout(() => {
              document.getElementById("loading").innerText = "即将跳转签约...";
            }, 700)
            setTimeout(() => {
              window.location.href = copyUrl;
            }, 1500)
          } else if (hrefTag && hrefTag === "0") {
            const copyUrl = decodeURIComponent(returnUrl); window.location.href = copyUrl;
          } else {
            alert("签约异常,请手动返回")
          }
        }
      </script>
    </body>
    
    
    </html>
    
    2023-04-10
    有用 1
    回复 1
    • 星
      02-01
      您好,那您的中转页路由模式还是hash模式嘛,我目前遇到的问题也是这样,我们有两个项目,一个是history模式的路由,这个一切正常,但是hash模式微信跳回浏览器路由和参数全部丢失
      02-01
      回复
  • LLC
    LLC
    2022-07-04

    请问最后解决了吗?


    2022-07-04
    有用
    回复
  • Awalker
    Awalker
    2022-03-31

    ios 15 没有办法吗?

    2022-03-31
    有用
    回复
  • 晚起看夕阳
    晚起看夕阳
    发表于移动端
    2022-03-24
    请问后续是如何修改的?
    2022-03-24
    有用
    回复
登录 后发表内容