這篇文章將教會你：

1.如何實(shí)現(xiàn)微信帳號授權(quán)登錄網(wǎng)站的前端部分。2.怎樣模仿別人的網(wǎng)頁，" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 前端自學(xué)之路，在 React 構(gòu)建的網(wǎng)頁中實(shí)現(xiàn)微信登錄

前端自學(xué)之路，在 React 構(gòu)建的網(wǎng)頁中實(shí)現(xiàn)微信登錄

時間：2022-08-06 21:03:01 | 來源：網(wǎng)站運(yùn)營

時間：2022-08-06 21:03:01 來源：網(wǎng)站運(yùn)營

所有文章的源碼將會被上傳到github 倉庫https://github.com/kurryluo/LearningByMyself，不用經(jīng)過授權(quán)，即可轉(zhuǎn)載所有文章和代碼。

這篇文章將教會你：

1.如何實(shí)現(xiàn)微信帳號授權(quán)登錄網(wǎng)站的前端部分。2.怎樣模仿別人的網(wǎng)頁，做出想要的效果。

在微信開放平臺上申請網(wǎng)站應(yīng)用

微信開放平臺，是一個開放給企業(yè)或個人的技術(shù)平臺。借助這個平臺，我們可以開發(fā)與微信相關(guān)產(chǎn)品，比如微信號二次開發(fā)、手機(jī)應(yīng)用、網(wǎng)站應(yīng)用、小程序、管理公眾號的第三方平臺。

在注冊、完善、認(rèn)證完開發(fā)者資質(zhì)后，我們需要在管理中心創(chuàng)建一個網(wǎng)站應(yīng)用。溫馨提示：審核的周期規(guī)定是7天，請?jiān)陂_啟項(xiàng)目前申請，以節(jié)約時間。

實(shí)現(xiàn)最簡單的網(wǎng)頁授權(quán)登錄

微信提供了兩種網(wǎng)頁登錄的方式，第一種很簡單，如下圖所示，這里是官方教程。

舉個栗子：

https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect需要注意的幾點(diǎn)：

  1. appid 是應(yīng)用的唯一標(biāo)識，后端使用的 appid 應(yīng)當(dāng)和前端使用的一致，否則會報(bào)錯。
  2. redirect_uri 是回調(diào)地址。什么意思呢？因?yàn)榈卿浭且揽课⑿胚M(jìn)行的，微信的數(shù)據(jù)庫中有這個人存在才允許他登錄，所以微信會進(jìn)行驗(yàn)證，如果通過了驗(yàn)證，微信就會給出一個 code（密鑰），接在回調(diào)地址后面。比如 passport.yhd.com/wechat/callback.do，這個網(wǎng)址作為回調(diào)地址，微信驗(yàn)證通過后，瀏覽器的地址欄變?yōu)?b>passport.yhd.com/wechat/callback.do?code=123456789。
  3. 回調(diào)地址需要被編碼，推薦常用的工具——UrlEncode編碼/UrlDecode解碼 - 站長工具
  4. state 怎么用，一般 state 可以做三件事，一是，安全機(jī)制的補(bǔ)充，判斷登錄是否合法，就像官方教程中說的那樣。二是，用于用戶身份的判定，state = 1 時是老師的賬號登錄，state = 2 時是學(xué)生登錄。三是，用于判斷設(shè)備的型號，手機(jī)網(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)簽里，用戶點(diǎn)擊即跳轉(zhuǎn)到微信提供的登錄頁面。以下代碼就可以實(shí)現(xiàn)。

<a href = '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'>直接跳轉(zhuǎn)到微信提供的網(wǎng)頁</a>

模仿別人網(wǎng)站做出更友好的登錄界面

微信提供的默認(rèn)登錄有一個黑框，愛美之心人皆有之，這不能忍。所以，我找到一個用微信登錄的網(wǎng)站，想看看別人是怎么實(shí)現(xiàn)的。

我找到的是知識星球，原來名字叫做**小密圈**。首頁登錄長這樣：

打開控制臺看看有什么發(fā)現(xiàn)：







可以發(fā)現(xiàn)知識星球的攻城獅們把原來的黑框網(wǎng)頁用 <iframe> 標(biāo)簽壓縮，再經(jīng)過精心的裁剪，拿到二維碼而已，這樣就可以實(shí)現(xiàn) 微信 & 賬號 兩不誤登錄。

直接拷貝代碼到自己的代碼中修改，替換 src 中的登錄地址（就是黑框網(wǎng)頁登錄的那個地址），為了方便日后重復(fù)使用，我用 React 寫了一個可以復(fù)用的組件，使用 antd 的 modal 組件實(shí)現(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="微信登錄"></iframe> </div> </div> </Modal>最終效果如動圖：




歡迎大家關(guān)注微信公眾號：FrontEndVisDev

不僅有前端和可視化，還有我的創(chuàng)業(yè)經(jīng)驗(yàn)

個人網(wǎng)站：KurryLuo's Website

各個分享平臺的 KurryLuo 都是在下。

關(guān)鍵詞：實(shí)現(xiàn),自學(xué)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉