vue3、vue2 实现网站微信扫码登录

其实前端实现没什么难点，重点都是在后端，这里我记录了一下前端实现扫码登录的做法

准备工作 | 微信开放文档做之前我们先去看一下大致流程记得要看一下参数 都讲的很清楚了

实现网页微信扫码登录有两种方法：

第一种跳转到微信第三方页面去扫码

这里用户扫码授权之后会自动跳转到我们指定的页面去并且会在地址栏上携带code

拿到code 将后端需要的参数跟code传过去就好了

来看一下代码：

这里是点击扫码登录方法：

import { onBeforeRouteUpdate } from "vue-router";onBeforeRouteUpdate((to) => { //vue3路由守卫 监听路由地址的变化console.log("url地址栏变化了", to.fullPath);//to.fullPath会返回地址url 然后做截取就好了 将code保存调用后端接口即可  //你们可以自己封装一个截取字符串方法 这里我就不封装了
});const wxLogin = () => { //点击微信登录图标或者按钮的方法let redirect_uri = encodeURIComponent("http://www.xxx.com/login"); //这里是用户扫码授权后跳转的地址let appid = "wx4564811685452155"; //这里是网站的appid 需要跟跳转的地址域名绑定过的let url = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`;window.location.href = url; //url就是微信的第三方页面了
};

第二种使用iframe嵌套二维码

就将二维码嵌套到我们自己的页面上这样我们就不用跳转到微信第三方页面了微信开放文档里面都有讲我就不写第二种方法了如有需要我在写

vue3、vue2 实现网站微信扫码登录相关推荐

Spring学习笔记（二十三）——实现网站微信扫码登录获取微信用户信息Demo
目录微信扫码登录介绍开发步骤微信扫码登录示例微信开放文档遇到的问题使用第三方工具实现网站微信扫码登录开发前介绍开发步骤微信扫码登录获取微信用户信息Demo实现流程实现效果实现过程 ...
应用网站微信扫码登录处理逻辑解析
应用网站微信扫码登录处理逻辑解析近日刚刚进行了网站应用微信扫码登录的功能开发.开发前看了不少文档,但感觉都很偏技术术语,太过于专业.对于刚刚想涉及这方面的菜鸟来说,看的一脸懵逼. 趁着自己刚刚动手的 ...
网站微信扫码登录总结
文章目录微信扫码前端操作后端操作企业微信扫码总结补充网站微信扫码登录从最初的惊艳四座到如今在各大网站普及已经过了7年的时间,如今网站微信扫码登录靠着便捷.安全的特性成为了网站与用户的首选 ...
基于Springboot2.x+vue3.x整合实现微信扫码登录
第1章准备工作 1.1 微信开放平台微信扫码登录,需要在微信开放平台注册账号被认证为开发者才能接入官网地址:https://open.weixin.qq.com/ 1.1.1 注册账号并认证成为开 ...
Java后台实现网站微信扫码登录功能，获取用户openid，及微信用户信息（小程序码方案），关联微信小程序（个人主体小程序也可以）
目录前言操作流程 1.注册微信小程序 2.通过后台获取小程序码注意事项时序图理解方案实现步骤前言很多业务场景之下我们需要实现微信扫码登录检测登录状态的需求,或需要同步网站与小程序的用户信 ...
个人博客网站实现微信扫码登录（附源码）
前言一般情况下,个人博客网站想要做用户注册.登录, 就需要让用户填写用户名.密码等信息进行手动注册.登录,这非常不友好.如果想做成微信扫码登录,对不起~~, 微信扫码登录的接口只对企业开放.好吧, ...
网站使用微信扫码登录流程
微信扫码登录是一个标准的oauth 2.0的过程. 1.用户请求访问网站,选择微信登录. 2.redirect到微信二维码页面 3.获取微信登录二维码,请求参数包括本网站的appId和登录成功后跳转回 ...
微信扫码登录网站实现案例(无需授权)
前言最近因业务需要,需要给网站增加一个扫描公众号二维码登录网站的功能,通过扫码登录,一来用户登录网站不需再输入账号密码,提升了用户体验,二来也可以作为公众号吸粉的一个渠道. 开发准备实现微信扫码登 ...
通过微信扫码登录网站流程
通过微信扫码登录网站微信开放平台文档地址:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Author ...

vue3、vue2 实现网站微信扫码登录

vue3、vue2 实现网站微信扫码登录相关推荐

最新文章

热门文章