前端實現(xiàn)微信授權登錄

PC網頁微信授權登錄

一:網頁外鏈跳轉的方式

01.請求后臺的接口逾苫,會返回一個微信掃碼的界面地址铅搓,使用js跳轉過去即可

    wxlogin () {
       User.wxlogins().then(res => {
        console.log(res)
        window.location.href = res.result.url
      })
    },

02.用戶在掃完碼點擊確定授權后星掰,后臺會拿到微信授權用戶的信息后,會幫我們跳轉到事先給后臺重定向的地址頁面(這里我是新建了一個空白頁用來接收后臺返回的數(shù)據)怀偷,在地址后面后臺會拼接一個token播玖,我們拿到這個token,去獲取用戶信息维蒙,跳轉到首頁颅痊,即可完成登錄

let token = this.$route.query.token
    if (token) {
      this.getUserInfo().then(ures => {
        this.$router.push({
          name: 'home'
        })
      })
    }

二:網頁內嵌二維碼方式

01.配置好下面相關參數(shù)局待,即可生成微信授權登錄/綁定二維碼,(注意:setWxerwma ()此方法需在mounted中調用)

 setWxerwma () {
      const s = document.createElement('script')
      s.type = 'text/javascript'
      s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
      const wxElement = document.body.appendChild(s)
      wxElement.onload = function () {
        var obj = new WxLogin({
          id: '', // 需要顯示的容器id
          appid: '', // 公眾號appid wx*******
          scope: 'snsapi_login', // 網頁默認即可
          redirect_uri: encodeURIComponent(''), // 授權成功后回調的url
          state: Math.ceil(Math.random() * 1000), // 可設置為簡單的隨機數(shù)加session用來校驗
          style: 'black', // 提供"black"、"white"可選重绷。二維碼的樣式
          href: '' // 外部css文件url昭卓,需要https
        })
      }
    },

02.后面的邏輯根據后臺返回的數(shù)據來處理即可愤钾,同方法一步驟二類似

微信公眾號網頁授權登錄

01.創(chuàng)建一個按鈕瘟滨,點擊觸發(fā)事件,跳轉到微信授權頁面

wxlogin () {
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
    }
//this.appid 公眾號APPID  this.url  用戶點擊授權后,會跳轉到后臺幫我們重定向的頁面(這里我是新建了一個空白頁能颁,專門接收code)

02.在重定向的頁面拿到微信那邊給我們返回的code杂瘸,會拼接在URL后面,我們拿到這個code再請求后臺的接口換取token伙菊,完成微信登錄

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末败玉,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子镜硕,更是在濱河造成了極大的恐慌运翼,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件兴枯,死亡現(xiàn)場離奇詭異血淌,居然都是意外死亡,警方通過查閱死者的電腦和手機财剖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進店門悠夯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來沦补,“玉大人,你說我怎么就攤上這事店诗∨跗” “怎么了违霞?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長妆艘。 經常有香客問我幌陕,道長,這世上最難降的妖魔是什么心例? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任失暴,我火速辦了婚禮古戴,結果婚禮上,老公的妹妹穿的比我還像新娘叉袍。我一直安慰自己,他們只是感情好润文,可當我...
    茶點故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布骏掀。 她就那樣靜靜地躺著笑陈,像睡著了一般新锈。 火紅的嫁衣襯著肌膚如雪妹笆。 梳的紋絲不亂的頭發(fā)上贸弥,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天,我揣著相機與錄音,去河邊找鬼郁岩。 笑死,一個胖子當著我的面吹牛冰木,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼辽俗,長吁一口氣:“原來是場噩夢啊……” “哼榴捡!你這毒婦竟也來了?” 一聲冷哼從身側響起项乒,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤频鉴,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體羡藐,經...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡瘩扼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年栽燕,在試婚紗的時候發(fā)現(xiàn)自己被綠了浴讯。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捏肢。...
    茶點故事閱讀 40,102評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡勾拉,死狀恐怖卖局,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站富雅,受9級特大地震影響温赔,放射性物質發(fā)生泄漏拜秧。R本人自食惡果不足惜暖庄,卻給世界環(huán)境...
    茶點故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一价匠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸曼玩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蠢护。三九已至懈凹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工凌摄, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓浓瞪,卻偏偏與公主長得像,于是被迫代替她去往敵國和親英岭。 傳聞我的和親對象是個殘疾皇子湾盒,可洞房花燭夜當晚...
    茶點故事閱讀 45,044評論 2 355