Digitalize o código QR no PC para se registrar e fazer login
1. Prefácio
Deixe -me primeiro afirmar que o foco deste artigo está nas idéias de implementação, e o código e o design do banco de dados são principalmente para mostrar idéias. Se você tiver requisitos rígidos sobre a eficiência do código, não os copie.
Acredito que as pessoas que fizeram o desenvolvimento do WeChat fizeram muitas autorizações, mas, de um modo geral, estamos mais autorizando sites móveis, ou melhor, é uma autorização sob o terminal do WeChat. Um problema que encontrei hoje é que o projeto suporta terminais WeChat e PC e abre o registro. É necessário fazer login na outra extremidade, se você se registra no PC ou no lado do WeChat. Em outras palavras, seja PC ou WeChat, você deve fazer "Você é" (relacionado de alguma forma).
2. Encontre uma solução
Pensando da maneira tradicional, o lado WeChat pode ser registrado através da autorização, mas no lado do PC, a maneira tradicional nada mais é do que preencher o número do telefone celular, ou e -mail etc. Se você se registrar dessa maneira, o seguinte problema surgirá
1. Autorizo o registro pela primeira vez no lado do WeChat; portanto, se eu quiser fazer login no lado do PC, ainda tenho que me registrar.
Esta solução pode ser: Após o registro de autorização do WeChat, ela é "forçada" a exigir que os usuários preencham informações básicas, como número de telefone celular e email. Dessa forma, podemos gerar a senha da conta para o usuário fazer login no PC de alguma forma. Por exemplo, use o apelido do usuário como conta, o número do telefone celular como senha etc.
Desvantagens: a experiência do usuário não é boa e também há riscos de segurança. Afinal, seu apelido do WeChat, email ou número de telefone celular estão expostos.
2. Se eu me registrar primeiro no PC, como me conecto ao terminal móvel quando autorizo no WeChat? Obviamente, sempre haverá soluções para qualquer problema. A idéia é a seguinte:
Solução 1: Depois que o usuário se registra no PC, o usuário "Force" deve preencher o apelido do WeChat. Isso é usado como a condição relevante para a autorização do WeChat. Infelizmente, porém, o apelido do WeChat pode ser alterado, mas não é o único, como pode ser usado para fazer associações? O plano foi morto em uma situação desesperada.
Plano 2: Após a autorização no lado do WeChat e o registro no lado do PC, os usuários precisam preencher seus números de telefone celular como link. Isso leva a um problema e é necessário garantir a autenticidade do telefone celular do usuário e não há problema. Isso pode ser alcançado através do código de verificação do telefone celular (o mesmo é verdadeiro para o email). Mas você também pode assumir que a seguinte situação está presente. Se eu tiver dois números de telefone celular, preencha um ao registrar no PC e outro ao se registrar no WeChat. Está relacionado? A resposta é uma pena. Além disso, depois de me registrar no PC, eu simplesmente não preenchi (a razão pela qual forcei as cotações duplas) e, em seguida, usei a autorização do WeChat para fazer login. Bem, haverá dois dados aguardando que você encontre uma maneira de se associar, e um desenvolvedor típico cavará um buraco. Esse método funciona até certo ponto, mas é inaceitável que os desenvolvedores sejam rigorosos.
3. Solução para retornar à origem
Análise: Como existem todos os problemas com as soluções acima, vamos colocá -las de lado primeiro. Coloque alguns pensamentos de volta à raiz do problema. O problema associado requer um identificador exclusivo. A identificação única é como o nosso número de identificação. Quando solicitamos um cartão de crédito, o cartão de identificação é necessário. Se você comprar um cartão numérico no sistema de nome real, o cartão de identificação será necessário. Supondo que somos os administradores do sistema, posso descobrir o número do seu celular e o número do cartão bancário através do seu número de identificação.
Com a idéia acima, tudo o que precisamos fazer é encontrar um identificador exclusivo a ser associado. Há um papel importante no WeChat. Ele tem essa função comum com o número de identificação mencionado acima, a identificação exclusiva de uma determinada conta oficial da conta do WeChat.
A autorização do WeChat está disponível para o OpenID. Qualquer pessoa que tenha feito o desenvolvimento do WeChat não deve ter problemas. A questão é como alcançar o terminal do PC para obter o OpenID ao se registrar ou fazer login. A ideia de implementação do autor é a seguinte. Registre -se no PC ou exiba um código QR ao fazer login, orie o usuário para digitalizar o código usando o WeChat, para que ele salte para a página de autorização. Esta etapa tem os detalhes mais críticos. Traga um código de autorização exclusivo (AuthCode) para o código QR. Imagine se o usuário nos autorizar a escrever OpenID e AuthCode no banco de dados. Em seguida, podemos obter o OpenID associado ao AuthCode através de uma API no lado do PC. Se fizermos isso, podemos saber quem está atualmente examinando o código para se registrar ou fazer login no PC (registrar se não estiver registrado, e quem tiver registrado o login diretamente). De repente, você se sente tão fácil? Se você acha que o texto é mais abstrato, veja a seguinte foto
Processo de login de código de digitalização do PC WeChat
Código central
Depois de esclarecer as idéias e processos, enviaremos diretamente o código. As idéias de desenvolvimento são comuns; portanto, mostre seus poderes mágicos ao desenvolver o idioma.
NOTA: O código a seguir leva a linguagem C# como exemplo e usa MVC + EF (Nota: UUID é equivalente ao nosso AuthCode acima)
Digitalize o código para fazer login na página de segundo plano
public ActionResult Login () {// Se você estiver conectado, pule diretamente para a página inicial se (user.Identity.isAuthenticated) retorna redirectToAction ("index", "home"); string url = request.url.host; string uuid = guid.newGuid (). ToString (); Viewbag.url = "http: //" + url + "/home/loginfor? Uuid =" + uuid; // construct Authorization Link Viewbag.uuid = uuid; // Salvar uuid Return View ();}
O código QR é gerado usando o plug-in jQuery.qrcode.js. Se você quiser saber mais, mude para o Github. Uma coisa a observar aqui é que este plug -in pode especificar o método de geração do código, tela ou tabela QR. Especifique o uso da geração de tabela para amigos que apóiam o IE.
O código é o seguinte:
jQuery ('#qrcode'). Qrcode ({render: "tabela", texto: "http://baidu.com"});Volte ao tópico, o código principal da página de login é o seguinte
<!-Contêiner para gerar código QR div-> <div id = "qrcode-container"> </div> <script src = "~/plugins/jquery/jquery-1.9.1.min.js"> </script> <script src = "~/plugins/jQuery-qrcode/jQreryQ. jQuery (function () {// gera código QR jQuery ('#qrcode-container'). (Data, Status) {if ("Sucesso" == status) {// Autorização de sucesso do usuário => Jump if ("Sucesso" == Data) {Window.location.href = '@url.action ("index", "home")
Enquete para determinar se o usuário autoriza o código da API
public string userLogin (string uuid) {// Verifique se o parâmetro é legal se (string.isnullorEmpty (uuid)) retorna "param_error"; Wx_userCord user = db.wx_userCord.where (u => u.uuid == uuid) .FirstordEfault (); if (user == null) retorna "não_authcode"; // escreva cookie formSauthentication.setAuthcookie (user.openid, false); // limpo uuid user.uuid = null; db.SaveChanges (); retornar "sucesso";}Ação de autorização do WeChat
public ActionResult Loginfor(string uuid){ #region Get basic information - snsapi_userinfo /* * Create WeChat general class - The code here is more complicated and not posted here * I will sort out the entire demo on Github */ WechatUserContext wxcontext = new WeChatUserContext(System.Web.HttpContext.Current, uuid); // Use a classe Geral WeChat para obter informações básicas do usuário wxcontext.getUserinfo (); if (! string.isnullorEmpty (wxcontext.openid)) {uuid = request ["estado"]; // julga se o banco de dados existe wx_userrecord user = db.wx_userrecord.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 (usuário); } user.uuid = uuid; db.SaveChanges (); } #endregion retornar view ();}
Finalmente, o design da tabela de banco de dados está anexado
Não há nada de especial, adicionamos mais um UUID personalizado para cada parâmetro retornado pelo WeChat.
Para obter detalhes da descrição do parâmetro WeChat, consulte a documentação do desenvolvedor do WeChat
Efeito de corrida
1. Digitalize o código QR para fazer login na página
2. Solicitar autorização do usuário
3. O usuário confirma a autorização
4. O login para PC é concluído
Existem inevitavelmente deficiências no artigo, por favor me perdoe. Se você encontrar algum erro, deixe uma mensagem para apontá -los. Estou muito grato! Digitalize o código QR no WeChat para se registrar e fazer login na demonstração. Depois que o autor resolver, coloque -o no Github. Espero ajudar mais amigos. Por favor, preste atenção à atualização deste artigo.
Os acima são exemplos de digitalização do código QR no WeChat no PC. Amigos necessitados podem se referir a ele. Obrigado pelo seu apoio a este site!