Explication détaillée de l'utilisation du développement .NET WeChat sur PC pour implémenter les fonctions d'enregistrement et de connexion par scan code

Cet article présente principalement les informations pertinentes sur la mise en œuvre de la fonction d'enregistrement et de connexion par analyse de code WeChat côté PC développée par .NET WeChat. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

1. Avant-propos

Permettez-moi d'abord de préciser que cet article se concentre principalement sur l'idée de mise en œuvre. pour montrer l'idée. S'il existe des exigences strictes en matière d'efficacité du code, ne copiez pas les éléments.

Je crois que quiconque a fait du développement WeChat a fait beaucoup d'autorisations, mais d'une manière générale, nous faisons plus d'autorisations pour les sites Web mobiles, pour être précis, nous le faisons sous une autorisation WeChat. Un problème que j'ai rencontré aujourd'hui est que le projet prend en charge WeChat et PC et que les inscriptions sont ouvertes. Il est nécessaire qu'après vous être inscrit côté PC ou côté WeChat, vous puissiez vous connecter de l'autre côté. En d'autres termes, qu'il s'agisse d'un PC ou de WeChat, « vous êtes vous » (pertinent d'une certaine manière).

2. À la recherche de solutions

En y pensant de manière traditionnelle, WeChat peut s'inscrire complètement par autorisation , mais côté PC, la méthode traditionnelle ne consiste qu'à renseigner son numéro de téléphone portable, ou son email, etc. Si vous vous inscrivez de cette manière, les problèmes suivants surviendront

1. J'autorise d'abord l'inscription sur WeChat, puis si je veux me connecter au PC, je dois quand même m'inscrire.

La solution à ce problème peut être la suivante : une fois que WeChat a autorisé l'enregistrement, il "oblige" les utilisateurs à remplir des informations de base, telles que le numéro de téléphone portable et l'adresse e-mail. De cette façon, nous pouvons générer le compte et le mot de passe permettant à l'utilisateur de se connecter au PC d'une manière ou d'une autre, par exemple, utiliser le surnom de l'utilisateur comme numéro de compte, le numéro de téléphone portable comme mot de passe, etc.

Inconvénients : l'expérience utilisateur n'est pas bonne et il existe des risques de sécurité. Après tout, votre pseudo WeChat, votre adresse e-mail ou votre numéro de téléphone portable sont tous exposés.

2. Si je m'inscris d'abord sur le PC, comment puis-je associer la version mobile lors de l'autorisation de WeChat

Bien sûr, il y a toujours une solution à chaque problème ? . L'idée est la suivante :

Option 1 : Une fois l'utilisateur inscrit sur le PC, il est « forcé » que l'utilisateur doive renseigner le pseudo WeChat. Utilisez-le comme condition d'association lors de l'autorisation de WeChat. Mais malheureusement, le pseudo WeChat peut être modifié. Comment peut-il être utilisé à des fins d'association s'il n'est pas le seul ? Le plan est mort d’un seul coup.

Option 2 : Après autorisation côté WeChat et inscription côté PC, les utilisateurs sont "obligés" de renseigner leur numéro de téléphone portable en guise de lien. Cela crée un problème. Nous devons nous assurer que le téléphone mobile de l’utilisateur est authentique. Ceci peut être réalisé grâce au code de vérification du téléphone mobile (il en va de même pour le courrier électronique). Mais supposons la situation suivante. Si j'ai deux numéros de téléphone portable, remplissez-en un lors de votre inscription sur PC et remplissez l'autre lors de votre inscription sur WeChat. Est-ce lié ? La réponse est malheureusement. De plus, après m'être inscrit côté PC, je ne l'ai pas rempli (raison pour laquelle j'ai forcé les guillemets doubles), puis j'ai utilisé le côté WeChat pour autoriser et me connecter. Eh bien, à ce stade, deux éléments de données attendront que vous trouviez un moyen de les corréler, ce qui correspond à un développeur typique creusant son propre trou. Cette approche fonctionne dans une certaine mesure, mais sa rigueur est inacceptable pour les développeurs.

3. Solution pour revenir à l'origine

Analyse : Puisque les solutions ci-dessus ont des problèmes, commençons par Elles sont tous mis de côté. Pour mettre de l’ordre dans nos réflexions, revenons à la racine du problème. La question associée nécessite un identifiant unique. L'identifiant unique est tout comme notre numéro de carte d'identité. Lorsque nous demandons une carte de crédit, une carte d'identité est requise. Lors de l'achat d'une carte numérique sous le système du nom réel, une carte d'identité est requise. En supposant que nous soyons l'administrateur système, je peux certainement connaître votre numéro de téléphone portable et votre numéro de carte bancaire grâce à votre numéro de carte d'identité.

Après avoir eu l'idée ci-dessus, ce que nous devons faire est de trouver un identifiant unique en tant qu'association. Il y a un rôle important dans WeChat : openid. Il a la même fonction que le numéro de carte d’identité mentionné ci-dessus. Le compte WeChat identifie de manière unique un certain compte public.

Quiconque a développé WeChat ne devrait avoir aucun problème à obtenir l'autorisation WeChat d'openid. La question est de savoir comment implémenter le côté PC pour obtenir l'openid lors de l'inscription ou de la connexion. Les idées de mise en œuvre de l'auteur sont les suivantes. Inscrivez-vous sur PC, ou lors de la connexion, un code QR s'affichera pour guider les utilisateurs à scanner le code à l'aide de WeChat pour accéder à la page d'autorisation. Il y a un détail très critique dans cette étape. Veuillez apporter un code d'autorisation unique (authCode) avec le code QR. Imaginez que si l'utilisateur nous l'autorise, nous pouvons écrire l'openid et l'authCode dans la base de données. Ensuite, nous pouvons obtenir l'openid associé à authCode via une API côté PC. Si nous faisons cela, nous pouvons savoir qui scanne actuellement le code QR pour s'inscrire ou se connecter sur le PC (inscrivez-vous si vous n'êtes pas inscrit, connectez-vous directement si vous êtes inscrit). Est-ce que cela vous a soudainement semblé si facile ? Si vous pensez que le texte est plus abstrait, veuillez regarder l'icône ci-dessous

Processus de connexion au code de numérisation PC WeChat

Core Code

Après avoir clarifié les idées et les processus, passons directement au code. Les idées de développement sont communes, alors veuillez montrer vos talents dans le langage de développement.

Remarque : le code suivant utilise le langage C# comme exemple, en utilisant MVC + EF (Remarque : uuid est équivalent à notre authCode mentionné ci-dessus)

Scannez le code QR pour vous connecter Le code backend de la page

public ActionResult Login()
{
//如果已登录,直接跳转到首页
if (User.Identity.IsAuthenticated)
return RedirectToAction("Index", "Home");
string url = Request.Url.Host;
string uuid = Guid.NewGuid().ToString();
ViewBag.url = "http://" + url + "/home/loginfor?uuid=" + uuid;//构造授权链接
ViewBag.uuid = uuid;//保存 uuid
return View();
}

utilise le plug-in jquery.qrcode.js pour générer le code QR. Amis qui souhaitent en savoir plus, n'hésitez pas à y aller. sur Github. Une chose à noter ici est que le plug-in peut spécifier la méthode de génération de code QR, le canevas ou le tableau. Amis qui doivent prendre en charge IE, veuillez spécifier d'utiliser un tableau pour générer

Le code est tel. suit :

jQuery('#qrcode').qrcode({
render : "table",
text : "http://baidu.com"
});

Retour au sujet, le code principal de la page de connexion est le suivant

<!--生成二维码的容器 p-->
<p id="qrcode-container">
</p>
<script src="~/Plugins/Jquery/jquery-1.9.1.min.js"></script>
<script src="~/Plugins/jquery-qrcode/jquery.qrcode.min.js"></script>
<script>
jQuery(function () {
//生成二维码
jQuery(&#39;#qrcode-container&#39;).qrcode("@ViewBag.url");
//轮询判断用户是否授权
var interval = setInterval(function () {
$.post("@Url.Action("UserLogin","Home")", { "uuid": "@ViewBag.uuid" }, function (data, status) {
if ("success" == status) {
//用户成功授权=>跳转
if ("success" == data) {
window.location.href = &#39;@Url.Action("Index", "Home")&#39;;
clearInterval(interval);
}
}
});
}, 200);
})
</script>

Sondage pour déterminer si l'utilisateur autorise le code API

public string UserLogin(string uuid)
{
//验证参数是否合法
if (string.IsNullOrEmpty(uuid))
return "param_error";
WX_UserRecord user = db.WX_UserRecord.Where(u => u.uuId == uuid).FirstOrDefault();
if (user == null)
return "not_authcode";
//写入cookie
FormsAuthentication.SetAuthCookie(user.OpenId, false);
//清空uuid
user.uuId = null;
db.SaveChanges();
return "success";
}

Action d'autorisation WeChat

public ActionResult Loginfor(string uuid)
{
#region 获取基本信息 - snsapi_userinfo
/*
*　创建微信通用类 - 这里代码比较复杂不在这里贴出
*　迟点我会将整个 Demo 稍微整理放上 Github
*/
WechatUserContext wxcontext = new WechatUserContext(System.Web.HttpContext.Current, uuid);
//使用微信通用类获取用户基本信息
wxcontext.GetUserInfo();
if (!string.IsNullOrEmpty(wxcontext.openid))
{
uuid = Request["state"];
//判断数据库是否存在
WX_UserRecord user = db.WX_UserRecord.Where(u => u.OpenId == wxcontext.openid).FirstOrDefault();
if (null == user)
{
user = new WX_UserRecord();
user.OpenId = wxcontext.openid;
user.City = wxcontext.city;
user.Country = wxcontext.country;
user.CreateTime = DateTime.Now;
user.HeadImgUrl = wxcontext.headimgurl;
user.Nickname = wxcontext.nickname;
user.Province = wxcontext.province;
user.Sex = wxcontext.sex;
user.Unionid = wxcontext.unionid; 
user.uuId = uuid;
db.WX_UserRecord.Add(user);
}
user.uuId = uuid;
db.SaveChanges();
}
#endregion
return View();
}

Enfin, attachez la conception de la table de base de données

Il n'y a rien de spécial, juste ajoutez un uuId personnalisé supplémentaire à chaque paramètre renvoyé par WeChat

Pour plus de détails sur la description du paramètre WeChat, veuillez consulter la documentation du développeur WeChat

Résultats de fonctionnement

1 .Scannez le code QR pour vous connecter à la page

2. autorisation de l'utilisateur

3. Confirmation de l'utilisateur Autorisation

4. >

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!