微信PC端掃碼登錄流程記錄详情 - 前端,微信公眾平台 qinyuanqiblog 日志

前言

接入微信掃碼登錄整個流程的記錄

具體步驟

1. 註冊開發者賬號

2.創建應用，得到appid和AppSecret，並配置回調域名

2.1 創建應用

2.2 填寫應用資料，提交審核，審核通過會得到開發需要用的appid和AppSecret，這兩個值，這個值會給到後台，然後然後再通過接口給到我們

2.3 應用創建成功，配置回調域名

4. 開發者資質認證

5. 配置一個內網穿透，方便調試（如果你們公司的是內網域名，那也可以，微信只校驗了域名的合法性）

我使用的natapp來做內網穿透，

https://natapp.cn/login

如果是使用vue-cli 構建的項目，開啓穿透會報錯 invalid host header

invalid host header 解決辦法

報錯信息

解決辦法

webpack 4：可以在build目錄下的webpack.dev.conf.js文件，devServer下添加disableHostCheck: true，跳過檢查

webpack5:一樣是在修改vue 的devService 配置中添加 allowedHosts: 'all' 即可

6.授權流程説明

官網的説明

我個人的理解

流程圖

7. 核心代碼

參數説明

重點説明

href的連接必須是一個外網的可訪問的地址

自定義二維碼樣式相關代碼

.impowerBox .qrcode {width: 200px;}

.impowerBox .title {display: none;}

.impowerBox .info {width: 200px;}.

status_icon {display: none}

.impowerBox .status {text-align: center;}

常規套路，會新開一個頁面，然後掃碼授權的方式

https://open.weixin.qq.com/connect/qrconnect?appid=wxce0a56c2...

1.將上面的連接放到一個a標籤中即可

2.當前頁面顯示二維碼

3.引入js: http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

4.在需要使用微信登錄的地方實例以下JS對象，參數見上文介紹

var obj = new WxLogin({

self_redirect:true,

 id:"login_container",

 appid: "",  scope: "",

 redirect_uri: "",  

state: "",

style: "",

href: ""

 });