4、编写Service
//根据openid获取用户信息 @Override public UcenterMember getOpenIdMember(String openid) { QueryWrapper <UcenterMember> wrapper = new QueryWrapper <>(); wrapper.eq("openid", openid); UcenterMember member = this.baseMapper.selectOne(wrapper); return member; }
5、测试
访问：http://localhost:8160/api/ucenter/wx/login
访问授权url后会得到一个微信登录二维码
用户扫描二维码会看到确认登录的页面
用户点击“确认登录”后，微信服务器会向谷粒学院的业务服务器发起回调，因此接下来我们需要开发回调controller
6、修改当前项目service_ucenter
（1）修改启动端口号为8160(前面已经修改了)
（2）测试回调是否可用
@ApiOperation(value = "获取扫描人信息添加数据") @GetMapping("callback") public String callback(String code, String state) { System.out.println("code："+code); System.out.println("state："+state); return "redirect:http://localhost:3000"; }
具体步骤分析：
第一步： 扫描之后，执行本地的callback方法，在callback获取两个值，在跳转的时候传递过来
state：原样传递
code：类似于手机验证码，随机唯一的值
第二步： 拿着第一步获取到的code值，请求微信提供固定的地址，获取到两个值
（1）access_token：访问凭证
（2）openid：每个微信唯一标识
第三步： 拿着第二步获取到两个值access_token和openid，在去请求微信提供固定地址，最终可以得到微信扫描人信息。比如微信昵称，微信头像等。
用到技术点：
（1）httpclient(非浏览器发送请求)
（2）json转换工具：fastjson、gson 、jackon
7、添加依赖
在service_ucenter的pom中
<dependencies> <!--httpclient--> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> </dependency> <!--commons-io--> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> </dependency> <!--gson--> <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> </dependency> </dependencies>
8、创建httpclient工具类
/** * 依赖的jar包有：commons-lang-2.6.jar、httpclient-4.3.2.jar、httpcore-4.3.1.jar、commons-io-2.4.jar * @author zhaoyb * */ public class HttpClientUtils { public static final int connTimeout=10000; public static final int readTimeout=10000; public static final String charset="UTF-8"; private static HttpClient client = null; static { PoolingHttpClientConnectionManager cm = new PoolingHttpClientConnectionManager(); cm.setMaxTotal(128); cm.setDefaultMaxPerRoute(128); client = HttpClients.custom().setConnectionManager(cm).build(); } public static String postParameters(String url, String parameterStr) throws ConnectTimeoutException, SocketTimeoutException, Exception{ return post(url,parameterStr,"application/x-www-form-urlencoded",charset,connTimeout,readTimeout); } public static String postParameters(String url, String parameterStr,String charset, Integer connTimeout, Integer readTimeout) throws ConnectTimeoutException, SocketTimeoutException, Exception{ return post(url,parameterStr,"application/x-www-form-urlencoded",charset,connTimeout,readTimeout); } public static String postParameters(String url, Map<String, String> params) throws ConnectTimeoutException, SocketTimeoutException, Exception { return postForm(url, params, null, connTimeout, readTimeout); } public static String postParameters(String url, Map<String, String> params, Integer connTimeout,Integer readTimeout) throws ConnectTimeoutException, SocketTimeoutException, Exception { return postForm(url, params, null, connTimeout, readTimeout); } public static String get(String url) throws Exception { return get(url, charset, null, null); } public static String get(String url, String charset) throws Exception { return get(url, charset, connTimeout, readTimeout); } /** * 发送一个 Post 请求, 使用指定的字符集编码. * * @param url * @param body RequestBody * @param mimeType 例如 application/xml "application/x-www-form-urlencoded" a=1&b=2&c=3 * @param charset 编码 * @param connTimeout 建立链接超时时间,毫秒. * @param readTimeout 响应超时时间,毫秒. * @return ResponseBody, 使用指定的字符集编码. * @throws ConnectTimeoutException 建立链接超时异常 * @throws SocketTimeoutException 响应超时 * @throws Exception */ public static String post(String url, String body, String mimeType,String charset, Integer connTimeout, Integer readTimeout) throws ConnectTimeoutException, SocketTimeoutException, Exception { HttpClient client = null; HttpPost post = new HttpPost(url); String result = ""; try { if (StringUtils.isNotBlank(body)) { HttpEntity entity = new StringEntity(body, ContentType.create(mimeType, charset)); post.setEntity(entity); } // 设置参数 Builder customReqConf = RequestConfig.custom(); if (connTimeout != null) { customReqConf.setConnectTimeout(connTimeout); } if (readTimeout != null) { customReqConf.setSocketTimeout(readTimeout); } post.setConfig(customReqConf.build()); HttpResponse res; if (url.startsWith("https")) { // 执行 Https 请求. client = createSSLInsecureClient(); res = client.execute(post); } else { // 执行 Http 请求. client = HttpClientUtils.client; res = client.execute(post); } result = IOUtils.toString(res.getEntity().getContent(), charset); } finally { post.releaseConnection(); if (url.startsWith("https") && client != null&& client instanceof CloseableHttpClient) { ((CloseableHttpClient) client).close(); } } return result; } /** * 提交form表单 * * @param url * @param params * @param connTimeout * @param readTimeout * @return * @throws ConnectTimeoutException * @throws SocketTimeoutException * @throws Exception */ public static String postForm(String url, Map<String, String> params, Map<String, String> headers, Integer connTimeout,Integer readTimeout) throws ConnectTimeoutException, SocketTimeoutException, Exception { HttpClient client = null; HttpPost post = new HttpPost(url); try { if (params != null && !params.isEmpty()) { List<NameValuePair> formParams = new ArrayList<NameValuePair>(); Set<Entry<String, String>> entrySet = params.entrySet(); for (Entry<String, String> entry : entrySet) { formParams.add(new BasicNameValuePair(entry.getKey(), entry.getValue())); } UrlEncodedFormEntity entity = new UrlEncodedFormEntity(formParams, Consts.UTF_8); post.setEntity(entity); } if (headers != null && !headers.isEmpty()) { for (Entry<String, String> entry : headers.entrySet()) { post.addHeader(entry.getKey(), entry.getValue()); } } // 设置参数 Builder customReqConf = RequestConfig.custom(); if (connTimeout != null) { customReqConf.setConnectTimeout(connTimeout); } if (readTimeout != null) { customReqConf.setSocketTimeout(readTimeout); } post.setConfig(customReqConf.build()); HttpResponse res = null; if (url.startsWith("https")) { // 执行 Https 请求. client = createSSLInsecureClient(); res = client.execute(post); } else { // 执行 Http 请求. client = HttpClientUtils.client; res = client.execute(post); } return IOUtils.toString(res.getEntity().getContent(), "UTF-8"); } finally { post.releaseConnection(); if (url.startsWith("https") && client != null && client instanceof CloseableHttpClient) { ((CloseableHttpClient) client).close(); } } } /** * 发送一个 GET 请求 * * @param url * @param charset * @param connTimeout 建立链接超时时间,毫秒. * @param readTimeout 响应超时时间,毫秒. * @return * @throws ConnectTimeoutException 建立链接超时 * @throws SocketTimeoutException 响应超时 * @throws Exception */ public static String get(String url, String charset, Integer connTimeout,Integer readTimeout) throws ConnectTimeoutException,SocketTimeoutException, Exception { HttpClient client = null; HttpGet get = new HttpGet(url); String result = ""; try { // 设置参数 Builder customReqConf = RequestConfig.custom(); if (connTimeout != null) { customReqConf.setConnectTimeout(connTimeout); } if (readTimeout != null) { customReqConf.setSocketTimeout(readTimeout); } get.setConfig(customReqConf.build()); HttpResponse res = null; if (url.startsWith("https")) { // 执行 Https 请求. client = createSSLInsecureClient(); res = client.execute(get); } else { // 执行 Http 请求. client = HttpClientUtils.client; res = client.execute(get); } result = IOUtils.toString(res.getEntity().getContent(), charset); } finally { get.releaseConnection(); if (url.startsWith("https") && client != null && client instanceof CloseableHttpClient) { ((CloseableHttpClient) client).close(); } } return result; } /** * 从 response 里获取 charset * * @param ressponse * @return */ @SuppressWarnings("unused") private static String getCharsetFromResponse(HttpResponse ressponse) { // Content-Type:text/html; charset=GBK if (ressponse.getEntity() != null && ressponse.getEntity().getContentType() != null && ressponse.getEntity().getContentType().getValue() != null) { String contentType = ressponse.getEntity().getContentType().getValue(); if (contentType.contains("charset=")) { return contentType.substring(contentType.indexOf("charset=") + 8); } } return null; } /** * 创建 SSL连接 * @return * @throws GeneralSecurityException */ private static CloseableHttpClient createSSLInsecureClient() throws GeneralSecurityException { try { SSLContext sslContext = new SSLContextBuilder().loadTrustMaterial(null, new TrustStrategy() { public boolean isTrusted(X509Certificate[] chain,String authType) throws CertificateException { return true; } }).build(); SSLConnectionSocketFactory sslsf = new SSLConnectionSocketFactory(sslContext, new X509HostnameVerifier() { @Override public boolean verify(String arg0, SSLSession arg1) { return true; } @Override public void verify(String host, SSLSocket ssl) throws IOException { } @Override public void verify(String host, X509Certificate cert) throws SSLException { } @Override public void verify(String host, String[] cns, String[] subjectAlts) throws SSLException { } }); return HttpClients.custom().setSSLSocketFactory(sslsf).build(); } catch (GeneralSecurityException e) { throw e; } } public static void main(String[] args) { try { String str= post("https://localhost:443/ssl/test.shtml","name=12&page=34","application/x-www-form-urlencoded", "UTF-8", 10000, 10000); //String str= get("https://localhost:443/ssl/test.shtml?name=12&page=34","GBK"); /*Map<String,String> map = new HashMap<String,String>(); map.put("name", "111"); map.put("page", "222"); String str= postForm("https://localhost:443/ssl/test.shtml",map,null, 10000, 10000);*/ System.out.println(str); } catch (ConnectTimeoutException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (SocketTimeoutException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } } }
9、创建回调controller 方法
在WxApiController.java中添加方法
/** * @author lxy * @version 1.0 * @Description * @date 2022/3/10 22:22 */ @CrossOrigin @Controller @RequestMapping("/api/ucenter/wx") public class WxApiController { @Autowired private UcenterMemberService memberService; //1.生成微信扫描二维码 //... //2.调用扫描人信息,添加数据 @GetMapping("callback") public String callback(String code, String state) { //1.获取code,临时票据,类似于验证码 //2.拿着code请求 微信固定的地址,得到两个值 access_token和open_id String baseAccessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token" + "?appid=%s" + "&secret=%s" + "&code=%s" + "&grant_type=authorization_code"; //拼接参数 id 秘钥 和code 值 String accessTokenUrl = String.format( baseAccessTokenUrl, ConstantWxUtils.WX_OPEN_APP_ID, ConstantWxUtils.WX_OPEN_APP_SECRET, code ); //请求这个拼接好的地址,得到两个值 access_token和open_id //使用httpclient发送请求,得到返回结果 String accessTokenInfo = null; try { accessTokenInfo = HttpClientUtils.get(accessTokenUrl); } catch (Exception e) { e.printStackTrace(); throw new GuLiException(20001, "获取access_token失败"); } // accessTokenInfo字符串获取两个值 access_token和openid // 方法:把accessTokenInfo字符串转成map集合,根据map里面key获取对应值 // 使用json转换工具 Gson Gson gson = new Gson(); Map mapAccessToken = gson.fromJson(accessTokenInfo, HashMap.class); String access_token = (String) mapAccessToken.get("access_token"); String openid = (String) mapAccessToken.get("openid"); //查询数据库中是否有该微信用户 UcenterMember member = memberService.getOpenIdMember(openid); if (member == null) { //3.拿着得到的access_token和openid,再去请求微信提供的固定地址,获取到扫描人的信息 //访问微信的资源服务器，获取用户信息 String baseUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo" + "?access_token=%s" + "&openid=%s"; String userInfoUrl = String.format( baseUserInfoUrl, access_token, openid ); //发送请求 String userInfo = null; try { userInfo= HttpClientUtils.get(userInfoUrl); }catch (Exception e){ e.printStackTrace(); throw new GuLiException(20001, "获取用户信息失败"); } Map mapUserInfo = gson.fromJson(userInfo, HashMap.class); String nickname = (String) mapUserInfo.get("nickname"); //Java中如何将Double转为Integer gson默认会将integer转为double对象. Double sexDouble = (Double) mapUserInfo.get("sex"); Integer sex = sexDouble.intValue(); String headImgUrl = (String) mapUserInfo.get("headimgurl"); //向数据库中插入一条用户数据 member = new UcenterMember(); member.setOpenid(openid); member.setNickname(nickname); member.setAvatar(headImgUrl); member.setSex(sex); memberService.save(member); } //使用JWT根据member对象生成token字符串 String jwtToken = JwtUtils.getJwtToken(member.getId(), member.getNickname()); //最后返回首页面 return "redirect:http://localhost:3000?token=" + jwtToken; } }
扫描之后，在首页显示微信信息，比如昵称和头像。之前登录之后显示，在首页面从cookie获取数据显示。现在也可以按照之前的方式，把扫描之后信息放到cookie里面，跳转到首页面进行显示，但是如果把扫描数据放到cookie有问题，因为cookie无法实现跨域访问。
最终解决方案：根据微信信息使用jwt，生成token字符串，把token字符串通过路径传递到首页。
10、修改nginx的配置文件
3、前端开发
1、修改default.vue页面脚本
methods: { //微信登录显示的方法 wxLogin(){ //把token值放到cookie里面 cookie.set('guli_token',this.token,{domain:'localhost'}) //调用接口,根据token获取用户信息 loginApi.getLoginUserInfo().then(response=>{ this.loginInfo= response.data.data.userInfo //获取用户信息,存放到cookie里面 cookie.set("guli_ucenter",JSON.stringify(this.loginInfo),{domain:'localhost'}) }) }, //... }
2、修改微信登录的超链接
先写死,之后可以从配置文件中读取地址…
4、微信扫描登录效果展示
五、QQ扫码登录
原理和微信扫码登录相同,最近正在申请个人开发者,等申请下来了就可以实现该功能了.功能后期进行完善.
