vue 基于网易云API实现二维码的登录
2024-04-30 10:55:20
一 官方文档
二 前端代码
<template><div class="bbox"><div class="top"><div class="topp">登录<i class="el-icon-close"></i></div></div><div class="mid"><div class="left"><img src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9643571155/525c/faac/2dc6/fe695c03c7c358ddaa4651736b26a55f.png" alt=""></div><div class="right"><div class="rightt">扫码登陆</div><img :src="qrimgs" alt="" style="width:200px;height:200px">
<div class="rightb">使用 <a href="https://music.163.com/#/download" style="color:skyblue">网易云app</a>扫码登录</div></div></div></div></div>
</template><script>
import axios from 'axios';
export default {props: {// 登录弹框是否存在loginVisible: {type: Boolean,default: false}},data() {return {unikey: '',//keyqrurl: '',qrimgs: '',//二维码图片qrCheckData: {},//状态isLogin: false//是否登录}},mounted() {this.getKey()},methods:{//获取二维码的key值getKey() {let keyData = axios.get('https://netease-cloud-music-api-beta-lyart.vercel.app/login/qr/key', {params:{timerstamp: new Date().getTime(),} }).then(res=>{this.unikey = res.data.data.unikeythis.loginQqr(this.unikey)}) },//通过key去获取二维码loginQqr(key) {let qrData = axios.get('https://netease-cloud-music-api-beta-lyart.vercel.app/login/qr/create',{params:{timerstamp: new Date().getTime(),//传入参数时间戳qrimg: true,key:key,}}).then(res=>{this.qrurl = res.data.data.qrurlthis.qrimgs = res.data.data.qrimgthis.qrCheck()})},//获取二维码的状态qrCheck() {let qrCheckData = axios.get('https://netease-cloud-music-api-beta-lyart.vercel.app/login/qr/check', {params:{key: this.unikey,timerstamp: new Date().getTime(),//传入参数时间戳withCredentials: true} }).then(res=>{// console.log(2222);console.log(res);this.qrCheckData = res.datasessionStorage.setItem('cookie', res.data.cookie);this.isLogin = true}) },//获取登录之后的状态getStatus() {let getStatus = axios.get(`https://netease-cloud-music-api-beta-lyart.vercel.app/login/status?cookie=${sessionStorage.getItem("cookie")}`, {}).then(res=>{sessionStorage.getItem("cookie");// console.log(res.data.data.account.id,res.data.data.account.status);// console.log(res.data.data.profile.avatarUrl,res.data.data.profile.nickname);sessionStorage.setItem('isLogin', res.data.data.account.status);sessionStorage.setItem('userid', res.data.data.account.id);sessionStorage.setItem('avatarUrl', res.data.data.profile.avatarUrl);sessionStorage.setItem('nickname', res.data.data.profile.nickname);console.log(666);// console.log( sessionStorage.getItem('isLogin'));// console.log(sessionStorage.getItem("nickname"));}) },//获取用户信息 , 歌单，收藏，mv, dj 数量// getUinfo() {// let getUinfo = axios.get('https://netease-cloud-music-api-beta-lyart.vercel.app/user/detail?uid=32953014', {// }).then(res=>{// console.log('0000000');// console.log(res);// // console.log(res.data.data.code);// }) // },},watch: {isLogin: function () {let times = setInterval(async () => {this.qrCheck()let code = this.qrCheckData.code// 判断返回值中的codeif (code === 801) {} else if (code === 802) {} else if (code === 803) {sessionStorage.setItem("user", true);this.$router.push("/");//用户登录成功后清除定时器clearInterval(times)//获取登录之后的uid和用户详情以及登录状态this.getStatus()// this.getUinfo()}}, 5000)},},}
</script>
<style lang="scss" scoped>
.bbox{margin: auto;position: relative;width: 530px;height: 350px;background-color: #fff;border: #333 solid 1px;}
.top{width: 530px;height: 50px;background-color: rgb(49, 35, 35);color:white
}
.topp{font-weight: bold;margin-left: 18px;margin-right:18px ;padding-top: 16px;display: flex;justify-content: space-between;
}
.mid{padding: 30px;display: flex;
}
.left img{width: 125px;height: 220px;margin-left: 20px;}
.right{margin-left: 20px;display: flex;align-content: space-between;flex-direction: column
}
.rightt{margin-left: 5px;font-size: 18px;font-weight: 500;color: #333;// width: 200px;// height: 24px;color: rgba(0, 0, 0, 0.4);}
.rightb{
margin-left: 15px;
}
.but{position: absolute;bottom: 0;margin-left: 10px;
}
.mid{margin-left: 50px;
}</style>
三 效果图
vue 基于网易云API实现二维码的登录相关推荐
- EasyAPI基于电子发票API接口二维码小票对接方案
本对接方案的好处是,客户无需为增加发票管理而增加数据库表或者字段.无需研究复杂的税务接口.无需关心税收分类编码.税率等,实现无缝集成. 名称解释: 名称 解释 备注 用户标识 客户系统中的用户唯一编号 ...
- 在Vue中调用微信的扫描二维码功能
在Vue中调用微信的扫描二维码功能 步骤 新建vue文件(这里采用mint的标签库--就一个按钮~~) 关键代码 <template><div class="login_d ...
- 基于MacOSX平台下的二维码扫码功能
基于MacOSX平台下的二维码扫码功能 最近项目接受了一个需求,要在macOS的系统上实现一个二维码扫码的功能.通过多方面的学习,最终实现了要求,具体的实现步骤将会在下面展示. 核心功能模块 实现途径 ...
- vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴
近日,重构项目某一老模块时,有一个功能是生成二维码并下载,还可以复制链接.列表每项都有二维码.下载二维码和复制链接和列表上方总的二维码. 老模块是用的qrocode中文文档,qrcode github ...
- IOS7使用原生API进行二维码和条形码的扫描
使用IOS7原生API进行二维码条形码的扫描 IOS7之前,开发者进行扫码编程时,一般会借助第三方库.常用的是ZBarSDK,IOS7之后,系统的AVMetadataObject类中,为我们提供了解析 ...
- 基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能
NextQRCode ZXing开源库的精简版 **基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能 原文博客 附源码下载地址** 与原ZXingMini项目对比 N ...
- 基于jquery类库的绘制二维码的插件jquery.qrcode.js
jquery.qrcode.min.js 如下 (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.d ...
- Vue使用html2Canvas和canvas2Image下载二维码会模糊的问题解决方法
Vue使用html2Canvas和canvas2Image下载二维码会模糊的问题解决方法 参考文章: (1)Vue使用html2Canvas和canvas2Image下载二维码会模糊的问题解决方法 ( ...
- 基于机器视觉的Data Matrix二维码识别
基于机器视觉的Data Matrix二维码识别 二维码识别,这个在视觉应用中占有很重要的比例,各种各样的二维码都有可能需要识别.常见的QR码.Data Matrix码.本方案是识别Data Matri ...
- php api获取二维码、组合生成图片
public function test() {$template = ROOT_PATH . "public/uploads/back.png";$x = "70&qu ...
最新文章
- sessionStorage 、localStorage 和 cookie 之间的区别
- 《JAVA与模式》之适配器模式
- Cuboid特征提取算法
- SpringBoot Quartz 定时任务详解
- java如何输出指定两个日期之间的所有日期
- 把老赵的页面缓存片断改一下，呵呵
- .NET Core快速入门教程 2、我的第一个.NET Core App（Windows篇）
- jsp mysql书店源码_使用jsp数据库mysql实现网上购物书店课程设计
- 优秀程序员写代码一定会用的 11 条经验！
- QT + MinGW 中文显示乱码解决方案
- 棒！使用.NET Core构建3D游戏引擎
- Linux 发展历史
- React：组件的生命周期
- Unite 2018 | 《崩坏3》：在Unity中实现高品质的卡通渲染（上）
- MX Player不支持此音频格式（EAC3）
- Spring框架基础(2)----Bean的创建及标签属性
- python用链表求两数之和_python 算法 - 008 计算两个链表所代表的整数之和 (整数相加法)...
- 制程与良率，谁才是芯片厂商的竞赛底牌？
- Termux解析公网ipv6——从全世界各地连接你的Termux
- 禁忌搜索算法TS(学习笔记_04)