Frontend Wechat Official Account Local Development Authorization Process (Illustrated)

Introduction:

Local development of frontend WeChat Official Accounts requires authorization to obtain a code that is necessary for login verification. This article will delve into the intricacies of this process, providing a comprehensive guide to help developers navigate the complexities of local development authorization.

Step-by-Step Guide:

1. Setting Up a Test Account:

• Register and verify a WeChat Official Account for testing purposes.
• Ensure that the account has the necessary interface permissions, including "jsapi_ticket" and "snsapi_base".

2. Configuring the Test Account:

• Log in to the WeChat Official Account platform.
• Navigate to the "Development" section and select "Basic Configuration".
• Copy the AppID and AppSecret of the test account.

3. Creating a Redirect URI:

• Register a domain name or use a third-party platform to obtain a domain name.
• Create a redirect URI on the domain name.
• Add the redirect URI to the "OAuth2.0 Redirect URI" field in the WeChat Official Account platform.

4. Obtaining the Code:

• Open a browser and navigate to the following URL:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base#wechat_redirect

• Replace "APPID" with the AppID of the test account.

• Replace "REDIRECT_URI" with the redirect URI created in the previous step.

• Click the "Authorize" button to grant authorization.

• After authorization, the browser will redirect to the specified redirect URI with a code in the URL.

5. Exchanging the Code for an Access Token:

• Send a GET request to the following URL:

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=APPSECRET&code=CODE&grant_type=authorization_code

• Replace "APPID" with the AppID of the test account.

• Replace "APPSECRET" with the AppSecret of the test account.

• Replace "CODE" with the code obtained in the previous step.

• The response will contain an access token and other information.

6. Local Development Configuration:

• In your local development environment, set the following environment variables:

APPID=YOUR_APPID
APPSECRET=YOUR_APPSECRET
ACCESS_TOKEN=YOUR_ACCESS_TOKEN

• Replace "YOUR_APPID" with the AppID of the test account.
• Replace "YOUR_APPSECRET" with the AppSecret of the test account.
• Replace "YOUR_ACCESS_TOKEN" with the access token obtained in the previous step.

Troubleshooting:

• If the authorization process fails, ensure that the redirect URI is correctly configured in the WeChat Official Account platform and that the domain name is accessible.
• If the access token exchange fails, ensure that the AppID, AppSecret, and code are correct.

Conclusion:

This comprehensive guide provides a detailed roadmap for authorizing local development of frontend WeChat Official Accounts. By following the outlined steps, developers can seamlessly obtain the necessary code and access token, enabling them to proceed with local development with ease.