当前位置：首页 > news >正文

关于移动端H5获取微信非静默授权被拦截进入【微信快照页】问题及解决方案

news 来源：原创 2024/5/8 1:19:48

业务需求场景：登录用户 — 微信分享H5页面URL — 好友（非登录用户）打开分享页面时，要求获取用户授权，拿到非登录用户的微信相关信息才可以继续访问

问题描述：有部分用户反馈，页面访问不正常即，打开分享页面，进入了微信快照页，并且右下角有提示，需要用户点击【使用完整服务】后，才能正常拉取授权进入分享页

官方描述：快照页将会默认对用户屏蔽网页授权弹窗，用户在快照页中仅可进行滑动浏览操作，其他交互将被限制，并提示用户 “该网页需获取个人信息才可使用完整服务，当前仅可浏览部分内容”。用户如需要使用完整网页服务，可轻触右下角 “使用完整服务” 按钮触发授权弹窗，用户确认后进入原网页。

微信网页授权能力调整公告https://developers.weixin.qq.com/community/minihome/doc/000c2c34068880629ced91a2f56001

授权流程：（vue项目为例）

解决方案：

首先要明白为什么会进入快照页，客观看这里：

现有的业务代码逻辑正好命中不规范中第一条：访问网页时就去拉取授权

猜想，如果在拉取授权前跳转一个过渡页，过渡页明确告知用户要去拉取微信授权获取个人信息，且由用户点击确定按钮操作后，再执行网页授权逻辑，这样就符合微信授权规范了吧？修改授权逻辑，增加过渡页：

测试，ok，完美解决分享页面拉取授权进入快照页问题 ~

授权过渡页逻辑代码：（供参考）

<template>
  <div>
    <h2 class="double-pd14">正在获取授权，请耐心等待...</h2>

    
    <confirm-dialog
      :is-show-dialog="showDialog"
      :show-cancel-btn="false"
      dialog-title="授权确认提示xxxxxx"
      dialog-message="是否允许获取您的微信授权xxxxxxx"
      @confirmEvents="onSetWxAuthHandle"
    />
  </div>
</template>

<script>
export default {
  name: 'wx-auth-page',
  components: {
    confirmDialog
  },
  data () {
    return {
      showDialog: false
    }
  },
  created () {
    this.onCheckWxRedirect()
  },
  methods: {
    async onCheckWxRedirect () {
      const {
        code,
        state
      } = this.$route.query
      
      // 判断是否授权重定向
      if (code && state === 'shareLogin') {
        // 重定向回来，业务逻辑
        // 请求接口续签token，跳转分享页
      } else {
        // 非重定向，唤起授权提示
        this.showDialog = true
      }
    },

    // 发起微信授权
    async onSetWxAuthHandle () {
      const {
        origin,
        pathname
      } = this.onReturnWindowOpt()
      this.showDialog = false
      // 接口逻辑略
      await setWxOpenAuth({
        state: 'shareLogin',
        redirectUrl: encodeURIComponent(origin + pathname)
      })
    },

    // 失败跳转登录，错误补偿机制
    wxAuthErrorEffect () {
      this.$toast('授权失败')
      const { origin } = this.onReturnWindowOpt()
      window.location.replace(`${origin}${PRODUCT_NAME}login`)
    },

    onReturnWindowOpt () {
      const {
        origin,
        pathname
      } = window.location
      return {
        origin,
        pathname
      }
    }
  }
}
</script>