Escanee el código QR en la PC para registrarse e iniciar sesión
1. Prefacio
Permítanme decir primero que el enfoque de este artículo está en las ideas de implementación, y el diseño del código y la base de datos son principalmente para mostrar ideas. Si tiene requisitos estrictos sobre la eficiencia del código, no los copie.
Creo que las personas que han realizado el desarrollo de WeChat han hecho muchas autorizaciones, pero en términos generales, autorizamos más sitios web móviles, o más bien, es una autorización bajo la terminal WeChat. Un problema que encontré hoy es que el proyecto admite las terminales de WeChat y PC y abre el registro. Se requiere iniciar sesión en el otro extremo si se registra en la PC o en el lado de WeChat. En otras palabras, ya sea PC o WeChat, debe hacer "usted es usted" (relacionado de alguna manera).
2. Encuentra una solución
Pensando de la manera tradicional, el lado de WeChat se puede registrar a través de la autorización, pero en el lado de la PC, la forma tradicional no es más que completar el número de teléfono móvil o el correo electrónico, etc. Si se registra de esta manera, surgirá el siguiente problema
1. Primero autorizo el registro en el lado de WeChat, así que si quiero iniciar sesión en el lado de la PC, todavía tengo que registrarme.
Esta solución puede ser: después del registro de autorización de WeChat, está "obligado" a exigir a los usuarios que completen información básica, como el número de teléfono móvil y el correo electrónico. De esta manera, podemos generar la contraseña de la cuenta para que el usuario inicie sesión en la PC de alguna manera. Por ejemplo, use el apodo del usuario como cuenta, el número de teléfono móvil como contraseña, etc.
Desventajas: la experiencia del usuario no es buena, y también hay riesgos de seguridad. Después de todo, su apodo de WeChat, correo electrónico o número de teléfono móvil está expuesto.
2. Si primero me registro en la PC, ¿cómo me conecto al terminal móvil cuando autorizo en WeChat? Por supuesto, siempre habrá soluciones a cualquier problema. La idea es la siguiente:
Solución 1: Después de que el usuario se registre en la PC, el usuario de "Fuerza" debe completar el apodo de WeChat. Esto se utiliza como condición relevante para la autorización de WeChat. Pero desafortunadamente, el apodo de WeChat se puede cambiar, pero no es el único, ¿cómo se puede usar para hacer asociaciones? El plan fue asesinado en una situación desesperada.
Plan 2: Después de la autorización en el lado de WeChat y el registro en el lado de la PC, los usuarios deben completar sus números de teléfono móvil como enlace. Esto lleva a un problema, y es necesario garantizar la autenticidad del teléfono móvil del usuario, y no hay problema. Esto se puede lograr a través del código de verificación del teléfono móvil (lo mismo es cierto para el correo electrónico). Pero también podría asumir que la siguiente situación está presente. Si tengo dos números de teléfono móvil, complete uno al registrarme en la PC y otro al registrarme en WeChat. ¿Está relacionado? La respuesta es una pena. Además, después de registrarme en la PC, simplemente no lo completé (la razón por la que forzé las citas dobles), y luego utilicé la autorización de WeChat para iniciar sesión. Bueno, habrá dos datos esperando que encuentre una manera de asociar, y un desarrollador típico cavará un agujero. Este método funciona en cierta medida, pero es inaceptable para que los desarrolladores sean rigurosos.
3. Solución para volver al origen
Análisis: Dado que hay todos los problemas con las soluciones anteriores, dejemos de lado primero. Vuelva a colocar algunos pensamientos en la raíz del problema. El problema asociado requiere un identificador único. La identificación única es como nuestro número de identificación. Cuando solicitamos una tarjeta de crédito, la tarjeta de identificación es necesaria. Si compra una tarjeta numérica bajo el sistema de nombre real, la tarjeta de identificación es necesaria. Suponiendo que somos los administradores del sistema, puedo averiguar su número de teléfono móvil y su número de tarjeta bancaria a través de su número de identificación.
Con la idea anterior, todo lo que necesitamos hacer es encontrar un identificador único que se asocie. Hay un papel importante en WeChat. Tiene esta función común con el número de identificación que mencionamos anteriormente, la identificación única de una determinada cuenta oficial por la cuenta de WeChat.
La autorización de WeChat está disponible para OpenID. Cualquiera que haya hecho el desarrollo de WeChat no debería tener ningún problema. La pregunta es cómo lograr el terminal de PC para obtener OpenID al registrarse o iniciar sesión. La idea de implementación del autor es la siguiente. Regístrese en la PC o muestre un código QR al iniciar sesión, guíe al usuario a escanear el código con WeChat, para que salte a la página de autorización. Este paso tiene el detalle más crítico. Traiga un código de autorización único (AuthCode) al código QR. Imagínese si el usuario nos autoriza a escribir OpenID y AuthCode en la base de datos. Luego podemos obtener el OpenID asociado con AuthCode a través de una API en el lado de la PC. Si hacemos esto, podemos saber quién está escaneando actualmente el código para registrarse o iniciar sesión en la PC (registrarse si no está registrado, y quien haya registrado iniciará sesión directamente). ¿De repente te sientes tan fácil? Si cree que el texto es más abstracto, consulte la siguiente imagen
Proceso de inicio de sesión del código de escaneo de PC WeChat
Código central
Después de aclarar las ideas y procesos, cargaremos directamente el código. Las ideas de desarrollo son comunes, así que muestre sus poderes mágicos al desarrollar el lenguaje.
Nota: El siguiente código toma el lenguaje C# como ejemplo y usa MVC + EF (nota: UUID es equivalente a nuestro Authcode anterior)
Escanee el código para iniciar sesión en la página de fondo
Public ActionResult Login () {// Si ha iniciado sesión, salte directamente a la página de inicio if (user.identity.isauthenticated) return redirectToaction ("índice", "inicio"); cadena url = request.url.host; cadena uuid = guía.newguid (). toString (); Verbag.url = "http: //" + url + "/home/loginfor? Uuid =" + uuid; // Construye el enlace de autorización Viewbag.uuid = uuid; // Guardar uUid return View ();}
El código QR se genera utilizando el complemento jquery.qrcode.js. Si quieres saber más, muévete a GitHub. Una cosa a tener en cuenta aquí es que este complemento puede especificar el método de generación de código QR, lienzo o tabla. Especifique el uso de la generación de tabla para amigos que apoyan IE.
El código es el siguiente:
jQuery ('#qrcode'). qrcode ({render: "table", texto: "http://baidu.com"});Volver al tema, el código principal de la página de inicio de sesión es el siguiente
< () {// Generar el código QR jQuery ('#QRCode-Condeiner'). QrCode ("@ViewBag.url"); estado) {if ("éxito" == status) {// Autorización de éxito del usuario => Jump if ("Success" == Data)
Encuesta para determinar si el usuario autoriza el código API
Public String UserLogin (String UUID) {// Verifique si el parámetro es legal si (String.ISNULLOREMPTY (UUID)) return "param_error"; Wx_usErRecord user = db.wx_usErRecord.where (u => u.uuid == uuid) .FirstorDefault (); if (user == null) return "noT_authcode"; // Escribir cookie FormSauthentication.setAuthcookie (user.openid, falso); // borrar uuid user.uuid = null; db.savechanges (); devolver "éxito";}Acción de autorización de WeChat
Public ActionResult LogInfor (String UUID) {#region Obtenga información básica - SNSAPI_USERINFO / * * Crear clase general WeChat - El código aquí es más complicado y no publicado aquí * Solicaré todo el Demo en GitHub * / WeChatUsercontext WxContext = New WechatuserContext (System.httTpConteTpCrUntExt, OXTEXT; // use la clase General WeChat para obtener información básica del usuario wxContext.getUserInfo (); if (! String.ISNULLOREMPTY (wxContext.openID)) {uuid = request ["State"]; // juzga si la base de datos existe 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 (usuario); } user.uuid = uuid; db.savechanges (); } #Endregion return View ();}
Finalmente, se adjunta el diseño de la tabla de la base de datos
No hay nada especial, agregamos un UUID personalizado más para cada parámetro devuelto por WeChat.
Para obtener detalles de la descripción del parámetro WeChat, consulte la documentación del desarrollador de WeChat
Efecto de ejecución
1. Escanee el código QR para iniciar sesión en la página
2. Solicitar la autorización del usuario
3. El usuario confirma la autorización
4. Se completa el inicio de sesión de PC
Inevitablemente hay deficiencias en el artículo, por favor perdóname. Si encuentra algún error, deje un mensaje para señalarlos. ¡Estoy muy agradecido! Escanee el código QR en WeChat para registrarse e inicie sesión en demostración. Después de que el autor se clasifica, póngalo en Github. Espero ayudar a más amigos. Preste atención a la actualización de este artículo.
Los anteriores son ejemplos de escanear el código QR en WeChat en la PC. Los amigos necesitados pueden referirse a él. ¡Gracias por su apoyo para este sitio!