Just 6 steps, teach you to develop a sign-in applet from scratch

Abstract: aimed at small programs with instantaneous traffic and relatively simple business scenarios. With the help of FunctionGraph, developers can quickly and easily build a robust small program backend.

This article is shared from the HUAWEI cloud community " smart campus wants to do well, FunctionGraph is indispensable-from zero development sign-in small program so easy! ", author: a programmer.

background

When building apps in the smart education field, Huawei romalab laboratory used FunctionGraph as a pilot and tried to develop a sign-in applet based on FunctionGraph cloud functions. For small programs with instantaneous traffic and relatively simple business scenarios, developers can quickly and easily build a robust small program backend with the help of FunctionGraph.

Non-logging solution design and front-end and back-end communication logic

Program overview

After the app is logged in, the applet will be opened. If the user system of the applet and the app is consistent, the user does not need to log in again. When accessing the mini program for the first time, call the non-logging interface of the smart campus app to obtain user information, and then the mini program builds its own login status. Since the cloud function itself is a stateless service, it needs to use an authorization server (or issue jwt) to implement its own interface authentication.

The applet carries the ticket when calling the back-end business interface.

Interactive flow chart

(Note: The smart campus app is built based on Huawei’s internal mobile enabling platform OneMobile. Here, OneMobile can be understood as a smart campus app)

Process description

Process description:

1. Open the sign-in applet and call getToken() to get the ssoTikect ticket information
2. The applet passes ssoTicket into the authentication function A, calls the open platform interface of the smart campus app in A, and obtains the current user information according to ssoTicket
3. After getting the user information, generate a ticket token based on the user information and return it to the applet
   

The applet calls business function B and carries the token in the request
After business function B gets the request, it verifies the token and exchanges user information
After the verification is passed, the business function is executed according to the obtained user information, and the result is returned

Business realization

Role Rights Management Strategy

The smart campus app itself has a strict permission control system for the mini program, which can control the visibility of the mini program in the dimensions of users, organizations, and positions. Since the business scenario of sign-in and clock-in is relatively simple, and personnel have obvious role characteristics, the teacher sets sign-in rules, and students scan the code to sign-in.

In combination with the current status quo, this time the sign-in applet no longer builds its own authority management system, but relies on the authority system of the smart campus app itself. Two small programs are provided, one is the "Teacher Calling Call" small program used by teachers to assist teachers in generating sign-in QR codes. One is the "sign-in and clock-in" applet, which is used for students to sign in for class. The smart campus app controls the users of the mini program at the entrance.

App scan code sign-in implementation

How to sign in

Sign-in is performed by scanning the QR code. When scanning the code, the information obtained by scanning the code is transmitted to the backend. The back-end compares the course information in the QR code with the sign-in rules and returns the sign-in result. The applet shows different pages to users according to different check-in results.

How to scan code

There are currently two entrances for scanning codes, one in the applet and the other in the upper right corner of the app. Both call the system's code scanning capabilities.

Since scanning the code on the app can enter the sign-in applet and sign-in, the sign-in QR code must not only carry the course information, but also the information to open the applet.

How to scan the code to enter the mini program

The scan capability of the Smart Campus app has pre-built some general capabilities. When the result of the scan code is a certain fixed type of data format, some operations will be automatically completed.

For example, the scan code can identify the data format of opening the applet: native://openapp?data={"appid":"88157779"}, and the ability to open the applet is actually xm.openApp() that encapsulates jssdk ability. xm.openApp() allows developers to open another applet in one applet.

App scan code sign-in code implementation flow chart

FunctionGraph realizes sign-in business

The development function supports multiple language types, such as nodejs, python, java, etc. In the back-end logic, in addition to the normal business logic (such as interacting with the database), the most important thing is the interaction with the smart campus app, such as obtaining user information. The form of interaction is interface call, which can be realized by directly referencing the packaged client. Taking the nodejs development language as an example, you can directly import the npm package.

Develop back-end function logic

Authentication function

After the app is logged in, the applet will be opened. If the user system of the applet and the app is consistent, the user does not need to log in again. However, how the applet wants to get the users who currently use the App without logging in, it needs to use the app interface to achieve non-logging. The role of the authentication function is to obtain the user of the current app, and to be able to issue the custom login status of the applet, such as issuing a jwt

The input parameter of the authentication function is the ssoTicket obtained from the app by the front end of the applet.

The specific implementation is as follows:

1. Get the api of the smart campus app to call the SDK code, execute npm pack to package, generate OneMobileSDK-0.0.1.tgz, install the dependency in the new project npm install OneMobileSDK-0.0.1.tgz, and then compress the node-modules file into a zip , Upload it to the dependency warehouse of FunctionGraph. Add this dependency when creating the function.

a. Create a dependency package

b. Upload dependent files

c. Add dependency

2. Refer to step 1, add the dependency of mysql-node to the dependency warehouse of FG, and add the dependency when creating the function.

3. Call getUserInfoBySsoTicket(ssoTicket) in OneMobileBaseSDK to obtain user information

a. Quote the SDK in the code

b. Call the interface

4. Verify user information.
5. According to the obtained user information, the calling voucher of the business interface is generated and returned to the front desk of the applet.

Sign-in function

Regarding the sign-in function, the operation process is similar to the authentication function, so I won’t elaborate on it here. The main process is as follows:

1. When creating a function, add mysql-node related dependencies
2. Check-in information
3. Store the check-in result into the warehouse
4. Return the check-in result to the applet

Interface open

After the function is developed, you need to open the function to the applet. The specific operation steps are as follows.

1. On the function details page, click the trigger tab
   

2. Create a trigger, select APIG as the trigger type. Since there is authentication logic in the code, the gateway layer does not do authentication

3. Get the created APIG call address, the front end of the applet can call the corresponding rest interface according to business needs.

Summarize

Issues identified during the development of the Mini Program

Smart campus app

1. In FullCode mode, the problem of page fragmentation needs to be solved urgently. The smart campus app lacks page preview tools and common component libraries.
2. The non-logging interface can only be called in the container, and some interfaces strongly rely on ssoTicket during debugging. The ssoTicket can only be obtained by integrating the vconsole and then executing the getToken() command in the mobile phone.
3. There is no debugging environment inside the company, and the public network needs to be transferred to the open platform every time for commissioning, which is very troublesome to operate.
4. Documents still need to be completed, some unconventional capabilities, such as the function of scanning code to open a small program, do not have corresponding document support
5. Lack of a solution to support a set of front-end commissioning and multiple environments

FunctionGraph

1. The code is distributed in three places: the front-end code is hosted and run by the smart campus app, the gateway api is directly configured in APIG, and the function code is in Function. After the function is debugged successfully, it would be better if there is a key to archive (or download) function or download tool. Similarly, I hope there is a tool with one-click deployment function.
2. The current encryption configuration granularity is a single function. Take the connection to the database as an example. If multiple functions connect to the same database, each function needs to add the database account password encryption configuration, which is cumbersome and cannot guarantee data consistency.

Ability to be improved

Smart campus app

1. Refer to WeChat and ask the IDE team for help to provide small program development tools
2. Refer to welink to provide developers with open platform debugging tools, and one-click to generate interface call codes in different languages
3. Build a dedicated cloud development platform for mini programs. Mini program traffic goes through the gateway of the App base to open up various cloud services. The authentication between services is undertaken by the development platform. Mini program developers are more focused on building business capabilities.

FunctionGraph

1. Able to solve the problem of integration of function development, deployment, and release (to APIG) through the function application lifecycle management function
2. Able to realize user or tenant level configuration sharing

Reference documents:

https://support.huaweicloud.com/usermanual-romalab/lab_03_0001.html

https://www.huaweicloud.com/product/functiongraph.html

Click to follow, and learn about the fresh technology of Huawei Cloud for the first time~