WeChat承認済みログインのフロントエンド実装

PCウェブWeChat認証ログイン

1つ：Webページのジャンプ方法

01.バックグラウンドインターフェイスを要求すると、WeChatスキャンコードインターフェイスアドレスが返され、jsを使用して過去にジャンプします

 

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

02.ユーザーがコードをスキャンしてクリックして認証を確認すると、バックグラウンドでWeChatの認証済みユーザーの情報が取得され、バックグラウンドにリダイレクトされたアドレスページにジャンプできます（ここでは、バックグラウンドを受け取るための空白のページを作成しました返されたデータ）、トークンはアドレスの後ろのバックグラウンドでステッチされます。このトークンを取得して、ユーザー情報を取得し、ホームページにジャンプして、ログインを完了できます

 

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

2：Webページに埋め込まれたQRコード

01. WeChat承認済みログイン/バインドQRコードを生成するために以下の関連パラメーターを構成します（注：setWxerwma（）このメソッドはマウントされた状態で呼び出す必要があります）

 

 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.以下のロジックは、1ステップ2の方法と同様に、バックグラウンドから返されたデータに従って処理できます。

WeChat公式アカウントでの承認済みログイン

01.ボタンを作成し、トリガーイベントをクリックして、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.リダイレクトされたページからWeChatに返されたコードは、URLの背後で接合されます。このコードを取得し、トークンと引き換えにバックエンドインターフェイスに要求して、WeChatログインを完了します。