Preface

Because I didn't want to publish some articles directly (perhaps they are relatively sensitive?), and using a password protection method felt a bit low... I remembered seeing some bloggers' VIP setup methods before, which seemed relatively high-tech, and thinking I might be able to use it in the future, I decided to make one myself. Since it involves a payment method, I naturally thought of applying for an official Alipay or WeChat payment code (such as Alipay's Face-to-Face Pay, the kind we usually use to pay the bill when eating out), but it seems that a business license is required for all of them now (it was said to be relatively relaxed in the past, but with the current economic situation, I guess even the smallest ant is still meat, so they won't let any slip by). I just want to do some research and set up a project, I can't go get a business license just for this, that seems a bit too much.

How about collecting money using personal codes from WeChat and Alipay? It doesn't matter when the amount is small and the number of transactions is low, but if there are many, it becomes troublesome:

What if I grow bigger and stronger in the future? After some more research, I found that WeChat's appreciation code and Alipay's merchant code can avoid risk control (at least for now, it's hard to say in the future), and the application is simple, taking only minutes.

However, using appreciation codes and Alipay merchant codes involves another issue, which is payment process control. For example, if user A of the website recharges 10 yuan, how does the website know if user A's scan payment was successful? If user B also recharges 20 yuan at the same time, how do we know which user recharged 10 yuan and which user recharged 20 yuan? Therefore, a system is needed to automatically complete the collection, confirm whether the payment is successful, and perform corresponding operations with the website users (originally, if it were an officially commercialized merchant code of Alipay or WeChat, it would provide these functions, so it is reasonable for them to charge a transaction fee...). After some research, I finally chose V-No-Sign (actually there is another one called xpay, which also has 4.6k stars on GitHub, you can try it if you are interested). This setup will be entirely based on the BT Linux Panel for source code installation, because indeed, using BT Panel for this installation is more convenient, and I also have an existing BT environment (used for reverse proxy). Of course, you can also use Docker; once you understand the concept, installing with Docker is actually the same.

---

Let's briefly explain how V-No-Sign works. V-No-Sign consists of two parts: the website and the monitoring client. When user A brings up the QR code payment page on the website and prepares to scan, the payment page will continuously request the payment result from the monitoring client. When the monitoring client monitors that the transaction is completed (there are many methods; the app monitoring client monitors notification bar messages, and the PC monitoring client monitors application notifications, such as AliWangWang and WeChat notifications), it will tell the payment page that the transaction is completed. The payment page will then determine which user (user A in this case) completed the transaction based on the transaction information sent back by the monitoring client, and then redirect user A to the page indicating successful transaction completion.

---

Building a V-No-Sign website using source code

Download the PHP version source code of V-No-Sign

The original author's GitHub URL is as follows:https://github.com/szvone/Vmqphp, this version can be used, but the recommended PHP version is 5.6-7.3. Actually, PHP 7.4 can also be used, but the following modifications are required:

/thinkphp/library/think/db/Query.php 第568行 value{0}改成 value[0]

Another modified version I used:
https://github.com/Jiu-ci/vmq, this one can directly use PHP 7.4:

Directly click the red box in the image above to download the zip package of the source code. If GitHub is inaccessible, you can also visit the following link to download:Invincible File Sharing, the access password is: ”blog.tangwudi.com”, just download the ”vmq-main.zip” file inside.

Install MySQL 5.6

Follow the steps below to install MySQL 5.6

Note: I prefer to use compilation installation, which takes longer but is safer. However, quick installation generally has no issues either; this is purely a personal habit, and the same applies below.

Install PHP 7.4

Follow the steps below to install PHP 7.4

Install and use phpmyadmin to initialize the database

Install phpmyadmin

Follow the steps below to install phpmyadmin

Initialize the database

Modify the default password of MySQL 5.6, assuming it is 123456:

Enter phpmyadmin:


Log in using the root account and the password set previously (123456 in this example):

After entering the database, there are only 3 databases by default. We need to create a database named vmq for V-No-Sign to use, as shown in the figure below:

Then click to select the newly created database ”vmq” on the left, and then click ”Import” in the red box on the right:

Click the ”Choose File” button in the box in the figure below:

Enter the folder after extracting the V-No-Sign zip package, select ”vmq.sql”, and then click Open below:

Finally, click the ”Go” button in the red box in the bottom right corner:

After success, you can see that the originally empty database ”vmq” already has 4 tables:

(Optional) Modify the root account hostname:
If you need to modify the accessible host of the root account, you can modify it in the red box below. However, in this example, the database is also installed in BT Panel, so accessing the database only requires accessing 127.0.0.1, and the default value localhost is fine, so no modification is needed.

Configure domain name resolution

Allocate an available domain name for the V-No-Sign site, which is vmq.example.com in this example (it can also have a non-standard port). Theoretically, it doesn't matter whether there is a 443 port, as long as the configuration website of the monitoring client supports non-standard ports (:port). Correct DNS configuration needs to be done at the domain provider. If it is only for testing in the local area network, achieving correct domain name resolution through hosts or dnsmasq is also fine.

Create a website using the downloaded source code

Add site

Upload source code to the site directory

The website folder path is:

/www/wwwroot/vmq.example.com

Use the file menu to upload the previously downloaded source code zip file:

Extract the source code zip package:


After extraction, enter the extracted folder:

Select all files and then cut them to the parent directory:


The final effect is as follows:

Configure website settings

Make the following settings:

SSL is configured as needed, recommended to configure.

Set up the database, modify the file as follows:

/www/wwwroot/vmq.example.com/config/database.php

If you followed the previous steps step-by-step, you basically only need to change the database password below; if not, modify it according to the actual situation.

Configure the website

Use http(s)://vmq.example.com to log in, the default username and password are both admin.

After logging into the system, the default interface is as follows:

Focus on introducing the system settings and monitoring terminal settings.

The system settings interface is as follows:

In the figure above, the asynchronous callback and synchronous callback are the communication addresses between the monitoring terminal and the website, and the addresses are as follows:

http(s)://vmq.example.com/example/notify.php #异步回调
http(s)://vmq.example.com/example/return.php #同步回调

The communication key is automatically generated by the system when logging in with the admin account for the first time. The communication key is required for communication between the monitoring terminal and the V-Sign website, as well as between the WordPress plugin and the V-Sign website.

For WeChat QR codes and Alipay QR codes, using personal codes directly is not impossible, but if the transaction amount is large, it is easy to trigger risk control. To avoid risk control, Alipay can use the merchant collection code (which personal users can upgrade to for free). WeChat has an appreciation code, but it seems V-Sign cannot recognize the appreciation code, so I am temporarily using the personal collection code for WeChat.

Monitoring terminal settings:

In the figure above, the monitoring terminal status is running normally because I have correctly configured the monitoring terminal, and it will only show running normally when the heartbeat is normal. Another key point is the configuration data, which is actually the website plus the communication key, similar to this in this example:
vmq.example.com/xdbdfdfdfsskldjfkThis format needs to be configured on the monitoring terminal.

Monitoring client configuration

Regarding the monitoring terminal, it is actually quite troublesome because there is no perfect solution, and it somewhat depends on luck. Currently, there are mainly two types: app monitoring terminal and PC monitoring terminal. The app monitoring terminal and PC monitoring terminal I have tried respectively are as follows:
App:https://github.com/shinian-a/Vmq-App
PC terminal monitoring:https://github.com/zh66y/vmqpc

The app monitoring method requires an Android system to install the APK. Since I don't have an Android phone, I installed an Android emulator (which others originally used for gaming~) to install it. The result was that everything looked normal on the app, but there was an issue with the final callback. After payment, the payment interface did not receive the payment success message sent by the app (although it was visible on the app). I really don't know if it was an issue with the Android emulator, and I didn't want to spend energy setting up an Android environment with Docker, so I eventually gave up. I looked at the reviews, and some friends can still use it, so this ultimately depends on everyone's choice.

I eventually implemented it using PC terminal monitoring. I won't write down the specific implementation details, as others have written them very clearly on GitHub. However, using this software requires getting a free authorization from someone, and there might be some minor issues. But their attitude is very good, and there is a group where usage issues can be discussed. I will use this for now and look for other good options later if I feel like it. However, when downloading, please be careful and try to use GitHub. One I tried from a search engine wanted to add a root certificate to my system as soon as I clicked it, and then wanted to redirect me to a website that looked like Alipay, and that website's certificate was issued by this root certificate~~~, too ruthless...

Testing

The website has a dedicated testing page, and the URL is as follows:

https://vmq.example.com/example/

However, to use this test page, you need to change the $key in the three pages main.php, notify.php, and return.php to your communication key in advance. The paths of these three pages are located at:

/www/wwwroot/vmq.example.com/public/example/

After modification, you can perform the test. For example, to test WeChat payment, directly click the payment in the figure above:

After using WeChat to scan the code and pay 0.1, if the monitoring terminal is normal, the following page will be returned:

At this time, the transaction records can be seen in the PC terminal monitoring:

At the same time, the actual received amount of this order can also be seen in the order list of V-Sign:

The same applies to Alipay.

Friendly reminder: WeChat requires registering a new account because the PC version of WeChat needs to be kept online for a long time in the PC monitoring terminal. Since Alipay can be replaced by Taobao Wangwang, there is no need to register a new account.

Configure public network access

If you want to publish to the public network, you need to choose the most suitable publishing method based on your actual environment and the reverse proxy you use. You can refer to several of my previous articles:
1、Docker Series: Building Your Own Reverse Proxy Based on NPM Using Docker
2、Linux Panel Series: Configuring Reverse Proxy and Publishing Using Non-443 Ports
3、Home Data Center Series: Getting Cloudflare for Free via Domestic ICP-Filed Cloud Hosts to Achieve Fast Access to Domestic Sites from Abroad
4、Home Data Center Series: Getting Cloudflare for Free via Home Broadband Without Public IP to Achieve Fast Website Building (Universal)

Among them, the 1st and 2nd methods are suitable for environments with a public IP but without a legal 443 port (home broadband, non-filed cloud hosts), where non-standard ports need to be added after the URL (if using Cloudflare to build a website, no port needs to be added, but you need to customize the origin server port, which you can refer to:Home Data Center Series: Solving the Problem of Having a Public IP but No Legal 80 or 443 Ports for Website Building via Cloudflare's Origin Rules). The 3rd method is suitable for cloud hosts with ICP filing, and the 4th method is suitable for all environments (including environments without a public IP), which is also my recommended method (regardless of whether your environment has a public IP, because this method does not require running HTTPS traffic directly on the public network).