微信公众号网页授权登录

最新推荐文章于 2021-07-08 15:14:05 发布

sanrenhe-zjut

最新推荐文章于 2021-07-08 15:14:05 发布

阅读量614

点赞数 1

分类专栏： Java开发

本文链接：https://blog.csdn.net/weixin_46903205/article/details/112962373

版权

Java开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 前言

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

2. 测试号

2.1 测试号申请

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

https://mp.weixin.qq.com/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.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项目文件中写一个回调接口，包含参数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.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

sanrenhe-zjut

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信公众号网页授权登录

1. 前言最近在做微信公众号的第三方登录，结合了springboot框架，实现了一个简单的登录验证，在此写一篇博客记录一下。2. 测试号2.1 测试号申请想要做微信公众号开发，就必须具备一个公众号，微信平台公众平台也提供了相关的测试号，访问以下地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login点击登录，微信扫码登录，即可获得自己的测试号啦！2.2 测试号相关说明在测试号信息表中，测试号会提供appID和app
复制链接

扫一扫