Scannez le code QR sur PC pour vous inscrire et connecter
1. Préface
Permettez-moi d'abord de dire que cet article se concentre sur les idées d'implémentation, et la conception du code et de la base de données est principalement pour montrer les idées. Si vous avez des exigences strictes sur l'efficacité du code, ne les copiez pas.
Je crois que les personnes qui ont fait le développement de WeChat ont fait de nombreuses autorisations, mais d'une manière générale, nous autorisons davantage les sites Web mobiles, ou plutôt, c'est une autorisation dans le terminal WeChat. Un problème que j'ai rencontré aujourd'hui est que le projet prend en charge les terminaux WeChat et PC et ouvre l'enregistrement. Il est nécessaire de se connecter à l'autre extrémité, que vous vous inscrivez sur le PC ou du côté WeChat. En d'autres termes, que ce soit PC ou WeChat, vous devez faire "vous êtes vous" (lié d'une manière ou d'une autre).
2. Trouvez une solution
En pensant de la manière traditionnelle, le côté WeChat peut être enregistré par l'autorisation, mais du côté PC, la manière traditionnelle n'est rien de plus que de remplir le numéro de téléphone mobile ou le courrier électronique, etc. Si vous vous inscrivez de cette manière, le problème suivant se pose
1. J'autorise d'abord l'enregistrement du côté WeChat, donc si je veux me connecter au côté PC, je dois encore m'inscrire.
Cette solution peut être: après l'enregistrement de l'autorisation de WeChat, il est "forcé" d'obliger les utilisateurs à remplir des informations de base, telles que le numéro de téléphone mobile et le courrier électronique. De cette façon, nous pouvons générer le mot de passe du compte pour que l'utilisateur puisse se connecter au PC d'une manière ou d'une autre. Par exemple, utilisez le surnom de l'utilisateur comme compte, le numéro de téléphone mobile comme mot de passe, etc.
Inconvénients: l'expérience utilisateur n'est pas bonne et il existe également des risques de sécurité. Après tout, votre surnom de WeChat, votre numéro d'e-mail ou de téléphone portable est exposé.
2. Si je m'inscrit d'abord sur le PC, comment puis-je me connecter au terminal mobile lorsque j'autorise sur WeChat? Bien sûr, il y aura toujours des solutions à tout problème. L'idée est la suivante:
Solution 1: Une fois l'utilisateur enregistré sur le PC, l'utilisateur "Force" doit remplir le surnom de WeChat. Ceci est utilisé comme condition pertinente pour l'autorisation de WeChat. Mais malheureusement, le surnom de WeChat peut être modifié, mais ce n'est pas le seul, comment peut-il être utilisé pour faire des associations? Le plan a été tué dans une situation désespérée.
Plan 2: Après l'autorisation du côté WeChat et l'enregistrement du côté PC, les utilisateurs doivent remplir leurs numéros de téléphone portable comme lien. Cela conduit à un problème, et il est nécessaire d'assurer l'authenticité du téléphone mobile de l'utilisateur, et il n'y a pas de problème. Cela peut être réalisé via le code de vérification du téléphone mobile (il en va de même pour les e-mails). Mais vous pourriez aussi bien supposer que la situation suivante est présente. Si j'ai deux numéros de téléphone portable, remplissez-en un lors de votre inscription sur le PC et un autre lors de votre inscription sur WeChat. Est-ce lié? La réponse est dommage. De plus, après m'être inscrit sur le PC, je ne l'ai tout simplement pas rempli (la raison pour laquelle j'ai forcé les doubles citations), puis j'ai utilisé l'autorisation WeChat pour vous connecter. Eh bien, il y aura deux données en attendant pour que vous trouviez un moyen d'associer, et un développeur typique creusera un trou. Cette méthode fonctionne dans une certaine mesure, mais il est inacceptable pour les développeurs d'être rigoureux.
3. Solution pour revenir à l'origine
Analyse: Comme il y a tous les problèmes avec les solutions ci-dessus, mettons-les en premier de côté. Remettez quelques pensées à la racine du problème. Le problème associé nécessite un identifiant unique. L'identification unique est comme notre numéro d'identification. Lorsque nous demandons une carte de crédit, la carte d'identité est nécessaire. Si vous achetez une carte numérique sous le système de nom réel, la carte d'identité est nécessaire. En supposant que nous sommes les administrateurs système, je peux découvrir votre numéro de téléphone mobile et votre numéro de carte bancaire via votre numéro d'identification.
Avec l'idée ci-dessus, tout ce que nous devons faire est de trouver un identifiant unique à association. Il y a un rôle important sur WeChat. Il a cette fonction commune avec le numéro d'identification que nous avons mentionné ci-dessus, l'identification unique d'un certain compte officiel par le compte WeChat.
L'autorisation de WeChat est disponible pour OpenID. Quiconque a fait du développement WeChat ne devrait avoir aucun problème. La question est de savoir comment réaliser le terminal PC pour être ouvert en inscription ou en se connectant. L'idée de mise en œuvre de l'auteur est la suivante. Inscrivez-vous sur le PC ou affichez un code QR lors de la connexion, guidez l'utilisateur pour scanner le code à l'aide de WeChat, afin qu'il passe à la page d'autorisation. Cette étape a le détail le plus critique. Veuillez apporter un code d'autorisation unique (AuthCode) au code QR. Imaginez simplement si l'utilisateur nous autorise à écrire OpenID et AuthCode dans la base de données. Ensuite, nous pouvons obtenir l'OpenID associé à AuthCode via une API côté PC. Si nous le faisons, nous pouvons savoir qui numérise actuellement le code pour vous inscrire ou se connecter sur le PC (s'inscrire si ce n'est pas enregistré, et celui qui s'est inscrit se connectera directement). Vous sentez-vous soudainement si facile? Si vous pensez que le texte est plus abstrait, veuillez consulter l'image suivante
Processus de connexion du code de numérisation PC WeChat
Code de base
Après avoir clarifié les idées et les processus, nous téléchargerons directement le code. Les idées de développement sont courantes, veuillez donc montrer vos pouvoirs magiques lors du développement de la langue.
Remarque: Le code suivant prend le langage C # comme exemple et utilise MVC + EF (Remarque: UUID est équivalent à notre authCode ci-dessus)
Scannez le code pour vous connecter à la page d'arrière-plan
public ActionResult Login () {// Si vous êtes connecté, passez directement à la page d'accueil si (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; // Construire le lien d'autorisation Viewbag.uUid = uuid; // Enregistrer uuid return View ();}
Le code QR est généré à l'aide du plug-in jQuery.qrcode.js. Si vous voulez en savoir plus, veuillez déménager à GitHub. Une chose à noter ici est que ce plugin peut spécifier la méthode de génération du code QR, de la toile ou de la table. Veuillez spécifier l'utilisation de la génération de table pour des amis qui soutiennent IE.
Le code est le suivant:
jQuery ('# qrcode'). qrcode ({render: "table", texte: "http://baidu.com"});Revenez au sujet, le code principal de la page de connexion est le suivant
<!--Container for generating QR code div--><div id="qrcode-container"></div><script src="~/Plugins/Jquery/jquery-1.9.1.min.js"></script><script src="~/Plugins/jquery-qrcode/jquery.qrcode.min.js"></script><script> jQuery(function () {// Générer le code QR jQuery ('# qrcode-contrainer'). Qrcode ("@ Viewbag.url"); (Data, Status) {if (Success "== Status) {// User Success Authorization =>
Sondage pour déterminer si l'utilisateur autorise le code API
public String UserLogin (String UUID) {// Vérifiez si le paramètre est légal if (string.isnullorempty (uuid)) renvoie "param_error"; WX_UserRecord User = db.wx_userRecord.where (u => u.uuid == uuid) .FirstorDefault (); if (user == null) renvoie "not_authcode"; // Écrivez des cookies formsauthentication.setAuthCookie (user.openID, false); // clear uUid user.uuid = null; DB.SAVECHANGES (); retourner "succès";}Action d'autorisation WeChat
public ActionResult Loginfor (String UUID) {#Region Get Basic Informations - SNSAPI_USERINFO / * * CRÉER WECHAT GÉNÉRAL CLASSE - Le code ici est plus compliqué et non publié ici * Je trierai toute la démo sur GitHub * / WECHATERCONTexText WXContext = new WECHATUSERCONText; // Utilisez la classe générale WeChat pour obtenir des informations de base utilisateur wxContext.getUserInfo (); if (! string.isnullorempty (wxContext.OpenID)) {uUID = request ["State"]; // juger si la base de données existe WX_USERRECORD USER = DB.WX_USERERRECORD.WOARD (U => U.OpenID == wxContext.OpenID) .FirstOrdeFault (); if (null == user) {user = new WX_UsererRecord (); 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 (utilisateur); } user.uuid = uuid; DB.SAVECHANGES (); } #EndRegion Return View ();}
Enfin, la conception de la table de base de données est jointe
Il n'y a rien de spécial, nous ajoutons un UUID personnalisé de plus pour chaque paramètre renvoyé par WeChat.
Pour plus de détails sur la description des paramètres WeChat, veuillez vous référer à la documentation du développeur WeChat
Effet de course
1. Scannez le code QR pour vous connecter à la page
2. Demande l'autorisation de l'utilisateur
3. L'utilisateur confirme l'autorisation
4. La connexion PC est terminée
Il y a inévitablement des lacunes dans l'article, veuillez me pardonner. Si vous trouvez des erreurs, veuillez laisser un message pour les signaler. Je suis très reconnaissant! Scannez le code QR sur WeChat pour vous inscrire et connectez-vous à la démonstration. Après que l'auteur soit réglé, mettez-le sur GitHub. J'espère aider plus d'amis. Veuillez faire attention à la mise à jour de cet article.
Ce qui précède sont des exemples de numérisation du code QR sur WeChat sur PC. Les amis dans le besoin peuvent y faire référence. Merci pour votre soutien à ce site!