PC-side micro-scan code registration and login Instance _java

PC-side micro-scan code registration and login

First, the preface

First of all, the focus of this article is to implement ideas, code and database design mainly to show ideas, if the code efficiency has a harsh requirements of the project should not be copied.

I believe that people who have been in the micro-credit development licensing This is not less done, but generally speaking, we are more to the mobile end of the site licensing, is actually a micro-trust to do a license. One of the problems encountered today is that the project supports micro-and PC-side, and is open for registration. Requires that you can log on at the other end, either on the PC side or after the micro-client registration. That is to say, whether a PC or a micro-letter has to be "You Are You" (connected in some way).

Second, find solutions

The traditional way to think, the micro-trust can be authorized to register, but the PC side, the traditional way is to fill in the phone number ah, or Email and so on. If you register in this way, you may have a problem with the following

1. I first authorize the registration in the micro-client, so if I want to log on to the PC side, I still have to register.

For this solution can be: micro-letter authorization after registration "mandatory" require users to fill out basic information, such as mobile phone number, Email. This way we can generate the user password for the PC-side login in some ways. For example, the user's nickname for the account, mobile phone number for the password, and so on.

Disadvantages: The user experience is not good, moreover has the security hidden danger. After all, your micro-letter nickname, Email or mobile phone number are exposed.

2. If I first register on the PC side, how do I associate the mobile end with the micro-letter authorization, of course, there will always be a solution to the problem. Ideas are as follows:

Scheme one: When users register on the PC side, "mandatory" users must fill in the micro-letter nickname. As a condition of the micro-letter authorization. But unfortunately, the micro-letter nickname can be changed, is not the only way to make a connection? Programme one died.

Option two: After the micro-trust authorization, and on the PC side of the registration "mandatory" to require users to fill in the mobile phone number for this association. This spawned a problem that must ensure that the user's phone is true to the letter, no problem. This can be done via phone verification code (email is the same). But let's assume that there is a situation like this, if I have two mobile phone numbers, PC-side registration, fill in one, micro-letter registration to fill in another. Is it connected? The answer is very regrettable. Furthermore, after I registered on the PC side, I did not fill in (I put the reason to force double quotes), and then I use the micro-client authorization to log in. OK, there will be two data waiting for you to find a way to relate, typical developers digging holes. This approach is somehow up to the point, but the rigor is not acceptable to the developer.

Third, the return to the origin of the solution

Analysis: Now that there are problems with the scheme, let's put it all aside. Tidy up the idea and let's get back to the root of the problem. The problem associated with is a unique identification. Unique identification as our ID card number, we handle credit card when the identity card is required, the real name under the purchase number card, ID card is necessary. If we are the system administrator, then I can completely through your ID number to find your cell phone number, bank card number.

With the above thought, all we have to do is find a unique identifier to associate with. There is an important role for the micro-letter OpenID. It has the same effect as the ID number mentioned above, and the micro-credit account has a unique identification of a public number.

Micro-letterhead authorization to get OpenID. Anyone who has done micro-credit development should have no problem. The question is how to achieve the PC end of the registration or login to get OpenID. The author's realization idea is as follows. PC-side registration, or display a two-dimensional code when landing to guide users to use micro-credit scan code to jump to the licensing page. This step has one of the most critical details, two-dimensional code please bring a unique Authorization code (AUTHCODE). Imagine that we could write OpenID and Authcode to the database if the user authorized it. Then we can get this OpenID associated with Authcode via an API on the PC side. If we do this we can know who is currently on the PC side of the scan code registration or login (unregistered registration, registered direct login). Does it suddenly feel so easy. If you feel that the text is more abstract, see the following illustration

PC-side micro-Scan code login process

Core code

Figure out the train of thought and flow. Next we go directly to the code. Development ideas are common, please recount the development of language.

Description: The following code takes the C # language as an example, using MVC + EF (Note: The UUID is equivalent to our Authcode)

Sweep Code Login page background code

Public ActionResult Login ()
{
  //If logged in, direct jump to home
  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 authorization link
  viewbag.uuid = uuid;//save uuid return
  View () ;
}

Generate two-dimensional code using plug-in jquery.qrcode.js, want to learn more about friends please Github. One thing to note here is that the plug-in can specify how the two-dimensional code is generated, canvas, or table. Please specify to use table to generate

The code is as follows:

JQuery (' #qrcode '). QRCode ({
  render  : "Table",
  text  : "http://baidu.com"
});

Back to the point, the main code for the login page is as follows

<!--generating two-dimensional code containers div-->
<div id= "Qrcode-container" >
</div>

<script src= "~/plugins/" Jquery/jquery-1.9.1.min.js "></script>
<script src=" ~/plugins/jquery-qrcode/jquery.qrcode.min.js "></script>
<script>
  jquery (function () {
    //Generate two-dimensional Code
    jquery (' #qrcode-container '). QRCode ("@ViewBag. url");

    Polling determines whether the user authorizes the
    var interval = setinterval (function () {
      $.post ("@Url. Action (" Userlogin "," Home ")", {"UUID": "@ Viewbag.uuid "}, function (data, status) {
        if (" success "= status) {
          //user successfully authorized => jump
          if (" Success "= Data {
            window.location.href = ' @Url. Action ("Index", "Home");
            Clearinterval (interval);}})
      ;
</script>

Polling determines whether the user authorizes API code

public string Userlogin (string uuid)
{
  //Verify that the parameter is valid if
  (string). IsNullOrEmpty (UUID)) return
    "Param_error";

  Wx_userrecord user = db. Wx_userrecord.where (U => u.uuid = = uuId). FirstOrDefault ();
  if (user = null) return
    "Not_authcode";

  Writes the cookie
  formsauthentication.setauthcookie (user. OpenId, false);

  Empty uuId
  user.uuid = null;
  Db. SaveChanges ();

  Return "Success";
} 

Micro-terminal Authorization Action

Public ActionResult loginfor (string uuid) {#region Get basic information-snsapi_userinfo * * Create micro-Letter Universal class-The code is more complex here. I'll put the whole Demo on a bit later. Github */Wechatusercontext Wxcontext = new Wechatusercontext (System.Web.HttpContext.Current, UUID

  ); Use the micro-letter universal class to obtain user basic information Wxcontext.

  GetUserInfo (); if (!string.
    IsNullOrEmpty (Wxcontext.openid)) {uuid = request["state"]; Determine if the database exists 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 (user); } User.uuid =Uuid Db.
  SaveChanges ();
#endregion return View (); 

 }

Finally attached to the database table design

Nothing special, just the various parameters returned by the micro-letter plus one more of our custom uuId

For details of the micro-letter parameter please see the micro-letter developer Documentation

Run effect

1. Scan Code Login page

2. Requesting user authorization

3. User Confirmation Authorization

4.PC End Login Complete

Articles inevitably have deficiencies, but also please Haihan. If found wrong also hope that the message pointed out, I am grateful! Micro-credit Scan code registration Demo to the author after finishing put on Github hope to help more friends, please have the need of friends to pay attention to the article update.

The above is the PC-side micro-letter scan code registration and login instances, the need for friends can refer to, thank you for the support of this site!