vue-pc 实现内嵌式微信扫码登录(附完整代码)

一、准备工作
1. 注册微信开放平台账号

地址:([https://open.weixin.qq.com/](https://open.weixin.qq.com/))

2. 申请开发者资质认证:


3. 创建网站应用

 4. 查看应用详情,拿到 AppID  AppSecret  redirect_uri (授权回调域)

二、使用 

微信官方文档:关于微信快速登录功能的说明 | 微信开放文档

1. index.html引入微信的js文件 (支持http和https,自行选择) 

<script type="text/javascript" src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

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

var obj = new WxLogin({self_redirect: false,id:"login_wechat", appid: "", scope: "snsapi_login", redirect_uri: encodeURIComponent("https://www.xxxx.com"),state: Math.ceil(Math.random() * 1000),fast_login: 0
});

3. 获取 code

在PC端打开以下链接

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

 小坑: 如果获取到的code展示在了网址中间(例如:https://www.xxx.com/?code=fjeiwiow&state=52/member/login),那大概率是上一步没配置self_redirect: false。

4. 通过code获取access_token

注:这步需要传密钥,前端直接调用不安全,所以我们是由后端来调用此接口,前端拿返回值进行下一步操作的。

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

三、完整代码 

微信登录页:

<template><div class="qr" id="login_wechat"></div>
</template><script>export default {created(){this.wxSdk(); // 获取展示二维码this.getCode(); // 获取code},watch: {$route(to, from) { // 监听路由,判断网址中是否存在codeif (to.query.code) {// 拿到code做自己的业务逻辑处理 不多赘述}}},methods: {wxSdk() {this.$nextTick(() => {var obj = new WxLogin({self_redirect: false,id: "login_wechat",appid: "wxa1f5ebd09115150a",scope: "snsapi_login",redirect_uri: encodeURIComponent(`https://${window.location.hostname}/#/member/login`),state: Math.ceil(Math.random() * 1000),style: "black",fast_login: 0});})},getCode() {let redirect_uri = encodeURIComponent(`https://${window.location.hostname}/#/member/login`);let state = Math.ceil(Math.random() * 1000);let url = `https://open.weixin.qq.com/connect/qrconnect?appid=wxa1f5ebd09115150a&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_login&state=${state}#wechat_redirect`;axios.get(url).then(res => { });},}}
</script>

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

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

相关文章

如何在服务器上部署开源大模型 GLM-4-9B-Chat 并应用到RAG应用中

本地服务器部署开源大模型有一个前提&#xff0c;就是得有 GPU 显卡资源&#xff0c;在我下面的例子中我租用了 autodl 中的算力资源&#xff0c;具体是租用了一张消费级别的 RTX 3090 显卡。 环境配置 操作系统及版本&#xff1a;ubuntu 22.04CUDA 版本&#xff1a; 12.1pyto…

【MATLAB源码-第263期】基于matlab的帝企鹅优化算法(EPO)无人机三维路径规划,输出做短路径图和适应度曲线.

操作环境&#xff1a; MATLAB 2022a 1、算法描述 帝企鹅优化算法&#xff08;Emperor Penguin Optimizer&#xff0c;简称EPO&#xff09;是一种基于自然现象的优化算法&#xff0c;灵感来自于帝企鹅在南极极寒环境中的生活习性。帝企鹅是一种群居动物&#xff0c;生活在极端…

再创佳绩 | 竹云荣获“数据要素×”大赛黑龙江分赛一等奖!

近日&#xff0c;由国家数据局、黑龙江省人民政府指导&#xff0c;黑龙江省发改委、黑龙江省数据局主办的2024年“数据要素”大赛黑龙江分赛决赛盛大召开。竹云作为联合单位参与《供热数据资产登记评价中心供热数据要素综合服务平台》项目&#xff0c;荣获绿色低碳赛道一等奖。…

C++ [项目] 愤怒的小鸟

现在才发现C游戏的支持率这么高&#xff0c;那就发几篇吧 零、前情提要 此篇为 制作,由于他没有CSDN,于是由我代发 一、基本介绍 支持Dev-C5.11版本(务必调为英文输入法),基本操作看游戏里的介绍,怎么做的……懒得说,能看懂就看注释,没有的自己猜,如果你很固执……私我吧 …

java-实例化一个List,然后添加数据的方法详解

在Java中&#xff0c;实例化一个 List 并向其中添加数据非常简单。List 是一个接口&#xff0c;因此我们通常使用它的常见实现类 ArrayList 或 LinkedList。以下是一些常见的操作方法&#xff1a; ### 1. 使用 ArrayList 实例化并添加数据 java import java.util.ArrayList; …

基于K8S的StatefulSet部署mysql主从

StatefulSet特性 StatefulSet的网络状态 拓扑状态&#xff1a;应用的多个实例必须按照某种顺序启动&#xff0c;并且必须成组存在&#xff0c;例如一个应用中必须存在一个A Pod和两个B Pod&#xff0c;且A Pod必须先于B Pod启动的场景 存储状态&#xff1a;应用存在多个实例&…

分享Vue3中的一个路由加载函数,基于Glob导入模式,根据路径自动生成路由

哈喽&#xff0c;大家好&#xff01;我是「励志前端小黑哥」&#xff0c;我带着最新发布的文章又来了&#xff01; 专注前端领域10年&#xff0c;专门分享那些没用的前端知识&#xff01; 今天要分享的内容&#xff0c;是一段路由加载的函数代码&#xff0c;这段代码能自动读取…

StringBulider和StringBuffer的底层源码剖析

要深入了解 StringBuffer 和 StringBuilder 的区别&#xff0c;从底层源码的角度来解析&#xff0c;包括它们的创建、扩容机制等&#xff0c;可以参考 JDK 1.8 的源码。 1. AbstractStringBuilder 类 StringBuffer 和 StringBuilder 都继承自 AbstractStringBuilder。…

Three.js实现小米 su7 压缩后的模型加载

Three.js实现小米 su7 压缩后的模型加载 预览&#xff1a; https://threehub.cn/#/codeMirror?navigationThreeJS&classifybasic&idgltfOptLoader import * as THREE from three import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js impo…

复旦大学全球供应链研究中心揭牌,合合信息共话大数据赋能

10月13日&#xff0c;复旦大学全球供应链研究中心&#xff08;以下简称“中心”&#xff09;揭牌仪式在复旦大学管理学院政立院区隆重举行。我国的供应链体系庞大复杂&#xff0c;在百年未有之大变局下&#xff0c;保障产业链供应链安全已成为我国的重要战略目标。中心的设立旨…

《Vue3 版本差异》Vue3.5+ 在组件或HTML元素绑定 ref 差异

组件上的 ref&#xff0c;组合式写法的变化&#xff1b; 在 2024.09.03 发布的 v3.5.0 版上新增接口 useTemplateRef&#xff1b; v3.5 之前 代码第 8 行&#xff0c;导入 ref&#xff1b;代码第 10 行&#xff0c;使用 ref 传参为 null&#xff0c;变量名与 第三行 ref 同…

【python】sorted() list.sort()

文章目录 sorted()和list.sort()sorted 函数sorted()根据键对字典排序根据字典的键排序根据字典的值排序将排序结果转换回字典 list.sort() 方法总结 keylambda student: student[age] sorted()和list.sort() 在Python中&#xff0c;sorted 函数和 list.sort() 方法都可以用来…

打造企业数字化转型的未来蓝图:架构蓝图的构建与实施策略深度解析

随着数字经济的蓬勃发展&#xff0c;全球企业正在经历前所未有的变革与挑战。企业的运营模式、客户体验和市场竞争格局都在迅速变化。为了应对这些挑战&#xff0c;企业必须从战略到技术层面进行深度重塑&#xff0c;架构蓝图的构建和实施是数字化转型过程中不可或缺的工具。架…

CSS - grid制作表格

1. grid-template-columns&#xff1a;网格布局中的列的数量&#xff0c;也可以设置列的宽度 .grid-container {display: grid;grid-template-columns: 80px 200px auto 40px; }.grid-container {display: grid;grid-template-columns: auto auto auto auto;//表示所有列的宽度…

Starrocks部署前期准备

前提条件 硬件要求 CPU StarRocks 依靠 AVX2 指令集充分发挥其矢量化能力。因此&#xff0c;在生产环境中&#xff0c;强烈建议您将 StarRocks 部署于 x86 架构 CPU 的服务器上。 您可以在终端中运行以下命令来检查 CPU 是否支持 AVX2 指令集&#xff1a; cat /proc/cpuin…

高效评优:基于SpringBoot的学生奖励管理系统

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理学生评奖评优管理系统的相关信息成为必然。…

全连接前馈网络:深度学习的基础架构解析

全连接前馈网络&#xff1a;深度学习的基础架构解析 全连接前馈网络&#xff0c;也称为多层感知机&#xff08;MLP, Multi-Layer Perceptron&#xff09;&#xff0c;是深度学习中最基础的神经网络结构之一。这种网络由多个层次的神经元组成&#xff0c;每一层都完全连接到前一…

[JAVAEE] 线程安全问题

目录 一. 什么是线程安全 二. 线程安全问题产生的原因 三. 线程安全问题的解决 3.1 解决修改操作不是原子性的问题 > 加锁 a. 什么是锁 b. 没有加锁时 c. 加锁时 d. 死锁 e. 避免死锁 3.2 解决内存可见性的问题 > volatile关键字 (易变的, 善变的) a. 不加…

古埃及象形文字在线字典

我在个人网站“小孔的埃及学站点”上推出了在线的象形文字字典&#xff0c;总共收罗了将近700条的象形文字&#xff08;词&#xff09;。在线字典的使用方法很简单&#xff0c;在网站各大版块首页的右上方会有如下图所示的查询入口。 点击文本框&#xff0c;输入中文或英文关键…

深入理解 SQL 中的高级数据处理特性:约束、索引和触发器

在 SQL&#xff08;Structured Query Language&#xff09;中&#xff0c;除了基本的查询、插入、更新和删除操作外&#xff0c;还有一些高级的数据处理特性&#xff0c;它们对于确保数据的完整性、提高查询性能以及实现自动化的数据处理起着至关重要的作用。这些特性包括约束、…