admin管理员组文章数量:1532650
1. 前言
最近在做微信公众号的第三方登录,结合了springboot框架,实现了一个简单的登录验证,在此写一篇博客记录一下。
2. 测试号
2.1 测试号申请
想要做微信公众号开发,就必须具备一个公众号,微信平台公众平台也提供了相关的测试号,访问以下地址:
https://mp.weixin.qq/debug/cgi-bin/sandbox?t=sandbox/login
点击登录,微信扫码登录,即可获得自己的测试号啦!
2.2 测试号相关说明
- 在测试号信息表中,测试号会提供
appID
和appsecret
,这个很重要,以后提取数据和登录授权就靠它了; - 在测试号二维码中,提供了相关测试号的二维码,手机微信扫描二维码就可以关注自己创建的公众号了;
- 在体验接口权限表中,提供了相关接口的功能,具体需要哪些功能,可以参照手册。
3. 网页授权登录
3.1 SpringBoot环境搭建
在自己电脑上搭建好SpringBoot环境 ,在pom文件中引入以下依赖:
<!-- okhttp发送请求 -->
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>4.8.0</version>
</dependency>
<!-- fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.72</version>
</dependency>
其中okhttp
负责发送http请求,fastjson负责json格式的转换
3.2 回调页面域名
在新申请的公众号中体验接口权限表中,找到网页服务模块的网页账号,点击修改,填入自己想要回调的域名(ip地址也是可以的),如下图所示:
3.3 网页授权登录
微信网页授权是通过OAuth2.0机制实现的,在用户授权给公众号后,公众号可以获取到一个网页授权特有的接口调用凭证(网页授权access_token),通过网页授权access_token可以进行授权后接口调用,如获取用户基本信息,具体可以分为如下几步 :
- 第一步:用户同意授权,获取code
- 第二步:通过code换取网页授权access_token
- 第三步:拉取用户信息(需scope为 snsapi_userinfo)
下面就通过代码逐步实现授权功能:
第一步:用户同意授权,获取code
原理
在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope
参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面
https://open.weixin.qq/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。
尤其注意:由于授权操作安全等级较高,所以在发起授权请求时,微信会对授权链接做正则强匹配校验,如果链接的参数顺序不对,授权页面将无法正常访问
参考链接(请在微信客户端中打开此链接体验):
scope为snsapi_base
https://open.weixin.qq/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect
scope为snsapi_userinfo
https://open.weixin.qq/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
尤其注意:跳转回调redirect_uri,应当使用https链接来确保授权code的安全性。
参数说明:
在用户同意授权后,会跳转到3.2所设置域名下的回调地址,相关格式如下:
redirect_uri/?code=CODE&state=STATE
例如,我的回调就是
http://127.0.0.1:8866/api/login?code=0411krGa1nwaoA0RjIHa1iaNyo41krGj&state=123
这里建议有条件的话使用https协议,确保数据传输安全
实现
第一步的实现其实很简单,在自己需要添加公众号登录的公众号里面添加菜单,菜单指向登录的超链接,具体可以参考
https://developers.weixin.qq/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html
中的创建接口选项里的内容,添加超链接,格式如下:
https://open.weixin.qq/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
第二步:通过code换取网页授权access_token
原理
首先请注意,这里通过code换取的是一个特殊的网页授权access_token,与基础支持中的access_token(该access_token用于调用其他接口)不同。公众号可通过下述接口来获取网页授权access_token。如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。
尤其注意:由于公众号的secret和获取到的access_token安全级别都非常高,必须只保存在服务器,不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤,也必须从服务器发起。
请求方法,在获取code后,请求以下链接获取access_token:
https://api.weixin.qq/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
参数说明:
实现
在SpringBoot项目文件中写一个回调接口,包含参数code
和state
,如下所示
@GetMapping(value = "api/login")
@ResponseBody
public Result login(@RequestParam("code") String code, @RequestParam("state") String state) {
// 调用service的代码
}
在获取到code和state之后,写一个WechatProvider.java
文件,作为发送请求的类,其具体内容如下:
package com.sanrenhe.user.provider;
import com.alibaba.fastjson.JSON;
import com.sanrenhe.user.dto.*;
import okhttp3.*;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import java.io.IOException;
@Component
public class WeChatProvider {
private static final Logger log = LoggerFactory.getLogger(WeChatProvider.class);
public WeChatAccessTokenResultDTO getAccessToken(WeChatAccessTokenDTO accessTokenDTO) {
MediaType mediaType = MediaType.get("application/json; charset=utf-8");
OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder()
.url(String.format("https://api.weixin.qq/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code", accessTokenDTO.getAppid(), accessTokenDTO.getSecret(), accessTokenDTO.getCode()))
.build();
try (Response response = client.newCall(request).execute()) {
String res = response.body().string();
log.info(res);
WeChatAccessTokenResultDTO weChatAccessTokenResultDTO = JSON.parseObject(res, WeChatAccessTokenResultDTO.class);
return weChatAccessTokenResultDTO;
} catch (Exception e) {
}
return null;
}
}
第三步:拉取用户信息(需scope为 snsapi_userinfo)
如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openid拉取用户信息了。
请求方法,GET请求:
https://api.weixin.qq/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
参数说明:
返回说明
正确时返回的JSON数据包如下:
{
"openid":" OPENID",
"nickname": NICKNAME,
"sex":"1",
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl":"https://thirdwx.qlogo/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
"privilege":[ "PRIVILEGE1" "PRIVILEGE2" ],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
实现
在WeChatProvider.java
中加入以下代码,增加后完整代码如下:
package com.sanrenhe.user.provider;
import com.alibaba.fastjson.JSON;
import com.sanrenhe.user.dto.*;
import okhttp3.*;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import java.io.IOException;
@Component
public class WeChatProvider {
private static final Logger log = LoggerFactory.getLogger(WeChatProvider.class);
public WeChatAccessTokenResultDTO getAccessToken(WeChatAccessTokenDTO accessTokenDTO) {
MediaType mediaType = MediaType.get("application/json; charset=utf-8");
OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder()
.url(String.format("https://api.weixin.qq/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code", accessTokenDTO.getAppid(), accessTokenDTO.getSecret(), accessTokenDTO.getCode()))
.build();
try (Response response = client.newCall(request).execute()) {
String res = response.body().string();
log.info(res);
WeChatAccessTokenResultDTO weChatAccessTokenResultDTO = JSON.parseObject(res, WeChatAccessTokenResultDTO.class);
return weChatAccessTokenResultDTO;
} catch (Exception e) {
}
return null;
}
public WeChatUserDTO getUser(String accessToken, String openId) {
OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder()
.url(String.format("https://api.weixin.qq/sns/userinfo?access_token=%s&openid=%s&lang=zh_CN", accessToken, openId))
.build();
try (Response response = client.newCall(request).execute()) {
String res = response.body().string();
log.info(res);
WeChatUserDTO weChatUserDTO = JSON.parseObject(res, WeChatUserDTO.class);
return weChatUserDTO;
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
4 测试结果
测试公众号如下
点击登录,返回授权登录结果
初次写博客,写得不怎么好,大家见谅!
end
版权声明:本文标题:微信公众号网页授权登录 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1725775156a1041835.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论