Wechat open platform scanning code login [easy to understand]

Hello everyone , I meet you again , I'm your friend, Quan Jun .

WeChat The function of scanning code and logging in on the open platform can only be used by the authenticated wechat official account , Many students who study wechat may not be able to use this function , But don't worry , There are many accounts available in the following website ：

https://mp.weixin.qq.com/s?__biz=MzUyMDg1MDE2MA%3D%3D&idx=2&mid=2247483689&sn=55ecd5f4d00dd6de029756902459fd2b

Application 1 ： apply name ： do not say or talk AppID:wx2a6cf9373f278ed2 Appsecret:b32af04d9062ebc44b3f5d8b87a5a48e Callback the domain name configuration ：testxdclass.tunnel.qydev.com

Application 2 ： apply name ： Wolf Road AppID:wx025575eac69a2d5b Appsecret:72024309d9751d33e97e9d2a66e89944 Callback the domain name configuration :test16web.tunnel.qydev.com

The first problem is that the domain name of the project is inconsistent with the wechat authorized domain name , There is no way to set your domain name to , For example, my project domain name is t238997p11.qicp.vip , So what I hope is , When accessing the domain name authorized by the wechat background , It can automatically jump to my own domain name , So you can run the background code .

———————————————————————————————————————–

Take my own account number as an example ：

openAppId: wx277996c4d2772104   # Open platform appid
openAppSecret: xxxxxxxxxxxxxxxxxxxxxxxxxxx  # Development platform appSecret
wechatOpenAuthorize: testdev.tunnel.qydev.com  # Callback domain name 

Copy

One 、 First step ： install nginx Acting as agent

1、 Download and install nginx ： Official website :http://nginx.org/en/download.html

Click to enter the official website , Download the stable version

After decompression, click nginx.exe, Open Task Manager , See the following illustration nginx Enabled

2、 utilize nginx Acting as agent , Make when access testdev.tunnel.qydev.com When authorizing the domain name , Can access my own background code .

namely , When accessing http://testdev.tunnel.qydev.com 【80 The port is omitted and not written 】 Is equivalent to accessing 127.0.0.1:8080

（1） To configure nginx.conf

Be careful ：A:proxy_pass The agent is upstream The content in , also upstream The following name must be consistent with proxy_pass Consistence after

B: The listening port number must be 80, If 80 The port has been occupied. Be sure to release it first

C:server_name It is the authorized domain name of wechat

upstream sell { server 127.0.0.1:8080; }

server { listen 80; server_name testdev.tunnel.qydev.com;

location / { proxy_pass http://sell; }

}

（2） modify hosts file （ stay C:\Windows\System32\drivers\etc Under the table of contents ）

add to ：127.0.0.1 testdev.tunnel.qydev.com

Two 、SpringBoot Background code

@Controller
@RequestMapping("/wechat")
@Slf4j
public class WechatController {

    @Autowired
    private WxMpService wxOpenService;

    /**
     *  Wechat open platform authorized login 
     *
     * @param returnUrl
     * @return
     */
    // visit ：http://127.0.0.1:8080/sell/wechat/qrAuthorize?returnUrl=http://www.imooc.com
    @GetMapping("/qrAuthorize")
    public String qrAuthorize(@RequestParam("returnUrl") String returnUrl){
        String url = "http://testdev.tunnel.qydev.com/sell/wechat/qrUserInfo";
        String redirectUrl = wxOpenService.buildQrConnectUrl(url,WxConsts.QrConnectScope.SNSAPI_LOGIN, URLEncoder.encode(returnUrl));
        log.info(" Wechat open platform authorization code,redirectUrl={}",redirectUrl);
        return "redirect:" + redirectUrl;
    }

    /**
     *  Wechat open platform scanning code to get openid
     *
     * @param code
     * @param returnUrl
     * @return
     */
    @GetMapping("/qrUserInfo")
    public String qrUserInfo(@RequestParam("code") String code,
                             @RequestParam("state") String returnUrl){
        WxMpOAuth2AccessToken wxMpOAuth2AccessToken = new WxMpOAuth2AccessToken();
        try {
            wxMpOAuth2AccessToken = wxOpenService.oauth2getAccessToken(code);
        } catch (WxErrorException e) {
            log.info("[ WeChat web page authorization ] {}",e);
            throw new SellException(ResultEnum.WECHAT_MP_ERROR.getCode(),e.getError().getErrorMsg());
        }
        // obtain openid
        String openId = wxMpOAuth2AccessToken.getOpenId();

        return "redirect:" + returnUrl+"?openid=" + openId;
    }
}

Copy

3、 ... and 、 result

visit ： http://127.0.0.1:8080/sell/wechat/qrAuthorize?returnUrl=http://www.imooc.com

As shown in the figure below , The address bar changes to ：https://open.weixin.qq.com/connect/qrconnect?appid=wx277996c4d2772104&redirect_uri=http%3A%2F%2Ftestdev.tunnel.qydev.com%2Fsell%2Fwechat%2FqrUserInfo&response_type=code&scope=snsapi_login&state=http%3A%2F%2Fwww.imooc.com#wechat_redirect

After scanning the code, wechat jumps to returnUrl Callback address after http://www.imooc.com, And back to openid

The address bar changes to https://www.imooc.com/?openid=XXXXXJGsKKpEqGMEt7V7XXXXXX

According to the above steps, wechat scanning code login is realized ！！ If you have any questions, please give me advice ！！

Wechat open platform reference manual ：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&lang=zh_CN

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/130289.html Link to the original text ：https://javaforall.cn