Wechat silent authorization process related problem process record

• Related tools

  • Intranet penetration tool

    • Peanut hull

    There is free 1G traffic per month, but I need to hold my ID card to take photos and upload. It's too troublesome to use.

    • natapp

    Easy to use, you need to scan the real name with Alipay.

    • other... Other friends also recommended some, but the function has been completed.

  • Wechat debugging tool

    • new edition

    The new version is that small programs can be debugged, but the screenshots of the publicity page are too different from the previous version of the official account official account.

    Download links

    • Old version

    The old version and the previous interface have not changed as a whole.

    Download links

  • nginx

    Here the function of nginx is to give a default nginx page when wechat redirects back. See the effect.

  • Personal test number

    Related links

• Invocation thinking

  • First, expose the computer mapping to the public network, and start nginx to access the Internet
  • Note that you need to set the default port 80 for nginx startup. All of them, you need to set the port 80 for natapp intranet penetration.
  • Set the parameters of the personal test number. The setting items include the JS interface security domain name and the authorization callback page domain. These fields are all domain names obtained by natapp. Pay attention to the test number below.
  • Splice wechat to get the url of the code, splice the parameters of the personal test number you got above, and send the address to your wechat to open.
  • If there is an error in the opened url, it can be solved according to the error. Generally, it is the error of the url parameter, which is not spliced. If the redirection address is wrong, please follow the above steps to recheck your test number configuration and redirection parameters.
  • Successfully jump to the local nginx page. At this time, you can use the wechat debugging tool to open and view the code parameters.
  • The next step, it's nothing to do with intranet penetration. Wechat doesn't need to ask you here. You just need to splice the code parameters. Then go to get and ask for another interface to get access? Token and OpenId. You can even open it in your local browser.

• Related documents

  • Wechat development documents

    Related links

  • natapp document

    Related links

• Related steps

  • Start nginx to access the nginx default page
  • Start natapp intranet to penetrate the default nginx 80 port

    Note that when choosing the free tunnel, select the web protocol, get your own authtoken, and start it

  • Check the domain name given by natapp in the browser to see if you can see the nginx page started by this machine for verification
  • Open the personal test number and set it.
  • Check the development documents and make requests. Note that I choose silent authorization, that is, scope=snsapi_base in the code. Please refer to the wechat documents.
  • Wechat redirection successfully returns to nginx penetrated by intranet, and carries code
  • Get interface, get openId successfully.
  • The domain name here is wrong, because every time natapp is started, it will change, and some screenshots I have are yesterday's, I have time to be busy that day, and I haven't finished my notes.

• Related issues

  Note here that when debugging, I found that you need to pay attention to the test number in order to obtain the open ID successfully. After checking, only the test number has this problem. The official document is not clear, and the official service number does not have this problem.

  When the test number is configured with the JS interface security domain name and the domain name of the authorized callback page, it needs to be filled in the same way. However, the requested redirect uuri parameter can only be used under the configured domain name.

  It should also be noted here that wechat must open the code link in wechat, and then let wechat redirect to the local nginx, so that you can see the local nginx welcome page in wechat. However, you can copy the url parameter in the wechat browser. If there is no code parameter in the copied url, please open it in the wechat debugging tool, and you can see it in the address bar.

• Development code

  package com.wlpt.swpt.portal.common.wx;
  
  import cn.hutool.core.util.URLUtil;
  import com.alibaba.fastjson.JSON;
  import com.alibaba.fastjson.JSONObject;
  import com.pig4cloud.pigx.common.core.util.R;
  import io.swagger.annotations.Api;
  import lombok.AllArgsConstructor;
  import org.springframework.web.bind.annotation.GetMapping;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RequestParam;
  import org.springframework.web.bind.annotation.RestController;
  import org.springframework.web.client.RestTemplate;
  
  /**
  * @program: swpt
  * @description:
  * @author: fq
  * @create: 2020-03-25 11:55
  **/
  @RestController
  @AllArgsConstructor
  @RequestMapping("/wxauth" )
  @Api(value = "wxauth", tags = "Wechat authorization related")
  public class WXAuthorizationController {
      /**
      * The web page authorization initiated by snsapi base is used to obtain the openid of the user entering the page, and it is silently authorized and automatically jumps to the callback page. What users perceive is that they directly enter the callback page (often the business page)
      */
      private static  String SCOPE_TYPE_SNSAPI_BASE = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=%s&redirect_uri=%s&response_type=code&scope=snsapi_base&state=%s#wechat_redirect";
      /**
      * The authorization of web page initiated by snsapi ﹣ userinfo as scope is used to obtain the basic information of users. However, this kind of authorization requires the user's manual consent, and since the user has agreed, the user's basic information can be obtained after authorization without concern.
      */
      private static  String SCOPE_TYPE_SNSAPI_USERINFO = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=%s&redirect_uri=%s&response_type=code&scope=snsapi_userinfo&state=%s#wechat_redirect";
      /**
      * appID
      */
      private static final String APPID = "wx1f5a62dc0097bbcb";
      /**
      * appsecret
      */
      private static final String APPSECRET = "bdbef8310434c70f2ff9e5b4f2ac7285";
      /**
      * redirect_uri
      */
      private static  String REDIRECT_URI = "http://iwjez2.natappfree.cc/ptportal/wxauth/wxGetCode";
      /**
      * state
      */
      private static final String STATE = "123";
      /**
      * access_token
      */
      private static  String ACCESS_TOKEN = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code";
  
      /**
      * Return to the Url of the front end to get wechat code
      */
      @GetMapping("/wxGetCode")
      public R wxGetCode(){
          String encodeUrl = URLUtil.encode(REDIRECT_URI);
          String codeUrl = String.format(SCOPE_TYPE_SNSAPI_BASE, APPID,encodeUrl,STATE);
          return R.ok(codeUrl);
      }
  
      @GetMapping("/wxRedirectUri")
      public void wxGetAccessTokenOrOpenId(@RequestParam String code,@RequestParam String state){
          //String codeNew = "071tYiJd0nEmAv1h9YId0og3Jd0tYiJp";
          String accessTokenUrl = String.format(ACCESS_TOKEN,APPID,APPSECRET,code);
          RestTemplate restTemplate = new RestTemplate();
          JSONObject jsonObject = restTemplate.getForObject(accessTokenUrl,String.class);
          System.out.println(jsonObject);
      }
  
      public static void main(String[] args) {
          new WXAuthorizationController().wxGetAccessTokenOrOpenId("xxx","ssss");
      }
  }
  
  

  The key point is that the relationship between the domain name of the authorized callback page and the redirect \ URI is that the redirect \ URI address is only under the domain name of the authorized callback page you filled in.

  OK, the test code has been adjusted, and the next step is to optimize the code. In fact, it is not difficult to call wechat authorization, mainly to be clear about the corresponding process and related steps, so that it can be developed easily.