怎麼進行微博第三方登入?以下這篇文章跟大家介紹一下使用node實作微博第三方登入的方法,希望對大家有幫助!
接入微博第三方登入可以免註冊,對用戶的體驗更好,今天我們就用nodejs實現微博第三方登入(用其它語言也可以)。 【相關教學推薦:nodejs影片教學】
實作效果
線上實例: http://www. lolmbbs.com/login
1、點選微博登入按鈕登入
#2、直接掃碼登入
具體實現
一、申請weibo網站存取
登入https://open.weibo.com/connect申請web網站存取
本機開發的時候應用程式位址寫入:127.0.0.1
採用OAuth2.0授權,詳細可參考文件https://open.weibo.com/wiki/Connect/login
1. 產生微博登入授權驗證碼const weiboUrl = `https://api.weibo.com/oauth2/authorize?client_id=${weiboConfig.appKey}&response_type=code&redirect_uri=${weiboConfig.redirectUrl}`
appKey: 建立應用程式成功後weibo給你的appKey
redirectUrl: 使用者授權成功後跳轉的你的前端頁面,我這裡寫的是http://127.0.0.1:8080/login2. 授權頁面跳到,取得使用者code##使用者授權登入後,會跳到你上一步寫的redirectUrl,並帶上使用者code,url類似http://127.0.0.1:8080/login?code=abcdef
vue監聽路由url,如果url上有code就去請求後端的登入回調介面
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. 後端登入回呼接口,透過使用者code取得accessToken,再透過accessToken取得使用者資訊,完成登入
async loginCallback(ctx) { let { code } = ctx.request.body if (!code) { return ctx.error(errCode.PARAMS_ERROR, '参数错误') } // 获取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() // 通过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() // 在自己的系统内创建User let [user, isCreate] = await WeiboUser.upsert({ id, nickname, avatar }) // 生成登录Token,通过userType区分是微博登录用户还是系统账号登录用户 const token = await jwt.createToken({ ...user.toJSON(), userType: 'weiboUser' }) return ctx.success({ nickname, avatar, token }) }
三、微博掃碼登入
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相當於此二維碼唯一標識,用來查詢使用者是否掃碼######2. 前端不停輪詢,查詢此二維碼是否被掃碼授權######前端:###
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, '参数错误') } 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,程式碼使用者已經掃碼授權了,同時回傳的url即點擊按鈕登入後的前端回呼url。之後的步驟就跟2. 授權頁面跳轉,獲取用戶code一模一樣了.######更多node相關知識,請訪問:###nodejs 教程###! ###
以上是淺析node怎麼進行微博第三方登錄的詳細內容。更多資訊請關注PHP中文網其他相關文章!

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

JavaScript不需要安裝,因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中,通過標籤嵌入HTML文件中運行。 2)在Node.js環境中,下載並安裝Node.js後,通過命令行運行JavaScript文件。

如何在Quartz中提前發送任務通知在使用Quartz定時器進行任務調度時,任務的執行時間是由cron表達式設定的。現�...

在JavaScript中如何獲取原型鏈上函數的參數在JavaScript編程中,理解和操作原型鏈上的函數參數是常見且重要的任�...

在微信小程序web-view中使用Vue.js動態style位移失效的原因分析在使用Vue.js...


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境

SublimeText3漢化版
中文版,非常好用

Atom編輯器mac版下載
最受歡迎的的開源編輯器