Comment implémenter la connexion par code de numérisation WeChat et obtenir des informations personnelles dans vue3

1. Processus :

WeChat propose deux méthodes de numérisation de code, qui sont :

• Accédez à la page de numérisation du code QR

• Code QR intégré

Nous pouvons connaître selon le document le processus global de le modèle d'autorisation du code de numérisation est le suivant :

1. Le tiers lance une demande de connexion d'autorisation WeChat. Une fois que l'utilisateur WeChat a autorisé l'autorisation de l'application tierce, WeChat lancera l'application ou redirigera vers le site Web tiers et apportera. le paramètre de code de ticket temporaire d'autorisation ;

2. Utilisez le paramètre de code plus AppID et AppSecret, etc., pour échanger contre access_token via l'API

3. Effectuez des appels d'interface via access_token pour obtenir les ressources de données de base de l'utilisateur ou aider le l'utilisateur implémente les opérations de base.

2. Prérequis :

Application du site Web officiel de développement WeChat :

appid : ‘’, // fourni par le backend
redirect_uri : ‘’, // fourni par le backend
AppSecret // fourni par le backend

3. Implémentation de connexion spécifique

Méthode d'implémentation 1 :

Utilisez le plug-in vue :

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

Utilisation :

<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;, // 后端提供

Résultat : De cette façon, le code QR WeChat sera affiché sur la page Web que vous avez écrite.

Après le scan, la page L'url donnera une adresse avec un code pour obtenir le code

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()
            }

Donnez le code au backend, et le backend vous renverra les informations de la personne

Méthode 2 :

Intégrez-le dans votre propre page Web

1. Ajoutez d'abord un bouton de connexion WeChat sur la page vue :

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

2. Configurez les paramètres liés à la connexion et accédez à la page d'autorisation du code QR de connexion 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. Scannez le code QR avec votre téléphone portable pour confirmer l'autorisation

4 .Rappel

Comme il y a un garde de routage sur Vue, la valeur du code renvoyée par le rappel correspondant est traitée dans le garde de routage

// 为微信授权登录重定向地址服务
      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. l'adresse de surveillance existe un code

Si la surveillance de la page de connexion a obtenu la valeur du code renvoyé par l'autorisation WeChat, si elle existe, appelez l'interface fournie par le backend pour renvoyer le code au backend

6 Ensuite, appelez l'interface de connexion pour vous connecter en fonction. sur les informations d'identification renvoyées par le backend

Méthode 3 : Combinez le backend pour obtenir le code QR

1 Ajoutez un div, utilisé pour afficher le code QR de connexion WeChat

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

2. 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 : l'identifiant unique de l'application
scope : l'autorisation de l'application agit sur
redirect_uri : l'adresse de rappel, qui est la page vers laquelle accéder après une connexion WeChat réussie
3. Affichez le code QR

Après vous être connecté en scannant le code QR et en cliquant sur le bouton de confirmation de connexion, le navigateur passera automatiquement à :

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

Ce code est un jeton temporaire envoyé à l'utilisateur par WeChat. Nous pouvons demander à nouveau l'interface de connexion tierce WeChat selon le code pour obtenir access_token (jeton officiel)

3 Obtenir access_token

3.1, introduction à l'API

Obtenir access_token via le code pour effectuer d'autres appels d'interface

1. description (via l'interface suivante Get access_token)

Méthode de requête HTTP : GET

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

Renvoyez les paramètres suivants :

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

3.2 Le front-end de vue suivant appelle le code back-end java

1 Appelez le service de nœud via axios et créez un nouveau fichier : @/api/weixin.js (c'est parce que le l'interface est gérée de manière uniforme et stockée séparément sous le fichier API)

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

2. Ajoutez l'outil utils/param.js (utilisé pour obtenir le code du paramètre de la barre d'adresse du navigateur)

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. Créez 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. Obtenez l'avatar et le pseudo de l'utilisateur dans WeChat après vous être connecté à WeChat

API

1 Description de l'interface

Méthode de requête HTTP : GET

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

Paramètres de retour :

{
“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" }

Après avoir obtenu access_token et openid, demandez à nouveau l'interface, obtenez le pseudo et l'avatar, et enregistrez-les dans les cookies

<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>

À ce stade, getUser obtient le nom d'utilisateur et l'avatar du utilisateur actuellement connecté.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!