In this blog, we started to implement webpage authorization login. To put it simply, we can open our page in the WeChat browser, and at the same time, we can obtain the information of the current login.
frame building
We have to build the framework first.
... building a framework...
Balabala (actually I spent some time fixing it), the project framework is ready. The address is https://gitee.com/valuetodays/weixin-oauth-code-optimization-demo/tree/tag-basic-framework, note that it is a tag.
The project is relatively simple, using tools such as SpringMVC, Spring, Maven, etc., no database is involved, and the web page made has no style. The jetty plug-in is used to start the service, and the start command is mvn clean package jetty:run -DskipTests.
The startup process can refer to my blog [ https://my.oschina.net/valuetodays/blog/1616934], which finally has a GIF dynamic diagram to demonstrate the operation process.
A few files to focus on in the project are as follows:
- The file src/filters/filter-dev-env.properties
should be explained. It is full of configuration information and needs to be modified as needed :
- APP_NAME project name (don't pay attention, the configuration here is the same as the project name)
- LOG_HOME log directory (the directory location of the log file, the windows system can not be modified, linux/mac can delete the previous 'c:')
- _appId WeChat appId, you need to change it to your own
- _secret WeChat secret, you need to change it to your own
- project_base_url The address of the public network environment project (this is the public network address after the project runs successfully, WeChat will send a request to this address, and the binding of WeChat public account only supports domain names, I use peanut shells, which is convenient for local debugging ^_ ^)
-
com.billy.weixinoauthcodeoptimization.controller.wx.WxmpBindController is
used by WeChat to send requests to the server. When there is a follow event and a follower sends a message to the official account, a message will be sent to the doPost() method of this class, but this blog does not focus on this, so I always return success to it. It should be noted that we will not pay attention to this class in the future. When you send text messages or emoticons or other messages to the official account, this class will print out some useful information. -
com.billy.weixinoauthcodeoptimization.util.wx
The files in this package are the encryption and decryption tools provided by WeChat. Again, we won't focus on this class. -
com.billy.weixinoauthcodeoptimization.task.AccessTokenTask This class is responsible for regularly refreshing AccessToken, we don't need to pay too much attention to this class
After the project is started, we visit http://localhost:23080/weixin-oauth-code-optimization-demo/wxmpBind/index. If "error config" is displayed, it means that the service starts normally (the error shows that the service starts normally, which is awkward. ; In fact, this method is for WeChat access, we will not access it). At this time, the following two configurations should be configured in the path of the WeChat public account background:
- Url should be configured as "domain name/weixin-oauth-code-optimization-demo/wxmpBind/index" in this project
- Token is configured as root6848azs1 in this project. This configuration is in the src/resources/server.properties file and can be filled in arbitrarily.
Attached a screenshot:
Whisperly speaking, I am using the WeChat test environment, which has less configuration and can only transmit messages in plain text. The official official account can use cipher text transmission, and the test environment is more convenient. The address is https://mp.weixin.qq. com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index .
Finally, it is emphasized that the project can start normally by modifying the src/filters/filter-dev-env.properties file. None of the components of these frameworks need attention anymore.
define requirements
No matter what we do, we must have a goal in mind, which is to define needs. If we want to make a public account, there is only one product browsing page for the time being, just this one page. This page has a requirement to display the openid of the currently logged in WeChat user on the page.
Now let's start writing code. Let’s start with the idea. We have a product browsing page, which corresponds to a GoodsController in the background. There will be a list() method in it, which will jump to a jsp page (such as goods/list.jsp). All we have to do is to look at the official documentation, come with a picture first
At this point, we will find a problem. When the user accesses /goods/list, he does not directly jump to goods/list, but first accesses another method. This method sends a user authorization request to WeChat and informs the user that he agrees. Then jump to goods/list. (This is my personal understanding, please forgive me for any inadequacies and please make comments)
Therefore, we add a GotoController, which has only one to() method for the time being, and receives two parameters, action and method, which represent the classpath and method path of the path to be accessed (action corresponds to /goods, method corresponds to /list), and also That is, when the user wants to access /goods/list, the path to be accessed by the user is /goto/to/goods/list. Note that the path here uses SpringMVC's @PathVariable to identify /goto/to/action/method.
At this time, WeChat will redirect to goods/list with the code parameter, and we will use the code to obtain the access_token, and will also give our users the unique identifier openid under the official account, (the document says, when When the scope is snsapi_userinfo, the user information is pulled, but when I tested it, I found that the scope of snsapi_base can also call the interface in step 4).
Code writing and testing, running
The idea is here, the following is the coding time.
…… ……
The code is written, in this tag https://gitee.com/valuetodays/weixin-oauth-code-optimization-demo/tree/tag-1.0-getInfo-simply .
In fact, the test number can be added to the menu, but for the sake of simplicity, we do not use the menu to access our page, but directly click the web link. We send the following http://k16048m998.imwork.net/weixin-oauth-code-optimization-demo/goto/to/goods/list to the official account (please replace it with your own domain name address), and then click this on WeChat link to see the page.
As we said in the first blog, the first version will complete the function but will leave a problem. This problem is that when the user sees the goods/list.jsp page and clicks refresh in the upper right corner, it will no longer be available. openid. The problem is that when accessing /goto/to/goods/list, two accesses are accessed: one is /goto/to and the other is /goods/list, and when the page is refreshed, only /goods/list is requested ( There is also a code parameter at this time), but there will be an error on WeChat code been used, so the openid cannot be obtained. To solve this problem, you can only jump to the /goto/to method when refreshing the page, but it is very unrealistic. But we can solve it in another way, which we will talk about in the next article.