当前位置: 首页 > news >正文

直播平台代码,pc端微信授权登录的两种实现方式 - 云豹科技

直播平台代码,pc端微信授权登录的两种实现方式

在开发pc端项目中,使用微信授权登录是种很常用的功能,目前在功能实现上有两种不同的方式,现根据两种方式做如下总结。

一、跳转微信授权登录页面进行扫码授权

这种方法实现非常简单只用跳转链接就可以实现微信授权登录

window.location = https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${回调域名}/login&response_type=code&scope=snsapi_login&state=${自定义配置}#wechat_redirect

跳转之后进行微信扫码,之后微信会带着code,回调回你设置的回调域名,这之后拿到code再和后台进行交互,即可实现微信登陆。
这种方法相对来说实现起来非常简单,但是因为需要先跳转微信授权登录页面,在体验上来说可能不是太好。

二、在当前页面生成微信授权登录二维码

这种方法是需要引入wxLogin.js,动态生成微信登陆二维码,具体实现方法如下:

const s = document.createElement('script')
s.type = 'text/javascript'
s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
const wxElement = document.body.appendChild(s)
wxElement.onload = function () {var obj = new WxLogin({id: 'wx_login_id', // 需要显示的容器idappid: '', // 公众号appidscope: 'snsapi_login', // 网页默认即可redirect_uri:'', // 授权成功后回调的urlstate: '', // 可设置为简单的随机数加session用来校验style: 'black', // 提供"black"、"white"可选。二维码的样式href: '' // 外部css(查看二维码的dom结构,根据类名进行样式覆盖)文件url,需要https})
}

其中href参数项还可以通过node将css文件转换为data-url,实现方式如下:

var fs = require('fs');
function base64_encode(file) { var bitmap = fs.readFileSync(file);return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');
} 
console.log(base64_encode('./qrcode.css'))

在终端对该js文件执行命令:

node qr.js

把打印出来的url粘贴到href即可。
这种实现方法避免了需要跳转新页面进行扫码,二维码的样式也可以进行更多的自定义设置,可能在体验上是更好的选择。

以上就是直播平台代码,pc端微信授权登录的两种实现方式, 更多内容欢迎关注之后的文章

http://www.hskmm.com/?act=detail&tid=33501

相关文章:

  • 比特币区块空间经济学深度解析
  • 直播系统源码,js对象根据路径修改值 - 云豹科技
  • 2025 年离心泵厂家最新推荐榜单:涵盖化工 / 卧式多级 / 不锈钢等多类型,帮企业选优质设备
  • 直播系统开发,vue拖拽元素指令 - 云豹科技
  • 2025 年托盘厂家最新推荐榜,聚焦企业技术实力与市场口碑深度解析,筛选优质品牌助力企业采购
  • C# Avalonia 16- Animation- FrameBasedAnimation
  • 01.Python自动获取小说工具
  • 2025 年换热器厂家最新推荐榜:聚焦不锈钢、钛、哈氏合金等多材质及列管式等多类型设备,精选优质厂商助力企业采购决策
  • 2025 年最新推荐砂浆厂家排行榜:聚焦多类型砂浆产品,助力采购方精准选优质供应商
  • 2025 年电缆桥架厂家最新推荐榜:涵盖不锈钢 / 铝合金 / 热镀锌等类型,精选高性能企业助力选购
  • h5直播源码,如何实现一个简易播放器? - 云豹科技
  • Docker中授权普通用户使用docker命令以及解决无权限访问/var/run/docker.sock错误
  • C# Avalonia 16- Animation- PathBasedAnimation
  • 2025年危险品运输公司权威推荐榜:安全高效,专业服务值得信赖!
  • 2025 年联轴器厂家最新推荐排行榜:聚焦万向、膜片、齿式等多类型产品,精选行业优质厂家
  • 2025 年换热器厂家最新推荐榜单:涵盖不锈钢钛哈氏合金等材质及列管式螺旋板等类型,为企业采购提供优质选择
  • 2025 年最新推荐!反应釜制造厂家榜单重磅发布,聚焦不锈钢钛合金哈氏合金等多类型设备优质厂商
  • 多模态、世界模型和主动智能丨Convo AIRTE2025
  • 2025年发电机组厂家推荐排行榜,柴油/燃气/船用/静音箱式/移动拖车/集装箱式/上柴/玉柴/潍柴/康明斯/沃尔沃/道依茨/帕金斯/MTU发电机组公司精选
  • 2025 防火隔断厂家最新推荐排行榜:甲级防火玻璃隔断厂家深度剖析,精选优质品牌助力采购决策
  • clickhouse数据库 数据插入 去重和覆盖
  • nacos客户端(接口调用者)如何感知被调用服务下线? (二)
  • 2025 水泥墩源头厂家最新推荐排行榜:光伏 / 交通 / 围挡等多品类优选,实力品牌权威榜单发布
  • 2025年鸡精生产线/高速混合机/WDG农药生产线/鸡粉干燥设备/海鲜精干燥设备厂家推荐排行榜,调味料干燥设备/全自动配料/螺带混合机优质品牌!
  • 2025 年过滤机厂家最新推荐排行榜:胶带式 / 盘式真空 / 脱水 / 带式真空 / 水平带式过滤机企业精选及选购指南
  • nacos客户端(接口调用者)如何感知被调用服务下线?(一)
  • 2025年防水织带/鞋垫/编织包/针织包/飞织包包/松紧带/鞋带/织带/飞织鞋面厂家推荐排行榜,品质与创新的完美结合!
  • 2025年压铸机械手厂家推荐排行榜,铝镁合金压铸周边自动化,压铸岛专业解决方案!
  • 在MySQL中 redolog undolog binlog 写入的场景,顺序
  • 2025年证卡打印机厂家权威推荐榜:含证件/PVC卡/IC卡/ID卡/智能卡,宝瑞迪/BOOD品牌优选!