記一次微信掃碼登陸pc系統的開發過程

前言

最近leader給了我一個需求，讓我微信掃碼登陸咱們的pc系統。一開始拿到這個需求，看了二三次微信官方文檔以後，本覺得會很簡單，半天以內就能搞定。直接奧利給，擼代碼。結果啪啪啪打臉，把全部的坑都踩過了。不過幸不辱命，仍是把這個需求寫完了。

1:準備工做

網站應用微信登陸是基於OAuth2.0協議標準構建的微信OAuth2.0受權登陸系統。 在進行微信OAuth2.0受權登陸接入以前，在微信開放平臺註冊開發者賬號，並擁有一個已審覈經過的網站應用，並得到相應的AppID和AppSecret，申請微信登陸且經過審覈後，可開始接入流程。審覈大概要一週時間外加300rmb。微信官方文檔

2:整理思路

審覈經過以後整理整個需求思路。大概畫了這樣一個流程圖。

3:所踩的坑

1.外鏈連接報錯的問題

因爲咱們當時沒沒定是內嵌仍是外鏈二維碼，因此當時第一種嘗試方案就是外鏈二維碼掃碼登陸。當時是請求後端接口拿到這個二維碼地址。點擊這個地址發現Scope 參數錯誤或沒有 Scope 權限結果查看文檔發現後端返回的redirect_uri沒有進行UrlEncode處理。先後端必定得多看幾遍文檔!!!!!
當時拿到二維碼連接的時候，一直想要經過img標籤把二維碼顯示出來，試了不行，用iframe試了行是可行。可是樣式不對。而後二維碼樣式直接覆蓋也沒有用。以後又試了qrcode插件，二維碼樣式是對了可是掃碼以後結果卻不是這樣的。哎。一言難盡啊！
2.內嵌二維碼樣式顯示
根據官方文檔引入JS文件

<script type="text/javascript" src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
其實這個js也是經過iframe來加載二維碼的，以後微信登陸的時候引入對象。

var obj = new WxLogin({
      id: 'login_container', // 須要顯示的容器id
      appid: '************', // appid 
      scope: 'snsapi_login', // 網頁默認便可
      redirect_uri: redirectUrl, // 受權成功後回調的url
      state: dayjs().unix(),// 用來校驗
      style: 'black', // 二維碼的樣式
      href: 'https://******/qrcode.css' // 外部css文件url，須要https
    })

注意這個redirect_uri必定要寫對，否則二維碼顯示不出來，若是發現二維碼過大或者你不想要的樣式，你能夠在href填入一個連接。用其中的樣式覆蓋。

.loginPanel normalPanel {display: flex;}
.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;}

最終效果：

大功告成，雖然結果出來了，可是過程倒是一波三折。

總結

本人19年畢業的，從事前端開發也有9個月了，加上實習的話都一年多了。
但願本身不要盲目自信，多總結經驗，多沉澱本身的技術。多向大佬學習。另外碼字不容易，但願你們點個贊。前端路漫漫，與君共勉之。