微信公众号网页授权登录

1. 前言

最近在做微信公众号的第三方登录,结合了springboot框架,实现了一个简单的登录验证,在此写一篇博客记录一下。

2. 测试号

2.1 测试号申请

想要做微信公众号开发,就必须具备一个公众号,微信平台公众平台也提供了相关的测试号,访问以下地址:

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

点击登录,微信扫码登录,即可获得自己的测试号啦!

2.2 测试号相关说明

  1. 在测试号信息表中,测试号会提供appIDappsecret,这个很重要,以后提取数据和登录授权就靠它了;
  2. 在测试号二维码中,提供了相关测试号的二维码,手机微信扫描二维码就可以关注自己创建的公众号了;
  3. 在体验接口权限表中,提供了相关接口的功能,具体需要哪些功能,可以参照手册。

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可以进行授权后接口调用,如获取用户基本信息,具体可以分为如下几步 :

  1. 第一步:用户同意授权,获取code
  2. 第二步:通过code换取网页授权access_token
  3. 第三步:拉取用户信息(需scope为 snsapi_userinfo)

下面就通过代码逐步实现授权功能:
第一步:用户同意授权,获取code
原理
在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面
https://open.weixin.qq.com/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.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%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.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%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.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html
中的创建接口选项里的内容,添加超链接,格式如下:
https://open.weixin.qq.com/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.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
参数说明:
参数说明
实现
在SpringBoot项目文件中写一个回调接口,包含参数codestate,如下所示

@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.com/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.com/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.cn/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.com/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.com/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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值