Implémentation du cookie de simulation d'applet WeChat

Cet article présente principalement la mise en œuvre du cookie de simulation d'applet WeChat. Le contenu est plutôt bon. Maintenant, je le partage avec vous et le donne comme référence.

Contexte de développement

Le système existant dispose déjà d'un ensemble complet d'interfaces, et le statut et la vérification de l'utilisateur sont tous basés sur les cookies .

Certaines entreprises nécessitent une version mini-programme Comme nous le savons tous, les mini-programmes WeChat ne prennent pas en charge les cookies. Pour lancer une entreprise en ligne, le meilleur moyen est de le faire en s’appuyant sur l’ensemble d’interfaces existant. Cela ne changera pas grand-chose et c’est aussi le plus rapide.

Simuler un cookie

Voir la demande via l'outil de développement du navigateur, barre réseau, le cookie dans le navigateur sera transporté chacun Dans les en-têtes de requête de http, Cookie est utilisé comme nom de clé.

Ensuite, dans la méthode de requête officielle de WeChat wx.request, nous définissons l'en-tête et ajoutons un cookie, qui devrait pouvoir être simulé.

La question revient, comment récupérer le cookie renvoyé par le serveur.

Affichez l'en-tête de retour http via l'interface de connexion (lors de la connexion, le serveur implantera un cookie en tant que session).

wx.request({
  url: '/api/login',
  success: (data) => {
    if(data.statusCode === 200) {
      console.log(data);
      // data 中应该会有 Set-Cookie 或 set-cookie 的字样，嗯，那就是服务器种下的 cookie
    }
  }
})

Récupérez le cookie et stockez-le localement, et insérez-le directement la prochaine fois que vous demanderez des données, parfait.

Formater les cookies

Je pensais au départ qu'il suffisait d'entrer et de sortir des cookies pour être parfaitement simulés, mais en fonctionnement réel J'ai constaté que le cookie envoyé au serveur ne peut pas être reconnu.

Le cookie renvoyé par le serveur comportera de nombreux champs de stockage, tels que path=/;

// 服务器放回的 cookie
let cookie = 'userKey=1234567890; Path=/; Expires=Thu, 21 Jun 2018 13:15:08 GMT; HttpOnly,userId=111; Path=/; Expires=Thu, 21 Jun 2018 13:15:08 GMT,nickName=; Path=/; Expires=Thu, 21 Jun 2018 13:15:08 GMT,userName=111111; Path=/; Expires=Thu, 21 Jun 2018 13:15:08 GMT,imgUrl=; Path=/; Expires=Thu, 21 Jun 2018 13:15:08 GMT';

// 模拟的是需要的格式样式
let virtualCookie = 'userKey=1234567890; userName=111111; userId=111;';

Oh mon dieu~ Comment pour le filtrer.

Écrit une solution de filtrage simple et approximative.

// cookie 的本地存储位置
const COOKIE_KEY = '__cookie_key__';

/**
 * 格式化用户需要的 cookie
 */
const normalizeUserCookie = (cookies = '') => {
  let __cookies = [];
  (cookies.match(/([\w\-.]*)=([^\s=]+);/g) || []).forEach((str) => {
    if (str !== 'Path=/;' && str.indexOf('csrfToken=') !== 0) {
      __cookies.push(str);
    }
  });
  wx.setStorageSync(COOKIE_KEY, __cookies.join(' '));
};

csrfToken est utilisé ensuite avec Egg.js , Path=/; sera path=/;

normalizeUserCookie filtre principalement les données comme xx=xxx puis exclut les données dénuées de sens comme path=/; ;

Lors de la connexion à l'interface, enregistrez le cookie et apportez-le avec la prochaine requête. Ensuite, il devrait, oui, peut-être, pouvoir être simulé.

Fonctionne avec Egg.js

Le plug-in egg-security intégré à Egg prend en charge toutes les méthodes « non sécurisées » par défaut, tels que POST , PUT et DELETE effectuent tous une vérification CSRF.
Egg.js Bien que CSRF puisse être désactivé dans la configuration, que se passe-t-il s'il doit être utilisé ?

Tout d’abord, nous devons comprendre une chose, csrfToken comment cela s’est produit.

Après de nombreuses vérifications, on sait que lorsque la requête http est effectuée, la valeur csrfToken n'est pas transportée à l'emplacement convenu. Cette requête portera un nouveau csrfToken dans le cookie renvoyé lorsque cette requête aura transporté le. valeur csrfToken, valeur, elle ne sera pas générée en tant que csrfToken. Lorsque le csrfToken à l’emplacement convenu est cohérent avec le csrfToken dans le cookie, la vérification est réussie.

Suivez l'opération 格式化用户需要的 cookie ci-dessus, mettez d'abord de côté le csrfToken et gérez seul le statut de l'utilisateur.

Après chaque requête, essayez d'obtenir le csrfToken qui peut exister dans le cookie séparément. S'il y a une valeur, mettez-la en cache. S'il n'y a pas de valeur, ignorez et utilisez l'ancienne valeur.

Encapsule un Ajax

Cette applet est basée sur wepy, donc le wepy.request;

optimisé Version basée sur Egg.js.

Il peut être légèrement différent du développement réel, veuillez le modifier en conséquence.

import wepy from 'wepy';

export const HTTP_HOST = 'http://127.0.0.1:3000';

export const HTTP_HOST_API = `${HTTP_HOST}/api/wxmp`;

// cookie 的本地存储位置
const COOKIE_KEY = '__cookie_key__';
// csrfToken 的本地存储位置
const CSRF_TOKEN_KEY = '__csrf_token__';

/**
 * 清除用户Cookie
 */
export const cleanUserCookie = () => {
  wx.setStorageSync(COOKIE_KEY, '');
}

/**
 * 格式化用户需要的 cookie
 * @param {String} cookies
 */
export const normalizeUserCookie = (cookies = '') => {
  let __cookies = [];
  (cookies.match(/([\w\-.]*)=([^\s=]+);/g) || []).forEach((str) => {
    if (str !== 'path=/;' && str.indexOf('csrfToken=') !== 0) {
      __cookies.push(str);
    }
  });
  wx.setStorageSync(COOKIE_KEY, __cookies);
};

/**
 * 格式化 token
 */
const normalizeCsrfToken = () => {
  let __value = wx.getStorageSync(CSRF_TOKEN_KEY) || '';
  let __inputs = __value.match(/csrfToken=[\S]*/) || [];
  let __key = __inputs[0]; // csrfToken=1212132323;
  if (!!!__key) {
    return '';
  }
  // 脱水
  return __key.replace(/;$/, '').replace(/^csrfToken=/, '');
};

/**
 * 保存 csrf 的cookie
 * 不一定每次请求都会更新 cookie
 * @param {String} cookie
 */
const seveCsrfTokenCookie = (cookie) => {
  if (cookie) {
    wx.setStorageSync(CSRF_TOKEN_KEY, cookie);
  }
};

/**
 * 请求数据
 * @param {Object} opt
 */
export const doAjax = (opt) => {
  return new Promise((resolve, reject) => {
    let Cookies = wx.getStorageSync(COOKIE_KEY) || [];
    let csrf = normalizeCsrfToken();
    let url = opt.url;
    // 整理 Cookie
    Cookies.push(`csrfToken=${csrf};`);

    // 设置请求头部
    opt.header = Object.assign(
      {
        'x-csrf-token': csrf,
        Cookie: Cookies.join(' ')
      },
      opt.header || {}
    );
    opt.success = (data) => {
      seveCsrfTokenCookie(data.header['set-cookie']);
      // 统一操作
      if (data.statusCode == 200) {
        if (url === '/login') {
          normalizeUserCookie(data.header['set-cookie']);
        }
        resolve(data.data);
      } else {
        reject('未知错误，请重试一次');
      }
    };
    opt.fail = (err) => {
      reject(err);
    };
    opt.url = `${HTTP_HOST_API}${opt.url}`;
    wepy.request(opt);
  });
};

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois !

Recommandations associées :

Mini programme WeChat Introduction à la fonction Page()

Utilisation de wx:for et wx:for-item dans l'applet WeChat

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!