所有文章的源碼將會被上傳到github 倉庫https://github.com/kurryluo/LearningByMyself，不用經(jīng)過授權(quán)铸屉，即可轉(zhuǎn)載所有文章和代碼。
這篇文章將教會你：
1.如何實現(xiàn)微信帳號授權(quán)登錄網(wǎng)站的前端部分切端。2.怎樣模仿別人的網(wǎng)頁抬探，做出想要的效果。
在微信開放平臺上申請網(wǎng)站應(yīng)用
微信開放平臺帆赢，是一個開放給企業(yè)或個人的技術(shù)平臺小压。借助這個平臺，我們可以開發(fā)與微信相關(guān)產(chǎn)品椰于，比如微信號二次開發(fā)怠益、手機應(yīng)用、網(wǎng)站應(yīng)用瘾婿、小程序蜻牢、管理公眾號的第三方平臺。
在注冊偏陪、完善抢呆、認證完開發(fā)者資質(zhì)后，我們需要在管理中心創(chuàng)建一個網(wǎng)站應(yīng)用笛谦。溫馨提示：審核的周期規(guī)定是7天抱虐，請在開啟項目前申請，以節(jié)約時間饥脑。
實現(xiàn)最簡單的網(wǎng)頁授權(quán)登錄
微信提供了兩種網(wǎng)頁登錄的方式恳邀，第一種很簡單，如下圖所示灶轰，這里是官方教程谣沸。
舉個栗子：
需要注意的幾點：
- appid 是應(yīng)用的唯一標(biāo)識，后端使用的 appid 應(yīng)當(dāng)和前端使用的一致笋颤，否則會報錯乳附。
- redirect_uri 是回調(diào)地址。什么意思呢伴澄？因為登錄是依靠微信進行的赋除，微信的數(shù)據(jù)庫中有這個人存在才允許他登錄，所以微信會進行驗證秉版，如果通過了驗證贤重，微信就會給出一個 code（密鑰），接在回調(diào)地址后面清焕。比如 https://passport.yhd.com/wechat/callback.do并蝗，這個網(wǎng)址作為回調(diào)地址祭犯，微信驗證通過后，瀏覽器的地址欄變?yōu)?strong>https://passport.yhd.com/wechat/callback.do?code=123456789滚停。
- 回調(diào)地址需要被編碼沃粗，推薦常用的工具——站長工具站長工具界面截圖
- state 怎么用，一般 state 可以做三件事键畴，一是最盅，安全機制的補充，判斷登錄是否合法起惕，就像官方教程中說的那樣涡贱。二是，用于用戶身份的判定惹想，state = 1 時是老師的賬號登錄问词，state = 2 時是學(xué)生登錄。三是嘀粱，用于判斷設(shè)備的型號激挪，手機網(wǎng)頁的靜默登錄和 PC 端登錄可以利用這個做統(tǒng)一處理，不用再另外寫一個接口锋叨。
這里使用 1 號店的微信登錄作為例子:
- appid：wxbdc5610cc59c1631
- redirect_uri： https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do (已經(jīng)編碼過的)
- response_type：code
- scope：snsapi_login
- state：3d6be0a4035d839573b04816624a415e
完整的登錄地址：
https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect
上面這個地址可以放在 a 標(biāo)簽里垄分，用戶點擊即跳轉(zhuǎn)到微信提供的登錄頁面。以下代碼就可以實現(xiàn)娃磺。
<a >直接跳轉(zhuǎn)到微信提供的網(wǎng)頁</a>
模仿別人網(wǎng)站做出更友好的登錄界面
微信提供的默認登錄有一個黑框薄湿，愛美之心人皆有之，這不能忍豌鸡。所以嘿般，我找到一個用微信登錄的網(wǎng)站，想看看別人是怎么實現(xiàn)的涯冠。
我找到的是知識星球，原來名字叫做小密圈逼庞。首頁登錄長這樣：
打開控制臺看看有什么發(fā)現(xiàn)：
可以發(fā)現(xiàn)知識星球的攻城獅們把原來的黑框網(wǎng)頁用<iframe>標(biāo)簽壓縮蛇更，再經(jīng)過精心的裁剪缎岗，拿到二維碼而已掌呜，這樣就可以實現(xiàn) 微信 & 賬號 兩不誤登錄希太。
直接拷貝代碼到自己的代碼中修改译打，替換 src 中的登錄地址（就是黑框網(wǎng)頁登錄的那個地址）叉钥，為了方便日后重復(fù)使用亮蛔，我用 React 寫了一個可以復(fù)用的組件陨仅，使用 antd 的 modal 組件實現(xiàn)遮幕效果壁袄。
主要的代碼：
<Modal
visible={open}
onCancel={this.props.handleClose}
footer={null}
closable
>
<div className={styles.wechatLoginSec}>
<div className={classnames(styles.imageSec, styles[toggleClass])}></div>
<div className={styles.inputSec}>
<iframe className={styles.nlogin_iframe}
frameBorder="0"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
scrolling="no"
src="https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect"></iframe>
</div>
</div>
</Modal>
最終效果如動圖：
歡迎大家關(guān)注微信公眾號：FrontEndVisDev
不僅有前端和可視化司倚，還有我的創(chuàng)業(yè)經(jīng)驗
個人網(wǎng)站：http://kurryluo.github.io_
各個分享平臺的 KurryLuo 都是在下豆混。
