站長(zhǎng)資訊網(wǎng)怎么進(jìn)行微博第三方登錄？下面本篇文章給大家介紹一下使用node實(shí)現(xiàn)微博第三方登錄的方法，希望對(duì)大家有所幫助！
node.js極速入門(mén)課程：進(jìn)入學(xué)習(xí)
接入微博第三方登錄可以免注冊(cè),對(duì)用戶的體驗(yàn)更好，今天我們就用nodejs實(shí)現(xiàn)微博第三方登錄(用其它語(yǔ)言也可以)。【相關(guān)教程推薦：nodejs視頻教程】
實(shí)現(xiàn)效果
在線實(shí)例: http://www.lolmbbs.com/login
1、點(diǎn)擊微博登錄按鈕登錄
2、直接掃碼登錄
具體實(shí)現(xiàn)
一、申請(qǐng)weibo網(wǎng)站接入
登錄https://open.weibo.com/connect申請(qǐng)web網(wǎng)站接入
本地開(kāi)發(fā)的時(shí)候應(yīng)用地址寫(xiě):127.0.0.1
二、點(diǎn)擊按鈕微博登錄
采用OAuth2.0授權(quán),詳細(xì)可參考文檔https://open.weibo.com/wiki/Connect/login
1. 生成微博登錄授權(quán)驗(yàn)證碼
const weiboUrl = `https://api.weibo.com/oauth2/authorize?client_id=${weiboConfig.appKey}&response_type=code&redirect_uri=${weiboConfig.redirectUrl}`
appKey: 創(chuàng)建應(yīng)用成功后weibo給你的appKey
redirectUrl: 用戶授權(quán)成功后跳轉(zhuǎn)的你的前端頁(yè)面，我這里寫(xiě)的是http://127.0.0.1:8080/login
2. 授權(quán)頁(yè)面跳轉(zhuǎn)，獲取用戶code
用戶授權(quán)登錄后，會(huì)跳轉(zhuǎn)到你上一步寫(xiě)的redirectUrl,并帶上用戶code,url類似于http://127.0.0.1:8080/login?code=abcdef
vue監(jiān)聽(tīng)路由url，如果url上有code就去請(qǐng)求后端的登錄回調(diào)接口
created() { const { code } = this.$route.query; if (code) { loginCallback({ code }).then((res) => { this.$message({ message: `${res.nickname} 歡迎您`, type: "success", }); this.setUser(res); this.$router.push("/tool/qr"); }); } }
3. 后端登錄回調(diào)接口，通過(guò)用戶code獲取accessToken，再通過(guò)accessToken獲取用戶信息,完成登錄
async loginCallback(ctx) { let { code } = ctx.request.body if (!code) { return ctx.error(errCode.PARAMS_ERROR, '參數(shù)錯(cuò)誤') } // 獲取accessToken const { access_token, uid } = await got.post('https://api.weibo.com/oauth2/access_token', { form: { client_id: weiboConfig.appKey, client_secret: weiboConfig.appSecret, grant_type: 'authorization_code', redirect_uri: weiboConfig.redirectUrl, code } }).json() // 通過(guò)accessToken獲取UserInfo const { id, name: nickname, avatar_hd: avatar } = await got.get(`https://api.weibo.com/2/users/show.json?access_token=${access_token}&uid=${uid}`).json() // 在自己的系統(tǒng)內(nèi)創(chuàng)建User let [user, isCreate] = await WeiboUser.upsert({ id, nickname, avatar }) // 生成登錄Token,通過(guò)userType區(qū)分是微博登錄用戶還是系統(tǒng)賬號(hào)登錄用戶 const token = await jwt.createToken({ ...user.toJSON(), userType: 'weiboUser' }) return ctx.success({ nickname, avatar, token }) }
三、微博掃碼登錄
1. 生成微博掃碼登錄二維碼
async getWeiboLoginQr(ctx) { const qrApi = `https://api.weibo.com/oauth2/qrcode_authorize/generate?client_id=${weiboConfig.appKey}&redirect_uri=${weiboConfig.redirectUrl}&scope=&response_type=code&state=&__rnd=${Date.now()}` const { url, vcode } = await got.get(qrApi).json() return ctx.success({ weiboQrUrl: url, vcode }) }
返回的url就是微博登錄二維碼url，vcode相當(dāng)于此二維碼唯一標(biāo)識(shí)，用來(lái)查詢用戶是否掃碼
2. 前端不停輪詢，查詢此二維碼是否被掃碼授權(quán)
前端:
const id = setInterval(() => { getWeiboLoginQrStatus({ vcode }).then((res) => { const { status, url } = res; if (status === "3") { window.location = url; clearInterval(id); } }); }, 3000);
后端:
async getWeiboLoginQrStatus(ctx) { const { vcode } = ctx.request.query if (!vcode) { return ctx.error(errCode.PARAMS_ERROR, '參數(shù)錯(cuò)誤') } const queryQrApi = `https://api.weibo.com/oauth2/qrcode_authorize/query?vcode=${vcode}&__rnd=${Date.now()}` const { status, url } = await got(queryQrApi).json() return ctx.success({ status, url }) }
如果status為3，代碼用戶已經(jīng)掃碼授權(quán)了，同時(shí)返回的url即點(diǎn)擊按鈕登錄后的前端回調(diào)url。之后的步驟就跟2. 授權(quán)頁(yè)面跳轉(zhuǎn)，獲取用戶code一模一樣了.
