微信小程序實現的網頁掃碼授權登錄（完全免費）詳情 - php,微信小程序,登錄,網頁授權,掃碼登錄 TANKING 博客

微信小程序實現的網頁掃碼授權登錄

微信小程序實現的網頁掃碼授權登錄，無論是個人小程序還是企業小程序，都可以調用wx.login接口獲取到openid實現微信鑑權快速掃碼登錄！

摘要

現如今，掃碼登錄已經在網站普遍應用，其中微信掃碼登錄極其普遍。但是微信掃碼登錄的實現方法有多種，大多數都是具有一些門檻的。例如企業、需要服務號、需要認證等，這些都是個人開發者，個人創作者無法使用的。

但其實，微信小程序也可以作為一個授權登錄的“中介”，因為微信小程序有一個 wx.login 的API可以輕鬆實現獲取openid來作為微信用户的鑑權。

實現

調用微信小程序生成葵花碼的API生成一個帶有 scene 參數的小程序碼，其中 scene 作為小程序碼的唯一參數，用於記錄和進行本次掃碼登錄。

以下是服務端的代碼結構：

訪問 createQrcode 目錄即可生成一個小程序碼。

生成一個小程序碼

掃碼後打開小程序

掃碼後打開小程序1

掃碼後打開小程序2

此時，網頁端也會有相應的變化，會立刻切換為已掃碼。

切換為已掃碼

當在小程序點擊 授權登錄 後，網頁端會切換為 登錄成功，如果你配置了 callback，登錄成功後會自動跳轉至 callback 並且攜帶 token 參數。

已登錄

程序邏輯

具體邏輯如下：

程序邏輯

配置

只需要配置 Db.php 這個文件裏面的一些參數。<br/><br/>

// 數據庫配置
$配置=數組（
    'db_host' => 'xxxxxxxxxxxxx', // 數據庫服務器
    'db_port' => 3306, // 端口
    'db_name' => 'xxxxxxxxxxxxx', // 數據庫名稱
    'db_user' => 'xxxxxxxxxxxxx', // 數據庫賬號
    'db_prefix' => '', // 表前綴，表名被我寫死了所以這個用不上但是必須留空不然報錯
    'db_pass' => 'xxxxxxxxxxxxx', // 數據庫密碼
    'appid' => 'xxxxxxxxxxxxx', // 小程序appid
    'appsecret' => 'xxxxxxxxxxxxx', // 小程序appsecret
）；

// 除了配置這個文件的這些參數之外
// 如果你的小程序已經審核通過上線
// 還需要去 createQrcode/createQrcode.php 裏面修改一個參數
// ------------------------------------------------ ------
// 在代碼的101行 "env_version" => "develop"
// 開發的時候這個參數是develop，小程序審核通過發佈上線之後改為release
// 因為用户無法打開開發版的小程序的，所以審核通過上線的小程序你需要改為release
// 代表創建的小程序碼是線上版本而不是開發版本

數據庫創建：

直接在SQL執行的窗口粘貼:

創建表 `scanlogin_loginAuth` (
  `id` int(10) 主鍵自動遞增不為空，
  `場景` varchar(32) NOT NULL,
  `openid` varchar(32) 默認為 NULL，
  `createTime` varchar(32) 默認為 NULL，
  `authTime` varchar(32) 默認為 NULL，
  `status` int(1) NOT NULL DEFAULT '1',
  `expire` int(1) NOT NULL DEFAULT '1',
  `token` varchar(32) DEFAULT NULL COMMENT '登錄成功的Token'
) 引擎=InnoDB 默認字符集=utf8;

以phpMyAdmin操作為例：

微信小程序配置及發佈

下載小程序端的代碼，在微信開發者工具導入項目，打開 project.config.json 修改 appid 為你的小程序後進行編譯。

小程序端的代碼

在 app.js 修改你的服務器域名以及後端服務所在的目錄名稱，如果是根目錄，只需輸入一個 / ，如果是二級目錄，輸入 /目錄名/ ，三級目錄輸入 /二級目錄名/三級目錄名/ ，其它同理。域名無需攜帶 http或https

小程序端的代碼

你所配置的服務器域名必須要在微信小程序管理後台的開發管理->開發設置->服務器域名->request合法域名進行配置後，並且需要備案，開啓https訪問，才能生效。

小程序發佈之後，微信掃一掃，掃描網頁生成的小程序碼，才能正常使用。

使用

假設你的服務器域名是 www.qq.com
後端代碼部署在二級目錄，目錄名稱是：xcxScanLogin
那麼你可以直接在你的網頁通過a標籤跳轉至：

www.qq.com/xcxScanLogin/createQcode

即可打開掃碼頁面。
如果你需要進行回調，那麼可以直接在Url後面加入callback
假設你的callback頁面是：https://www.qq.com/call/

www.qq.com/xcxScanLogin/createQcode/?callback=https://www.qq.com/call/

掃碼登錄授權成功後，將會跳轉到callback地址並攜帶token參數。
例如：

https://www.qq.com/call/?token=xxxxxxxxxxxx

這個token參數會被記錄在 scanlogin_loginAuth 這個表的 token字段。

如果你需要在你網站實現自己的頁面或顯示方式，例如點擊登錄彈出一個模態框，那麼可以在你的網站通過異步請求：

www.qq.com/xcxScanLogin/createQcode/createQcode.php

將會返回JSON對象：

{'code':200, 'msg' => '創建成功', 'scene' => 'xxxxxxx', 'qrcode' => 'xxxxxx.png'}

code=200代表創建小程序碼成功。

使用異步的方式代表你需要根據狀態碼判斷掃碼狀態，可以查看 createQcode.php 的每個狀態返回的狀態碼去編寫，做好頁面的輪詢。

注意：'qrcode' => 'xxxxxx.png' 真實小程序碼地址是 qrcode目錄 裏面的 xxxxxx.png ，即需要加上目錄名才可以正常在頁面顯示小程序碼。即： ./qrcode/xxxxxx.png
qrcode目錄 裏面的 xxxxxx.png 會在授權成功後自動刪除，這個是臨時圖片文件。

登錄成功邏輯：
createQcode/checkScanStatus.php 這個是輪詢掃碼結果，裏面可以在登錄成功的那步處理你的登錄成功後的邏輯，例如儲存SESSION、插入數據庫記錄、緩存等。

其它

為簡化開發，我做的比較粗糙，每個狀態顯示的結果都是以圖片呈現，所以便有了isScan.png、isExpire.png、loginSuccess.png、isCancel.png這些圖片，這些圖片都是基於生成的小程序碼使用Photoshop軟件添加高斯模糊效果，再打上文字保存的，然後用於每個掃碼階段顯示的一個小程序碼模糊效果以及文字顯示，建議自己另外編寫CSS以實現HTML修改DOM的方式實現模糊和文字顯示。

小程序路徑

如果你不希望在小程序首頁作為掃碼頁面，你可以將掃碼頁面的代碼放在其它頁面，例如：

pages/weblogin/index

那麼你需要做兩件事：

將小程序代碼放置於 pages/weblogin/index 頁面
修改後端代碼文件 createQrcode/createQrcode.php 裏面的 [請求參數] [小程序掃碼頁面的路徑] 為 pages/weblogin/index

在線體驗

https://likeyunkeji.likeyunba.com/liKeYunKaiFaZhe/Xcx_ScanLog...

服務器&主機推薦

免備案的虛擬主機、雲服務器
寶塔/EP系統預裝(支持Windows)，一鍵式操作
https://www.rainyun.com/TANKING_

作者

TANKING

TANKING 博客

TANKING 博客

博客 / 詳情