Authorized public micro-channel number - the front

No authorized to operate public

When developing micro-channel public number, we need to get information to the user, and thus had to design micro letter public, authorized the issue (essentially using the OAuth login)

How to develop a model resource authorization

• No micro-channel public licensing model offers two environments, production development environment
  • Formally launched the production environment is the environment, not to discuss specific
  • Key to talk about development environment (because of the same reason, mainly in the development, how they can better simulate the production environment, access to user information)

Development environment

• Application development environment micro-channel public number
  

  • To get the user's appid

• Find the corresponding page authorization to obtain information about users , add域名
  

Fill in the 域名local server address (domain name / ip) can not distinguish intranet or extranet

• Generating links
  need to complete the following three specific parameters, other fixed
  • APPID generated when the number of registered public test ---
  • REDIRECT_URI --- fill in the full address of the domain name above
  • 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

• The address input to the address in the micro-channel Developer Tools, modified

• After successfully enter whether to authorize determined

• Jump back, the address bar will carry codeparameters, get the request parameters, specific user information, we need to pass a background according to the coderequest to

Code [view]

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: '给你一次重来的机会！' })
      }
    })
  })
},

Reference links

• Official Links
• Obtaining user information
• Friends