VUE实现微信扫码登录

news2024/11/18 1:28:59

获取access_token时序图:

public中index.html引入

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

 微信登录操作

new WxLogin({
        // 以下操作把请求到的二维码嵌入到id为"weixin"的标签中
        id: "weixin",

        appid: "", // 该appid为后端传给前端,在微信开放平台提交应用审核通过后获得,唯一标识

        scope: "snsapi_login",//应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login

        // 扫码成功后重定向的接口
        redirect_uri: "",//后端传给前端,用户允许授权后,将会重定向到redirect_uri的网址上,并且带上 code 和state参数

        // state填写编码后的url
        state: encodeURIComponent(
          window.btoa("http://127.0.0.1:8080" + _this.$route.path)
        ),//用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止 csrf 攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加 session 进行校验

        // 以下编码为css样式文件进行base64编码获得,调用样式文件
           href:"data:text/css;base64,Lyogd3hsb2dpbi5jc3MgKi8NCi5pbXBvd2VyQm94IC50aXRsZSwgLmltcG93ZXJCb3ggLmluZm97DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoNCi5pbXBvd2VyQm94IC5xcmNvZGV7DQogIG1hcmdpbi10b3A6IDIwcHg7DQp9"});

 href中css进行base64编码操作:node data-url.js

// data-url.js

var fs = require('fs');

// function to encode file data to base64 encoded string

function base64_encode(file) {

    // read binary data

    var bitmap = fs.readFileSync(file);

    // convert binary data to base64 encoded string

    return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');

}

//console.log(base64_encode('./wxlogin.css'))

csse文件

/* wxlogin.css */

.impowerBox .title, .impowerBox .info{

  display: none;

}

.impowerBox .qrcode{

  margin-top: 20px;

}

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

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

相关文章

走进Vue【三】vue-router详解

目录&#x1f31f;前言&#x1f31f;路由&#x1f31f;什么是前端路由&#xff1f;&#x1f31f;前端路由优点缺点&#x1f31f;vue-router&#x1f31f;安装&#x1f31f;路由初体验1.路由组件router-linkrouter-view2.步骤1. 定义路由组件2. 定义路由3. 创建 router 实例4. 挂…

VUE3 子传父 父传子 双向传递

组件参数传递 父传子 father.vue <template > <!-- 父传子实现 2.向vue页面中的子组件传递该属性 :传给子组件的名字&#xff08;自定义&#xff09;“对应定义在父组件的属性名” --><Header :openpagevaria"openpagevaria" ></Header&g…

使用vue-cli-plugin-electron-builder创建electron+vue项目

文章目录一、nvm环境二、安装vue-cli、yarn三、使用vue项目管理器创建项目四、使用vue项目管理器安装插件五、进入my-electron-vue目录&#xff0c;启动electron六、安装VueDevtools&#xff0c;解决Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT——…

npm install xxxx --legacy-peer-deps命令是什么?

本文分享自华为云社区《npm install xxxx --legacy-peer-deps命令是什么&#xff1f;为什么可以解决下载时候产生的依赖冲突呢&#xff1f;》&#xff0c;作者&#xff1a; gentle_zhou 。 在日常使用命令npm install / npm install XX下载依赖的操作中&#xff0c;我经常会遇…

npm 报错“A complete log of this run can be found in:”解决方法

npm 启动项目 npm run serve/dev的时候报了个错&#xff1a;再次记录一下 ! code ELIFECYCLE npm ERR! errno 1 npm ERR! new0.1.0 serve: vue-cli-service serve npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the new0.1.0 serve script. npm ERR! This is probably n…

【CSS 文字渐变、背景渐变实现方式】

CSS 文字渐变&#xff0c;背景渐变的几种实现方式 在我们日常页面开发当中&#xff0c;使用合适的css渐变效果能让我们的界面更加美观&#xff0c;赏心悦目。 一、CSS 文字渐变&#xff1a; 首先&#xff0c;文字渐变实际上是通过背景渐变裁剪成文字的前景色&#xff0c;然后…

【微信小程序】初入微信小程序

大家好我依旧是山鱼&#x1f41f;&#xff0c;对于初入小程序的同学来说本篇依旧是你的不二选择&#xff0c;它详细的介绍了小程序及小程序&开发者工具的使用&#xff0c;大家快快学起来吧&#xff01; 目录 一&#xff0c;小程序简介 1.1 什么是微信小程序 1.2小程序与…

前端实现一个名言生成器

The sand accumulates to form a pagoda✨ 写在前面✨ JS是什么&#xff1f;✨ 名言生成器✨ 页面搭建✨ 功能实现✨ 写在前面 在上周我们通过HTML、CSS实现了一个简单的‘我的相册‘页面的搭建&#xff0c;很多伙伴呢跟我说难道前端就只能做一些页面搭建的工作吗&#xff1f;…

Vue3 京东到家项目实战第一篇(首页及登录功能开发) 进阶式掌握vue3完整知识体系

目录 项目首页开发 项目准备✌️ 样式开发&#x1f44d; 防抖&#x1f44a; 底部横条✌️ 登陆注册功能开发 样式编写 &#x1f450; 路由守卫实现基础登录校验功能☝️ 使用 axios 发送登录 Mock 请求&#x1f448; 请求函数的封装&#x1f64c; 通过代码拆分增加逻…

html基本标签

目录 1&#xff0c;标题标签h1-h6 2&#xff0c;段落标签p 3&#xff0c;换行标签br 4&#xff0c;水平线标签hr 5&#xff0c;图片标签img及路径详解(绝对/相对路径) 6&#xff0c;超文本链接标签a 7&#xff0c;超本文链接之锚点 8&#xff0c;div标签 9&#xff0c…

JS-获取网页滑动距离,并实时监听

介绍 本文主要介绍通过JS获取网页滑动距离&#xff0c;并实时监听的方法。分析document.body.scrollTop、document.documentElement.scrollTop、window.pageYOffset 三者之间的区别。 一、获取网页滑动距离 JS方法&#xff1a; console.log(网页被卷去的高&#xff1a;, doc…

05-ES6语法:解构赋值

本文我们介绍ES6中解构赋值。ES6的解构赋值语法是一种JS表达式。解构赋值语法是一种JS表达式&#xff0c;通过解构赋值&#xff0c;可以将属性/值从对象/数组中取出&#xff0c;赋值给其他变量。 下面我们具体来看看解构赋值是什么&#xff1f;以及是如何使用的&#xff1f; …

Bootstrap——制作个人简历网页、工具类【边框(添加、删除、颜色、圆角)、清除浮动、颜色(文本、链接、背景)、display属性、浮动、定位、文本对齐】

制作个人简历网页 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><meta name"viewport"content"widthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,u…

移动端H5网页开发必备知识

简介 工欲善其事必先利其器&#xff0c;今天这篇文章主要讲解移动端H5开发必备的一些基础知识以及移动端适配和布局方案。如果已经看过这篇文章了或者已经掌握了移动端基础的话可以看笔者写的 移动端H5网页开发常见问题汇总 移动端开发必备知识-Hybrid App 像素 像素即一个…

在Vue中获取DOM元素的实际宽高

最近使用 D3.js 开发可视化图表&#xff0c;因为移动端做了 rem 适配&#xff0c;所以需要动态计算获取图表容器的宽高&#xff0c;其中涉及到一些原生DOM API的使用&#xff0c;避免遗忘这里总结一下。 一、获取元素 在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素。 为了…

【Vue】Vue 项目前端响应式布局及框架搭建

文章目录Vue 项目前端响应式布局及框架搭建一、项目基本结构二、项目分辨率响应式创建1、flexible.js2、引用 flexible 插件3、修改 flexible 默认配置4、cssrem 插件 (px -> rem)三、项目页面框架搭建1、设置背景图2、设置标题文字3、页面主体部分&#xff08;1&#xff09…

Request请求转发getRequestDispatcher

文章目录一、getRequestDispatcher理解二、RequestDispatcher.forward()方法与HttpServletResponse.sendRedirect()方法的区别三、实现步骤1.编写index.jsp登录页面2.编写跳转页面success.jsp页面3.编写LoginServlet.java类四、运行示例一、getRequestDispatcher理解 request.g…

Vue项目使用百度地图api

目录 1.百度开发者认证 2.创建应用 3.引用百度地图API文件 4.展示地图 1.百度开发者认证 进入百度地图开放平台 官网&#xff0c;&#xff08;认证需要身份证号码&#xff0c;人脸识别&#xff0c;手机百度APP&#xff0c;邮箱地址&#xff09; 注册登录完成&#xff0c;…

vue中devTools插件安装教程

vue-devTools 为了更方便的在开发过程中对 Vue 程序进行调试&#xff0c;除了传统的浏览器自带的 debug 工具以外&#xff0c;我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试 vue-devTools插件&#xff1a;点击下载 插件安装教程&#xff1a;https://chrome.zzzmh.cn…

js深拷贝方法

一、ES6中扩展运算符 ES6中的扩展运算符&#xff08;如果只是一层数组或者对象就是深拷贝&#xff0c;多层就是浅拷贝&#xff09; var obj {name : "海绵宝宝",age: 18,sayHello (){console.log("比奇堡早上好");}}var newObj {...obj}console.log(&q…