Сканируйте QR -код на ПК, чтобы зарегистрироваться и войти в систему
1. Предисловие
Позвольте мне сначала указать, что в центре внимания этой статьи уделяется идеи реализации, а код и дизайн базы данных в основном предназначены для демонстрации идей. Если у вас есть строгие требования к эффективности кода, не копируйте их.
Я считаю, что люди, которые сделали разработку WeChat, сделали много разрешений, но, вообще говоря, мы более разрешаем мобильные веб -сайты, или, скорее, это разрешение на терминале WeChat. Одна проблема, с которой я столкнулся сегодня, заключается в том, что проект поддерживает терминалы WeChat и ПК и открывает регистрацию. Требуется войти в систему на другом конце, регистрируетесь ли вы на ПК или на стороне WeChat. Другими словами, будь то ПК или WeChat, вы должны сделать «вы есть» (каким -то образом связано).
2. Найдите решение
Думая традиционно, сторона WeChat может быть зарегистрирована путем авторизации, но на стороне ПК традиционный способ - это не что иное, как заполнение номера мобильного телефона, или электронную почту и т. Д. Если вы зарегистрируетесь таким образом, возникнет следующая проблема
1. Сначала я разрешаю регистрацию на стороне WeChat, поэтому, если я хочу войти на сторону ПК, мне все равно придется зарегистрироваться.
Это решение может быть: после регистрации авторизации WeChat оно «вынуждено» требовать от пользователей заполнять базовую информацию, такую как номер мобильного телефона и электронная почта. Таким образом, мы можем создать пароль учетной записи для пользователя каким -то образом войти на ПК. Например, используйте прозвище пользователя в качестве учетной записи, номер мобильного телефона в качестве пароля и т. Д.
Недостатки: пользовательский опыт не очень хороший, а также есть риски безопасности. В конце концов, ваше прозвище WeChat, электронная почта или номер мобильного телефона выставлены.
2. Если я сначала зарегистрируюсь на ПК, как мне подключиться к мобильному терминалу, когда я разрешаю WeChat? Конечно, всегда будут решения любой проблемы. Идея заключается в следующем:
Решение 1: После того, как пользователь регистрируется на ПК, пользователь «Force» должен заполнить прозвище WeChat. Это используется в качестве соответствующего условия для авторизации WeChat. Но, к сожалению, прозвище WeChat можно изменить, но оно не единственное, как его можно использовать для создания ассоциаций? План был убит в отчаянной ситуации.
План 2: После авторизации на стороне и регистрации WeChat на стороне ПК пользователи должны заполнять свои номера мобильных телефонов в качестве ссылки. Это приводит к проблеме, и необходимо обеспечить подлинность мобильного телефона пользователя, и нет никаких проблем. Это может быть достигнуто с помощью кода проверки мобильного телефона (то же самое относится и к электронной почте). Но вы можете также предположить, что присутствует следующая ситуация. Если у меня есть два номера мобильных телефонов, заполните одно при регистрации на ПК, а другое при регистрации на WeChat. Это связано? Ответ жаль. Кроме того, после того, как я зарегистрировался на ПК, я просто не заполнил его (причина, по которой я заставил двойные цитаты), а затем я использовал разрешение WeChat для входа в систему. Ну, будет два часа данных, ожидающих вас, чтобы найти способ связать, и типичный разработчик выкопает дыру. Этот метод работает в некоторой степени, но для разработчиков недопустимо быть строгими.
3. Решение, чтобы вернуться к происхождению
Анализ: Поскольку есть все проблемы с вышеуказанными решениями, давайте сначала отбросим их в сторону. Поместите некоторые мысли обратно в корень проблемы. Связанная проблема требует уникального идентификатора. Уникальная идентификация похожа на наш идентификационный номер. Когда мы подаем заявку на кредитную карту, идентификационная карта необходима. Если вы покупаете номерную карту в рамках реальной системы имен, идентификационная карта необходима. Предполагая, что мы являемся системными администраторами, я могу найти ваш номер мобильного телефона и номер банковской карты через ваш идентификационный номер.
С приведенной выше идеей все, что нам нужно сделать, это найти уникальный идентификатор, который будет связан. В WeChat есть важная роль. Он имеет эту общую функцию с идентификационным номером, который мы упомянули выше, уникальная идентификация определенной официальной учетной записи WeChat Account.
Авторизация от WeChat доступна для OpenID. У любого, кто сделал разработку WeChat, не должен иметь никаких проблем. Вопрос в том, как достичь терминала ПК, чтобы получить OpenID при регистрации или входе в систему. Идея реализации автора заключается в следующем. Зарегистрируйтесь на ПК или отобразите QR -код при входе в систему, направляйте пользователя сканировать код с помощью WeChat, чтобы он прыгнул на страницу авторизации. Этот шаг имеет наиболее важную деталь. Пожалуйста, принесите уникальный код авторизации (AuthCode) в QR -код. Представьте, что пользователь разрешает нам написать OpenID и Authcode в базу данных. Затем мы можем получить OpenID, связанный с AuthCode через API на стороне ПК. Если мы сделаем это, мы сможем узнать, кто в настоящее время сканирует код для регистрации или входа в систему на ПК (зарегистрируйтесь, если не зарегистрирован, и тот, кто зарегистрирован, войдет в систему непосредственно). Вы вдруг чувствуете себя так легко? Если вы думаете, что текст более абстрактный, см. Следующую картинку
ПК Процесс входа в систему сканирования WeChat
Основной код
После уточнения идей и процессов мы прямо загрузим код. Идеи развития распространены, поэтому, пожалуйста, покажите свои магические силы при разработке языка.
ПРИМЕЧАНИЕ. Следующий код принимает язык C# в качестве примера и использует MVC + EF (примечание: UUID эквивалентен нашему Authcode выше)
Сканируйте код, чтобы войти на фоновую страницу
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; // construct suprization ссылка viewbag.uuid = uuid; // Сохранить uuid return view ();}
QR-код генерируется с использованием плагина jQuery.qrcode.js. Если вы хотите узнать больше, перейдите в GitHub. Здесь следует отметить, что этот плагин может указать метод генерации QR -кода, холст или таблицу. Пожалуйста, укажите использование поколения таблиц для друзей, которые поддерживают IE.
Код заключается в следующем:
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> <script src = "~/plugins/jquery-qrcode/jquery.qrcode. jquery (function () {// генерировать QR-код jQuery ('#qrCode-container'). qrCode ("@viewbag.url"); // poling, чтобы определить, разрешает ли пользователь var evterval = setInterval (function () {$ .post ("@url.action (" userLogin ", Home") ", {uUID ("@url.action ("userLogin", Home ")", {uUID ("@url. Функция (Статус) {if ("Успех" == Статус) {// Пользовательский успех => jump if ("Успех" == DATA) {window.location.href = '@url.action ("index", "Home")';
Опрос, чтобы определить, разрешает ли пользователь код API
public String userLogin (string uuid) {// проверить, является ли параметр законным if (string.isnullorempty (uuid)) return "param_error"; WX_USERRECORD USER = DB.WX_USERRECORD. Где (u => u.uuid == uuid) .firstordefault (); if (user == null) вернуть "not_authcode"; // написать cookie formsAuthentication.setauthcookie (user.openid, false); // Очистить uuid user.uuid = null; db.savechanges (); вернуть "успех";}WeChat Authorization Action
public actionResult Loginfor (String uuid) {#region Получить основную информацию - snsapi_userinfo / * * Создать общий класс WeChat - код здесь более сложный и не размещен здесь * Я разберу всю демонстрацию на github * / wechatusercontext wxcontext = new weChatusErcontext (system.Web.HttpContext.Curntext, uidtext, uidtext.current, uidtext, uidtext. // Использование WeChat General Class для получения базовой информации пользователя wxContext.getUserInfo (); if (! String.isnullorempty (wxcontext.openid)) {uuid = request ["state"]; // Судить, существует ли база данных wx_usercord user = db.wx_usercord.where (u => u.openid == wxcontext.openid) .firstordefault (); if (null == user) {user = new wx_usercord (); 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_usercord.add (пользователь); } user.uuid = uuid; db.savechanges (); } #endregion return view ();}
Наконец, дизайн таблицы баз данных прикреплен
Нет ничего особенного, мы добавляем еще один пользовательский UUID для каждого параметра, возвращаемого WeChat.
Для получения подробной информации об описании параметра WeChat, пожалуйста, обратитесь к документации по разработке WeChat
Эффект бега
1. Сканируйте QR -код, чтобы войти на страницу
2. Запросить авторизацию пользователя
3. Пользователь подтверждает авторизацию
4. Вход в ПК завершен
В статье неизбежно существуют недостатки, пожалуйста, простите меня. Если вы найдете какие -либо ошибки, пожалуйста, оставьте сообщение, чтобы указать на них. Я очень благодарен! Сканируйте QR -код на WeChat, чтобы зарегистрироваться и войти в систему в демо. После того, как автор разобрался, поместите его на GitHub. Я надеюсь помочь большему количеству друзей. Пожалуйста, обратите внимание на обновление этой статьи.
Выше примеры сканирования QR -кода на WeChat на ПК. Друзья в нуждающихся могут ссылаться на это. Спасибо за поддержку этого сайта!