This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

I’m going to develop a skin/model download site for the Rainbow Fart wife plugin, which needs a user system. But I’m too lazy to develop a complete registration, user activation mechanism.

However, at that time, my first reaction was that I could use the scanning code of wechat public account to log in, but the scanning code login interface of the public account must be the service number. The registration of service number must use business license to go enterprise attestation again, anyhow more troublesome. At that time, my small program ape creation aggregation assistant had been released, so I was thinking, can directly use the interface of small program code to design a scan code login process?

How to implement

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

Using the interface wxacode.getunlimited, we can generate an infinite number of small code, although the interface carries some parameters, but does not affect the implementation of the whole logic.

The login logic of scanning small program code is as follows:

Core Technical Points

Generate a timestamp signature

The timestamp signature generated on the Web side must be unique; if there is a non-unique signature, the user login will be messed up. The getUnlimited interface used to generate the small program code only allows to carry a scene parameter with a length of less than 32 characters.

There are many ways to ensure uniqueness for GUIDS/UUids, but in this case, the applets are limited in the number of characters that can carry arguments, so none of the usual options are suitable. Finally, I found the nanoid program, which is very suitable for my needs.

/* A small, secure, URL-friendly, unique JavaScript string ID generator. "An astonishing level of pointless perfectionism that is impossible not to admire." ** Compact.** 130 bytes (compressed and gzipped). There is no dependency. [the Size Limit] (https://github.com/ai/size-limit) to control Size. ** Fast.** It is 60% faster than UUID. ** Security.** It uses an encrypted strong random API. It can be used in clusters. ** It uses A larger alphabet than UUID (' a-za-z0-9_ - '). As a result, the ID size is reduced from 36 symbols to 21 symbols. ** Nano ID has been ported to [19 kinds of programming language] (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"
Copy the code

Generate small program code

Note here that on the Web side we display the resulting applets in the web page by calling the interface that generates the applets. Scene is an immutable parameter name that contains the timestamp signature.

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;
}
Copy the code
  • Scan the applets for signatures

After using wechat to scan the small program code, it will enter the small program and open the specified page(page within the small program). The scene parameter can be obtained in the onLoad event of the 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) = >{}})})}Copy the code

What is realized in the above code is that the code is obtained through the login interface and used to request the Code2session interface to exchange the openID of the applet user. When this step is completed, the user login is completed in the applet.

And then how do you synchronize that information to the Web? This is the LoginToken. I write it to the same user table data entry as OpenID. Then the Web side polls the user table using LoginToken and returns the matching data to the Web side to complete the login on the Web side

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})})}Copy the code

Now that we have completed the mini code scanning login mechanism, users can also increase the number of mini program users and daily active users when they log in to the site.

The source code

The realization of all the above technical solutions, are in the “# 🎑 in advance I wish you a happy Mid-Autumn Festival, teach you to do a [Mid-Autumn Lantern wish] 💖 website” case can be experienced, the source is also in the experience website.

My name is Da Shuai, an old programmer.

Let everyone happy learning programming is my ideal

Thank you for your encouragement and support 🌹🌹🌹

  • Dedicated to all technical content creators ~ Ape creation aggregation assistant applets development difficulties analysis 4 praise
  • It took 60 seconds for Vue3 to mention PR, and it was actually merged by Utah
  • Product Manager: Can you use div to draw me a dragon? 2402 great
  • Three kinds of front end to achieve VR panorama house! You might need it some day! 2686 great