Bagaimana untuk melaksanakan log masuk kod imbasan WeChat dan mendapatkan maklumat peribadi dalam vue3

1. Proses:

Terdapat dua kaedah pengimbasan kod QR yang disediakan oleh WeChat, iaitu:

• Lompat ke halaman pengimbasan kod QR

• Kod QR terbenam

Menurut dokumen, kita boleh tahu bahawa proses keseluruhan mod kebenaran kod imbasan ialah:

1. Pihak ketiga Memulakan permintaan log masuk yang dibenarkan WeChat Selepas pengguna WeChat membenarkan keizinan aplikasi pihak ketiga, WeChat akan melancarkan aplikasi atau mengubah hala ke tapak web pihak ketiga, dan membawa parameter kod tiket sementara keizinan >2. Tambahkan parameter kod AppID dan AppSecret, dsb., ditukar untuk access_token melalui API

3. Buat panggilan antara muka melalui access_token untuk mendapatkan sumber data asas pengguna atau membantu pengguna melaksanakan operasi asas.

2. Prasyarat:

Aplikasi tapak web rasmi pembangunan WeChat:

appid: ‘’, // Backend disediakan

redirect_uri: &lsquo ;&rsquo ;, // Bahagian belakang menyediakan

AppSecret // Bahagian belakang menyediakan

3. Pelaksanaan log masuk khusus

Kaedah pelaksanaan satu:

Gunakan vue Plug- dalam:

// 安装
npm install vue-wxlogin --save-dev
// js引入
import wxlogin from 'vue-wxlogin'
components: { wxlogin }

Gunakan:

<wxlogin
        :appid="appid"
        :scope="&#39;snsapi_login&#39;"  // 网页固定的
        :theme="&#39;black&#39;"
        :redirect_uri="redirect_uri"
        :href=&#39;bast64css&#39;
        
        >
 </wxlogin>
 
 
 
//   data
<wxlogin
        :appid="appid"
        :scope="&#39;snsapi_login&#39;"  // 网页固定的
        :theme="&#39;black&#39;"
        :redirect_uri="redirect_uri"
        :href=&#39;bast64css&#39;
        
        >
 </wxlogin>

//   data
bast64css: &#39;data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O2hlaWdodDoyMDBweH0NCi5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjAwcHh9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lfQ0KaWZyYW1lIHtoZWlnaHQ6IDMyMnB4O30NCg==&#39;,
                appid: &#39;wx64914809da50&#39;, // 后端提供
                redirect_uri: &#39;http%3A%2F%2Flant.com&#39;, // 后端提供

Keputusan: Dengan cara ini, kod QR WeChat akan dipaparkan pada halaman web yang anda tulis

Selepas mengimbas, url halaman akan menjadi alamat Kod, dapatkan kod

if (window.location.href.indexOf('code') >= 0) {
                let code = window.location.href.split('?')[1];
                code = code.substring(5, code.indexOf('&'));
                this.wechatcode = code
                this.wechatLogin()
            }

Berikan kod ke hujung belakang, dan hujung belakang akan mengembalikan maklumat orang itu kepada anda

Kaedah 2:

Sepadukan ia ke dalam anda halaman Web sendiri

1 Mula-mula tambah butang log masuk WeChat pada halaman vue:

<!--微信授权登录按钮-->
<img src="@/assets/images/weixin.png" /><a  type="text" @click="handLoginByWx">微信扫码登录</a>

2 Konfigurasikan parameter berkaitan log masuk dan lompat ke halaman kebenaran kod QR log masuk WeChat

// 跳转微信登录二维码授权页面
      handLoginByWx() {
        // 重定向地址重定到当前页面，在路径获取code
        const hrefUrl = window.location.href
        // 判断是否已存在code
        if (!this.code) {
        // 不存在，配置相关微信登录参数（主要是授权页面地址，appID，回调地址）
          window.location.href = `
              https://open.weixin.qq.com/connect/qrconnect
            ?appid=APPID
            &redirect_uri=${encodeURIComponent(hrefUrl)}
            &response_type=code
            &scope=snsapi_login
                    `
        }
      }

<.>3. Imbas kod QR untuk mengesahkan kebenaran

Imbas kod QR dengan telefon mudah alih anda untuk mengesahkan kebenaran

4 pada Vue, nilai kod yang dikembalikan oleh panggilan balik diperolehi dalam pengawal penghalaan

// 为微信授权登录重定向地址服务
      var temp = (to.path).split('&')
      var pram = temp[1]
      var item = pram.split('=')
      var code = item[1]
      // 重定向到微信登录页面并且将code值带上
      next({
        path: '/login',
        query: { 'code': code }
      })

5 Sama ada alamat pemantauan halaman log masuk wujud kod

Sama ada pemantauan halaman log masuk memperoleh nilai kod. dikembalikan oleh keizinan WeChat, jika ia wujud, antara muka yang disediakan oleh latar belakang akan dipanggil Kod tersebut dikembalikan ke bahagian belakang

6 Panggil antara muka log masuk untuk log masuk berdasarkan kelayakan yang dikembalikan oleh bahagian belakang

Kaedah 3: Gabungkan bahagian belakang untuk mendapatkan kod QR

1 Tambah div , digunakan untuk memaparkan kod QR log masuk WeChat

<div id="weixin"></div>

2 kod JS

mounted() {
    var obj = new WxLogin({
      id: "weixin",
      appid: "wx3bdb1192c22883f3",
      scope: "snsapi_login",
      // 扫码成功后 跳转的地址
      redirect_uri: "http://domain/weixinlogin"
    });
  },
  head: {
    script: [
      { src: "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" }
    ]
  }

appid: pengecam unik aplikasi

• skop: Keizinan aplikasi berfungsi pada

• redirect_uri: alamat panggilan balik, iaitu halaman untuk dilawati selepas log masuk WeChat berjaya

• 3 Paparkan kod QR
  Selepas mengimbas kod QR untuk log masuk, dan mengklik butang sahkan log masuk, penyemak imbas secara automatik akan melompat ke:

http://domain /weixinlogin?code=02147Yff12Yhgz0ArCef1qabgf147Yf0&state=udefined

Kod ini ialah token sementara dihantar kepada pengguna oleh WeChat. Kami boleh meminta antara muka log masuk pihak ketiga WeChat sekali lagi mengikut kod untuk mendapatkan access_token (token rasmi)

3. Dapatkan access_token

3.1.1 melalui kod untuk tujuan lain Panggilan antara muka

1. Penerangan antara muka (dapatkan token_akses melalui antara muka berikut)

Kaedah permintaan HTTP: GET

URL: https://api. weixin.qq.com/ sns/oauth3/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

Mengembalikan parameter berikut:

{
    "access_token":"ACCESS_TOKEN",
    "expires_in":7200,
    "refresh_token":"REFRESH_TOKEN",
    "openid":"OPENID",
    "scope":"SCOPE"
}

3.2 Panggilan vue berikut kod back-end java

1. Panggil perkhidmatan nod melalui axios dan cipta fail baharu: @/api/weixin.js (ini kerana antara muka disatukan dan disimpan secara berasingan di bawah fail api)

import axios from 'axios'
export function getAccessToken(code) {
 return axios.get(`http://localhost:8888?operation=token&code=$[code]`)
}

2. Tambah alat utils/param.js ( Digunakan untuk mendapatkan kod parameter bar alamat penyemak imbas)

export function getUrlParam(name) {
　　var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
　　var r = window.location.search.substr(1).match(reg);
　　if(r != null) return unescape(r[2]);
　　return null;
}

3 Cipta weixinLogin.vue

<template>
    <div></div>
</template>
<script>
import { getUrlParam } from &#39;@/utils/param&#39;
import { getAccessToken } from &#39;@/api/weixin&#39;
    
export default {
    mounted(){
      let code=getUrlParam(&#39;code&#39;)
      if(code!==null){//如果是微信登陆
        //根据code获取access_token
        getAccessToken(code).then( res=>{
          let access_token= res.data.access_token
          let openid= res.data.openid
          console.log(&#39;access_token:&#39;+access_token+ &#39;openid:&#39;+openid)
        })
      }
    }
}
</script>

4 avatar dan nama panggilan pengguna dalam WeChat selepas log masuk ke WeChat

API

1 perihalan antara muka

Kaedah permintaan HTTP: GET

URL: https: //api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

Parameter pulangan:

{
“openid”:“OPENID”,
“nickname”:“NICKNAME”,
“sex”:1,
“province”:“PROVINCE”,
“city”:“CITY”,
“country”:“COUNTRY”,
“headimgurl”: “http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0”,
“privilege”:[
“PRIVILEGE1”,
“PRIVILEGE2”
],
“unionid”: " o6_bmasdasdsad6_2sgVt7hMZOPfL" }

Selepas mendapatkan access_token dan openid, minta antara muka sekali lagi, dapatkan nama panggilan dan avatar, dan simpan dalam kuki

<template>
    <div></div>
</template>
<script>
import { getUrlParam } from &#39;@/utils/param&#39;
import { getAccessToken } from &#39;@/api/weixin&#39;
import { setUser } from &#39;@/utils/auth&#39; 

export default {
    mounted(){
      let code=getUrlParam(&#39;code&#39;)
      if(code!==null){//如果是微信登陆
        //根据code获取access_token
        getAccessToken(code).then( res=>{
          let access_token= res.data.access_token
          let openid= res.data.openid
          weixin.getUserinfo( access_token, openid ).then( res => {
            //提取用户昵称和头像
            let nickname= res.data.nickname
            let headimgurl= res.data.headimgurl
            // 将用户信息保存到token中
            setUser(access_token,nickname,headimgurl)
            location.href=&#39;/&#39;  //跳转到首页
          })
        })
      }
    }
}
</script>

Pada ketika ini, getUser mendapat log masuk semasa Nama pengguna dan avatar pengguna.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan log masuk kod imbasan WeChat dan mendapatkan maklumat peribadi dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!