微信网页登录第三方SDK

心已赠人 2022-03-02 14:12 630阅读 0赞

微信官方文档：[https://open.weixin.qq.com/cgi-bin/showdocument?action=dir\_list&t=resource/res\_list&verify=1&id=open1419316505&token=&lang=zh\_CN][https_open.weixin.qq.com_cgi-bin_showdocument_action_dir_list_t_resource_res_list_verify_1_id_open1419316505_token_lang_zh_CN]

# 本文是根据阅读官方文档进行的 #

## **前提： ，在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程**。 ##

如果没有开放平台的账号，且微信登录权限是不能实现本功能的（**微信登录权限有公司的资质才能获得，不然申请账号也获取不到权限**） **我们还必须有一个可以访问外网的地址，将你的项目部署上去**，如果没有可以去natapp上买一个隧道和域名

我们这里用的是一个github的开源sdk   springboot框架

## **1.pom 添加依赖** ##

<dependency>
        <groupId>com.github.binarywang</groupId>
        <artifactId>weixin-java-mp</artifactId>
        <version>2.7.0</version>
    </dependency>

## **2.阅读官方微信开放平台文档  上面链接**![D0wkkHSbtC6VUSHX4WsjP5ssg5mdnEmXO8NGVGF34dxS9N1WCcq6wvquR4K_Hcut][] ##

**根据文档可知：请求授权登录   --> 获取code --> 获取access\_token**

### **2.1 请求授权 获取code ** ###

请求链接

[https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect\_uri=REDIRECT\_URI&response\_type=code&scope=SCOPE&state=STATE\#wechat\_redirect][https_open.weixin.qq.com_connect_qrconnect_appid_APPID_redirect_uri_REDIRECT_URI_response_type_code_scope_SCOPE_state_STATE_wechat_redirect]

其中的参数说明：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>是否必须</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>appid</td> 
   <td>是</td> 
   <td>应用唯一标识</td> 
  </tr> 
  <tr> 
   <td>redirect_uri</td> 
   <td>是</td> 
   <td>请使用urlEncode对链接进行处理</td> 
  </tr> 
  <tr> 
   <td>response_type</td> 
   <td>是</td> 
   <td>填code</td> 
  </tr> 
  <tr> 
   <td>scope</td> 
   <td>是</td> 
   <td>应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写<strong>snsapi_login</strong>即</td> 
  </tr> 
  <tr> 
   <td>state</td> 
   <td>否</td> 
   <td>用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验</td> 
  </tr> 
 </tbody> 
</table>

**appid 是微信开放平台的appid  state 参数我们写 返回的url returnUrl**

我们这里使用第三方封装的sdk 进行访问

在访问前我们需要先进行一下配置

创建

WechatAccountConfig 类 进行配置

@Component
    public class WxchatOpenConfig {
    
        @Autowired
        WechatAccountConfig wechatAccountConfig;
    
    
        @Bean
        public WxMpService wxOpenService()
        {
            WxMpService wxOpenService = new WxMpServiceImpl();
            wxOpenService.setWxMpConfigStorage(wxMpInMemoryConfigStorage());
            return  wxOpenService;
        }
    
        @Bean
        public WxMpInMemoryConfigStorage wxMpInMemoryConfigStorage()
        {
            WxMpInMemoryConfigStorage wxMpInMemoryConfigStorage = new WxMpInMemoryConfigStorage();
            wxMpInMemoryConfigStorage.setAppId(wechatAccountConfig.getOpenAppId());
            wxMpInMemoryConfigStorage.setSecret(wechatAccountConfig.getOpenAppSecret());
            return  wxMpInMemoryConfigStorage;
        }
    
    }

WechatAccountConfig 使我们配置前将 appid recert 两个属性封装的对象

@Data
    @Component
    @ConfigurationProperties(prefix = "wechat")
    public class WechatAccountConfig {
       
    
        /*微信开放平台id*/
        private String openAppId;
        /*微信开放平台密匙*/
        private String openAppSecret;
    }

这里我们在application.properties文件中配置你的openAppId 和 appSecret

配置如下

wechat.openAppId=xxxxx
    wechat.openAppSecret=xxxxxx

wxMpService 是第三方sdk 封装的一个服务对象，进行微信的相关操作

这样我们就可以在Controller 里面使用wxOpenService了

新建WechatController

@Controller
    @RequestMapping("/wechat")
    @Slf4j
    public class WechatController {
        
        @Autowired
        private WxMpService wxOpenService;
       
    
    
    
        /**
         * 微信网页扫码登录
         * @param returnUrl
         * @return
         */
        @RequestMapping("/qrauthorize")
    
        public String qrauthorize(@RequestParam("returnUrl") String returnUrl)
        {
            //1.配置
            //2.调用方法
            //   3.这里是返回code和state 参数后要访问的地址，也是我们一会的第二步操作
            String url = 外网地址+"/sell/wechat/qruserinfo";
            //返回之后从定向的url,调用方法
            String  redirectUrl = wxOpenService.buildQrConnectUrl(url, WxConsts.QRCONNECT_SCOPE_SNSAPI_LOGIN, URLEncoder.encode(returnUrl));
            log.info("【微信网页扫码登录】返回redirectUrl = {}",redirectUrl  );
    
            return "redirect:"+redirectUrl;
        }
       
    }

state 参数 就是我们在第一步访问后台传的returnUrl

这样就可以获取到code

### **2.2 获取access\_token ** ###

官方提供的网址

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

参数

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>是否必须</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>appid</td> 
   <td>是</td> 
   <td>应用唯一标识，在微信开放平台提交应用审核通过后获得</td> 
  </tr> 
  <tr> 
   <td>secret</td> 
   <td>是</td> 
   <td>应用密钥AppSecret，在微信开放平台提交应用审核通过后获得</td> 
  </tr> 
  <tr> 
   <td>code</td> 
   <td>是</td> 
   <td>填写第一步获取的code参数</td> 
  </tr> 
  <tr> 
   <td>grant_type</td> 
   <td>是</td> 
   <td>填authorization_code</td> 
  </tr> 
 </tbody> 
</table>

相信大家都可以找到了吧

我们第三方的sdk 这样写

刚才的Controller方法里面有一个第二部访问的后台地址

我们写qruserInfo方法

/**
         * 微信网页登录获取openid
         * @param code
         * @param returnUrl
         * @return
         */
        @RequestMapping("/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.error("【微信网页扫码登录】获取accessToken失败");
                throw new ResultException(ResultEnum.WXCAHT_OPEN_ERROR.getCode(),e.getError().getErrorMsg());
            }
            String openId = wxMpOAuth2AccessToken.getOpenId();
            log.info("【微信网页扫码登录】openid={}",openId);
    
            return "redirect:"+returnUrl+"?openid="+ openId;
    
        }

**记住这里我们使用的是wxOpenService.oauth2getAccessToken(code); 获取opneid 和access\_token**

**配置完成 启动项目  访问 外网地址+项目地址+wechat/qrauthorize?returnUrl 就可以使用了   ，这里的url是我写的请求地址，如果你们Controller层进行了改变就用你们自己的**

**如有疑问欢迎私信！**

[https_open.weixin.qq.com_cgi-bin_showdocument_action_dir_list_t_resource_res_list_verify_1_id_open1419316505_token_lang_zh_CN]: https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=&lang=zh_CN
[D0wkkHSbtC6VUSHX4WsjP5ssg5mdnEmXO8NGVGF34dxS9N1WCcq6wvquR4K_Hcut]: /images/20220302/674e575934984a039df7ea0a54c54d94.png
[https_open.weixin.qq.com_connect_qrconnect_appid_APPID_redirect_uri_REDIRECT_URI_response_type_code_scope_SCOPE_state_STATE_wechat_redirect]: https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect