Pindai kode QR di PC untuk mendaftar dan masuk
1. Pendahuluan
Izinkan saya menyatakan terlebih dahulu bahwa fokus artikel ini adalah pada ide -ide implementasi, dan desain kode dan basis data terutama untuk menunjukkan ide. Jika Anda memiliki persyaratan ketat tentang efisiensi kode, jangan salin.
Saya percaya bahwa orang -orang yang telah melakukan pengembangan WeChat telah melakukan banyak otorisasi, tetapi secara umum, kami lebih mengesahkan situs web seluler, atau lebih tepatnya, itu adalah otorisasi di bawah terminal WeChat. Satu masalah yang saya temui hari ini adalah bahwa proyek ini mendukung terminal WeChat dan PC dan membuka pendaftaran. Diperlukan untuk masuk di ujung lain apakah Anda mendaftar di PC atau di sisi WeChat. Dengan kata lain, apakah itu PC atau WeChat, Anda harus melakukan "Anda adalah Anda" (terkait dengan beberapa cara).
2. Temukan solusi
Berpikir dengan cara tradisional, sisi WeChat dapat didaftarkan melalui otorisasi, tetapi di sisi PC, cara tradisional tidak lebih dari mengisi nomor ponsel, atau email, dll. Jika Anda mendaftar dengan cara ini, masalah berikut akan muncul
1. Saya pertama kali mengesahkan pendaftaran di sisi WeChat, jadi jika saya ingin masuk ke sisi PC, saya masih harus mendaftar.
Solusi ini dapat: Setelah pendaftaran otorisasi WeChat, "dipaksa" untuk meminta pengguna untuk mengisi informasi dasar, seperti nomor ponsel dan email. Dengan cara ini, kami dapat menghasilkan kata sandi akun agar pengguna masuk ke PC dengan cara tertentu. Misalnya, gunakan nama panggilan pengguna sebagai akun, nomor ponsel sebagai kata sandi, dll.
Kerugian: Pengalaman pengguna tidak baik, dan ada juga risiko keamanan. Lagi pula, nama panggilan WeChat Anda, email atau nomor ponsel diekspos.
2. Jika saya mendaftar di PC terlebih dahulu, bagaimana cara terhubung ke terminal seluler ketika saya mengotorisasi di WeChat? Tentu saja, akan selalu ada solusi untuk masalah apa pun. Idenya adalah sebagai berikut:
Solusi 1: Setelah pengguna mendaftar di PC, pengguna "Force" harus mengisi julukan WeChat. Ini digunakan sebagai kondisi yang relevan untuk otorisasi WeChat. Namun sayangnya, nama panggilan WeChat dapat diubah, tetapi itu bukan satu -satunya, bagaimana cara digunakan untuk membuat asosiasi? Rencana itu terbunuh dalam situasi yang putus asa.
Paket 2: Setelah otorisasi di sisi WeChat dan pendaftaran di sisi PC, pengguna diharuskan mengisi nomor ponsel mereka sebagai tautan. Ini mengarah pada masalah, dan perlu untuk memastikan keaslian ponsel pengguna, dan tidak ada masalah. Ini dapat dicapai melalui kode verifikasi ponsel (hal yang sama berlaku untuk email). Tetapi Anda mungkin juga berasumsi bahwa situasi berikut ada. Jika saya memiliki dua nomor ponsel, isi satu saat mendaftar di PC dan yang lain saat mendaftar di WeChat. Apakah itu terkait? Jawabannya sangat disayangkan. Selain itu, setelah saya mendaftar di PC, saya hanya tidak mengisinya (alasan mengapa saya memaksakan kutipan ganda), dan kemudian saya menggunakan otorisasi WeChat untuk masuk. Nah, akan ada dua potong data yang menunggu Anda menemukan cara untuk bergaul, dan pengembang yang khas akan menggali lubang. Metode ini bekerja sampai batas tertentu, tetapi tidak dapat diterima oleh pengembang untuk menjadi ketat.
3. Solusi untuk kembali ke asal
Analisis: Karena ada semua masalah dengan solusi di atas, mari kita mengesampingkannya terlebih dahulu. Kembalikan beberapa pemikiran ke akar masalah. Masalah terkait membutuhkan pengidentifikasi yang unik. Identifikasi unik seperti nomor ID kami. Saat kami mengajukan kartu kredit, kartu ID diperlukan. Jika Anda membeli kartu angka di bawah sistem nama asli, kartu ID diperlukan. Dengan asumsi kami adalah administrator sistem, maka saya dapat mengetahui nomor ponsel dan nomor kartu bank Anda melalui nomor ID Anda.
Dengan ide di atas, yang perlu kita lakukan adalah menemukan pengidentifikasi unik yang harus dikaitkan. Ada peran penting di WeChat. Ini memiliki fungsi umum dengan nomor ID yang kami sebutkan di atas, identifikasi unik dari akun resmi tertentu oleh akun WeChat.
Otorisasi dari WeChat tersedia untuk OpenID. Siapa pun yang telah melakukan pengembangan WeChat seharusnya tidak memiliki masalah. Pertanyaannya adalah bagaimana mencapai terminal PC untuk mendapatkan OpenID saat mendaftar atau masuk. Gagasan implementasi penulis adalah sebagai berikut. Daftarkan pada PC, atau tampilkan kode QR saat masuk, pandu pengguna untuk memindai kode menggunakan WeChat, sehingga melompat ke halaman otorisasi. Langkah ini memiliki detail paling kritis. Harap bawa kode otorisasi yang unik (AuthCode) ke kode QR. Bayangkan saja jika pengguna memberi wewenang kepada kami untuk menulis OpenID dan Authcode ke database. Kemudian kita dapat memperoleh OpenID yang terkait dengan authcode melalui API di sisi PC. Jika kami melakukan ini, kami dapat mengetahui siapa yang saat ini sedang memindai kode untuk mendaftar atau masuk pada PC (mendaftar jika tidak terdaftar, dan siapa pun yang telah mendaftar akan masuk secara langsung). Apakah Anda tiba -tiba merasa sangat mudah? Jika menurut Anda teksnya lebih abstrak, silakan lihat gambar berikut
PC WeChat Scan Code Login Proses
Kode inti
Setelah mengklarifikasi ide dan proses, kami akan langsung mengunggah kode. Gagasan pengembangan adalah umum, jadi tolong tunjukkan kekuatan magis Anda saat mengembangkan bahasa.
Catatan: Kode berikut mengambil bahasa C# sebagai contoh dan menggunakan MVC + EF (Catatan: UUID setara dengan authcode kami di atas)
Pindai kode untuk masuk ke halaman latar belakang
Public ActionResult Login () {// Jika Anda masuk, lompat langsung ke beranda IF (user.identity.isAuthenticated) pengembalian kembali ("indeks", "home"); string url = request.url.host; string uuid = guid.newguid (). tostring (); Viewbag.url = "http: //" + url + "/home/loginfor? Uuid =" + uuid; // membangun tautan otorisasi viewbag.uuid = uuid; // simpan uuid return view ();}
Kode QR dihasilkan menggunakan plug-in jquery.qrcode.js. Jika Anda ingin tahu lebih banyak, silakan pindah ke GitHub. Satu hal yang perlu diperhatikan di sini adalah bahwa plugin ini dapat menentukan metode pembuatan kode QR, kanvas atau tabel. Harap tentukan penggunaan pembuatan meja untuk teman yang mendukung IE.
Kodenya adalah sebagai berikut:
jQuery ('#qrcode'). qrcode ({render: "tabel", teks: "http://baidu.com"});Kembali ke topik, kode utama halaman login adalah sebagai berikut
<!-Kontainer untuk Menghasilkan Kode QR Div-> <Div id = "Qrcode-Container"> </div> <script src = "~/plugins/jQuery/jQuery-1.9.1.min.min.js"> </script> <script src = "~/plugins/jQuery-Qrcode/jquery.qrip. () {// menghasilkan kode qr jQuery ('#qrcode-container'). Qrcode ("@viewbag.url"); (status) {if ("Success" ==) {// Pengguna Sukses Otorisasi => Jump if ("Success" == Data) {Window.Location.href = '@url.action ("index", "home");
Jajak pendapat untuk menentukan apakah pengguna mengesahkan kode API
Public String UserLogin (String UUID) {// Verifikasi apakah parameternya legal jika (string.isnullorempty (uuid)) mengembalikan "param_error"; Wx_userrecord user = db.wx_userrecord.where (u => u.uuid == uuid) .firstordefault (); if (user == null) return "not_authcode"; // Tulis cookie formsAuthentication.setAuthCookie (user.openid, false); // Hapus UUD USER.UUID = NULL; db.savechanges (); mengembalikan "sukses";}Tindakan Otorisasi WeChat
ActionResult LoginFor (String UUID) {#Region Dapatkan Informasi Dasar - SNSAPI_USERINFO / * * Buat WeChat General Class - Kode di sini lebih rumit dan tidak diposting di sini * Saya akan memilah seluruh demo di github * / weCaturSercext wxcontext = new wechatuscext (System. // Gunakan kelas umum WeChat untuk mendapatkan informasi pengguna dasar wxcontext.getUserInfo (); if (! string.isnullorEmpty (wxcontext.openid)) {uuid = request ["state"]; // menilai apakah database ada 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 (pengguna); } user.uuid = uuid; db.savechanges (); } #endregion return view ();}
Akhirnya, desain tabel basis data terpasang
Tidak ada yang istimewa, kami menambahkan satu lagi UUID khusus untuk setiap parameter yang dikembalikan oleh WeChat.
Untuk perincian deskripsi parameter WeChat, silakan merujuk ke dokumentasi pengembang WeChat
Efek berjalan
1. Pindai kode QR untuk masuk ke halaman
2. Minta Otorisasi Pengguna
3. Pengguna mengkonfirmasi otorisasi
4. Login PC selesai
Ada kekurangan yang pasti dalam artikel ini, mohon maafkan saya. Jika Anda menemukan kesalahan, silakan tinggalkan pesan untuk menunjukkannya. Saya sangat berterima kasih! Pindai kode QR di WeChat untuk mendaftar dan masuk ke demo. Setelah penulis beres, letakkan di GitHub. Saya berharap dapat membantu lebih banyak teman. Harap perhatikan pembaruan artikel ini.
Di atas adalah contoh pemindaian kode QR di WeChat di PC. Teman yang membutuhkan dapat merujuknya. Terima kasih atas dukungan Anda untuk situs ini!