摘要:通過前端怎樣在中進行微信網頁授權登錄背景公司目前上一個新項目,需要使用微信授權登錄,和后端商量了一下,決定使用微信登錄的第一種方法進行授權登錄,就是后臺給一個接口,由前端直接執行,跳轉到一個新頁面,新頁面中生成一個二維碼來進行授權登錄。
通過前端怎樣在vue中進行微信網頁授權登錄 背景:
公司目前上一個新項目,需要使用微信授權登錄,和后端商量了一下,決定使用微信登錄的第一種方法進行授權登錄,就是后臺給一個接口, 由前端直接執行,跳轉到一個新頁面,新頁面中生成一個二維碼來進行授權登錄。雖然,這種方式很多公司都在用,但產品說這種方式的體驗 不夠好,所以使用了下面的授權方法,也就是第二種的微信授權登錄方案:步驟實現:
在vue中,能夠用輪子的就用輪子,于是在npm中找到了一個微信登錄的包vue-wxlogin
接下來在組件中引入:
import wxlogin from "vue-wxlogin";
組件中使用,可以聲明一個對象來保存生成二維碼的信息,為了數據的安全,我們不能直接在前端頁面寫死,生成二維碼的信息,可以讓后端通過接口來獲取生成二維碼的信息,接著就是以組件屬性的參數傳給wxlogin
屬性參數詳解
屬性名 類型 描述 appid String 應用唯一標識,在微信開放平臺提交應用審核通過后獲得 scope String 應用授權作用域,擁有多個作用域用逗號(,)分隔,網頁應用目前僅填寫snsapi_login即可 redirect_uri String 重定向地址,需要進行UrlEncode state String 用于保持請求和回調的狀態,授權請求后原樣帶回給第三方。該參數可用于防止csrf攻擊(跨站請求偽造攻擊),建議第三方帶上該參數,可設置為簡單的隨機數加session進行校驗 theme String 提供"black"、"white"可選,默認為黑色文字描述。 href String 自定義樣式鏈接,第三方可根據實際需求覆蓋默認樣式。
需要注意的屬性,
1.redirect_uri(回調地址)必須要進行**UrlEncode轉碼**,這是一個巨坑啊,本人在這個問題卡了一個下午 2.href (自定義二維碼樣式的鏈接),必須是https的鏈接而且要帶有證書才可以,如果不用鏈接的方式可以使用data_url的方法來進行樣式的傳遞 例如:`data:text/css;base64,`+你自己的樣式內容把它轉為base64然后拼接在一起就可以了,更具體的可閱讀[自定義微信登錄掃碼樣式解決辦法][2]
最后,有不明白的可加我qq: 1350488130
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106888.html
摘要:微信網頁授權,基于適配方案,開發的微信授權方案。項目地址又又又一次來寫微信網頁授權,一年前寫過的微信授權解決方案。 vue微信網頁授權,基于vue-cli3.0+webpack 4+vant ui + sass+ rem適配方案+axios,開發的微信授權方案。項目地址:vue-wechat-auth 又又又一次來寫微信網頁授權,一年前寫過的 [vue 微信授權解決方案]。 參考了[v...
摘要:實現步驟應用創建在云函數的后臺直接創建應用,使用模板。我們僅需要一個云函數就可以實現微信授權的本地調試以及幾個項目幾個公眾號共用一個授權服務,免去獨立域名獨立服務器的煩惱。 背景公司為客戶開發微信公眾號相關服務時,有時未能準備好公眾號,所以需要使用公司的公眾號,但是大家都知道微信網頁授權域名最多只支持兩個,這就...
摘要:項目背景因為項目采用前后端完全分離方案,所以,無法使用常規的微信授權登錄作法,需要采用實現微信授權登錄。其實實現這個也麻煩,在實現之前,我們需要了解一下微信授權的整個流程。用戶微信登錄授權以后回調過來的會攜帶兩個參數,第一個是另一個就是。 項目背景 因為項目采用前后端完全分離方案,所以,無法使用常規的微信授權登錄作法,需要采用 ajax 實現微信授權登錄。 需求分析 因為本人是一個ph...
摘要:小程序登錄微信網頁授權版首先呢,登錄授權授權登錄,是一樣的意思,不用糾結。寫小程序授權登錄的代碼前,需要了解清楚與的區別,這里再簡單介紹一下騰訊有個微信開放平臺,只有企業才能注冊賬號,可理解為微信體系里,最頂級的賬號。 小程序登錄、微信網頁授權(Java版) 首先呢,登錄、授權、授權登錄,是一樣的意思,不用糾結。 寫小程序授權登錄的代碼前,需要了解清楚openid與unionid的區別...
摘要:傳統的網頁編程采用的三劍客來實現,在微信小程序中同樣有三劍客。觀察者模式不難實現,重點是如何在微信小程序中搭配其特有的生命周期來使用。交互事件傳統的事件傳遞類型有冒泡型與捕獲型,微信小程序中自然也有。 本文由作者鄒永勝授權網易云社區發布。 簡介為了更好的展示我們即時通訊SDK強悍的能力,網易云信IM SDK微信小程序DEMO的開發就提上了日程。用產品的話說就是: 云信 IM 小程序 S...
閱讀 2414·2021-11-24 09:39
閱讀 3241·2021-10-09 09:53
閱讀 1135·2021-09-22 16:06
閱讀 4453·2021-09-02 10:18
閱讀 803·2021-08-23 09:42
閱讀 1766·2021-08-17 10:11
閱讀 2689·2019-08-30 13:02
閱讀 2125·2019-08-30 12:49