pc端网页实现微信扫码登录

微信开发文档：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

点击按钮，跳转到微信授权页面，会出现一个二维码。
```
//拉取授权页面
let APPID = '网页应用的appid'
let REDIRECT_URI = encodeURIComponent('授权后跳转回的页面')
location.href=`https://open.weixin.qq.com/connect/qrconnect?appid=${APPID }&redirect_uri=${REDIRECT_URI }&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect `
```
appid：是应用的唯一标识。
redirect_uri：授权登录后跳转回的页面，需要在微信开放平台配置授权回调域，用户使用微信帐号登录后，只能回调至该域名下的页面。要使用encodeURIComponent()进行编码，不能使用encodeURI()，因为如果是Vue项目并且使用的是hash模式的话，#后面的内容会丢失，导致报错：scope错误或没有scope权限。
response_type：填code即可。
scope：应用授权作用域，网页应用目前仅填写snsapi_login即可。
state：非必填，用于保持请求和回调的状态，授权请求后原样带回给第三方。
用户扫码，会弹出授权弹框，确认授权后，微信会自动跳转到回调地址redirect_uri，并通过?的形式拼接相关回调参数。

提取出code传给后端，后端接口会返回网页授权access_token和其他一些用户信息。

//获取url中的search
let search = location.search.slice(1);
let arr = search.split("&");
let result = {};
arr.forEach(function(item){let itemArr = item.split('=');result[itemArr[0]]=itemArr[1];
})if(result.code){//调用后端接口getUserInfo();
}

pc端网页实现微信扫码登录相关推荐

【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档我最 ...
简述网页版微信扫码登录的过程
我的小站网页版微信扫码登录流程 1. 请求页面先打开https://wx.qq.com/显示出页面,这时候会加载一堆的html,js等资源. 2. 获取会话UUID 微信Web版本不使用用户名和密 ...
关于网页版微信扫码登录以及获取用户信息
由于我只研究了1天时间,可能有些地方认知错误 1:网页版微信扫码登录的流程 ① 点击扫码登录按钮 ② qrAuthorize(访问微信接口,如果微信接口判断有权限生成二维码的话,跳转到二维码页面.) ...
PC网站如何实现微信扫码登录
不管你运营什么类型的网站,用户注册都是很重要的一个环节,用户注册的方式也是很多的,比如邮箱注册.手机号注册.第三方授权登录等.其中,第三方授权登录是最常用的一种方式,微信扫码登录是其中的一种,但是微信 ...
网页使用微信扫码登录
第一步在微信开发平台登录进去之后再管理中心-->创建网站应用.填上网站应用的基本信息之后提交审核.审核通过后会有AppID和secret.做好保存. 注:这里的回调域名很重要,请填XXX.XX ...
前端PC端微信扫码登录
PC端微信扫码登录一.微信开放平台 1.创建网站应用 2.设置回调域名二.代码 1.在index.html页面引入http://res.wx.qq.com/connect/zh_CN/htmled ...
细说pc端微信扫码登录
最近做了一个pc端微信扫码登录和微信付款的功能,一个比较常见的问题是在移动端使用微信扫码操作完毕后,pc端如何实时响应的问题.这里细说一下登录的实现流程,付款方面暂时还没找到比较好的实现方法,只能暂时 ...
vue实现网页端企业微信扫码登录功能（前端部分）
时至今日,企业微信在企业日常工作中的使用越来越频繁也越来越重要,不少企业已使用企业微信进行着日常的工作安排管理.在这种背景下,各类系统和企业微信对接的需求也不断增加,今天要说的就是一个比较常见的需求 ...
pc端实现微信扫码登录
pc端实现微信扫码登录流程:使用vue-wxlogin组件当我们打开微信扫一扫,此时二维码组件会有变化,显示扫描成功我们的手机就会弹出一个授权页面.记住让后端绑定一个微信公众,通过授权该公众就可以 ...

pc端网页实现微信扫码登录

pc端网页实现微信扫码登录相关推荐

最新文章

热门文章