前言
之前也有做過微信小程序里的登錄授權(quán)页畦，原理是差不多的，拿到的數(shù)據(jù)一模一樣焊唬，就實(shí)現(xiàn)的方式有一點(diǎn)不一樣。剛好公司的項(xiàng)目中有一個評論模塊看靠，需要有評論人的信息求晶，于是就做了網(wǎng)頁版本的。
目前網(wǎng)站應(yīng)用微信登錄要求在微信開放平臺注冊開發(fā)者帳號衷笋，并擁有一個已審核通過的網(wǎng)站應(yīng)用，并獲得相應(yīng)的AppID和AppSecret矩屁，申請微信登錄且通過審核后辟宗，可開始接入流程。
前端要做的步驟：請求code吝秕，給后臺泊脐，換取用戶數(shù)據(jù)
在文檔中，詳細(xì)的介紹了兩種方式：
1.跳轉(zhuǎn)到微信提供的二維碼生成頁面烁峭，用戶使用微信掃碼授權(quán)后通過JS將code跳回原來的頁面容客。
2.網(wǎng)站將微信登錄二維碼內(nèi)嵌到自己頁面中，用戶使用微信掃碼授權(quán)后通過JS將code返回給網(wǎng)站约郁。
官網(wǎng)已經(jīng)把第一種方法描述的很詳細(xì)了缩挑，以下所說的是第二種方法。
步驟1：在頁面中先引入如下JS文件（支持https）：
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
步驟2：在需要使用微信登錄的地方實(shí)例以下JS對象：
// 登錄完跳轉(zhuǎn)回當(dāng)前頁面
const redirectUrl = encodeURI(‘這里填寫后臺根據(jù)code獲取access_token再調(diào)用別的接口提供的鏈接’'+ location.href)
const obj = new WxLogin({
// 如果只是在頁面一小塊顯示二維碼鬓梅，前方不要填true９┲谩！官方的我復(fù)制過來的時候是true绽快，很坑
self_redirect: false,
// 第三方頁面顯示二維碼的容器id
id: "login_container",
// 只有appid正確芥丧，且配置的站點(diǎn)與后臺鏈接站點(diǎn)相同才能正常顯示二維碼
appid: "你的appid",
scope: "snsapi_login",
redirect_uri: redirectUrl,
state: "aw",
style: "white",
})
步驟3：拿到用戶數(shù)據(jù)
當(dāng)用戶使用微信掃碼授權(quán)后，通過JS將code給后臺的redirect_uri網(wǎng)址坊罢，后臺拿到code后應(yīng)繼續(xù)執(zhí)行一系列操作续担，最后通過網(wǎng)頁跳轉(zhuǎn)返回用戶信息給前端，前端就能拿到用戶信息活孩，將其存在Cookie和頁面里物遇。
