สแกนรหัส QR บนพีซีเพื่อลงทะเบียนและเข้าสู่ระบบ
1. คำนำ
ให้ฉันระบุก่อนว่าจุดสนใจของบทความนี้อยู่ที่แนวคิดการใช้งานและการออกแบบรหัสและฐานข้อมูลส่วนใหญ่เป็นเพื่อการแสดงความคิด หากคุณมีข้อกำหนดที่เข้มงวดเกี่ยวกับประสิทธิภาพของรหัสอย่าคัดลอก
ฉันเชื่อว่าผู้คนที่ได้ทำการพัฒนา WeChat ได้ทำการอนุญาตมากมาย แต่โดยทั่วไปแล้วเรากำลังอนุญาตเว็บไซต์มือถือมากขึ้นหรือมากกว่านั้นเป็นการอนุญาตภายใต้ WeChat Terminal ปัญหาหนึ่งที่ฉันพบในวันนี้คือโครงการสนับสนุน WeChat และ PC Terminals และเปิดการลงทะเบียน จำเป็นต้องลงชื่อเข้าใช้อีกด้านหนึ่งไม่ว่าคุณจะลงทะเบียนบนพีซีหรือทางด้าน WeChat กล่าวอีกนัยหนึ่งไม่ว่าจะเป็นพีซีหรือ WeChat คุณต้องทำ "คุณคือคุณ" (เกี่ยวข้องในทางใดทางหนึ่ง)
2. ค้นหาวิธีแก้ปัญหา
เมื่อนึกถึงวิธีดั้งเดิมฝ่าย WeChat สามารถลงทะเบียนผ่านการอนุญาต แต่ในด้านพีซีวิธีดั้งเดิมไม่มีอะไรมากไปกว่าการกรอกหมายเลขโทรศัพท์มือถือหรืออีเมล ฯลฯ หากคุณลงทะเบียนด้วยวิธีนี้ปัญหาต่อไปนี้จะเกิดขึ้น
1. ฉันอนุญาตให้ลงทะเบียนทางด้าน WeChat ก่อนดังนั้นหากฉันต้องการเข้าสู่ระบบพีซีฉันยังต้องลงทะเบียน
โซลูชันนี้สามารถ: หลังจากการลงทะเบียนการอนุญาต WeChat มันเป็น "บังคับ" เพื่อให้ผู้ใช้ต้องกรอกข้อมูลพื้นฐานเช่นหมายเลขโทรศัพท์มือถือและอีเมล ด้วยวิธีนี้เราสามารถสร้างรหัสผ่านบัญชีเพื่อให้ผู้ใช้เข้าสู่ระบบพีซีได้ในทางใดทางหนึ่ง ตัวอย่างเช่นใช้ชื่อเล่นของผู้ใช้เป็นบัญชีหมายเลขโทรศัพท์มือถือเป็นรหัสผ่าน ฯลฯ
ข้อเสีย: ประสบการณ์ผู้ใช้ไม่ดีและยังมีความเสี่ยงด้านความปลอดภัย ท้ายที่สุดชื่อเล่น WeChat อีเมลหรือหมายเลขโทรศัพท์มือถือของคุณจะถูกเปิดเผย
2. ถ้าฉันลงทะเบียนบนพีซีก่อนฉันจะเชื่อมต่อกับเทอร์มินัลมือถือได้อย่างไรเมื่อฉันอนุญาตให้ใช้ WeChat ได้อย่างไร แน่นอนว่าจะมีวิธีแก้ไขปัญหาใด ๆ เสมอ แนวคิดมีดังนี้:
โซลูชันที่ 1: หลังจากผู้ใช้ลงทะเบียนบนพีซีผู้ใช้ "บังคับ" จะต้องกรอกชื่อเล่น WeChat สิ่งนี้ใช้เป็นเงื่อนไขที่เกี่ยวข้องสำหรับการอนุญาต WeChat แต่น่าเสียดายที่ชื่อเล่น WeChat สามารถเปลี่ยนแปลงได้ แต่มันไม่ใช่เรื่องเดียวเท่านั้นมันจะใช้ในการสร้างความสัมพันธ์ได้อย่างไร แผนถูกฆ่าตายในสถานการณ์ที่สิ้นหวัง
แผน 2: หลังจากได้รับอนุญาตทางด้าน WeChat และการลงทะเบียนทางฝั่งพีซีผู้ใช้จะต้องกรอกหมายเลขโทรศัพท์มือถือเป็นลิงค์ สิ่งนี้นำไปสู่ปัญหาและเป็นสิ่งจำเป็นเพื่อให้แน่ใจว่าความถูกต้องของโทรศัพท์มือถือของผู้ใช้และไม่มีปัญหา สิ่งนี้สามารถทำได้ผ่านรหัสการตรวจสอบโทรศัพท์มือถือ (เช่นเดียวกับอีเมล) แต่คุณอาจคิดว่าสถานการณ์ต่อไปนี้มีอยู่ หากฉันมีหมายเลขโทรศัพท์มือถือสองหมายเลขให้กรอกข้อมูลเมื่อลงทะเบียนบนพีซีและอีกหมายเลขหนึ่งเมื่อลงทะเบียนบน WeChat เกี่ยวข้องกันหรือไม่? คำตอบคือน่าเสียดาย นอกจากนี้หลังจากที่ฉันลงทะเบียนบนพีซีฉันก็ไม่ได้กรอกข้อมูล (เหตุผลที่ฉันบังคับคำพูดสองครั้ง) จากนั้นฉันก็ใช้การอนุญาต WeChat เพื่อเข้าสู่ระบบดีจะมีข้อมูลสองชิ้นรอให้คุณหาวิธีเชื่อมโยงและนักพัฒนาทั่วไปจะขุดหลุม วิธีนี้ใช้งานได้บ้าง แต่ก็ไม่สามารถยอมรับได้สำหรับนักพัฒนาที่จะเข้มงวด
3. โซลูชันเพื่อกลับไปที่จุดกำเนิด
การวิเคราะห์: เนื่องจากมีปัญหาทั้งหมดเกี่ยวกับการแก้ปัญหาข้างต้นให้วางไว้ก่อน นำความคิดบางอย่างกลับไปที่รากของปัญหา ปัญหาที่เกี่ยวข้องต้องใช้ตัวระบุที่ไม่ซ้ำกัน บัตรประจำตัวที่ไม่ซ้ำกันนั้นเหมือนกับหมายเลขประจำตัวของเรา เมื่อเราสมัครบัตรเครดิตจำเป็นต้องมีบัตรประจำตัวประชาชน หากคุณซื้อบัตรหมายเลขภายใต้ระบบชื่อจริงจำเป็นต้องมีบัตรประจำตัวประชาชน สมมติว่าเราเป็นผู้ดูแลระบบจากนั้นฉันสามารถค้นหาหมายเลขโทรศัพท์มือถือและหมายเลขบัตรธนาคารผ่านหมายเลข ID ของคุณ
ด้วยแนวคิดข้างต้นสิ่งที่เราต้องทำคือค้นหาตัวระบุที่ไม่ซ้ำกันที่จะเชื่อมโยง มีบทบาทสำคัญใน WeChat มันมีฟังก์ชั่นทั่วไปนี้กับหมายเลข ID ที่เรากล่าวถึงข้างต้นการระบุที่ไม่ซ้ำกันของบัญชีอย่างเป็นทางการบางบัญชีโดยบัญชี WeChat
การอนุญาตจาก WeChat มีให้สำหรับ OpenID ใครก็ตามที่ได้ทำการพัฒนา WeChat ไม่ควรมีปัญหา คำถามคือวิธีการบรรลุเทอร์มินัลพีซีเพื่อรับ OpenID เมื่อลงทะเบียนหรือเข้าสู่ระบบแนวคิดการใช้งานของผู้เขียนมีดังนี้ ลงทะเบียนบนพีซีหรือแสดงรหัส QR เมื่อเข้าสู่ระบบแนะนำผู้ใช้เพื่อสแกนรหัสโดยใช้ WeChat เพื่อให้มันข้ามไปยังหน้าการอนุญาต ขั้นตอนนี้มีรายละเอียดที่สำคัญที่สุด โปรดนำรหัสการอนุญาตที่ไม่ซ้ำกัน (AuthCode) ไปยังรหัส QR ลองจินตนาการว่าผู้ใช้อนุญาตให้เราเขียน OpenID และ AuthCode ไปยังฐานข้อมูลหรือไม่ จากนั้นเราสามารถรับ OpenID ที่เกี่ยวข้องกับ AuthCode ผ่าน API ทางด้านพีซี หากเราทำเช่นนี้เราสามารถรู้ได้ว่าใครกำลังสแกนรหัสเพื่อลงทะเบียนหรือเข้าสู่ระบบบนพีซี (ลงทะเบียนหากไม่ได้ลงทะเบียนและใครก็ตามที่ลงทะเบียนจะเข้าสู่ระบบโดยตรง) ทันใดนั้นคุณรู้สึกง่ายมากหรือไม่? หากคุณคิดว่าข้อความนั้นเป็นนามธรรมมากขึ้นโปรดดูภาพต่อไปนี้
กระบวนการเข้าสู่ระบบรหัสการสแกนพีซี WeChat
รหัสหลัก
หลังจากชี้แจงแนวคิดและกระบวนการให้อัปโหลดรหัสโดยตรง แนวคิดการพัฒนาเป็นเรื่องธรรมดาดังนั้นโปรดแสดงพลังเวทย์มนตร์ของคุณเมื่อพัฒนาภาษา
หมายเหตุ: รหัสต่อไปนี้ใช้ภาษา C# เป็นตัวอย่างและใช้ MVC + EF (หมายเหตุ: UUID เทียบเท่ากับ AuthCode ของเราด้านบน)
สแกนรหัสเพื่อเข้าสู่หน้าพื้นหลัง
Public ActionResult Login () {// ถ้าคุณเข้าสู่ระบบให้ข้ามไปที่หน้าแรกโดยตรงถ้า (user.identity.isauthenticated) ส่งคืน RedirectToAction ("ดัชนี", "home"); string url = request.url.host; string uuid = guid.newGuid (). toString (); viewbag.url = "http: //" + url + "/home/loginfor? uuid =" + uuid; // สร้างการอนุมัติลิงก์การอนุมัติ link viewbag.uuid = uuid; // บันทึก uuid return view ();};};
รหัส QR ถูกสร้างขึ้นโดยใช้ plug-in jQuery.qrcode.js หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดย้ายไปที่ GitHub สิ่งหนึ่งที่ควรทราบที่นี่คือปลั๊กอินนี้สามารถระบุวิธีการสร้างของรหัส QR, ผ้าใบหรือตาราง โปรดระบุการใช้การสร้างตารางสำหรับเพื่อนที่สนับสนุนเช่น
รหัสมีดังนี้:
jQuery ('#qrcode'). qrcode ({render: "ตาราง", ข้อความ: "http://baidu.com"});กลับไปที่หัวข้อรหัสหลักของหน้าเข้าสู่ระบบมีดังนี้
<!-คอนเทนเนอร์สำหรับการสร้างรหัส QR div-> <div id = "qrcode-container"> </div> <script src = "~/plugins/jQuery/jQuery-1.9.1.min.js"> </script> () {// สร้างรหัส QR jQuery ('#qrcode-container') qrcode ("@viewbag.url"); (ข้อมูลสถานะ) {if ("ความสำเร็จ" == สถานะ) {// การอนุมัติความสำเร็จของผู้ใช้ => กระโดดถ้า ("ความสำเร็จ" == ข้อมูล) {window.location.href = '@url.action ("ดัชนี", "home")';
แบบสำรวจเพื่อตรวจสอบว่าผู้ใช้อนุญาตรหัส API หรือไม่
สตริงสาธารณะ userlogin (สตริง uuid) {// ตรวจสอบว่าพารามิเตอร์นั้นถูกกฎหมายถ้า (string.isnullorempty (uuid)) ส่งคืน "param_error"; WX_USERRECORD USER = DB.WX_USERRECORD.WHARE (U => U.UUID == UUID) .FirStordefault (); ถ้า (user == null) ส่งคืน "not_authcode"; // เขียน COOKIE FORMSAUTHENTICATION.SETAUTHCOOKIE (user.Openid, FALSE); // ล้าง uuid user.uuid = null; db.savechanges (); กลับ "ความสำเร็จ";}การดำเนินการอนุญาต WeChat
Public ActionResult Loginfor (String UUID) {#REGION รับข้อมูลพื้นฐาน - SNSAPI_USERINFO / * * สร้างคลาสทั่วไป WeChat - รหัสที่นี่มีความซับซ้อนมากขึ้นและไม่โพสต์ที่นี่ * ฉันจะจัดเรียงการสาธิตทั้งหมดใน GitHub * / WeChatuserContext // ใช้ WeChat General Class เพื่อรับข้อมูลผู้ใช้พื้นฐาน wxContext.getUserInfo (); if (! string.isnullorEmpty (wxContext.openid)) {uuid = คำขอ ["state"]; // ตัดสินว่าฐานข้อมูลมีอยู่ WX_USERRECORD = DB.WX_USERRECORD.Where (U => U.Openid == WxContext.Openid) .FirstOrstordefault (); if (null == ผู้ใช้) {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.uuid = uuid; db.savechanges (); } #EndRegion Return View ();}
ในที่สุดการออกแบบตารางฐานข้อมูลจะถูกแนบ
ไม่มีอะไรพิเศษเราเพิ่ม UUID ที่กำหนดเองอีกหนึ่งตัวสำหรับแต่ละพารามิเตอร์ที่ส่งคืนโดย WeChat
สำหรับรายละเอียดเกี่ยวกับคำอธิบายพารามิเตอร์ WeChat โปรดดูเอกสารของ WeChat Developer Documentation
เอฟเฟกต์การทำงาน
1. สแกนรหัส QR เพื่อเข้าสู่หน้าเว็บ
2. ขอการอนุญาตผู้ใช้
3. ผู้ใช้ยืนยันการอนุญาต
4. การเข้าสู่ระบบ PC เสร็จสมบูรณ์
มีข้อบกพร่องอย่างหลีกเลี่ยงไม่ได้ในบทความโปรดยกโทษให้ฉัน หากคุณพบข้อผิดพลาดใด ๆ โปรดฝากข้อความไว้เพื่อชี้ให้เห็น ฉันรู้สึกขอบคุณมาก! สแกนรหัส QR บน WeChat เพื่อลงทะเบียนและเข้าสู่ระบบสาธิต หลังจากผู้เขียนเรียงลำดับแล้ววางไว้ใน GitHub ฉันหวังว่าจะช่วยเพื่อนมากขึ้น โปรดให้ความสนใจกับการอัปเดตของบทความนี้
ข้างต้นเป็นตัวอย่างของการสแกนรหัส QR บน WeChat บนพีซี เพื่อนที่ต้องการสามารถอ้างถึงได้ ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!