基于公众号扫码授权登录

已于 2022-06-15 10:10:25 修改
阅读量4.7k 收藏 37
点赞数 2
分类专栏： 微信 文章标签： 基于公众号扫码授权登录
于 2022-06-13 23:41:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42402854/article/details/125269614
版权

微信扫码登录大体上有两种实现方式：

  • 一种是基于微信开放平台的扫码登录
  • 一种是基于微信公众平台的扫码登录

注意：这两个平台的扫码登录一定要区分开，这两者授权登录是不一样的。

  • 微信开放平台需要企业认证才能注册。
  • 微信公众平台需要认证微信服务号，授权只能在微信客户端中使用（关注公众号），才能进行扫码登录的开发。

下面我们使用基于微信公众平台的扫码登录。

一、申请公众号

1、申请公众号

查看官方文档：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Getting_Started_Guide.html

由于我是个人开发者，注册申请一个微信公众平台的测试号就可以了。

2、申请公众测试号

微信公众平台接口测试帐号申请：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

2.1 申请公众测试号

使用微信扫码登录后，就可以拿到 appID 和 appsecret。

在这里插入图片描述
我们可以在微信公众平台接口调试工具 (https://mp.weixin.qq.com/debug/) 中使用测试接口。

例如：获取access_token

在这里插入图片描述

2.2 关注公众测试号

在这里插入图片描述

2.3 配置回调域名

在“网页服务”中找到“网页账号”，修改“网页授权获取用户基本信息”接口的回调域名。
在这里插入图片描述

注意：

  • 配置网页授权的回调域名，不用填写完整的回调地址，只需要填写域名即可，回调地址在回调域名之下就ok。
  • 测试我通过内网穿透（使用 natapp工具）将本地服务映射到外网，让微信服务可以访问你本地电脑的服务。
  • 线上生产时，需要将官方 xxx.txt文件放到服务器根路径下，域名需要备案，外网能访问接口保存ok。

在这里插入图片描述

接下来就可以开发了。

二、公众号扫码授权登录

微信授权登录的官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

在这里插入图片描述

1、设计思路

1）页面授权流程相关接口如下：

  1. 获取二维码，二维码文本数据推荐后端生成。
  2. 用户扫码，如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。
  3. 通过 code 获取微信接口的调用凭证 access_token
  4. 通过 access_token授权凭证获取微信用户信息

2）我们PC端使用微信扫码登陆的设计思路

  1. PC前端调用后端获取二维码文本数据，展示二维码。
  2. 用户扫码，如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。
    redirect_uri，我们指向前端，然后前端调用后端获取微信用户接口，若接口响应成功，微信手机端关闭页面，回到聊天窗口。
  3. 在第 1 步展示二维码之后，PC前端轮询调用后端微信登录接口，若接口响应成功，则微信扫码登录成功。

注意：

  • 后端获取微信用户接口：一般我们建立微信用户和PC端用户的绑定关系。
  • 后端微信登录接口：一般是监听 后端获取微信用户接口的绑定关系是否触发，即微信用户是否扫码授权登录成功。

为了方便，我们关注PC后端业务实现，简化上面设计思路，将 redirect_uri 直接指向 后端获取微信用户接口。

2、代码实现

创建 springboot项目，引入依赖。

        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.12</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.22</version>
        </dependency>

2.1 controller

@RestController
public class WeiXinPublicAccountController {

    @Autowired
    private WinXinPublicAccountService winXinPublicAccountService;

    /**
     * 获取授权url接口
     */
    @RequestMapping("/getAuthUrl")
    public String getAuthUrl(HttpSession session) throws Exception {
        // 用于第三方应用防止CSRF攻击
        String uuid = UUID.randomUUID().toString().replaceAll("-", "");
        // 临时放到session。开发是放到Redis
        session.setAttribute("state", uuid);

        return winXinPublicAccountService.getAuthUrl(uuid);
    }

    /**
     * 授权回调接口
     */
    @GetMapping(value = "/callback")
    public String callback(HttpServletRequest request) throws Exception {
        HttpSession session = request.getSession();
        // 得到Authorization Code
        String code = request.getParameter("code");
        // 我们放在地址中的状态码
        String state = request.getParameter("state");
        String uuid = (String) session.getAttribute("state");

        // 验证我们发送的状态码
        //if(uuid == null || !uuid.equals(state)){
        //    return "参数为空或者状态码已过期,状态码不正确" ;
        //}

        // 建立微信用户和PC端用户的绑定关系
        String accessToken = winXinPublicAccountService.getAccessToken(code);

        /**
         * TODO 将state与微信用户openid建立关联，放到Redis
         */
        return accessToken;
    }


    /**
     * 微信登录接口（轮询）
     */
    @GetMapping(value = "/weixinLogin")
    public String weixinLogin(HttpServletRequest request) throws Exception {
        HttpSession session = request.getSession();
        // 我们放在地址中的状态码
        String state = request.getParameter("state");
        String uuid = (String) session.getAttribute("state");

        // 验证我们发送的状态码
        //if(uuid == null || !uuid.equals(state)){
        //    return "参数为空或者状态码已过期,状态码不正确" ;
        //}
        /**
         * 1、TODO 通过state获取微信用户openid，从而获取都PC端用户信息
         * 2、TODO 通过PC端用户信息登录并保存到Session，最后返回登录后的信息, 即与我们通过账号登录校验用户信息之后的的登录逻辑同理。
         */

        return "微信扫码登录成功";
    }

}

2.2 service

@Service
public class WinXinPublicAccountService {
    /**
     * 公众平台提供的 appid 和 appsecret
     */
    public String APPID = "wx2a8f0xxx";
    public String APPSECRET = "afd4b135xxxxxxxxx";

    /**
     * 我们自定义认证重定向url
     */
    public static final String AUTH_REDIRECT_URI = "http://qy7cbq.natappfree.cc/weixin/callback";


    public String getAuthUrl(String state){
        // 获取用户认证授权URL，来获取Authorization Code
        String oauthUrl = WeiXinConstant.AUTH_URL
                .replace(WeiXinConstant.APPID, APPID)
                .replace(WeiXinConstant.REDIRECT_URI, URLEncoder.encode(AUTH_REDIRECT_URI, StandardCharsets.UTF_8))
                .replace(WeiXinConstant.SCOPE, WeiXinConstant.SNSAPI_USERINFO)
                .replace(WeiXinConstant.STATE, state);
        System.out.println(oauthUrl);
        return oauthUrl;
    }

    public String getAccessToken(String code){
        //通过Code获取Access Token
        String getAccessTokenUrl = WeiXinConstant.GET_USER_ACCESS_TOKEN_URL
                .replace(WeiXinConstant.APPID, APPID)
                .replace(WeiXinConstant.SECRET, APPSECRET)
                .replace(WeiXinConstant.CODE, code);
        JSONObject resJson = null;
        try {
            resJson = HttpRequestUtils.httpRequestGet(getAccessTokenUrl);
        } catch (IOException e) {
            System.out.println("获取 accessToken 异常, e=" + e);
            return "获取 accessToken 异常";
        }
        System.out.println("获取 access_token接口成功，resJson=" + resJson);
        String accessToken = resJson.getString("access_token");
        String openId = resJson.getString("openid");
        if (StringUtils.isBlank(accessToken) || StringUtils.isBlank(openId)) {
            return "获取 accessToken 为空";
        }
        //测试获取用户信息
        getUserInfo(accessToken, openId);
        return resJson.toString();
    }

    public String getUserInfo(String accessToken, String openId){
        // 根据openid和 access_token获取用户信息
        String getUserInfoUrl = WeiXinConstant.GET_USER_INFO_URL
                .replace(WeiXinConstant.ACCESS_TOKEN, accessToken)
                .replace(WeiXinConstant.OPENID, openId);
        JSONObject resJson = null;
        try {
            resJson = HttpRequestUtils.httpRequestGet(getUserInfoUrl);
        } catch (IOException e) {
            System.out.println("获取 UserInfo 异常, e=" + e);
            return "获取 UserInfo 异常";
        }
        System.out.println("获取 UserInfo 接口成功，resJson=" + resJson);
        /**
         * TODO 这时就该写自己的业务逻辑了
         */
        return resJson.toString();
    }
}

微信平台常量类：

/**
 * 微信平台常量
 */
public class WeiXinConstant {

    /**
     * 公众号-服务号URL
     */
    public static String APPID = "APPID";
    public static String SECRET = "SECRET";
    public static String REDIRECT_URI = "REDIRECT_URI";
    public static String SCOPE = "SCOPE";
    public static String STATE = "STATE";
    public static String CODE = "CODE";
    public static String ACCESS_TOKEN = "ACCESS_TOKEN";
    public static String OPENID = "OPENID";
    public static String SNSAPI_BASE = "snsapi_base";
    public static String SNSAPI_USERINFO = "snsapi_userinfo";

    /**
     * 获取用户认证授权URL
     */
    public static final String AUTH_URL = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect";

    /**
     * 获取用户access_token和openid信息URL
     */
    public static final String GET_USER_ACCESS_TOKEN_URL = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";

    /**
     * 根据openid和 access_token获取用户信息URL
     */
    public static final String GET_USER_INFO_URL = "https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN";
    

}

HttpRequestUtils工具类：

public class HttpRequestUtils {

    /**
     * GET 请求
     */
    public static JSONObject httpRequestGet(String url) throws IOException {
        CloseableHttpClient client = HttpClients.createDefault();
        HttpGet httpGet = new HttpGet(url);
        HttpResponse response = client.execute(httpGet);
        HttpEntity entity = response.getEntity();
        if (entity != null) {
            String result = EntityUtils.toString(entity, "UTF-8");
            return JSONObject.parseObject(result);
        }
        httpGet.releaseConnection();
        return null;
    }

}

2.3 测试

启动项目.

1）获取二维码，这里通过工具展示。

在这里插入图片描述
2）用户扫码登录ok。
在这里插入图片描述
3）轮询的登录接口，此时应该响应ok。

到此，基于公众号扫码授权登录就搞定了。

根据设计思路，实现代码比较简陋，实际开发中可根据需求做响应调整。

– 求知若饥，虚心若愚。

实现微信公众号扫码登录全过程（最详细）
神男码农的博客
08-23 2953
这篇文章介绍了使用微信公众号如何做到从web端提供二维码扫描登录功能，主要分认证的公众号和未认证的普通公众号，两个方向实现扫描登录。这篇文章介绍了使用微信公众号如何做到从web端提供二维码扫描登录功能，主要分认证的公众号和未认证的普通公众号，两个方向实现扫描登录。TOC(真心顶不住微信公众号开发文档的乱并且刚接触的开发者绝对一头雾水，决心编写，防止更多人跳坑！
微信公众号扫码登录
hongkid的专栏
08-22 1282
微信公众平台微信公众平台，给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。申请注册个服务号，并且需要微信认证，注意个人公众号无法开通这个功能，因为个人就不给做微信认证。但如果只是想跑下流程，试下这个功能，可以通过微信公众平台开个测试的公众账号跑通流程测试号跟正式号有个小的差别在于：正式号在获取access_token之前，需要配置服务器的ip白名单。
电脑端微信公众号扫码登录全流程
最新发布
smart_dream
03-06 570
展示二维码，轮询后端接口检测登录状态。：Spring Web + XML 解析。，调用微信接口生成二维码，返回给前端。：根据登录状态跳转到最终页面。换取用户信息，完成登录。
微信扫码登录的两种方式：利用微信开放平台、利用微信公众平台（微信公众号）
柑橘乌云_
12-02 2万+
微信扫码登录，有两种实现方式：方式1、依赖公司在【微信开放平台】用【公司营业执照】注册的账号，才能实现扫码登录方式2、借助个人或者公司的，生成微信带参二维码，实现扫码关注公众号后登录大家要明确自己要用哪种方式。第一种方式： 【微信开放平台】现在微信的使用用户越来越多，如果网站添加上，就能节省很多用户注册时间，极大缩小了注册流程。会让用户觉得特别方便。接下来我们就说一下怎么来实现PC端微信扫码登录。第一步：微信开放平台账户申请。
Spring boot 项目（十二）——实现电脑网页微信扫码自动授权
weixin_45974176的博客
01-04 2934
引言 电脑端微信网页扫码授权登录有2种方式： 第一种：基于微信公众号，单独获取登录二维码扫码，然后扫码登录，程序控制跳转逻辑，例如CSDN 第二种：基于微信开放平台，跳转到微信二维码页面进行扫码登录，重定向到成功页面，例如有道笔记 本文则是实现第一种授权登录
spring boot项目实现 微信扫码登陆
weixin_58691039的博客
12-07 1746
spring boot项目实现 微信扫码登陆
微信公众号扫码授权登录
小米队长的博客
06-28 2611
1、准备工作：注册开放微信公众号。获得此账号的AppID和AppSecret。2、发起授权登录：通过授权链接或者扫码授权二维码的方式，获取登录code，通过code获取access_token。3、成功获取access_token即代表登录成功【微信公众号扫码登录】流程说明微信公众号采用默认授权方式，扫码即可登录成功。
微信扫码登录（公众号）
青椒炒蛋的博客
03-05 2550
扫码登录后，应用或网站可以获取用户在微信上的一些基本信息，例如头像、昵称等，这些信息可以用于个性化用户体验，同时也可以鼓励用户在应用或网站上进行社交分享，增加用户粘性。通过微信扫码登录，用户可能更愿意信任与微信关联的应用或网站，从而提高用户对服务的信任感。
微信公众号扫码登录（SpringBoot+Vue）
IT_WEH_coder的博客
07-20 2302
微信公众号登录是现代应用程序中常见的功能之一，它允许用户使用微信账号进行登录，方便快捷。本文将介绍如何使用Spring Boot和Vue.js来实现微信公众号登录项目，并提供详细的代码和测试结果展示。
公众号扫码登录
开心博客
09-23 1793
微信公众号扫码登录
微信公众号授权登录
04-25
微信公众号授权登录获取登录人员信息
springboot实现web端微信扫码登录项目（基于微信开放平台）
09-18
微信扫码登录是一种安全、便捷的用户身份验证方式，它允许用户通过扫描二维码来授权登录，而无需输入用户名和密码。我们将涵盖以下几个关键知识点： 1. **SpringBoot基础**：SpringBoot是由Pivotal团队提供的一个...
Python-flask-微信网页授权实现扫码登录.zip
09-26
在微信网页授权中，用户通过扫码授权，Flask应用获取到授权码，进而获取access_token，实现用户身份验证。 3. **微信开放平台**： 微信开放平台提供了一系列API接口，用于开发者构建基于微信的服务。在网页授权...
snsjava源码-wechat-login:基于SpringBoot和WxJava实现网站接入微信扫码登录
06-18
实现网站接入微信扫码登录 1. 概述 项目源码： 如果项目存在什么问题，欢迎大家提 ，期待你的来访 demo 使用了Spring Boot 和 (微信开发 Java SDK，支持包括微信支付、开放平台、小程序、企业微信/企业号和公众号等...
Java实现基于微信测试公众号授权扫码登录自建项目
费马程序猿的博客
10-09 429
如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。请求方法access_token=第三步获取到的access_token&openid=测试公众号的OPENID&lang=zh_CN"sex": 1,三、自建项目：前端二维码生成，后端接口进行登录验证授权。
微信公众号扫码登录（一）—— 获取微信公众号二维码
YXXXYX的博客
09-25 1万+
总的来说只要细心看文档还不算是特别难理解的，所以一定要多看文档！总的来说流程就是那三步：因为文章是本人理解记录的，可能会有错误，有错误问题欢迎交流！
springboot整合微信(公众号)实现扫码登录(两种方式，两种实现)
热门推荐
todoitbo的博客
05-09 9万+
springboot整合微信实现扫码登录，公众号推送，网站跳转
springboot实现微信公众号扫码登录
a1308003218的博客
10-15 772
首先后端可以给前端发送绑定唯一code的二维码了，并且绑定了扫码处理器，用户扫码会调用到扫码处理器的内容，处理器内会判断用户是否之前扫描过，若扫描过根据openid查询用户数据，直接异步发送登陆成功的事件，正常登录。方法利用redis生成一个唯一的自增的编码，后端给前端发送二维码时，会绑定一个这个code，根据这个唯一code来判断是哪一个channel扫的码，这样知道了是哪个channel才可以向前端发送对应的通知。5、后端接收到扫码事件，向MQ发送用户扫码成功，MQ异步通知前端扫码成功等待授权。
公众号 扫码登录 订阅号
01-01
### 微信公众号扫码登录订阅号实现方法 对于微信公众号中的订阅号而言，要实现在Web端通过扫描二维码完成登录的过程相对复杂一些。由于微信官方并未直接向订阅号开放登录接口，因此通常采用间接的方法来达成这一目标。 #### 利用OAuth2.0授权机制 为了使用户能够安全地通过扫描二维码登录网站，可以借助于微信提供的OAuth2.0授权框架。具体来说： - 用户访问网页时会看到一个由服务器生成并展示出来的唯一二维码图片。 - 当用户使用手机上的微信客户端扫描该二维码后，会被重定向到预先设定好的URL地址，在这个过程中包含了用户的同意操作以及授权码（code）。 - 接下来，服务端利用获得的`code`参数调用微信API换取`access_token`和`openid`等信息[^4]。 ```javascript // 获取 code 的 URL 构建示例 (Node.js) const querystring = require('querystring'); function getAuthUrl() { const params = { appid: 'YOUR_APP_ID', redirect_uri: encodeURIComponent('REDIRECT_URI'), response_type: 'code', scope: 'snsapi_login', // 或者 snsapi_base 如果只需要 openid state: 'STATE' // 可选状态参数用于保持请求前后上下文一致 }; return `https://open.weixin.qq.com/connect/qrconnect?${querystring.stringify(params)}#wechat_redirect`; } ``` 需要注意的是，上述过程适用于已认证的服务号；而对于未经认证的订阅号，则可能需要采取其他策略，比如引导用户先关注再进行后续的操作[^2]。 另外，考虑到用户体验优化方面的需求，还可以考虑集成第三方组件或库简化开发流程，例如基于Vue.js前端框架配合相应的插件快速构建交互界面，并结合MongoDB存储必要的用户数据以便日后查询分析[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值