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版本(务必调为英文输入法),基本操作看游戏里的介绍,怎么做的……懒得说,能看懂就看注释,没有的自己猜,如果你很固执……私我吧 …

基于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;这段代码能自动读取…

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;保障产业链供应链安全已成为我国的重要战略目标。中心的设立旨…

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

随着数字经济的蓬勃发展&#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;使用计算机来管理学生评奖评优管理系统的相关信息成为必然。…

[JAVAEE] 线程安全问题

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

古埃及象形文字在线字典

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

百度文心一言接入流程-java版

百度文心一言接入流程-java版 一、准备工作二、API接口调用-java三、百度Prompt工程参考资料: 百度文心一言:https://yiyan.baidu.com/百度千帆大模型:https://qianfan.cloud.baidu.com/百度千帆大模型文档:https://cloud.baidu.com/doc/WENXINWORKSHOP/index.html千tokens…

使用API有效率地管理Dynadot域名,通过域名命令删除域名服务器(NS)

前言 Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮箱&…

<Project-11 Calculator> 计算器 0.4 公制单位转换器 Metric Units Converter HTML JS

前言 这个参考的是时间转换器 &#xff1c;Project-11 Calculator&#xff1e; 计算器 0.1时间换算器 Time Conversion Calculator-CSDN博客&#xff0c;主要就是替换内容&#xff0c;相当于找不同。 改新内容 index.html 加了新页面链接 添加了 favicon.jpg 橘猫 就当是…

Qt开发-----线程调度

目录 前言 一、Linux下查看进程的情况 二、线程的创建 三、多线程的创建和使用 前言 以下引用内容源自正点原子Qt开发指南文档。 我们写的一个应用程序&#xff0c;应用程序跑起来后一般情况下只有一个线程&#xff0c;但是可能也有特殊情况。比如我们前面章节写的例程都跑…

让你的单细胞数据动起来!|iCellR(一)

今天在翻阅single cell 的github时候&#xff0c;我看见了这个R包&#xff0c;允许我们处理各种来自单细胞测序技术的数据&#xff0c;如scRNA-seq&#xff0c;scVDJ-seq和CITE-Seq。 单细胞转录组教程汇总 想看整套的学习流程还可以戳这里&#xff1a; https://vimeo.com/3…

CSS综合案例——新闻详情

一、知识点 1、文字颜色 属性名&#xff1a;color 属性值&#xff1a; 颜色表示方式属性值说明使用场景颜色关键字颜色英文单词red,green,blue学习测试rgb表示法rg(r,g,b)r,g,b表示红绿蓝三原色&#xff0c;取值0-255了解rgba表示法rgba(r,g,b,a)a表示透明度&#xff0c;取…