資訊專欄INFORMATION COLUMN
摘要：最近在做客戶端掃描端二維碼登錄，于是記錄一下實(shí)現(xiàn)過(guò)程，前端是，是和安卓客戶端安裝，就可以了。
最近在做APP客戶端掃描PC端二維碼登錄，于是記錄一下實(shí)現(xiàn)過(guò)程，前端是vuejs，APP是IOS和安卓客戶端：
1.安裝QRCode，npm i QRCode --save-dev就可以了。
2.安裝成功后在對(duì)應(yīng)的單頁(yè)面中引用import QRCode from "qrcode",如果此時(shí)頁(yè)面沒(méi)有報(bào)錯(cuò)，說(shuō)明引入成功了
3.向服務(wù)端獲取qrcode字符串
getQrcode: function () {
this.$http.jsonp("這里是接口地址", {}).then((response) => {
const data = response.body
if(data.ok === 1) {
this.qrCode = data.qrCode
this.screenLogin() //調(diào)用生成二維碼方法
}
})
},
4.獲取到qrcode字符串后生成二維碼
qrcodeShow: function () {
this.qrcodeShow = true //顯示二維碼div
var QRCodeDraw = new QRCode.QRCodeDraw() //創(chuàng)建二維碼變量
var canvas = document.getElementById("qrcode") //獲取div
//開(kāi)始生產(chǎn)二維碼
QRCodeDraw.draw(canvas, "qrcode:" + this.qrCode, {//this.qrCode是上面獲取到的字符串
width: 300,//二維碼寬和高
height: 300
}, (err, canvas) => {
if (err) {
console.error(err);
} else {
console.info("success")
}
})
},
5.html里面二維碼div的寫法
6.qrcodeShow是在
data () {
return {
qrcodeShow: false //默認(rèn)不可見(jiàn)
}
}
6.最后就是獲取和發(fā)送websocket
websocket: function() {
var ws //定義websocket變量
try {//使用try catch
var _this = this //this指向
var WS_URL = "/websocket" //websocket地址
if (location.protocol == "http:") {
ws = new WebSocket("ws://"+WS_URL)
} else {
ws = new WebSocket("wss://"+WS_URL)
}
//接收服務(wù)端推送過(guò)來(lái)的信息
ws.onmessage = function(event) {//event參數(shù)接收
//接收到服務(wù)器推送信息并轉(zhuǎn)換成json對(duì)象
var re = JSON.parse(event.data)
//判斷action是否正確，然后執(zhí)行登錄方法,這里的action是和服務(wù)端約定好的參數(shù)
if(re.action === "qrCode") {
_this.getLogin() //掃描成功調(diào)用登錄方法
_this.qrcodeShow = false //隱藏二維碼div
}
}
//發(fā)送socket給服務(wù)端判斷
ws.onopen = (event) => {
if (this.id) {
ws.send(JSON.stringify({
//與服務(wù)端約定好發(fā)送這兩個(gè)參數(shù)
room: "topic:" + this.id,
action: "join"
}))
} else if (this.qrCode) {
ws.send(JSON.stringify({
room: "qrCode:" + this.qrCode,
action: "join"
}))
} else {
ws.send(JSON.stringify({
room: "home",
action: "join"
}))
}
};
} catch (ex) {
if (console)
console.info(ex);
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85112.html
摘要：場(chǎng)景主要的場(chǎng)景有如下幾個(gè)掃二維碼登錄版系統(tǒng)比如微信版，在手機(jī)端微信登錄的前提下，掃二維碼確認(rèn)，自動(dòng)登錄網(wǎng)頁(yè)版。小結(jié)二維碼掃描登錄是個(gè)挺潮流的功能，這要求既有系統(tǒng)增加改造，也要求針對(duì)這種形式的登錄帶來(lái)潛在的攻擊進(jìn)行安全防范。 序 本文主要來(lái)研究一下二維碼登錄的相關(guān)場(chǎng)景和原理。 場(chǎng)景 主要的場(chǎng)景有如下幾個(gè)： app掃二維碼登錄pc版系統(tǒng) 比如微信web版，在手機(jī)端微信登錄的前提下，掃二維碼...
摘要：最近搞微信第三方登錄，搞蒙圈了。當(dāng)你把服務(wù)號(hào)綁定到開(kāi)放平臺(tái)之后，網(wǎng)頁(yè)授權(quán)返回的數(shù)據(jù)會(huì)多一個(gè)，同一個(gè)微信賬號(hào)在同一個(gè)開(kāi)放平臺(tái)賬號(hào)下的是一致的。 最近搞微信第三方登錄，搞蒙圈了。 我們的業(yè)務(wù)有兩個(gè)場(chǎng)景需要使用微信第三方登錄：1、APP 第三方登錄2、H5網(wǎng)頁(yè)第三方登錄，具體流程：用戶微信端收到一個(gè)二維碼--->掃碼后同意微信授權(quán)-->綁定手機(jī)號(hào)碼 一開(kāi)始糾結(jié)著是不是需要申請(qǐng)公眾號(hào)，找了個(gè)專...
摘要：微信支付方式付款碼支付適用于線下場(chǎng)所支付支付是指商戶通過(guò)調(diào)用微信支付提供的接口，在支付場(chǎng)景中調(diào)起微信支付模塊完成收款。主要用于觸屏版的手機(jī)瀏覽器請(qǐng)求微信支付的場(chǎng)景。可以方便的從外部瀏覽器喚起微信支付。 微信支付方式（https://pay.weixin.qq.com/sta...）： 1、付款碼支付————————適用于線下場(chǎng)所 2、JSAPI支付————————JSAPI支付是指商戶...
摘要：隨著微信的普及，掃碼登錄方式越來(lái)越被現(xiàn)在的應(yīng)用所使用。這里基于微信公眾平臺(tái)的帶參數(shù)臨時(shí)二維碼，并且結(jié)合的服務(wù)實(shí)現(xiàn)掃碼登錄。對(duì)于用戶掃臨時(shí)的二維碼，微信會(huì)觸發(fā)相應(yīng)的回調(diào)事件，我們需要在該回調(diào)事件中處理用戶的掃碼行為。 隨著微信的普及，掃碼登錄方式越來(lái)越被現(xiàn)在的應(yīng)用所使用。它因?yàn)椴挥萌ビ涀∶艽a，只要有微信號(hào)即可方便快捷登錄。微信的開(kāi)放平臺(tái)原生就有支持掃碼登錄的功能，不過(guò)大部分人還是在用公眾...
閱讀 3177·2021-10-13 09:40
閱讀 4037·2021-09-22 15:51
閱讀 1565·2021-09-22 15:48
閱讀 1135·2021-09-06 15:00
閱讀 1877·2019-08-30 15:43
閱讀 2431·2019-08-29 18:35
閱讀 1767·2019-08-29 16:18
閱讀 3690·2019-08-29 12:49
