微信公众号授权--前端

公众号授权操作

开发微信公众号时,需要获取到用户的信息,因而不得不设计到微信公众号授权问题(本质是利用OAuth登陆)

开发模式如何进行授权操作

  • 微信公众号提供了两种环境的授权模式,生产环境 开发环境
    • 生产环境也就是正式上线环境,具体不做讨论
    • 重点谈论开发环境(因为道理一样,主要是在开发时,如何能够更好地模拟生产环境下,获取用户信息)

开发环境

  • 申请开发环境微信公众号
    微信公众号授权--前端

    • 获取到用户的 appid
  • 找到对应的网页授权获取用户基本信息,添加域名
    微信公众号授权--前端

微信公众号授权--前端

填写的域名本地服务器地址(域名 / ip)即可,不区分内网还是外网

  • 生成链接
    需要先完成下面三个的具体参数,其他不动
    • APPID --- 注册测试的公众号时生成的
    • REDIRECT_URI --- 上面填写的域名的完整地址
    • SCOPE --- snsapi_base / snsapi_userinfo
    https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
  • 在微信开发者工具中输入上述地址,修改后的地址

  • 成功后会进入是否授权的确定
  • 跳转回来,地址栏会携带 code参数,拿到参数进行请求,具体的用户信息,需要后台根据传递的 code 来进行请求

code [vue]

getCode () {
  const code = location.href.split('?')[1]
  if (!code) return {}
  const obj = {}
  code.split('&').forEach(item => {
    const arr = item.split('=')
    obj[arr[0]] = arr[1]
  })
  return obj
},

getLogin () {
  const { code } = this.getCode()
  if (!code) {
    this.$dialog.toast({
      mes: '请授权登陆',
      timeout: 1500,
      icon: 'error'
    })
    return
  }
  const PARAMS = {
    code
  }
  // login 后台提供的接口
  this.$fetch.post(login, PARAMS).then(res => {
    /**
      * TODO: 若token没值
      */
    const { token } = res.data
    this.$store.dispatch('saveToken', token)
  }).catch(_ => {
    this.$dialog.toast({
      mes: '登陆失败',
      timeout: 1500,
      icon: 'error',
      callback: () => {
        this.$dialog.alert({ mes: '给你一次重来的机会!' })
      }
    })
  })
},

参考链接

微信公众号授权--前端

上一篇:微信公众号授权--后端


下一篇:2019课设---基于微信小程序的食堂订餐送餐系统设计 【构思】(七)