Recently, I made an H5 project using wechat service number webpage authorization, and a small program project, so THAT I had a little understanding of wechat authorized login and recorded some small experience. The following contents are mostly organized official documents.

Wechat login ability official introduction

UnionID Mechanism description

Service number web page authorization official document

Use wechat to log in to official documents on the PC website

Service requirements: There is an APP or H5 application, and the login method includes account password login and SMS verification code login. The user is uniquely identified as a mobile phone number. New requirements: it is necessary to develop small program application, add wechat authorized login mode in H5, and aim to achieve multi-terminal data communication and convenient login mode.

Several wechat login ability description

  • APP, need to create mobile applications on wechat open platform
  • For the PC website application, you need to create the website application on wechat open platform and configure the authorization callback domain in the application details
  • For H5 in the wechat client, you need to register the wechat service number and configure the webpage authorization callback domain name on the corresponding wechat public platform. For those who need to use unionID, bind the public account on wechat open platform
  • Small program, registration small program, need to use unionID, in wechat open platform binding small program

According to the introduction of wechat login ability, the H5 wechat authorized login in this requirement is applicable to the development of wechat service number webpage authorization. Since this requirement requires unified user accounts in APP, mini program and H5, unionID is required.

About the UnionID mechanism

Unionid is the identity of a user for the same main wechat mini program/public number/APP. The same user, different applications under the same wechat open platform (mobile application/website application/public account/small program), unionID is the same. If the developer has multiple mobile applications, website applications and public accounts, the unionID can be obtained to distinguish the uniqueness of users and achieve multi-terminal data communication.

Wechat service number webpage authorization

Preparations before development: 1. Configure the webpage authorization callback domain name on the wechat public platform corresponding to the service number: Settings – Public number Settings – Function Settings – Webpage authorization domain name. Pull-up service number Indicates the domain name that can be jumped back after authorized login. The domain name must not contain a secondary directory. The callback address must be the path under the domain name.

1. The domain name must be registered by ICP. IP address, port number and short chain domain name are not supported. 2. Only two web page authorized domain names can be configured for one service number. 3. The interface of "Obtaining Basic User Information through Webpage authorization" cannot be opened on the subscription account, and authorization cannot be used to log in.Copy the code

2. Bind the public account on wechat open platform: wechat open platform management center – public account – bind the public account. After binding, the relevant interface can return the unionID

Service Number webpage authorization process:

1. Direct the user to the wechat authorization page to approve authorization and obtain the code. After the user agrees to authorize, wechat redirects the page to the specified redirect_URI and concatenates the code into the redirect_URI. redirect_uri/? Code = CODE&state = STATE. Wechat authorization page link format:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state =STATE#wechat_redirect
Copy the code

Example: original redirect_uri: https://xxx.com/xxx/#/wechat-login?key1=value1 (Since vue-Router hash mode is used in the front end of this project, the # number is in the path, and the code and service parameters are obtained later. Use this.$route.query and location.search.

Wechat authorization page after splicing parameters:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=https%3A%2F%2Fxxx.com%2Fxxx%2F%23%2Fwechat-login% 3Fkey1%3Dvalue1&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
Copy the code

Allow wechat authorization after redirection and splicing code path: https://xxx.com/xxx/?code=CODE&state=STATE#/wechat-login?key1=value1

Because only two authorized web domain names can be configured, you can set the test environment domain name and official environment domain name. If you want to test the function locally, you can use the test domain name as the redirect_URI. After getting the code, the front end uses location.href to carry the code to the local IP and handle the subsequent logic.Copy the code

  • Redirect_uri: HTTPS links should be used to secure the authorization code; through? key=value&Splicing service parameters for service processing after login.
  • Code: Code is used as the ticket for exchanging access_token. The code on the authorization strip is different each time. The code can be used only once and will expire automatically if it is not used within 5 minutes.
  • Wechat will conduct regular strong match verification for the authorized links. If the parameters of the links are not in the right order, the authorized pages cannot be accessed normally.

2. The access_token front-end obtains the code and sends it to the background. The background uses code to interact with the wechat server to obtain the Access_token and OpenID, and then uses the Access_token and OpenID to exchange user information and return it to the front-end. The authorized login is complete.

After binding the service number to wechat open platform, the user information obtained by the back end will contain the UnionID field. Obtaining the unionID is independent of whether the user cares about the service number, as long as the user agrees to authorize, the backend can obtain the unionID.Copy the code

Above, welcome to discuss, if there are mistakes, welcome to correct, I hope to help you 😀