yige/blog-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

添加微信登录

Browse Source
This commit is contained in:
yi-ge 2020-07-22 14:07:07 +08:00
parent dd78f3af82
commit 78ff669765
2 changed files with 106 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
pages/post/_id.vue
View File

@ -52,8 +52,16 @@
p(v-if="!comments.length", style="color: #cecece; text-align: center; margin-top: 40px") 暂无内容
.comment-default-commit
.login(v-if="!visitorToken")
img(class="login-img", src="https://cdn.wyr.me/imgs/GitHub-Login.png", @click="login('github')", style="margin-left: -140px;")
img(class="login-img", src="https://cdn.wyr.me/visitor-files/2020-07-21/1595344271134Weixin-Login.png", @click="login('weixin')")
img(v-show="!useWeixinLogin" class="login-img", src="https://cdn.wyr.me/imgs/GitHub-Login.png", @click="login('github')", style="margin-left: -140px;")
img(v-show="!useWeixinLogin", class="login-img", src="https://cdn.wyr.me/imgs/Weixin-Login.png", @click="login('weixin')")
.comment-loading(v-show="commentLoading")
.allSpinner
.spinner
.bounce1
.bounce2
.bounce3
img(v-show="!commentLoading && useWeixinLogin", class="weixin-qrcode", :src="weixinLoginQrcode")
p(v-show="!commentLoading && useWeixinLogin") 请使用微信扫码登录
#editor
.comment-toolbar
.comment-no-userinfo(v-if="!visitorToken") 尚未登陆
@ -64,9 +72,17 @@
.comment-logout(@click="commentLogout") 退出
.comment-btn(@click="commentCommit('editor')") 发布
.comment-reply-commit(id="comment-reply-commit", v-show="replyID")
.login(v-show="!visitorToken", @click="login")
img(class="login-img", src="https://cdn.wyr.me/imgs/GitHub-Login.png", @click="login('github')", style="margin-left: -140px;")
img(class="login-img", src="https://cdn.wyr.me/visitor-files/2020-07-21/1595344271134Weixin-Login.png", @click="login('weixin')")
.login(v-show="!visitorToken")
img(v-show="!useWeixinLogin" class="login-img", src="https://cdn.wyr.me/imgs/GitHub-Login.png", @click="login('github')", style="margin-left: -140px;")
img(v-show="!useWeixinLogin", class="login-img", src="https://cdn.wyr.me/imgs/Weixin-Login.png", @click="login('weixin')")
.comment-loading(v-show="commentLoading")
.allSpinner
.spinner
.bounce1
.bounce2
.bounce3
img(v-show="!commentLoading && useWeixinLogin", class="weixin-qrcode", :src="weixinLoginQrcode")
p(v-show="!commentLoading && useWeixinLogin") 请使用微信扫码登录
#editor-reply
.comment-toolbar
.comment-no-userinfo(v-if="!visitorToken") 尚未登陆
@ -152,7 +168,10 @@ export default {
blog: null
},
editorObj: null,
editorReplyObj: null
editorReplyObj: null,
commentLoading: false,
useWeixinLogin: false,
weixinLoginQrcode: null
}
},
mounted () {
@ -598,58 +617,63 @@ export default {
this.visitorToken = null
},
getCode (uuid, last) {
// $.ajax({
// type: "GET",
// url: "https://weixin.openapi.site/check?uuid=" + uuid + (last ? '&last=' + last : ''),
// dataType: "json",
// cache: !1,
// timeout: 6e4,
// success: function (data) {
// if (data.status === 405) {
// $('#code').text('登陆成功，code = ' + data.result.code)
// } else if (data.status === 404) {
// $('#code').text(data.msg.title + ', ' + data.msg.content)
// getCode(uuid, data.result.wxErrCode)
// } else if (data.status === 403) {
// $('#code').text(data.msg.title + ', ' + data.msg.content)
// getCode(uuid, data.result.wxErrCode)
// } else if (data.status === 500) {
// getUUID()
// } else {
// setTimeout(function () {
// getCode(uuid)
// }, 2000)
// }
// },
// error: function () {
// setTimeout(function () {
// getCode(uuid)
// }, 2000)
// }
// })
try {
this.$axios({
type: 'get',
url: 'https://weixin.openapi.site/check?uuid=' + uuid + (last ? '&last=' + last : ''),
timeout: 6e4
}).then((res) => {
if (res.status === 405) {
alert(res.data.code)
} else if (res.status === 404) {
console.log(res)
this.getCode(uuid, res.data.wxErrCode)
} else if (res.status === 403) {
console.log(res)
this.getCode(uuid, res.data.wxErrCode)
} else if (res.status === 500) {
this.login('weixin')
} else {
setTimeout(() => {
this.getCode(uuid)
}, 2000)
}
})
} catch (err) {
setTimeout(function () {
this.getCode(uuid)
}, 2000)
}
},
async login (type) {
if (type === 'github') {
window.open('https://github.com/login/oauth/authorize?client_id=ce1673a37333e47e482d&redirect_uri=https://www.wyr.me/auth', 'Github授权', 'scrollbars=yes,resizable=yes,status=no,location=yes,toolbar=no,menubar=no,width=800,height=600,left=0,top=0')
} else if (type === 'weixin') {
const { data } = await this.$axios.get('https://weixin.openapi.site/img?appid=wx2d1d6aa2f86768d7&redirect_uri=https://wyr.me')
this.useWeixinLogin = true
this.commentLoading = true
try {
const { data } = await this.$axios.get('https://weixin.openapi.site/img?appid=wx2d1d6aa2f86768d7&redirect_uri=https://wyr.me')
if (data.status === 1) {
const uuid = data.result.wxUUID
// $('#qrcode').attr('src', data.result.imgData)
// getCode(uuid)
console.log(uuid)
} else {
this.$toasted.show('获取微信登录所需参数错误，请暂时换用其它登录方式或重试。', {
if (data.status === 1) {
const uuid = data.result.wxUUID
this.weixinLoginQrcode = data.result.imgData
this.getCode(uuid)
this.commentLoading = false
} else {
this.commentLoading = false
this.$toasted.show('获取微信登录所需参数错误，请暂时换用其它登录方式或重试。', {
position: 'top-center',
duration: 5000
})
}
} catch (err) {
this.commentLoading = false
this.useWeixinLogin = false
this.$toasted.show('暂时无法使用Github登录，请尝试其它登录方式或重试。', {
position: 'top-center',
duration: 5000
})
}
this.$toasted.show('敬请期待，请先使用Github登录', {
position: 'top-center',
duration: 5000
})
} else {
this.$toasted.show('敬请期待', {
position: 'top-center',
@ -938,12 +962,44 @@ export default {
user-select none
img
width auto
.login-img
margin 70px 20px 0 20px
z-index 100
position absolute
.login-img:hover
filter contrast(50%)
filter contrast(20%)
.comment-loading
position relative
width 100%
height 100%
.allSpinner
position absolute
top 0
left 0
z-index 999999
width 100%
height 100%
background-color #fff
.spinner
position absolute
top 50%
left 50%
z-index 9999999
margin 75pt auto 0
margin-top -1pc
margin-left -75px
width 150px
text-align center
.weixin-qrcode
width 250px
margin-top 10px
.login:hover
background-color #fff

2
static/css/begin.css
View File

@ -1 +1 @@
.allSpinner{position:fixed;top:0;left:0;z-index:999999;width:100%;height:100%;background-color:#fff}.spinner{position:fixed;top:50%;left:50%;z-index:9999999;margin:75pt auto 0;margin-top:-1pc;margin-left:-75px;width:150px;text-align:center}.spinner>div{display:inline-block;width:30px;height:30px;border-radius:100%;background-color:#67cf22;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}
.allSpinner{position:fixed;top:0;left:0;z-index:999999;width:100%;height:100%;background-color:#fff}.spinner{position:fixed;top:50%;left:50%;z-index:9999999;margin:75pt auto 0;margin-top:-1pc;margin-left:-75px;width:150px;text-align:center}.spinner>div{display:inline-block;width:30px;height:30px;border-radius:100%;background-color:#272727;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}