微信跳转h5页面获取openid等信息

2021年05月28日 14:59 · 阅读 774

微信内跳转地址可以获取访问者的信息，包括openid，昵称等信息。本处主要讲免登录静默获取微信访问用户的 openid的方式。非静默类似所谓静默获取是指不去请求访问者手动开启权限，但这种方式只能访问到访问者的openid作为唯一键来区分访问者。首先获取访问者 openid 分为两步， 1）进入我们页面时需要判断url是否存在 code 参数（微信平台会返回 code 参数，所以我们的页面就不要占用这个参数的命名了） 2）若没有code,则使用我们自己微信公众平台的 appid 去访问微信的链接拿到 code ,代码如下：

  getWxCode() {
      let urlNow = encodeURIComponent(window.location.href)
      let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appid + '&redirect_uri=' + urlNow + '&response_type=code&scope=snsapi_base#wechat_redirect';
      window.location.href = url
    },
复制代码

由于是静默获取所以这里 scope 参数传值 snsapi_base，若需要获取昵称等信息，可采用非静默方式，scope传值snsapi_userinfo。直接跳转这个链接，当微信平台验证没有问题时会携带code返回我们传给他的 redirect_uri 地址 3）微信携带 code 返回后，我们需要拿到返回的 code 以及我们公众平台的 appid 和 appsecret 去换取微信的 openid（非静默方式也可拿到用户其他信息），代码如下：

 axios.get('https://api.weixin.qq.com' + '/sns/oauth2/access_token?appid=' + this.appid + '&secret=' + this.appsecret + '&code=' + code + '&grant_type=authorization_code')
          .then(res => {
            console.log('openid 获取==>')
            console.log('微信返回:', res)
            console.log('当前openid:', res.data.openid)
            console.log('<==openid 获取')
            this.userId = res.data.openid;
          })
复制代码

附完整vue代码,其他类似逻辑：

<script>
import md5 from '@/utils/md5'
import axios from 'axios'
import URL from '@/http/url'
import utils from '@/utils/utils'
import { Toast } from 'vant';

export default {
  data () {
    return {
      userId: '',
      appid: '', // 微信公众号 appid
      appsecret: '', // 微信公众号 appsecret
    }
  },
  computed: {
  },
  created() {
    if (utils.isWeixin()) {
      // 获取 openid流程 1.获取 code 2.交换openid
      let code = this.$route.query.code;
      if (code) {
      axios.get('https://api.weixin.qq.com' + '/sns/oauth2/access_token?appid=' + this.appid + '&secret=' + this.appsecret + '&code=' + code + '&grant_type=authorization_code')
          .then(res => {
            console.log('openid 获取==>')
            console.log('当前openid:', res.data.openid)
            console.log('<==openid 获取')
            this.userId = res.data.openid;
          })
      } else {
        this.getWxCode();
      }
    } else {
      Toast('请在微信环境打开')
    }
  },
  mounted() {
  },
  methods: {
    /**
      * @description 静默获取微信 code
     */
    getWxCode() {
      let urlNow = encodeURIComponent(window.location.href)
      let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appid + '&redirect_uri=' + urlNow + '&response_type=code&scope=snsapi_base#wechat_redirect';
      location.href = url
    },
  },
}
</script>
复制代码