Technical realization of web site scanning [mini program code] login

foreword

I am going to 彩虹屁老婆develop a skin/model download website for the plugin, which needs to have a user system. But I 懒have to develop a complete registration and user activation mechanism.

However, my first reaction at the time was that I could use the WeChat official account to scan and log in, but the official account’s scan code login interface must be a service account before it can be used. The registration of the service account must use the business license to go through the enterprise certification, which is more troublesome. It just so happened that my applet had been released at that time, so I was thinking, can I directly use the interface of the applet code to design a set of scan code login process?

How to achieve

After some thinking and research, I determined that the following way is feasible

Using the interface wxacode.getUnlimited for generating small program codes, we can generate an unlimited number of small program codes. Although the interface carries some restrictions on the parameters, it does not affect the realization of the entire logic.

The login logic of scanning the applet code is as follows:

Core technology

Generate a timestamp signature

The timestamp signature generated on the web must be unique. If there is a non-unique signature, user login will be messed up. The interface used to generate the applet code getUnlimitedonly allows one sceneparameter, and the length is required to be within 32 characters.

There are many GUID/UUID solutions to ensure uniqueness, but in this example, the number of characters carried by the small program code is limited, so common solutions are not suitable. The last thing I found was nanoid, which fit my needs very well.

/*
一个小巧、安全、URL友好、唯一的 JavaScript 字符串ID生成器。

“一个惊人的无意义的完美主义水平, 这简直让人无法不敬佩。”

**小巧.**  130 bytes (已压缩和 gzipped)。 没有依赖。 [Size Limit](https://github.com/ai/size-limit) 控制大小。
**快速.**  它比 UUID 快 60%。
**安全.**  它使用加密的强随机 API。可在集群中使用。
**紧凑.**  它使用比 UUID（`A-Za-z0-9_-`）更大的字母表。 因此，ID 大小从36个符号减少到21个符号。
**易用.**  Nano ID 已被移植到 [19种编程语言](https://github.com/ai/nanoid/blob/main/README.zh-CN.md#%E5%85%B6%E4%BB%96%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80)。
*/

import { nanoid } from 'nanoid'
model.id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"

Generate applet code

What needs to be noted here is that we display the final applet code on the web page by calling the interface that generates the applet code on the web. sceneIt is an immutable parameter name, and the time stamp signature is placed in the parameter content.

async function getWXACodeUnlimited(scene,page){
 const access_token = await getAccessToken();
 const res = await uniCloud.httpclient.request("https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token="+access_token,{
  method:"POST",
  headers:{
   "Content-Type":"application/json"
  },
  data:{
   scene:scene,
   page:page
  }
 });
 
 return res.data;
}

• Scan the applet code to get the signature

After using WeChat to scan the code of the applet, you will enter the applet and open the specified page(page in the applet), and onLoadyou can get scenethe parameters in the event of this page.

onLoad(options) {
    var scene = options.scene;
    var loginToken;

    if(scene){
      loginToken = scene;
    }

    wx.login({
        success: (res) => {
            cloudApi.callFunction({
                name:"users",
                data:{
                    action:"login",
                    code:res.code,
                    logintoken:loginToken
                },
                success: (res) => {
                    
                }
            })
        }
    })
}

What is realized in the above code is that loginit is obtained through the interface codeand is used to request code2sessionthe interface in exchange for the user of the applet openid. After this step is completed, we have completed the user login in the applet.

Then how to synchronize the information to the Web side? This is it LoginToken, I write it to openidthe same user table data entry here, and then the web end will loginTokenpoll the user data table, find the matching data and return it to Webthe end, and complete Webthe login of the end

if(loginToken){
    await db.collection("users").where({
        openid:dbCmd.eq(openid)
    }).update({
        lastlogin:Date.now(),
        loginToken:dbCmd.set({
            value:loginToken,
            expiretime:Date.now()+60*3*1000000
        })
    })
}

Now that we have completed the login mechanism of scanning the applet code, when users log in to the website, the number of users and daily active users of the applet can also be increased.

---

My name is , a program 大帅who loves programming .老猿