微信网页PC端登录扫二维码登录

最近搞得PC端扫二维码登录,写了个控制器,把方法和注意事项都整理了一下,给大家共同学习下。
先说步骤吧:
1.注册微信开放平台https://open.weixin.qq.com,一定要清楚微信开放平台和微信公众平台是分别独立的,不能共用。
2.登录进入——管理中心,网站应用,创建网站应用。填写申请,企业还要盖章,然后设置域名,最后交300元保护费。成功通过验证。获得appid和appSecret两个参数。
3.现在可以在web端里写登录控制器了。
4.微信网站登录的文档在https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=41ab5f757248bbbdcc2aad1a6d52b49fdc19579e&lang=zh_CN。
5.微信登录请求,其实你可以当成是个url跳转。https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
参数 是否必须 说明
appid 是 应用唯一标识
redirect_uri 是 重定向地址,需要进行UrlEncode
response_type 是 填code
scope 是 应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即可
state 否 用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验
把appid参数传给开放平台。链接页面会显示一个二维码。

6.用户扫码二维码,扫码成功后,会跳转回你传的域名地址。
同时域名后面会带有code和state参数。这个code则是我们需要拿到的钥匙
redirect_uri?code=CODE&state=STATE
7.在redirect_uri跳转的页面或者控制器中,接收code值
code每次会生成一个,用后即会销毁,也就是你不能不停跳转。
8.通过appid、appSecret还有code值,请求open的access_token接口,获得access_token。

"access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID", 
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

参数 说明
access_token 接口调用凭证
expires_in access_token接口调用凭证超时时间,单位(秒)
refresh_token 用户刷新access_token
openid 授权用户唯一标识
scope 用户授权的作用域,使用逗号(,)分隔
unionid 当且仅当该网站应用已获得该用户的userinfo授权时,才会出现该字段。

这里解释一下,access_token是接口凭证,请求接口需要带上,时间为2个小时。openid是获取用户信息的参数,就如username。而unionid则是uid,用户的唯一ID。
9.拿到token和openid后,可以通过UserInfo接口获得用户数据。https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
正确的Json返回结果:

"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
"privilege":[
"PRIVILEGE1", 
"PRIVILEGE2"
],
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"

}
10.基本上流程就是这样。

流程完了就描述下问题。
1.如果第一步跳转到微信接口时,出现“scope参数错误”,说明appid错误或者你没交保护费。用微信公众号的appid没用
2.请求token的时候,需要通过cURL来抓取,CURL抓取时普遍会出现抓取不到的问题,具体没用深究,估计是https的抓取方式和http不一样,写了个httpGet方法实现了抓取,抓取后内容为json数据,需要decode一下转化为数组
3.为了实现与手机端用户一致性,我们需要记录openid以及unionid。公众号与开放平台的openid是不一样的,唯一相同的unionid。但是这两个openid都能获取到用户信息。我建议除了用户表以外,加一个第三方登录表,字段为 id,uid,type,openid,unionid,refresh_token。type 1是微信端,2是PC端。unionid存在时,就不需要再创建一条用户信息。信息获取后创建session或者cookie

4.为防止csrf跨站请求,state我加入了一个随机数,这个随机数存到session中,当用户扫码确认后,返回时,如果不一致即会被认为跨站请求伪造攻击

具体代码可在我的资源里面下载

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue PC端生成微信二维码进行支付,你可以使用第三方库,如 `qrcode` 来生成二维码,并且使用微信支付的 API 来实现支付功能。 首先,你需要安装 `qrcode` 库。你可以使用 npm 命令进行安装: ``` npm install qrcode --save ``` 接下来,在你的 Vue 组件中,你可以使用以下代码生成二维码: ```javascript import QRCode from 'qrcode' export default { data() { return { qrcodeUrl: '' // 用于存储生成的二维码图片地址 } }, methods: { generateQRCode() { const el = this.$refs.qrcode const url = '这里是二维码的内容,可以是一个链接或其他字符串' QRCode.toDataURL(url, { errorCorrectionLevel: 'H', margin: 1 }) .then(dataUrl => { this.qrcodeUrl = dataUrl }) .catch(err => { console.error(err) }) } } } ``` 这里使用 `QRCode.toDataURL()` 方法生成二维码,并将生成的图片地址存储在 `qrcodeUrl` 变量中。你可以将 `qrcodeUrl` 绑定到一个 `img` 标签上来显示二维码图片。 接下来,你需要实现微信支付功能。你可以使用微信支付的 API 来完成支付流程,具体步骤如下: 1. 获取支付参数:你需要向服务器发送请求,获取支付所需的参数,包括订单号、金额、签名等。 2. 调起微信支付:调用 `wx.chooseWXPay()` 方法,将支付参数传递给微信支付接口进行支付。 ```javascript // 获取支付参数 axios.get('/api/getPayParams') .then(res => { const params = res.data // 调起微信支付 wx.chooseWXPay({ timestamp: params.timestamp, // 时间戳 nonceStr: params.nonceStr, // 随机字符串 package: params.package, // 包含预支付订单 ID 的字符串 signType: params.signType, // 签名类型 paySign: params.paySign, // 签名 success: res => { // 支付成功 console.log('支付成功', res) }, fail: err => { // 支付失败 console.error('支付失败', err) } }) }) .catch(err => { console.error(err) }) ``` 注意,以上代码中的 `wx.chooseWXPay()` 方法需要在微信公众号中使用,如果需要在 PC 端使用,可以使用模拟器或者其他工具进行测试。 希望这能帮助到你。如果你有其他问题,请随时提出。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值