微信公众号OAuth 2.0 网页授权

微信公众号OAuth 2.0 网页授权

微信公众号官方文档:https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html

域名购买地址:https://natapp.cn/cn

1. 修改授权回调域名

① 首先我们需要去购买一个域名和隧道,因为我们需要微信能够识别我们的项目路径,因此需要一个内网穿透工具,购买域名名,启动natapp.exe:
在这里插入图片描述

② 进入微信公众号开发文档---->开始开发---->接口测试号申请----网页服务—>修改:

在这里插入图片描述

③ 关注该微信测试号:
在这里插入图片描述

2. 网页授权

网页授权的步骤:

1、引导用户进入授权页面同意授权,获取code

2、通过code换取网页授权access_token

3、如果需要,开发者可以刷新网页授权access_token,避免过期

4、通过网页授权access_token和openid获取用户基本信息

2.1 引导用户进入授权页面同意授权,获取code

1、引导用户在微信客户端访问如下页面,这个请求的作用是获取凭证code:

在后端编写一个接口/winxin/auth,引导用户打开下面这个页面:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

参数说明:

参数是否必须说明
appid=APPID公众号的唯一标识
redirect_uri=REDIRECT_URI授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理
response_type=code返回类型,请填写code
scope=SCOPE应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )
state=STATE重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
#wechat_redirect无论直接打开还是做页面302重定向时候,必须带此参数

2、如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE

用户同意授权授权后,页面将跳转到redirect_uri/?code=CODE&state=STATE,并携带code和state这两个参数,因此我们需要写一个接口/weixin/invoke处理这次请求

code说明 : code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。

@Controller
@RequestMapping("/weixin")
public class WiexinOathu {
    
    // 1、当用户请求这个方法时,我们需要引导用户打开url这个地址,请求授权
    @RequestMapping("/auth")
    public void autho(HttpServletResponse response)  {
        //配置redirect_uri,即用户同意授权后重定向的地址
        String path = "http://heng.nat300.top/sell/weixin/invoke";
        //使用 urlEncode 对链接进行处理
        try {
            URLEncoder.encode(path,"UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }

        String url = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
            "appid=wxd0430ca3dde79d52" +
            "&redirect_uri="+ path +
            "&response_type=code" +
            "&scope=snsapi_userinfo" +
            "&state=STATE" +
            "#wechat_redirect";
        
		//引导用户打开url这个网页,即重定向到url
        try {
            response.sendRedirect(url);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    //用户同意授权后,页面将跳转到这个路径:http://heng.nat300.top/sell/weixin/invoke
    @RequestMapping("/invoke")
    public void oauthInvoke(HttpServletRequest request){
       //2、从回调地址中获取code
        String code = request.getParameter("code");
        String state = request.getParameter("state");
    }
}

启动项目后,若在浏览器访问这个项目:http://heng.nat300.top/sell/weixin/auth,显示要到微信客户端打开:

在这里插入图片描述

我们将这个请求地址发给微信中的某个人,然后点击访问这个连接,会询问你是否同意授权:

在这里插入图片描述

如果用户同意,就会回调到http://heng.nat300.top/sell/weixin/invoke接口,从而可以获取code

2.2 通过code换取网页授权access_token

如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。

获取code后通过下面的请求,获取access_token和openid:

请求方法:

获取code后,请求以下链接获取access_token: https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

请求连接中的参数说明:

参数是否必须说明
appid公众号的唯一标识
secret公众号的appsecret
code填写第一步获取的code参数
grant_type填写为authorization_code

返回的数据为json格式数据:

正确时返回的JSON数据包如下:

{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}
参数描述
access_token网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
expires_inaccess_token接口调用凭证超时时间,单位(秒)
refresh_token用户刷新access_token
openid用户唯一标识,请注意,在未关注公众号时,用户访问公众号的网页,也会产生一个用户和公众号唯一的OpenID
scope用户授权的作用域,使用逗号(,)分隔

错误时微信会返回JSON数据包如下(示例为Code无效错误):

{"errcode":40029,"errmsg":"invalid code"}

代码演示:

@Controller
@RequestMapping("/weixin")
public class WiexinOathu {

    // 1、当用户请求这个方法时,我们需要引导用户打开url这个地址,请求授权
    @RequestMapping("/auth")
    public void autho(HttpServletResponse response)  {
        //redirect_uri
        String path = "http://heng.nat300.top/sell/weixin/invoke";
        try {
            URLEncoder.encode(path,"UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }

        String url = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
            "appid=wxd0430ca3dde79d52" +
            "&redirect_uri="+ path +
            "&response_type=code" +
            "&scope=snsapi_userinfo" +
            "&state=STATE" +
            "#wechat_redirect";

        try {
            response.sendRedirect(url);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    //用户同意授权后,页面将跳转到这个路径:http://heng.nat300.top/sell/weixin/invoke
    @RequestMapping("/invoke")
    public void oauthInvoke(HttpServletRequest request){
        //2、从回调地址中获取code
        String code = request.getParameter("code");
        String state = request.getParameter("state");

        //3、认证服务器,获取code后,请求以下链接获取网页授权access_token
        String url = "https://api.weixin.qq.com/sns/oauth2/access_token?" +
                "appid=wxd0430ca3dde79d52" +
                "&secret=46088f58a30ffb26b12d921735d26691" +
                "&code="+code +
                "&grant_type=authorization_code";

        //认证服务器响应的json数据,获取access_token 和 openid
        JSONObject jsonObject = WeiXinUtil.httpRequest(url,"POST",null);
        String access_token = jsonObject.getString("access_token");
        String openid = jsonObject.getString("openid");

        System.out.println("access_token="+access_token);
        System.out.println("openid="+openid);
    }
}

2.3 拉取用户信息(需scope为 snsapi_userinfo)

如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openid拉取用户信息了。

请求方法:

http:GET(请使用https协议) https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

参数说明:

参数描述
access_token网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
openid用户的唯一标识
lang返回国家地区语言版本,zh_CN 简体,zh_TW 繁体,en 英语

返回说明:

正确时返回的JSON数据包如下:

{   
  "openid":" OPENID",
  "nickname": NICKNAME,
  "sex":"1",
  "province":"PROVINCE",
  "city":"CITY",
  "country":"COUNTRY",
  "headimgurl":       "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
  "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
参数描述
openid用户的唯一标识
nickname用户昵称
sex用户的性别,值为1时是男性,值为2时是女性,值为0时是未知
province用户个人资料填写的省份
city普通用户个人资料填写的城市
country国家,如中国为CN
headimgurl用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空。若用户更换头像,原有头像URL将失效。
privilege用户特权信息,json 数组,如微信沃卡用户为(chinaunicom)
unionid只有在用户将公众号绑定到微信开放平台帐号后,才会出现该字段。

错误时微信会返回JSON数据包如下(示例为openid无效):

{"errcode":40003,"errmsg":" invalid openid "}
@Controller
@RequestMapping("/weixin")
public class WiexinOathu {

    // 1、当用户请求这个方法时,我们需要引导用户打开url这个地址,请求授权
    @RequestMapping("/auth")
    public void autho(HttpServletResponse response)  {
        //redirect_uri
        String path = "http://heng.nat300.top/sell/weixin/invoke";
        try {
            URLEncoder.encode(path,"UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }

        String url = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
            "appid=wxd0430ca3dde79d52" +
            "&redirect_uri="+ path +
            "&response_type=code" +
            "&scope=snsapi_userinfo" +
            "&state=STATE" +
            "#wechat_redirect";

        try {
            response.sendRedirect(url);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    //用户同意授权后,页面将跳转到这个路径:http://heng.nat300.top/sell/weixin/invoke
    @RequestMapping("/invoke")
    public void oauthInvoke(HttpServletRequest request){
        //2、从回调地址中获取code
        String code = request.getParameter("code");
        String state = request.getParameter("state");
        
        System.out.println("code="+code);

        //3、认证服务器,获取code后,请求以下链接获取网页授权access_token
        String url = "https://api.weixin.qq.com/sns/oauth2/access_token?" +
                "appid=wxd0430ca3dde79d52" +
                "&secret=46088f58a30ffb26b12d921735d26691" +
                "&code="+code +
                "&grant_type=authorization_code";

        //认证服务器响应的json数据,获取access_token 和 openid
        JSONObject jsonObject = WeiXinUtil.httpRequest(url,"POST",null);
        String access_token = jsonObject.getString("access_token");
        String openid = jsonObject.getString("openid");

        System.out.println("access_token="+access_token);
        System.out.println("openid="+openid);

        //4、根据openid和access_token获取资源信息
        String URLUserinfo = "https://api.weixin.qq.com/sns/userinfo?" +
                "access_token=" + access_token +
                "&openid="+openid+
                "&lang=zh_CN";
        JSONObject jsonobj = WeiXinUtil.httpRequest(URLUserinfo,"GET",null);
        System.out.println(jsonobj);
    }
}

控制台输出结果:

code=00100x0002n92K1d7S2007ykIa100x0d

---->httpRequest传回的信息是:{"access_token":"35_uPT5olV_7H8gIxF3sqt5enZHJg_7T2DBgVVvPaocT37AJM4Qy5rCIYNI8M1_q_V3tsQ5fAmZFs26Z2tdO-13ok0LsxLFQlwQ9xe8_3lXug0","expires_in":7200,"refresh_token":"35_JvB56d8GjDdQG9hfyJMUS0HTKTuFd_WIjpWKg_CihQLGKWY2dppWE4_tPQXXxhv_lI92CIKJYkcID6AhnvZDG-St_WcyJ1SK7hcOwqeyBhg","openid":"oaaZ7txEYH7kpwRVfBCc9hych-CE","scope":"snsapi_userinfo"}

access_token=35_uPT5olV_7H8gIxF3sqt5enZHJg_7T2DBgVVvPaocT37AJM4Qy5rCIYNI8M1_q_V3tsQ5fAmZFs26Z2tdO-13ok0LsxLFQlwQ9xe8_3lXug0
openid=oaaZ7txEYH7kpwRVfBCc9hych-CE

---->httpRequest传回的信息是:{"openid":"oaaZ7txEYH7kpwRVfBCc9hych-CE","nickname":"别惹我","sex":2,"language":"zh_CN","city":"南京","province":"江苏","country":"中国","headimgurl":"http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoMGGJX7Etibc0he241duGKMSWickeibOUAGEC0OeaxuzMXaAOhbK3KSBViaNibf4ZbTBoABTqgSc0ia3bA/132","privilege":[]}
{"openid":"oaaZ7txEYH7kpwRVfBCc9hych-CE","nickname":"别惹我","sex":2,"language":"zh_CN","city":"南京","province":"江苏","country":"中国","headimgurl":"http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoMGGJX7Etibc0he241duGKMSWickeibOUAGEC0OeaxuzMXaAOhbK3KSBViaNibf4ZbTBoABTqgSc0ia3bA/132","privilege":[]}

3. 补充用到的工具类

需要导包:

    <!-- JSONObject对象依赖的jar包 -->
        <dependency>
            <groupId>commons-beanutils</groupId>
            <artifactId>commons-beanutils</artifactId>
            <version>1.9.3</version>
        </dependency>
        <dependency>
            <groupId>commons-collections</groupId>
            <artifactId>commons-collections</artifactId>
            <version>3.2.1</version>
        </dependency>
        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>
        <dependency>
            <groupId>commons-logging</groupId>
            <artifactId>commons-logging</artifactId>
            <version>1.1.1</version>
        </dependency>
        <dependency>
            <groupId>net.sf.ezmorph</groupId>
            <artifactId>ezmorph</artifactId>
            <version>1.0.6</version>
        </dependency>
        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.2.3</version>
            <classifier>jdk15</classifier><!-- 指定jdk版本 -->
        </dependency>
import net.sf.json.JSONObject;

import java.io.*;
import java.net.ConnectException;
import java.net.URL;
import java.security.cert.CertificateException;
import java.security.cert.X509Certificate;
import javax.net.ssl.*;


public class WeiXinUtil {
    public static JSONObject httpRequest(String requestUrl, String requestMethod, String outputStr) {
        JSONObject jsonObject = null;
        StringBuffer buffer = new StringBuffer();
        try {
            // 创建SSLContext对象,并使用我们指定的信任管理器初始化
            TrustManager[] tm = {new X509TrustManager() {
                @Override
                public void checkClientTrusted(X509Certificate[] x509Certificates, String s) throws CertificateException {

                }

                @Override
                public void checkServerTrusted(X509Certificate[] x509Certificates, String s) throws CertificateException {

                }

                @Override
                public X509Certificate[] getAcceptedIssuers() {
                    return null;
                }
            }};
            SSLContext sslContext = SSLContext.getInstance("SSL", "SunJSSE");
            sslContext.init(null, tm, new java.security.SecureRandom());
            // 从上述SSLContext对象中得到SSLSocketFactory对象
            SSLSocketFactory ssf = sslContext.getSocketFactory();

            URL url = new URL(requestUrl);
            HttpsURLConnection httpUrlConn = (HttpsURLConnection) url.openConnection();
            httpUrlConn.setSSLSocketFactory(ssf);

            httpUrlConn.setDoOutput(true);
            httpUrlConn.setDoInput(true);
            httpUrlConn.setUseCaches(false);
            // 设置请求方式(GET/POST)
            httpUrlConn.setRequestMethod(requestMethod);

            if ("GET".equalsIgnoreCase(requestMethod))
                httpUrlConn.connect();

            // 当有数据需要提交时
            if (null != outputStr) {
                OutputStream outputStream = httpUrlConn.getOutputStream();
                // 注意编码格式,防止中文乱码
                outputStream.write(outputStr.getBytes("UTF-8"));
                outputStream.close();
            }

            // 将返回的输入流转换成字符串
            InputStream inputStream = httpUrlConn.getInputStream();
            InputStreamReader inputStreamReader = new InputStreamReader(inputStream, "utf-8");
            BufferedReader bufferedReader = new BufferedReader(inputStreamReader);

            String str = null;
            while ((str = bufferedReader.readLine()) != null) {
                buffer.append(str);
            }
            bufferedReader.close();
            inputStreamReader.close();
            // 释放资源
            inputStream.close();
            inputStream = null;
            httpUrlConn.disconnect();
            jsonObject = JSONObject.fromObject(buffer.toString());
            //jsonObject = JSONObject.fromObject(buffer.toString());
            System.out.println("---->httpRequest传回的信息是:"+jsonObject);
        } catch (ConnectException ce) {

        } catch (Exception e) {

        }
        return jsonObject;
    }
}
在Vue项目中使用微信OAuth2.0授权登录,可以通过以下步骤实现: 1. 在微信公众平台或开放平台中申请应用,并获取到appID和appSecret。 2. 在Vue项目中安装wechat-oauth模块,该模块提供了微信OAuth2.0的相关接口。 ``` npm install wechat-oauth ``` 3. 在Vue项目的后端服务器中,编写一个处理微信OAuth2.0授权登录的回调接口,并在该接口中调用wechat-oauth模块提供的接口,实现用户授权登录。 ``` const OAuth = require('wechat-oauth'); const client = new OAuth(appId, appSecret); // 获取授权地址并重定向到该地址 router.get('/wechat/login', async (ctx, next) => { const redirectUrl = client.getAuthorizeURL( 'http://your-redirect-url', '', 'snsapi_userinfo' ); ctx.redirect(redirectUrl); }); // 处理授权回调 router.get('/wechat/callback', async (ctx, next) => { const code = ctx.query.code; const token = await client.getAccessToken(code); const openid = token.data.openid; const userInfo = await client.getUser(openid); // TODO: 处理用户信息 }); ``` 4. 在Vue项目中,提供一个“使用微信登录”的按钮,点击该按钮时,重定向到后端服务器中的授权接口,实现用户授权登录。 ``` <template> <div> <button @click="loginWithWechat">使用微信登录</button> </div> </template> <script> export default { methods: { loginWithWechat() { window.location.href = 'http://your-server/wechat/login'; } } } </script> ``` 需要注意的是,使用微信OAuth2.0授权登录,需要用户在微信客户端中进行操作,因此需要在移动端或微信公众号中使用。同时,需要在微信公众平台或开放平台中配置授权回调地址,并保证该地址可以被访问到。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我一直在流浪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值