First, functional logic

1. The user opens a webpage link in wechat;


2. Obtain and display the user’s profile picture from the web page;


3. The web page automatically splices the user’s head picture and the enterprise logo together;


4. Long press the assembled picture to download the picture, which can be used as the user’s profile picture.


Second, effect display



Three, implementation logic

Function is very simple, here is the logic, not code.

https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope =snsapi_userinfo&state=STATE#wechat_redirect



2. After the user agrees to authorize the user, the user is displayed on the page
codeRedirect to incoming
redirect_uriPage developed by us.
3. In this page we can get parameters from the URL
codeThat will be
codeBack-end request user profile information sent to us.
4. The back-end connects to the interface
https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${code}&grant_type=authorization_ codeTo obtain
access_tokenwith
openidAnd then through the
https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CNGet user information, and finally get the information back to the front page.
5. After receiving the user information, the front end displays the user profile picture and uses the CSS to superimpose the user profile picture and enterprise logo.
6. The front end passes
html2canvasChange the avatar display effect to use
canvasElement display through the call
canvas.toDataURL('image/png')generate
base64Picture and use
imgElement to display the image, the user long press the image to download.

Iv. Wechat public account configuration

Before did not use the wechat public number of web page authorization interface, this time is really increased a lot of knowledge, even if it is such a small demand, it is worth me to record the development of the heart of the process. It took half a day to realize and 1 day to debug the configuration of the public number. So let’s look at what needs to be configured in the wechat public number.
  1. It must be a service number authenticated by wechat, not a subscription number.
  2. You need to obtain this parameter in “Development – Basic Settings”AppIdAnd apply toAppSecret;
  3. Need to be in “Development – Basic Settings”redirect_uriThe IP address corresponding to the domain name is added to the IP address whitelist.
  4. You need to apply for the “Web page Authorization to Obtain basic User Information” interface in “Development-Interface Permission”.
  5. It needs to be configured in “Public number Settings – Function Settings – Webpage authorized domain name”redirect_uriDomain name, with web page authorization domain name can see the need to configure a TXT file toredirect_uriDomain name under the root path;
  6. If you need to use the wechat developer tool for debugging, you need to send a binding invitation to the developer’s wechat in “Developer Tools – Web Developer Tools”.

Five, think

Finally, let’s think about how to configure the wechat webpage authorization function used in this paper.
  1. WeChat public platform is described, the service number is “for enterprises and organizations to provide more powerful business services and user management ability, help enterprise quickly to implement new public service platform”, subscription number is “for the media and individuals to provide a new way of information dissemination, build and better communication between the reader and the management pattern”. It can be seen that the subscription number is partial to information dissemination and the service number is partial to the business platform, so it is reasonable that the service number can provide wechat login but the subscription number cannot. As for wechat authentication, in order to determine the authenticity of the subject using wechat user information, it is necessary to sign an agreement to provide guarantee for the correct and safe use of wechat services by the enterprise organization.
  2. AppIdIs publicly available, like a public key;AppSecretIt’s strictly confidential, like a private key. useAppId, you can obtain an opportunity to obtain user information on the client. This opportunity is time-limited and can only be used once. It needs to be exposed because it needs to be sure that the user triggered it to give the enterprise an opportunity to do soAppId. Enterprises get this opportunity, they can use the private keyAppSecretGo to the wechat background to obtain user information.AppIdwithAppSecretIt’s related, so somethingAppIdGenerated opportunities must be correspondingAppSecretUse to prevent leakage.
  3. The IP address of the redirected domain name is whitelisted to ensure that the caller who calls the wechat interface to obtain user information is the same as the user who uses the opportunity.
  4. When applying for the opening of some special interfaces, the applicant can be informed of the responsibilities of using the interfaces.
  5. The redirection domain name control can also ensure that the client is really developed by the enterprise.
  6. This limits the use of web developer tools, where developers cannot debug client functions that are not authorized by the corresponding service number.

OK, finished, the above is my wechat avatar generator development experience, if there are mistakes, please correct ~