微信 h5 登陆

网站接入准备工作

1. 微信开放平台注册开发者账号，点击查看操作指引；

2. 微信开放平台-管理中心-创建网站应用并通过审核；

3. 通过审核后可以获得相应的 AppID 和 AppSecret；

4. H5 端 网页必须绑定公众账号.公众账号回调域名要写

这样数据同步了

流程

用户点击触发

<!--微信图标-->
<img
  class="weixinimg"
  src="https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/login/weixin.png"
  v-if="weixinshow"
  @click="weixinclick"
/>
<!--微信图标-->

// 微信点击登录 判断本身没有回调
<script>
  weixinclick() {
    if (!this.$route.query.code) {
      getnewAuthorization();
    }
  },
</script>

• utils 里面的方法

const getUrlParam = (key) => {
  //微信授权时获取openid
  var url = window.location.search;
  var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
  var result = url.substr(1).match(reg);
  return result ? decodeURIComponent(result[2]) : null;
};

export const getnewAuthorization = () => {
  //微信获取用户授权
  var openid = getUrlParam("openid");
  var appID = "你自己的IP";
  var redirectUri = "https://www.xxxxx.com/wechat2.php";
  /* 解决ios微信浏览器不能长按识别二维码的BUG */
  // var local_link = window.location.href;
  // if(local_link.includes('?')){
  //     local_link = `${local_link}&d`
  // }else{
  //     local_link = `${local_link}?d`
  // }
  // var state = aes.WeiXinSign(local_link); //下划线前面是名片id后面是活动id

  let pathname = "/user/wxcbfn";
  let is_host = process.env.NODE_ENV === "production" ? "1" : "2";
  var state = aes.WeiXinSign(pathname, is_host);
  if (openid == null || openid == undefined || openid == "") {
    var strUrl =
      "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
      appID +
      "&redirect_uri=" +
      redirectUri +
      "&response_type=code&scope=snsapi_userinfo&state=" +
      state +
      "#wechat_redirect";

    window.location.href = strUrl;
  }
};

• aes.WeiXinSign 方法,后端跳转到回调页面

var WeiXinSign = (backUrl, is_host) => {
  var singParam = "utRWZBhNvI";
  var state = {
    back: backUrl,
    sign: md5(backUrl + singParam),
    is_host: is_host, // 1是act正式服  2是act测试服
  };
  console.log(state);
  return btoa(JSON.stringify(state));
};

wechat2.php 页面

<?php

function clear_urlcan($url){
    $rstr='';
    $tmparr=parse_url($url);
    var_dump($tmparr);
    $rstr=empty($tmparr['scheme'])?'http://':$tmparr['scheme'].'://';

    $rstr.=$tmparr['host'].$tmparr['path'];
    return $rstr;

}

$ipt = $_GET;
$secret = 'utRWZBhNvI';
if (empty($ipt['code']) || empty($ipt['state'])) {
    return '请重试!~';
}
$state = json_decode(base64_decode($ipt['state']), true);
if (
    empty($state['back']) ||
    empty($state['sign']) ||
    md5($state['back'] . $secret) != $state['sign']
) {
    return '请重试!~';
}
if (!empty($state['is_host'])) {
    if ($state['is_host']==1) {
        $state['back'] = "https://xxxxxx.com".$state['back'];
    } elseif ($state['is_host']==2) {
        $state['back'] = "https://xxxxxxxx.com".$state['back'];
    }
}
// var_dump(clear_urlcan($state['back']));
// die;
$backUrl = urldecode(clear_urlcan($state['back']) . '?code=' . $ipt['code']);
header("Location:{$backUrl}");
exit();
?>

user/wxcbfn.vue

  mounted() {
    this.checkuser();
  },
  /*判断方法 */
checkuser() {
  userIsWechatApi({
    code: this.$route.query.code,
    appid: "xxxxxxxxxxxx",
  })
    .then((res) => {
      console.log(res.data);
      if (res.code == 200) {
        if (res.data.access_token == "") {
          // 新用户
          console.log("新用户");
          newsaveWeixinSession(res.data);
          this.loading_page = false;
            // 下面就是绑定手机号之类的
        } else {
            console.log("老用户的逻辑")
        }
      } else {
        this.$router.push("/");
      }
    })
    .catch((error) => {});
},