Vue 微信公众号开发---授权登录获取信息

一、开发准备

1.申请的微信公众号且选择类型为服务号,因为只有服务号才可以进行一下步骤;
2.需要通过备案的域名,后面在网页授权域名配置中会用到,当然在前端访问域名也是必须的;

二、微信授权整体逻辑

1.参考微信官方文档
2.设计思路:前端授权获取code --->上传给后台 ---> 后台通过code 调用微信后台换取access_token和使用scope为snsapi_userinfo的方式 获取到用户openid和基本信息 ---> 返回到前端---> 将openid作为用户的唯一标识。

三、具体步骤

1.将公众号appid和appSecret交给后台开发同学完成相关配置,在开发---->基本配置;


image.png

2.在公众号页面,设置---> 公众号设置 ---> 功能设置中,设置网页授权回调域名;


image.png

3.前端实现代码;
根据业务功能在具体实现过程中,首先在router路由守卫中判断 本地是否存储用户openid,如果有进入业务页面,如果没有重定向到微信授权页面。
router.beforeEach((to,from,next) => {
    let fullPath = to.fullPath
    if (to.name === 'Auth') {
        next()
        return
    }
    let openId = localStorage.getItem('openId');
    if (!openId) {
        //保存当前路由地址,授权后还会跳到此地址
        sessionStorage.setItem('wxRedirectUrl', fullPath)
        //请求微信授权,并跳转到 /auth 路由
        let appId = '公众号appid'
        let redirectUrl = encodeURIComponent('正式环境授权页面路径')
        //判断是否为正式环境
        if (window.location.origin.indexOf('正式环境域名') !== -1) {
            redirectUrl = encodeURIComponent('正式环境授权页面路径')
        } else {
            redirectUrl = encodeURIComponent('测试环境授权页面路径')
        }
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize? appid=${appId}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect&connect_redirect=1`
   } else {
       next()
   }

})

在页面目录中创建一个auth.vue授权空页面;

<template>
    <div></div>
</template>

<script>
export default {
  name: "Auth",
  async created() {
    // 如果连接中有微信返回的 code,则用此 code 调用后端接口,向微信服务器请求用户信息
    if (this.$route.query.code) {
      try {
        let redirectUrl = sessionStorage.getItem("wxRedirectUrl");
        let res = await this.$api.getWxUserInfo({
          wxCode: this.$route.query.code
        });
        if (res.data.code == 200) {
         //将一些信息存储到本地
          const token = res.headers['accesstoken']
          localStorage.setItem('token', token)
          localStorage.setItem("wxUserInfo", JSON.stringify(res.data.root));
          localStorage.setItem("openId", res.data.root.openId);
        }
        this.$router.replace(redirectUrl);//跳转到业务页面
      } catch (error) {
        console.log(error);
      }
    } else {
     // 如果不是从微信重定向过来的,没有带着微信的 code,则直接进入首页
      this.$router.replace("/");
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

不同的业务实现的方式可能不同,可根据自己具体业务逻辑加以调整。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容