对于网页的微信扫码登录,首要前提是企业申请的微信开放平台。
微信开放平台
微信扫码登录官方文档
先将官方文档通读一遍,然后申请网站应用
申请成功则如下:
仔细读懂微信的开发文档
这里搬一下官方文档内容,方便回顾:
第一步:请求CODE
第三方使用网站应用授权登录前请注意已获取相应网页授权作用域(scope=snsapi_login),则可以通过在PC端打开以下链接:
https://open.weixin.qq.com/connect/qrconnect?
appid=APPID&redirect_uri=REDIRECT_URI&
response_type=code&scope=SCOPE&state=STATE#wechat_redirect
若提示“该链接无法访问”,请检查参数是否填写错误,如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。
返回说明
用户允许授权后,将会重定向到redirect_uri的网址上,并且带上code和state参数
redirect_uri?code=CODE&state=STATE
若用户禁止授权,则重定向后不会带上code参数,仅会带上state参数
redirect_uri?state=STATE
那么看完上面,我们就可以先别急着敲代码,可以尝试着按所说的链接去拼接访问看看。
1.我们已经申请下来的网站应用,那么我们就会AppID和AppSecret。
2.我们先绑定下回调的域名,假设我们这里写www.baidu.com
3.将appid以及www.baidu.com拼接在链接上。详情看上面的第一步(请求CODE),注意scope不许为snsapi_login
链接就如下:
https://open.weixin.qq.com/connect/qrconnect?appid=(填写你自己的appid)&redirect_uri=www.baidu.com&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect
这时候会报错
这是因为你的redirect_url是需要编码的,所以我们将url编码一下即可。
url编码工具网址(http://tool.chinaz.com/tools/urlencode.aspx)
所以正确的链接为:
https://open.weixin.qq.com/connect/qrconnect?appid=(你自己的appid)&redirect_uri=https%3a%2f%2fwww.baidu.com&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect
然后手机扫码登录之后,链接会跳转到(携带code和state)
https://www.baidu.com/?code=091pzMml2ViDq54qamml2m8U4h0pzMmx&state=STATE
然后根据code我们也可以往微信获取用户个人信息。那么整个流程大致理清楚了。
实现方式:前端实现与微信交互的部分逻辑。然后将微信回调之后的code和state传给后端,由后端去微信获取个人用户信息并返回给前端。
业务需求: 微信登录,需要校验用户是否绑定微信,未绑定提示用户去app绑定微信。
好处:
后端可以直接json数据返回给前端即可。如果交给后端处理微信逻辑,则最后后端需要进行跳转到前端地址,并且把相关信息拼接在url后面返回给前端。链接上暴露用户信息不是很安全的选择。
实现方式:后端实现与微信的交互逻辑,前端完全不用参与。只需要调用后端相应接口
业务需求: 微信登录,需要校验用户是否绑定微信,未绑定提示用户去app绑定微信。
好处:对于微信交互部分,则前端完全不涉及。但是返回登录成功信息,则会把相关信息拼接在url上返回给前端。存在一定的风险
)
这里只演示后端的demo代码
引入微信轮子,有需要的可以看下相关文档,这里就不多解释了。地址(https://github.com/Wechat-Group/WxJava)
1.引入maven
org.springframework.boot
spring-boot-starter-web
com.github.binarywang
weixin-java-mp
3.3.0
2.编写微信的配置
@Configuration
public class WxOpenGlbalConfig {
private String openAppid="开放平台申请的appid";
private String openAppSecret="开放平台申请的appsecret";
@Bean
public WxMpService wxOpenService() {
WxMpService wxOpenService = new WxMpServiceImpl();
wxOpenService.setWxMpConfigStorage(wxOpenConfigStorage());
return wxOpenService;
}
@Bean
public WxMpConfigStorage wxOpenConfigStorage() {
WxMpInMemoryConfigStorage wxMpInMemoryConfigStorage = new WxMpInMemoryConfigStorage();
wxMpInMemoryConfigStorage.setAppId(openAppid);
wxMpInMemoryConfigStorage.setSecret(openAppSecret);
return wxMpInMemoryConfigStorage;
}
}
3.编写接口
@Controller
public class WxchatController {
@Autowired
private WxMpService wxOpenService;
/**
* 微信开放平台绑定的域名,修改为你绑定的域名
*/
String wxBindtUrl = "http://www.baidu.com";、
/**
* 前端地址
*/
String proUrl = "";
/**
* 如果采用方案2(后端实现所有微信交互逻辑),则前端调用该接口(步骤1)
*
* @param returnUrl 前端登录成功后的相对路径
* @return
* @throws Exception
*/
@GetMapping("/qrAuthorize")
public String qrAuthorize(@RequestParam("returnUrl") String returnUrl) throws Exception {
String url = wxBindtUrl + returnUrl;
String redirectUrl = wxOpenService.buildQrConnectUrl(url, WxConsts.QrConnectScope.SNSAPI_LOGIN, URLEncoder.encode(returnUrl));
// 这里执行的跳转到微信开放平台的扫码界面
return "redirect:" + redirectUrl;
}
/**
* 如果采用方案2,则用户执行扫码确认之后,则会根据回调的url执行该方法,然后将登录信息拼接在url上跳转到前端页面(步骤2)
* 如果采用方案1,则是用户执行扫码确认之后,前端来调用该接口方法(则用json返回,要添加 @ResponseBody)
* 获取用户信息
*
* @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);
// 用户信息
WxMpUser wxMpUser = wxOpenService.oauth2getUserInfo(wxMpOAuth2AccessToken, "zh_CN");
String openId = wxMpOAuth2AccessToken.getOpenId();
// 执行你的登录成功业务逻辑(token/session方式),下面的url则根据自己需求进行拼接后跳转到前端地址/或者是采用json数据返回则要修改。
return "redirect:" + proUrl + "?openid=" + openId;
} catch (WxErrorException e) {
System.out.println("这里应该是日志打印,方便跟踪");
}
// 执行你的错误页面/错误信息的json
return null;
}
}
最后,如果觉得文章对你有用,请点下赞!