A brief analysis of automatic login to the Web App in WeChat

[[147316]]

I first saw the WebApp automatic login function in Tower.im's official account, and wanted to make one with the same effect. At that time, I was not familiar with official account development, and I asked some people but they didn't explain it clearly. The documentation was messy, and it took me a long time to implement it. The interface required for this function is "Web authorization to obtain user basic information", and you need to authenticate the enterprise account to use it. If you don't have permission, you can try WeChat Gate. I only know about this thing, but I have never tried it.

The basic idea is to obtain the user's WeChat openid through the official account OAuth API. Let the user log in when using it for the first time, and then match the openid with the userid of your own application in the database. After obtaining the user's openid, you can automatically log in to the corresponding user.

My Web App is a SPA implemented with AngularJS. After logging in, I get a token and store it in localStorage. When sending a request to the backend, I write the token in the Authorization of the Header.

Cookies are not required in this process, but in order to reduce the number of jumps, cookies are still used. I wrote the functions related to WeChat login in several PHP single pages, used a redirect.php as the entrance, put the page to jump to in the parameter, and redirect.php checked whether the user had obtained the token, and jumped to the target page after obtaining the token.

The login flow chart is as follows:

The operations related to WeChat are in the second and third rows.

WeChat's OAuth authentication method is to let the user open such an address in the WeChat client: https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect. The WeChat authentication server will guide the user to jump to the specified REDIRECT_URI and add a CODE parameter after the URL.

For example, if you want to get the user's information on the http://example.com/redirect.php?type=post page, use isset($_GET['code']) in the page to determine whether the code parameter exists.

If it does not exist, let the user visit https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=http%3a%2f%2fexample.com%2fredirect.php%3ftype%3dpost&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect. (Note that the URL must be UrlEncoded when used as a parameter)

The WeChat server will redirect the user to http://example.com/redirect.php?type=post&code=CODE. Developers can get CODE from the URL parameters.

Then the developer can take this CODE and go to https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code to exchange for the user's openid.

After getting the openid, you can determine whether the user has been bound and proceed to the next step.

If you need more information such as the user's nickname and avatar, you need to change the scope parameter in the first URL to snsapi_userinfo. For more information, see the WeChat development documentation.