Implementação front-end do login autorizado do WeChat

Login de autorização do WeChat na Web para PC

Um: o caminho do salto da página da web

01. Solicite a interface em segundo plano, ela retornará um endereço de interface de código de verificação WeChat, use js para pular para o passado

 

    wxlogin () {
       User.wxlogins().then(res => {
        console.log(res)
        window.location.href = res.result.url
      })
    },

02. Depois que o usuário digitalizar o código e clicar para confirmar a autorização, o plano de fundo obterá as informações do usuário autorizado do WeChat e nos ajudará a ir para a página de endereço que foi redirecionada com antecedência (aqui eu criei uma página em branco para receber o plano de fundo Dados retornados), um token será costurado em segundo plano atrás do endereço, obtemos esse token, para obter informações do usuário, vá para a página inicial, você pode concluir o login

 

let token = this.$route.query.token
    if (token) {
      this.getUserInfo().then(ures => {
        this.$router.push({
          name: 'home'
        })
      })
    }

Dois: código QR incorporado da página da Web

01. Configure os seguintes parâmetros relevantes para gerar o código QR de login / ligação autorizado WeChat, (Nota: setWxerwma () Este método precisa ser chamado em montado)

 

 setWxerwma () {
      const s = document.createElement('script')
      s.type = 'text/javascript'
      s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
      const wxElement = document.body.appendChild(s)
      wxElement.onload = function () {
        var obj = new WxLogin({
          id: '', // 需要显示的容器id
          appid: '', // 公众号appid wx*******
          scope: 'snsapi_login', // 网页默认即可
          redirect_uri: encodeURIComponent(''), // 授权成功后回调的url
          state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
          style: 'black', // 提供"black"、"white"可选。二维码的样式
          href: '' // 外部css文件url，需要https
        })
      }
    },

02. A lógica a seguir pode ser processada de acordo com os dados retornados pelo plano de fundo, semelhante ao método um passo dois

Login autorizado na conta oficial do WeChat

01. Crie um botão e clique no evento acionador para ir para a página de autorização WeChat

 

wxlogin () {
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
    }
//this.appid 公众号APPID  this.url  用户点击授权后，会跳转到后台帮我们重定向的页面（这里我是新建了一个空白页，专门接收code）

02. O código retornado ao WeChat a partir da página redirecionada será emendado por trás do URL. Obtemos esse código e solicitamos a interface de back-end em troca do token para concluir o login no WeChat