Présentation
Afin de permettre à l'application applet d'utiliser l'état de connexion WeChat pour la connexion autorisée, l'applet WeChat fournit une interface ouverte pour l'autorisation de connexion. À première vue, je pense que le document est très raisonnable, mais c'est vraiment déroutant à réaliser, et je ne sais pas comment gérer et maintenir l'état de connexion. Cet article vous apprendra comment accéder et maintenir le statut de connexion WeChat dans votre entreprise.
Processus d'accès
L'organigramme sur le document officiel ici est suffisamment clair, et nous allons développer et ajouter directement à la figure.
Tout d'abord, lorsque vous verrez cette image, vous remarquerez certainement que la communication entre l'applet n'est pas seulement l'extrémité avant de l'applet et notre propre serveur, mais aussi le serveur tiers WeChat. Quoi? Comprenons le processus d'authentification de connexion.
1. Appelez wx.login pour générer du code
Le rôle de l'API wx.login () est de générer des informations d'identification de connexion temporaires pour l'utilisateur actuel. Ces informations d'identification de connexion temporaires ne sont valides que pendant cinq minutes. Après avoir obtenu ces informations de connexion, nous pouvons passer à l'étape suivante: obtenir openidetsession_key
wx.login({
success: function(loginRes) {
if (loginRes.code) {
// example: 081LXytJ1Xq1Y40sg3uJ1FWntJ1LXyth
}
}
});
2. Obtenez openid et session_key
Présentons d'abord openid. Les chaussures pour enfants qui ont utilisé le numéro public doivent être familières avec ce logo. Dans la plate-forme publique, il est utilisé pour identifier le logo unique de chaque utilisateur dans trois applications différentes: numéro d'abonnement, numéro de service et applet , C'est-à-dire que l'openid de chaque utilisateur dans chaque application est incohérent, donc dans le petit programme, nous pouvons utiliser openid pour identifier l'unicité de l'utilisateur.
Alors, à quoi sert session_key? Avec l'ID utilisateur, nous devons laisser l'utilisateur se connecter, puis session_keyla validité de l'opération de session de l'utilisateur actuel est garantie, et la session_key nous est distribuée par le serveur WeChat. En d'autres termes, nous pouvons utiliser ce logo pour maintenir indirectement le statut de connexion de nos utilisateurs d'applet, alors comment obtenir cette session_key? Nous devons demander une interface tierce fournie par WeChat sur notre serveur https://api.weixin.qq.com/sns/jscode2session. Cette interface doit apporter quatre champs de paramètres:
| Paramètre | Valeur |
|---|---|
| appid | Applet appid |
| secret | Petit programme secret |
| js_code | Appelez le code distribué par wx.login plus tôt |
| grant_type | 'Code d'autorisation' |
À partir de ces paramètres, nous pouvons voir que pour demander cette interface, vous devez d'abord appeler wx.login () pour obtenir le code de la session actuelle de l'utilisateur. Alors pourquoi demandons-nous cette interface côté serveur? En fait, pour des raisons de sécurité, si nous appelons cette interface dans le frontal via une demande, il est inévitable que nous devions exposer l'appid de notre applet et le secret de l'applet à l'extérieur, ainsi que la session_key émise par le serveur WeChat. Pour les "personnes chaleureuses", cela représente un grand risque pour la sécurité de notre entreprise. En plus de la nécessité d'obtenir session_key sur le serveur, nous devons également faire attention à deux points:
- Le code distribué par session_key et WeChat est un à un, et le même code ne peut être échangé qu'une fois pour session_key. Chaque fois que wx.login () est appelé, un nouveau code et la clé de session correspondante seront émis. Afin de garantir l'expérience utilisateur et la validité de l'état de connexion, le développeur doit savoir que l'utilisateur doit se reconnecter avant d'appeler wx.login ()
- session_key n'est pas valide, même si vous n'appelez pas wx.login, session_key expirera. Le délai d'expiration est positivement lié à la fréquence des utilisateurs d'applets, mais la durée spécifique n'est pas disponible pour les développeurs et les utilisateurs.
function getSessionKey (code, appid, appSecret) {
var opt = {
method: 'GET',
url: 'https://api.weixin.qq.com/sns/jscode2session',
params: {
appid: appid,
secret: appSecret,
js_code: code,
grant_type: 'authorization_code'
}
};
return http(opt).then(function (response) {
var data = response.data;
if (!data.openid || !data.session_key || data.errcode) {
return {
result: -2,
errmsg: data.errmsg || '返回数据字段不完整'
}
} else {
return data
}
});
}3. Générer la 3e_session
Comme mentionné ci-dessus session_key, la maintenance "indirecte" de l'état de connexion est effectuée au moyen indirect, c'est-à-dire que nous devons maintenir nous-mêmes les informations sur l'état de connexion de l'utilisateur . Ici, les facteurs de sécurité sont également pris en compte. Si la clé_session distribuée par le serveur WeChat est utilisée directement en tant qu'entreprise L'état de connexion sera utilisé par des "personnes sincères" pour obtenir les informations sensibles de l'utilisateur. Par exemple, l'interface wx.getUserInfo () nécessite une session_key pour coopérer au décryptage des informations sensibles de l'utilisateur WeChat.
Donc, si nous générons notre propre logo de connexion, nous pouvons utiliser plusieurs algorithmes de hachage irréversibles courants, tels que md5, sha1, etc., pour renvoyer le logo de connexion généré (ici, nous l'appelons collectivement `` skey '') à l'avant. Et conservez ce logo de connexion à l'avant (généralement stocké dans le stockage). Côté serveur, nous stockons le skey généré dans la table de données correspondant à l'utilisateur, et le frontal accède aux informations de l'utilisateur en passant le skey.
Vous pouvez voir ici que nous avons utilisé l'algorithme sha1 pour générer un skey:
const crypto = require('crypto');
return getSessionKey(code, appid, secret)
.then(resData => {
// 选择加密算法生成自己的登录态标识
const { session_key } = resData;
const skey = encryptSha1(session_key);
});
function encryptSha1(data) {
return crypto.createHash('sha1').update(data, 'utf8').digest('hex')
}4. checkSession
Plus tôt, nous avons stocké le skey dans le stockage du frontal. Chaque fois que nous faisons une demande de données utilisateur, nous apportons le skey, et si la session_key expire à ce moment? Nous devons donc appeler l'API wx.checkSession () pour vérifier si la session_key actuelle a expiré. Cette API n'a pas besoin de transmettre de paramètres d'information sur la session_key. Au lieu de cela, l'applet WeChat ajuste son propre service pour interroger l'utilisateur Si la session_key générée une fois expire. Si la session_key actuelle expire, laissez l'utilisateur se reconnecter, mettez à jour la session_key et stockez le dernier skey dans la table de données utilisateur.
Pour l'étape checkSession, nous la mettons généralement dans la logique où l'état de connexion est vérifié au démarrage de l'applet. Voici un organigramme pour vérifier l'état de connexion:
Le code suivant est un processus simple pour vérifier l'état de connexion:
let loginFlag = wx.getStorageSync('skey');
if (loginFlag) {
// 检查 session_key 是否过期
wx.checkSession({
// session_key 有效(未过期)
success: function() {
// 业务逻辑处理
},
// session_key 过期
fail: function() {
// session_key过期，重新登录
doLogin();
}
});
) else {
// 无skey，作为首次登录
doLogin();
}5. Soutenir le stockage des emoji
Si le nom WeChat de l'utilisateur doit être stocké dans la table de données, confirmez le format de codage de la table de données et de la colonne de données. Parce que le nom WeChat de l'utilisateur peut contenir des icônes emoji, et le codage UTF8 couramment utilisé ne prend en charge que 1 à 3 octets, et l'icône emoji se trouve être un codage de 4 octets pour le stockage.
Il y a deux façons (prenez mysql comme exemple):
1. Définissez le jeu de caractères de stockage
Après la version mysql5.5.3, le jeu de caractères de la base de données, du tableau de données et de la colonne de données est pris en charge utf8mb4, de sorte que le /etc/my.cnfcodage par défaut du jeu de caractères et le format de codage du serveur peuvent être définis
// my.cnf
[client]
default-character-set=utf8mb4
[mysql]
default-character-set=utf8mb4
[mysqld]
character-set-client-handshake = FALSE
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ciAprès avoir défini le codage par défaut du jeu de caractères et le codage du jeu de caractères côté serveur, si vous souhaitez effectuer une conversion de codage sur les tables et les champs existants, vous devez effectuer les étapes suivantes:
- Définissez le jeu de caractères de la base de données sur
utf8mb4
ALTER DATABASE 数据库名称 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;
- Définissez le jeu de caractères de la table de données sur
utf8mb4
ALTER TABLE 数据表名称 CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
- Définissez le jeu de caractères du champ de la colonne de données sur
utf8mb4
ALTER TABLE 数据表名称 CHANGE 字段列名称 VARCHAR(n) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
Il COLLATEs'agit du jeu de caractères triés, qui est utilisé pour trier et comparer les caractères stockés. utf8mb4Il existe deux classements courants: utf8mb4_unicode_ciet utf8mb4_general_ci, généralement recommandé à utiliser utf8mb4_unicode_ci, car il est basé sur la norme Unicode Collation Algorithm(UCA)à trier, peut être dans divers Les langues sont triées avec précision. La différence spécifique entre ces deux méthodes de tri peut être mentionnée: Quelle est la différence entre utf8_general_ci et utf8_unicode_ci
2. Encodez des caractères emoji dans la bibliothèque à l'aide de séquentiel, puis décodez lorsqu'ils sont utilisés
Voici la configuration de sequelize, veuillez vous référer à la documentation de Sequelize
{
dialect: 'mysql', // 数据库类型
dialectOptions: {
charset: 'utf8mb4',
collate: "utf8mb4_unicode_ci"
},
}Dernier
Plus tôt, j'ai parlé du processus détaillé de la façon dont l'applet WeChat accède à l'identification du statut de connexion WeChat, donc comment obtenir des données utilisateur dans l'applet et décrypter les données sensibles de l'utilisateur, et garantir l'intégrité des données utilisateur, je vais vous donner l'article suivant Faites une introduction détaillée.
La solution d'ingénierie feflow de l'équipe Tencent IVWEB est open source: page d'accueil Github: feflowSi cela est utile pour votre équipe ou votre projet, veuillez donner un support Star ~