preface

Software development is now facing not only front-end fragmentation, but back-end fragmentation as well. For front-end fragmentation, CabloyJS provides a cross-end adaptive solution of PC = Mobile + Pad, see: Adaptive Layout: PC = Mobile + Pad

Here, the focus is on back-end fragmentation. For example, to develop a business system, it needs to integrate with WeChat, enterprise WeChat, and staple. How to design the whole architecture?

In fact, no matter WeChat, enterprise WeChat, or nail, the API facing the actual business level is not complicated, the complex is how to get through the independent account system and the business system. When the account interface is completed, the subsequent business development will be very smooth

CabloyJS designed a completely separate user system and authentication system mechanism, so that a user can bind multiple login methods. Furthermore, these different login methods are dynamically plugged into the system through the Provider component. Therefore, the rest of the work is in accordance with the Provider way to docking WeChat, enterprise WeChat and nail

Reference to related articles

  • Cabloy- Generic authentication mechanism
  • Cabloy – WeChat
  • Cabloy- Enterprise WeChat
  • Cabloy – nailing

What’s Cabloy minus WeChat

Cabloy-WeChat is a WeChat interface module developed on the basis of CabloyJS full-stack business development framework. At present, it integrates the interface of WeChat official account, WeChat Web login and WeChat applet to achieve the use effect out of the box. On the basis of Cabloy- WeChat, it is very convenient to develop all kinds of WeChat business systems

The core target

The most complicated part of WeChat development is the account system docking, such as:

  1. inMessage push systemTo register a new user
  2. throughWebsite loginTo register a new user
  3. throughWeChat applet log inTo register a new user
  4. If you enableWeChat Open Platform, how to passunionidAssociating the same user
  5. If the system has been running for a while, enable it againunionidMechanism, if associated with an old account

Once the account systems have been connected in these scenarios, the real business development is simple

Therefore, the core goal of the cabloy-WeChat module is to automate the account system docking in these scenarios. All we need to do is provide some configuration parameters, and then we can happily start the development of business logic

features

Based on the convenience and flexibility provided by the CabloyJS full-stack framework, cabloy-WeChat has the following features:

1. One-stop integration

Currently, the interface of WeChat official account, WeChat Web login and WeChat applet is integrated, as follows:

scenario The name of the instructions
WeChat official account Message push system Automatic completion of interface docking, and automatic user registration
WeChat official account Website login Automatic jump WeChat login, and automatic user registration
WeChat official account Web JSSDK Automatic injection of JSSDK and automatic configuration
WeChat Web login You only need to provide AppID and AppSecret to automatically complete login interface docking
WeChat applet The system of the service Automatic completion of interface docking
WeChat applet Background login interface Automatic completion of interface docking, and automatic user registration
WeChat applet The front-end SDK Provides SDK for WeChat applet front end to access CabloyJS backend API directly
WeChat Open Platform unionid Automatic matching accounts, automatic collection

2. Out of the box

As long as the WeChat account parameters are configured, all interfaces will be automatically connected

3. Collect automatically

We know that the UnionID mechanism provided by WeChat open platform can provide the same identity for WeChat public account and WeChat small program. But in the actual scene, often first developed and deployed WeChat public number and WeChat small program. At this point, the user accounts for both are separate. So when we configure the UnionID mechanism for the WeChat open platform, the previously separate user accounts will be automatically merged. This mechanism is called automatic convergence

4. More small program support

WeChat public number can be associated with multiple WeChat applets, therefore, the module also provides multi-applet support. If the UnionID mechanism is enabled, these applets can also achieve unified identity access

5. Multi-tenancy/multi-site support

The multi-instance feature provided by CabloyJS enables multi-tenancy/multi-site support, such as WeChat services for different enterprises. See also: EggBornJS: Multiple Instances

New CabloyJS project

Before proceeding with the subsequent module installation, you must first create a CabloyJS project

Be sure to follow the documentation steps to configure the MySQL database connection parameters and the Redis connection parameters

See also: Guidelines: Get Started Fast

Install the WeChat module

Install WeChat module a-wechat

$ npm i egg-born-module-a-wechat

Install the WeChat test module (optional)

The WeChat test module is used to demonstrate how to carry out specific business development on the basis of module A-Wechat (at the same time, it includes the demo program of WeChat small program). There are two ways to use the WeChat test module:

1. Install to node_modules

If it’s just a preview, you can install it directly into {project}/node_modules

$ npm i egg-born-module-test-wechat

2. Installed insrc/module

You can install the test module into {projecct}/ SRC /module and then build on that module for custom development

$ mv {project}/node_modules/egg-born-module-test-wechat src/module/test-wechat

Configure the WeChat parameter

Configure the parameters of WeChat public account, Web WeChat login and WeChat applet directly in the project configuration file

src/backend/config/config.default.js

// Modules config. Modules = {'a-wechat': {account: {// WeChat public: {appID: 'wxf27f7550a33caaaa', appSecret: 'bbbb6a3addddbccccc200f973e91aaaa', token: 'CabloyJS', encodingAESKey: 'qHvLnaaaabufbbbbIbkRBcccctxUIBGddddCo5aeeee' message: {reply: {/ reply/default default: 'You are welcome! Subscribe: 'You are subscribed! ', // Subscribe when subscribing to a public account ',}}}, / / web login web: {appID: ' ', appSecret: "',}, / / WeChat applet minis: {default: {appID: 'wx823df04764b9bbbb', appSecret: 'c2eaaaada3bbbbe4073cccc381bbdddd', token: 'CabloyJS', encodingAESKey: 'kakPaaaa48mbubbbbRe0w0ccccGbj1v0rWowctVdddd', }, }, }, }, };
  • account.public: WeChat official account
  • account.web: Support WeChat login Web site, need to pass in advanceWeChat Open PlatformTo apply forWeb applicationGet AppID and AppSecret
  • account.minis: Support multiple WeChat applets. For practical development convenience, we provide one by defaultdefaultSmall program. If you need to develop other WeChat applets, go directly to themminisAdd a new configuration

run

Start the back-end services

$ npm run dev:backend

Start the front-end service

$ npm run dev:front

Nginx configuration

Because WeChat application must bind the domain name. To support development debugging, there can be different strategies. If we want to configure the development environment on the server and then reverse proxy the front-end services and back-end services to the front-end via Nginx, see: Nginx Configuration

How to access the system

1. Enter the background management page

  • Website: http://yourdomain.com/
  • User name: root
  • Password: 123456

2. WeChat official account webpage

In WeChat or WeChat developer tools directly visit the home page, the system will automatically WeChat login

  • Home page: http://yourdomain.com/

3. WeChat Web login

Direct access to the home page in the browser, the login page will automatically display WeChat login button, click the button, you will display two WeChat, through the mobile phone WeChat scanning, automatic login

  • Home page: http://yourdomain.com/

WeChat small program development

Test module Test-Wechat has included a WeChat small program demo program, the use of the steps are as follows:

  1. inWeChat Developer ToolsDirect import demo program in, directory path:{project}/src/module/test-wechat/front/demo/miniprogram
  2. Modify the appletappid, file path:{project}/src/module/test-wechat/front/demo/miniprogram/project.config.json
  3. Modify initialization parameters:

{project}/src/module/test-wechat/front/demo/miniprogram/app.js

// initialize cabloy const cabloyOptions = {base: {scene: 'default', locale: 'en-us',}, API: {baseUrl: 'http://yourdomain.com', }, }; this.cabloy = Cabloy(this, cabloyOptions);

The default corresponding to the default applet, if you want to develop other applets, just change the following parameters

The name of the instructions
base.scene The name of the applet scene, default todefault
base.locale The default language used by the front end
api.baseURL The API address of the back-end service

A link to the

  • Website: https://cabloy.com/
  • GitHub: https://github.com/zhennann/cabloy