让你的网站应用加上微信扫码功能

news/2024/5/9 6:15:29/文章来源:https://blog.csdn.net/tangthh123/article/details/105214650

前言：

继上篇文章在微信开放平台申请网站应用以后，我们就可以正式开始做微信扫码登录这个功能了,接下来这篇文章我将用最通俗易懂的话语让大家掌握整个微信扫码开发的流程，其实真的很简单，只要认真阅读官方文档，一步步的跟着往下做，就没有问题，小编相信你也可以,加油！

环境篇：

1.这是我通过审核的网站应用

网站应用微信登录的流程：

 

微信扫码登录的步骤

官方文档地址

将上面那部分操作做好以后，我们就可以着手开发了，我们先从前端页面开始。

步骤（1）: 在项目中引入js文件 ，调用微信后台接口，微信后台接收到用户请求后，会通过redirect_uri 将code 参数返回。

步骤（2）：开发者在这个回调url 里面可以根据code获取AccessToken,得到用户的openID,当然其中涉及到一个AccessToken的过期和刷新问题。

步骤（3）：接下来可以通过用户openID 和 AccessToken获取用户基本信息。

获取到用户信息以后，可以继续往下写逻辑，怎么让用户能够扫完码以后立马登录系统，这方面就需要自我再考虑一下。

步骤（1）

 

步骤（2）

1.在页面中引入如下JS文件地址：

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: ""});

3.前端页面的内容如下：

引入的Js:

import wechatLogin from '@/sjld/wechatLogin.js' 

显示二维码图片的地方：

  <!-- 微信扫码登录 -->
<a class="btn bt1" @click="wwIsShow=!wwIsShow"></a>
<div class="wxcss"  v-show="wwIsShow" style="width:200px;height:200px" id="login_container">

二维码回调代码：

  // 微信扫码登录window.WxLogin({self_redirect:true,id:"login_container", appid: "替换成你的APPID", scope: "snsapi_login", redirect_uri: "http://你的域名/wechatLogin",state: "123",style: "",href: ""})

上面这俩部分是我在项目中实际的引用情况，也可以在浏览器上访问二维码生成是否成功。

地址如下：

https://open.weixin.qq.com/connect/qrconnect?appid=替换成你的Appid&redirect_uri=https%3A%2F%2F域名%2FwechatLogin&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect

步骤（3）

我们来访问一下页面 ，看一下生成的微信二维码。

 

步骤（4）

WechatController

    @ApiOperation(value = "1.9 微信授权登录")@GetMapping(value = "/wechatLogin")public void wechatLogin(HttpServletRequest request,HttpSession session) {String code = request.getParameter("code");String state = request.getParameter("state");BosUserModel userModel = (BosUserModel) session.getAttribute("user");WechatVo vo = new WechatVo();vo.setAppId("替换成你的Appid");vo.setAppSecret("替换成你的AppSecret");vo.setCode(code);vo.setUserModel(userModel);weiService.wechatLogin(vo);}

WeiService

 @Overridepublic void wechatLogin(WechatVo vo) {try {//第1步，通过code 换取AccessTokenString url = WeiXinParamesUtil.GET_ACCESSTOKEN.replace("appId", vo.getAppId()).replace("{appid}", vo.getAppId()).replace("{secret}", vo.getAppSecret()).replace("{code}", vo.getCode());JSONObject jsonObject = SendRequest.sendGet(url);//获取返回的参数String accessToken = jsonObject.getString("access_token");String refreshToken = jsonObject.getString("refresh_token");String openId = jsonObject.getString("openid");int expires_in = jsonObject.getIntValue("expires_in");//第2步，刷新AccessToken的值(通过refresh_token换取AccessToken的值)if (expires_in > 7200) {String refreshTokenUrl = WeiXinParamesUtil.REFRESH_TOKEN.replace("{appid}", WeiXinParamesUtil.APPID).replace("{refresh_token}", refreshToken).replace("{refresh_token}", refreshToken);JSONObject refreshTokenObject = SendRequest.sendGet(refreshTokenUrl);accessToken = refreshTokenObject.getString("access_token");}//第3步，检验授权凭证AccessToken是否有效String checkAccessTokenUrl = WeiXinParamesUtil.CHECK_OUT_ACCESSTOKEN.replace("{access_token}", accessToken).replace("{open_id}", openId);JSONObject jsonObject1 = SendRequest.sendGet(checkAccessTokenUrl);if (jsonObject1.getString("errmsg").equals("ok")) {//验证通过后进入下一步//第4步, 获取用户个人信息String getUserInfo_url = WeiXinParamesUtil.GET_SNS_USER_INFO.replace("{access_token}", accessToken).replace("{open_id}", openId);JSONObject userObject = SendRequest.sendGet(getUserInfo_url);//接收用户信息//用户idString nickname = userObject.getString("nickname");String sex = userObject.getString("sex");String province = userObject.getString("province");String city = userObject.getString("city");String country = userObject.getString("country");String headImageUrl = userObject.getString("headimgurl");String unionId = userObject.getString("unionid");System.out.println("用户名称：----" + nickname);}} catch (Exception e) {logger.error("微信登录失败", e);}}

SendRequest

  //发送GET请求public static JSONObject sendGet(String url) {HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();HttpSession session = request.getSession();JSONObject jsonObject = null;StringBuffer sb = new StringBuffer();BufferedReader in = null;try {String urlName = url;URL realUrl = new URL(urlName);URLConnection conn = realUrl.openConnection();// 打开和URL之间的连接conn.setRequestProperty("accept", "*/*");// 设置通用的请求属性conn.setRequestProperty("connection", "Keep-Alive");conn.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)");//针对群晖NAS请求，加一个Cookieif (session.getAttribute("sid") != null) {conn.addRequestProperty("Cookie", "id=" + session.getAttribute("sid"));}conn.setConnectTimeout(10000);conn.connect();// 建立实际的连接in = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));// 定义BufferedReader输入流来读取URL的响应String line;while ((line = in.readLine()) != null) {sb.append(line);}jsonObject = JSON.parseObject(sb.toString());} catch (Exception e) {System.out.println("发送GET请求出现异常！" + e);} finally {// 使用finally块来关闭输入流try {if (in != null) {in.close();}} catch (IOException ex) {System.out.println("关闭流异常");}}return jsonObject;}

 

WeiXinParamesUtil

package com.bos.util;import com.alibaba.fastjson.JSONObject;
import com.bos.common.CommenUtil;
import com.bos.data.model.WeiUserInfoModel;
import com.bos.qiWechat.AesException;
import com.bos.qiWechat.WXBizMsgCrypt;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;import javax.servlet.ServletInputStream;
import javax.servlet.http.HttpServletRequest;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;/*** 微信公众平台的参数* @param* @return*/
public class WeiXinParamesUtil {private Logger logger = LoggerFactory.getLogger(WeiXinParamesUtil.class);/*** 通过code 获取 access_token*/public static String GET_ACCESSTOKEN = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={appid}&secret={secret}&code={code}&grant_type=authorization_code";/*** 检验AccessToken是否有效*/public static String CHECK_OUT_ACCESSTOKEN = "https://api.weixin.qq.com/sns/auth?access_token={access_token}&openid={open_id}";/*** 微信开放平台获取用户信息*/public static String GET_SNS_USER_INFO = "https://api.weixin.qq.com/sns/userinfo?access_token={access_token}&openid={open_id}";/*** 刷新AccessToken*/public static String REFRESH_TOKEN = "https://api.weixin.qq.com/sns/oauth2/refresh_token?appid={appid}&grant_type={refresh_token}&refresh_token={refresh_token}";}

WechatVo

package com.bos.data.model.vo.setting;import com.bos.data.model.BosUserModel;
import lombok.Data;/*** @Author tanghh* @Date 2020/4/2 15:52*/
@Data
public class WechatVo {private String appId;private String appSecret;private String code;private BosUserModel userModel;
}

 

效果图

控制台打印信息：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_877699.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python3.2 自动登录网站

python3.2 自动登录网站

让我帮写个小程序&#xff0c;查了查资料&#xff0c;用python写了一个&#xff0c;以前没用过&#xff0c;都是现查的资料&#xff0c;比较粗糙&#xff0c;放到这里留作备用。 1 import urllib.parse 2 import urllib.request 3 4 # ------------------------------需…
阅读更多...
Python 自动登录网站（处理Cookie）

Python 自动登录网站（处理Cookie）

Python 自动登录网站&#xff08;处理Cookie&#xff09; 博客分类&#xff1a; Python Python代码 def login(): cj cookielib.CookieJar() opener urllib2.build_opener(urllib2.HTTPCookieProcessor(cj)) login_url rhttp://zhixing.bjtu.edu.cn/memb…
阅读更多...
Python 最近因开发项目的需要，有一个需求，就是很多SNS网站都有的通过 Email地址 导入好友列表，不过这次要导入的不是Email 列表，而是QQ的好友列表。 实现方式： 通过goog

Python 最近因开发项目的需要，有一个需求，就是很多SNS网站都有的通过 Email地址 导入好友列表，不过这次要导入的不是Email 列表，而是QQ的好友列表。 实现方式： 通过goog

Python 最近因开发项目的需要&#xff0c;有一个需求&#xff0c;就是很多SNS网站都有的通过 Email地址 导入好友列表&#xff0c;不过这次要导入的不是Email 列表&#xff0c;而是QQ的好友列表。 实现方式&#xff1a; 通过google一搜&#xff0c;实现的方式大概有下面这篇文…
阅读更多...
wordpress搜索引擎蜘蛛统计插件SEO

wordpress搜索引擎蜘蛛统计插件SEO

索引擎蜘蛛统计插件可以实时对搜索引擎来访进行统计&#xff0c;指导站长的运营&#xff0c;来访的蜘蛛类型和访问的页面都能在后台一目了然&#xff01; 免费使用下载https://yomeiyo.lanzouw.com/ifh5300s4p7a安装即可 插件安装方法 上传压缩包安装插件 如果是付费插件的话…
阅读更多...
用Django建一个网站

用Django建一个网站

目标&#xff1a;用最短的步骤在本机创建一个网站。 第一步 安装好Django之后&#xff0c;在放置网页的目录下打开命令行&#xff0c;输入 django-admin startproject mysite 即可自动创建一个名为mysite的文件夹。 进入mysite文件夹&#xff0c;创建第一个web程序app01(任意):…
阅读更多...
提升大型网站并发访问性能

提升大型网站并发访问性能

应用服务器 网络应用 中国电信 Linux配置管理 一个小型的网站&#xff0c;可以使用最简单的html静态页面就实现了&#xff0c;配合一些图片达到美化效果&#xff0c;所有的页面均存放在一个目录下&#xff0c;这样的网站对系统架构、性能的要求都很简单。随着互联网业务的不断丰…
阅读更多...
requests 正则表达正式基础爬虫案例二：爬取网站数据

requests 正则表达正式基础爬虫案例二：爬取网站数据

要求&#xff1a;爬取https://ssr1.scrape.center/ 网站中所有电影标题、类型、地区、电影时长、上映日期、评分、简介&#xff1b; 分析&#xff1a;网站共有两个页面组成&#xff0c;电影列表和详情&#xff0c;我们所需要的内容都在详情页面里面可以找到。 列表页面共10页&a…
阅读更多...
PC端网站 rem适配方案

PC端网站 rem适配方案

以1920设计稿为准 1、使用sass语法 转换px rem &#xff0c; vscode编辑器安装插件easy-scss 安装之后打开插件setting.json&#xff0c; 在setting.json里配置转换后css的路径 “easysass.targetDir”: “./css” 创建css文件、scss文件&#xff1a; 项目中如何使用index.sc…
阅读更多...
给大家分享下织梦网站模板

给大家分享下织梦网站模板

最近需要用到一个官网模板&#xff0c;作为一个后台程序员来说写前端和专业的差了远了&#xff0c;所以想找个模板学习下&#xff0c;可是我这面是一顿搜一顿找找了好多都快绝望了因为都不是免费下载的不过最终还是找到了&#xff0c;在这里分享给大家 模板一 红色大气响应式重…
阅读更多...
网站案例，成功案例--我的个人作品

网站案例，成功案例--我的个人作品

西南贝思建筑图书连锁店网上书店成都美可快餐诚信促进会 成都商务投资网中国西部土工材料网广东劳斯丹顿卫浴设备有限公司盛世外贸服装批发城西南时报成都免费网站中国检察网成都乐于健康护理成都顺世文化传播有限公司西南大学生联盟成都川国味餐饮有限公司成都市科技进修学院…
阅读更多...
vue 微软插件实现根据第三方网站链接预览word、pd、excelf等文件

vue 微软插件实现根据第三方网站链接预览word、pd、excelf等文件

一开始做的时候没想到会预览不了&#xff0c;报错 File not found The URL of the original file is not valid or the document is not publicly accessible. Verify the URL is correct, then contact the document owner.如下&#xff1a; 我在微软官网查到&#xff1a; 官…
阅读更多...
世界第五大外包公司(CGI group inc)能够做出来多烂的网站，通过系分的课程设计我对于人机交互和团队合作的几个总结

世界第五大外包公司(CGI group inc)能够做出来多烂的网站，通过系分的课程设计我对于人机交互和团队合作的几个总结

文章目录 前情提要为开始刨祖坟模式做准备CGI inc发家史什么是外包公司CGI group inc看看CGI公司外包的网站你以为CGI做的网站这就算差了&#xff1f;听说你想自己改成好记的密码&#xff0c;想多了吧信息填写一次过&#xff0c;听说你想写到一半保存&#xff1f;我是随便的人吗…
阅读更多...
小型网站到大型网站的演化过程

小型网站到大型网站的演化过程

本文摘自书籍《大型网站技术架构.核心原理与案例分析》 1. 初始阶段&#xff1a; 应用程序、数据库、文件等所有资源都在一台服务器上。 2. 应用服务与数据服务分离 应用和数据分离后整个网站使用三台服务器&#xff1a;应用服务器、文件服务器和数据库服务器。这三台服务器对…
阅读更多...
python爬取唯品会电商网站数据并保存到csv中

python爬取唯品会电商网站数据并保存到csv中

文章目录 1.目标、思路2. 获取数据3.解析数据4.保存数据 1.目标、思路 目标&#xff1a; 本次爬虫爬取的目标是唯品会中口红分类的商品。&#xff08;url &#xff09; 思路&#xff1a;打开网页后点击F12打开抓包工具&#xff0c;找到我们想要的数据包&#xff0c;并分析。 …
阅读更多...
各大视频网站下载神器

各大视频网站下载神器

先说介绍工具&#xff0c;后说使用方法&#xff08;其实不难&#xff09; you-get 是GitHub上的一个项目&#xff0c;其实就是通过几个命令行下载各大网站视频的&#xff0c;这对于做视频的爱好者及一些司机都是很奈斯的选择。 地址&#xff1a;https://github.com/soimort/y…
阅读更多...
电子商务网站的 10 个易用性规则

电子商务网站的 10 个易用性规则

电子商务网站的 10 个易用性规则 电子商务网站的竞争越来越激烈&#xff0c;虽然你可能在以最低的价格卖最好的东西&#xff0c;但同样重要的的是用户的购买体验&#xff0c;对电子商务网站而言&#xff0c;易用性就是让用户尽 可能快而简单的完成购买&#xff0c;有时候&…
阅读更多...
基于jquery Stellar.js实现 网站视差滚动效果

基于jquery Stellar.js实现 网站视差滚动效果

stellar.js是一个 jQuery插件&#xff0c;能很容易地给网站添加视差滚动效果。 虽然已经停止了维护&#xff0c;但它非常稳定&#xff0c;与最新版本的jQuery兼容。 http://markdalgleish.com/projects/stellar.js/ 官网 1.引用js 包 <script src"path/to/jquery/jq…
阅读更多...
推荐一个前沿的无线通信网站——定为电子

推荐一个前沿的无线通信网站——定为电子

欢迎来到定为官网 成都定为电子技术有限公司是一家集咨询、设计、研发和生产无线通信数字基带和模拟前端等产品的高新技术企业&#xff0c;公司一直专注于算法原型验证、教学实验、无线通信和便携式仪器设备等领域。 在算法原型验证方面&#xff0c;定为电子坚持为客户提供最…
阅读更多...
网站被DDOS攻击，我只用了2招应对

网站被DDOS攻击，我只用了2招应对

做网站难免遇到被黑客攻击&#xff0c;特别是关键词排名较靠前的站点&#xff0c;一些不正当的竞争对手会使用不正当的方法把你网站搞瘫&#xff0c;以便把流量引到自己平台上让自己得利。不管是大平台网站还是小平台网站都会遇到DDOS攻击&#xff0c;难道面对DDOS&#xff0c;…
阅读更多...
【Python】利用网站API接口获取天气信息

【Python】利用网站API接口获取天气信息

本文主要讲如何利用Python来获取天气信息。主要程序实现思路是从命令行传递坐标信息&#xff0c;然后利用天气预报网站的免费接口获取到相关天气信息&#xff0c;返回结果以json格式显示&#xff0c;并打印出需要的近3天天气情况。 信息源&#xff1a;https://openweathermap.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业