网站实现微信扫码登录

已于 2023-05-06 14:14:27 修改
阅读量1w 收藏 40
点赞数 5
分类专栏： 编程技术 文章标签： 微信
于 2023-04-28 18:00:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44917045/article/details/130427790
版权

网站实现微信扫码登录

1 准备工作

1.1 申请网站应用

在接入微信扫码登录之前，在微信开放平台注册开发者账号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。
在这里插入图片描述
在这里插入图片描述

找到回调授权域名这一项，修改成要回调的域名，例如：www.baidu.com 不要加http://或https://。
在这里插入图片描述

2 快速开始

2.1 微信扫码登录流程说明

在这里插入图片描述

1. 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；
2. 通过code参数加上AppID和AppSecret等，通过API换取access_token；
3. 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

简单来说，我们用手机微信扫描网站应用上的微信登录二维码，会弹出是否允许或拒绝按钮，当我们点击允许按钮时，微信会重定向到授权回调域地址上。若用户禁止授权，则不会发生重定向。授权回调域映射的是我们网站应用后端接口，来处理相关登录逻辑。

2.2 生成微信二维码的两种方式

2.2.1 微信提供的二维码生成URL

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

参数说明：

参数是否必须说明
appid是应用唯一标识
redirect_uri是请使用urlEncode对链接进行处理
response_type是填code
scope是应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login
state否用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
lang否界面语言，支持cn（中文简体）与en（英文），默认为cn

正确填写微信提供的二维码生成URL参数后，在浏览器上访问会生成二维码。例如：
在这里插入图片描述

2.2.2 将微信登录二维码内嵌到自己页面

步骤1：在页面中先引入如下JS文件（支持https）

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

步骤2：在需要使用微信登录的地方实例以下JS对象：

 var obj = new WxLogin({
 self_redirect:true,
 id:"login_container", 
 appid: "", 
 scope: "", 
 redirect_uri: "",
  state: "",
 style: "",
 href: ""
 });

参数说明：

参数是否必须说明
self_redirect否true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false
id是第三方页面显示二维码的容器id
appid是应用唯一标识，在微信开放平台提交应用审核通过后获得
scope是应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
redirect_uri是重定向地址，需要进行UrlEncode
state否用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
style否提供"black"、"white"可选，默认为黑色文字描述。
href否自定义样式链接，第三方可根据实际需求覆盖默认样式。

2.3 系统微信扫码登录示例

2.3.1 流程说明

① 对于我们系统来说，微信扫码登录的本质就是将自己系统用户与微信用户进行绑定，我这里是通过微信openid进行绑定。
② 用户扫描微信二维码允许登录，微信会重定向到授权回调域，并且带上code和state参数，授权回调域与/user/callback接口进行映射。
③ /user/callback接口处理时，通过appId、appSecret、code参数去调用 https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code接口，调用接口的凭证，有了它可以获取里面的openid等信息。
④ 通过openid去自己系统数据库查询用户，如果查到用户，就允许微信登录成功，查不到用户，就微信登录失败。
⑤ 关于扫码登录成功跳转系统首页，可以在/user/callback接口中直接发起页面重定向。这种重定向适合简单业务的微信扫码登录，复杂的就不适用。

2.3.2 核心代码

2.3.2.1 前端代码
<div *ngIf="loginWayFlag" class="login-WX">
  <div id="login_container"></div>
</div>

initWxLogin () {
  new WxLogin({
    self_redirect: true,
    id: 'login_container',
    appid: 'xxx',
    scope: 'snsapi_login',
    redirect_uri: encodeURIComponent('https://xxx.com/'),
    state: '@platformId@:@' + this.user.platformId + '@,@systemId@:@' + this.user.systemId + '@,@scanType@:@login@,@wxRandomId@:@' + this.user.wxRandomId + '@',
    style: 'black',
    href: 'data:text/css;base64,IC5pbXBvd2VyQm94IC5xcmNvZGUge3dpZHRoOiAxNTBweDt9Ci5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30KLmltcG93ZXJCb3ggLmljb24zOF9tc2cuc3VjY3t3aWR0aDogMzBweDtoZWlnaHQ6IDMwcHg7ZGlzcGxheTogYmxvY2s7bWFyZ2luLWxlZnQ6IDExMXB4O30KLmltcG93ZXJCb3ggLmljb24zOF9tc2cud2Fybnt3aWR0aDogMzBweDtoZWlnaHQ6IDMwcHg7ZGlzcGxheTogYmxvY2s7bWFyZ2luLWxlZnQ6IDExMXB4O30KaDEsIGgyLCBoMywgaDQsIGg1LCBoNiwgcHtmb250LXNpemU6IDE0cHg7fQ==',
  });
}
2.3.2.2 后端代码

微信常量类

/**
 * 微信常量类
 */
public class WxConstant {
    /**
     * APPID
     */
    public static final String APP_ID = "xxx";

    /**
     * APP密钥
     */
    public static final String APP_SECRET = "xxx";

    /**
     * 授权回调域
     */
    public static final String CALLBACK_SERVER = "http://xxx.com";

    /**
     * 获取二维码接口URL
     */
    public static final String QRCODE_URL = "https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect";

    /**
     * 获取access_token和openid接口URL
     */
    public static final String OPENID_URL = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";
}

微信工具类

/**
 * 微信工具类
 */
@Log4j2
public class WxUtil {
    /**
     * 用于将扫描二维码后重定向的资源url进行编码
     */
    public static String urlEncode(String source){
        String result = source;
        try {
            result = java.net.URLEncoder.encode(source,"utf-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        return result;
    }

    /**
     * 根据code、appid和secret获取access_token(也就是调用接口的凭证，有了它可以获取里面的openid等信息)
     */
    public static WxTokenDTO getTokenWithOpenid(String appId, String appSecret, String code) throws Exception {
        String baseUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";
        String requestUrl = baseUrl.replace("APPID", appId).replace("SECRET", appSecret).replace("CODE", code);
        // 发起GET请求获取凭证
        String result = GetUtil.doGet(requestUrl);
        JSONObject jsonObject = JSON.parseObject(result);
        WxTokenDTO token = new WxTokenDTO();;
        token.setOpenId(jsonObject.getString("openid"));
        token.setAccessToken(jsonObject.getString("access_token"));
        token.setExpiresIn(jsonObject.getIntValue("expires_in"));
        return token;
    }

    /**
     * 根据access_token和openid获取微信用户信息
     */
    public static WxUserDTO getWeChatUserInfo(String access_token, String openid) throws Exception {
        String baseUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID";
        String requestUrl = baseUrl.replace("ACCESS_TOKEN", access_token).replace("OPENID", openid);
        String result = GetUtil.doGet(requestUrl);
        JSONObject jsonObject = JSON.parseObject(result);
        WxUserDTO userDTO = new WxUserDTO();
        userDTO.setNickname(jsonObject.getString("nickname"));
        userDTO.setHeadImgUrl(jsonObject.getString("headimgurl"));
        userDTO.setUnionId(jsonObject.getString("unionid"));
        return userDTO;
    }
}

用户控制器类
授权回调域与/user/callback接口进行映射，code和state参数是微信传递过来的，state参数为自定义参数，我们可以通过它进行传递想要的参数。

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("/callback")
    public RequestResult callback(String code, String state) throws Exception {
        return userService.callback(code, state);
    }
}

用户服务类

   @Override
    public RequestResult callback(String code, String state) throws Exception {
        JSONObject jsonObject = new JSONObject();
        JSONObject params = JSON.parseObject(String.format("{%s}", state.replaceAll("@", "\"")));
        WxTokenDTO tokenDTO = WxUtil.getTokenWithOpenid(WxConstant.APP_ID, WxConstant.APP_SECRET, code);
        log.info("[获取微信openId信息]：" + tokenDTO);

        if ("login".equals(params.getString("scanType"))) {
            wxLogin(tokenDTO.getOpenId(), params.getString("wxRandomId"), params.getLong("systemId"), jsonObject);
        }

        if ("bindUserOpenId".equals(params.getString("scanType"))) {
            bindUserOpenId(params.getLong("userId"), tokenDTO.getOpenId(), params.getLong("systemId"), jsonObject);
        }
        return RequestResult.success(jsonObject);
    }

    /**
     * 微信扫码登录
     */
    private void wxLogin(String openId, String wxRandomId, Long systemId, JSONObject resultObject) {
        UserDTO userDTO = baseMapper.getByOpenId(openId, systemId);
        if (ObjectUtil.isEmpty(userDTO)) {
            resultObject.put("loginResult", getLoginFailHtml());
            return;
        }

        int result = baseMapper.updateUserLoginWxRandomId(userDTO.getId(), wxRandomId);
        if (result > 0) {
            resultObject.put("loginResult", getLoginSuccessHtml());
        } else {
            resultObject.put("loginResult", getLoginFailHtml());
        }
    }

    /**
     * 添加用户信息后，绑定微信openId
     */
    private void bindUserOpenId(Long userId, String openId, Long systemId, JSONObject jsonObject) {
        UserDTO findUserDTO = baseMapper.getByOpenId(openId, systemId);
        if (ObjectUtil.isNotEmpty(findUserDTO)) {
            jsonObject.put("bindUserOpenIdResult", getAlreadyBindOpenIdHtml());
            return;
        }

        User user = new User();
        user.setId(userId);
        user.setOpenId(openId);
        if (baseMapper.updateById(user) > 0) {
            jsonObject.put("bindUserOpenIdResult", getBindOpenIdSuccessHtml());
        } else {
            jsonObject.put("bindUserOpenIdResult", getBindOpenIdFailHtml());
        }
    }

3 参考博客

1.微信官方文档
2.微信扫码登录第三方网站 - 爱码网
3.微信第三方扫码登录（亲测可用）

编程课堂
关注
专栏目录
网站实现微信扫码登录(利用微信开放平台实现)
qq_66313178的博客
05-11 1746
二 手机授权后带这个code码和state 请求到你的回调域接口 这个接口就可以拿接收到的code和你网站应用上的appid,appSecret 请求这个用户的唯一的openid 拿着这个openid就可以存数据库。点击允许后会带着code及你设置的state 调用回调域接口进行处理 如果是我的代码就会调用到这个接口【审核通过后，列表就会可以查看到这个网站应用，点击查看可以获取到appId 和appSecret了。第三步：用网站应用里的appId 调用微信二维码 下面是代码（控制器方法）
微信网页扫码登录的实现
a476479542的博客
10-11 4668
　　为了让用户登录网站的门槛更低，微信扫一扫登录变得越来越广泛，所以最近加紧赶制的项目中有用到这个功能，此篇文字的出发点基于微信开放平台已经配置好域名（80端口）并且认证成功获得app_id和secret并有权限调用微信的接口。好了，就先谈一谈微信扫码登录的整个流程吧。 　　第一步，我们必须得把二维码放在页面上显示。首先普及一下二维码是有失效时间以及失效状态的，一旦你扫过一次二维码或者...
微信开放平台之网站授权微信登录功能
12-25
1 微信开放平台：https://open.weixin.qq.com/ 2 微信官方教程：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=&lang=zh_CN 3.pc页面显示 4. 通过官方提供的文档，我们可以看出一共分4个步骤 第一步：请求CODE 第二步：通过code获取access_token 第三步：通过access_token调用接口 第4步：获取用户个人信息（UnionID机制） api：核
前端实现 微信扫码登录网站 pc端(二维码嵌套页面)
weixin_43434858的博客
06-06 2279
用户在PC端点击“微信扫码登录”按钮。前端请求微信授权二维码接口并展示二维码。用户使用微信扫描二维码并确认登录。微信返回授权码（code）到回调URL。服务器使用授权码请求微信的Access Token接口获取用户信息。通过以上步骤，我们实现了一个简单的微信扫码登录流程。在实际应用中，你还需要处理更多的细节和安全问题，比如防止CSRF攻击、处理Token的过期和刷新等。希望本文能帮助你理解并实现微信扫码登录。如果你有任何问题或建议，欢迎留言讨论！
微信扫码登录实现
最新发布
weixin_67323994的博客
07-25 478
微信扫码登录
一扫即入，如何通过微信公众号扫码登录网站？
未读代码
04-07 3368
这篇文章一起聊聊微信公众号二维码登录是怎么回事，它的工作流程是什么，它怎么保证你的身份安全。以及，如果你是一个开发者，如何在自己的网站上增加扫码登录。
PC网站实现微信扫码登录功能（二）
热门推荐
qq_35771266的博客
08-19 2万+
上篇我们介绍了怎么申请账号以及最后拿到appId和appSecret,如果有不清楚的可以看一下 PC网站实现微信扫码登录功能（一） 下面我就来说一下怎样在PC端怎么实现扫码登录功能。 一、进入官方文档网站 https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 其实官网对过程描述的已经非常细致了。并且提供了两种扫码方式。一种是跳转二维码扫描页面，另一种是内嵌式二维码。大家可以
网站应用微信扫码登录
veerpower的博客
07-02 680
在很多企业网站中一般会提供多种登录方式，而微信扫码登录属于常见的一种，在网页端实现微信登录的方式有很多，例如“公众号方式扫码登录”、“微信开放平台扫码登录”；前者是需要关注公众号才能完成登录操作，对于有的用户来说其实并不想做关注这种操作，所以后者是一种更加纯粹的登录方式，只需要用户扫码授权即可，不需要关注任何东西。这里我们就详细讲解一下网站应用中，利用微信开放平台功能提供的微信扫码登录。
个人网站实现微信扫码登录
mqliang282的专栏
03-11 1103
自己搞了个人网站和小程序之后，发现各种各样的限制真的好多；最近做了一个小程序，给它配一个PC网站，就遇上了各种各样的问题，废话就不多说，先看思维导图。
网站使用微信扫码登录流程
飞飞后端
06-09 4969
网站使用微信扫码登录流程
通过小程序实现微信扫码授权登录，网站接入微信扫码登录功能（免费）
TANKING，开源开发者！
09-13 7788
网站如果想要实现微信扫码登录其实有很多种方案，常见的方案就是微信开放平台和微信公众号服务号。前者是目前大部分网站并且是微信认可的一种方式，后者是开发者发现服务号具备扫码关注后即可获取用户基本信息的能力后而开发的一种方式。
springboot实现web端微信扫码登录项目（基于微信开放平台）
09-18
springboot实现web端微信扫码登录项目（基于微信开放平台）
C#语言实现网页微信扫码登录.zip
05-27
在本文中，我们将深入探讨如何使用C#语言实现网页微信扫码登录的功能。微信扫码登录是一种安全、便捷的用户身份验证方式，它允许用户通过微信应用扫描二维码来授权登录网站，而无需输入用户名和密码。这一过程涉及到...
网页微信扫码登录功能实现
03-24
网页微信扫码登录功能是现代许多网站和应用为了方便用户快速登录而采用的一种便捷方式。它结合了微信庞大的用户基础和移动设备的便利性，让用户无需记忆复杂的用户名和密码，只需通过微信扫一扫即可完成身份验证。...
Java实现微信扫码登入的实例代码
08-19
Java实现微信扫码登入的实例代码 本文主要介绍了如何使用Java实现微信扫码登入功能，并提供了详细的实例代码对大家的学习或工作具有一定的参考借鉴价值。 知识点1: 微信扫码登入的基本概念 微信扫码登入是指用户...
ASP网页调用微信扫码登录方法
08-17
这个教程将专注于介绍如何在ASP（Active Server Pages）网页中实现微信扫码登录的功能，这对于提升用户体验和增强用户粘性有着显著作用。以下是实现这一功能的关键知识点： 1. **微信开放平台**： 微信开放平台...
【第三方登录】微信web扫一扫登录步骤
qq_43813351的博客
10-26 2317
绑定第三方应用或网站，然而，注册、认证、绑定网站走完才能用这个微信扫码登录功能，注意：需要一次性交300元的认证费。一般来说只有企业才做这样的事情，如果是个人建议看看就行。后端能拿到个人信息，其实就已经完成了，接下来就看具体的个人业务需求了。注册一个“微信开发平台”账号、认证账号、绑定一个网站。打开如下：注意这个回调域名，要和前端vue上的一致。截止与2023年10月26日前，微信登录需要在。在vue的index.html文件中添加。实现用微信扫一扫，登录网站。页面会出现一个二维码。
PC网站如何实现微信扫码登录
Decadent_2014的专栏
06-30 2593
不管你运营什么类型的网站，用户注册都是很重要的一个环节，用户注册的方式也是很多的，比如邮箱注册、手机号注册、第三方授权登录等。其中，第三方授权登录是最常用的一种方式，微信扫码登录是其中的一种，但是微信扫码登录的实现方式有很多种，比如公众号扫码，小程序扫码，网页扫码等。本文将介绍一种简单的实现方式。more。
个人博客网站实现微信扫码登录(新)
胖太乙
06-08 3290
在不久之前（两年前）我写了一篇同名的博客，当时只是做一个记录而已。但是没想到会收到很多“猿友”的私聊，等各种问题。我也都一一解答了。趁着这段时间不是很忙，就在家里将这篇博客重新整理了一下，也对功能上进行了一些优化。希望各位在技术探索的路上不迷茫。在开始正题之前， 我们先聊一下实现原理， 方便更好的带领大家熟悉。我们都知道，微信已然成为了国民软件， 男女老少都离不开它。所以使用微信扫码是非常方便的事情。然而当我们的个人网站（博客、论坛）想要接入该功能的时候却发现只对开放。
java实现PC网站实现微信扫码登录功能
07-15
要PC网站上实现微信扫码登录功能，可以按照以下步骤进行： 1. 注册微信开放平台账号：访问微信开放平台（https://open.weixin.qq.com/），使用微信账号登录并注册一个开放平台账号。 2. 创建应用并获取应用ID和密钥：在微信开放平台上创建一个应用，并获取对应的应用ID（AppID）和密钥（AppSecret）。 3. 引入微信登录SDK：下载并引入微信登录的Java SDK，可以使用官方提供的SDK或第三方库，例如weixin-java-tools。 4. 配置回调URL：在微信开放平台上配置回调URL，该URL用于接收微信授权回调的code。 5. 实现扫码登录页面：在PC网站上创建一个扫码登录页面，可以使用HTML和CSS进行布局和样式设计。 6. 发起微信授权请求：在扫码登录页面中，通过调用微信登录SDK提供的接口，生成带有应用ID和回调URL的二维码图片，并显示在页面上供用户扫码。 7. 处理微信授权回调：在设置的回调URL对应的接口中，获取微信授权回调的code，并使用该code调用微信登录SDK提供的接口，获取access_token和openid等用户信息。 8. 实现登录逻辑：根据获取到的用户信息，可以选择将用户信息保存到数据库中，或者进行其他逻辑处理。 需要注意的是，微信授权登录涉及到用户隐私和安全，建议在实施过程中加强安全验证和保护用户信息。 以上是一个大致的步骤，具体实现过程可以参考微信开放平台的文档和示例代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值