15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 前端自学之路,在 React 构建的网页中实现微信登录

前端自学之路,在 React 构建的网页中实现微信登录

时间:2022-08-06 21:03:01 | 来源:网站运营

时间:2022-08-06 21:03:01 来源:网站运营

所有文章的源码将会被上传到github 仓库https://github.com/kurryluo/LearningByMyself,不用经过授权,即可转载所有文章和代码。

这篇文章将教会你:

1.如何实现微信帐号授权登录网站的前端部分。2.怎样模仿别人的网页,做出想要的效果。

在微信开放平台上申请网站应用

微信开放平台,是一个开放给企业或个人的技术平台。借助这个平台,我们可以开发与微信相关产品,比如微信号二次开发、手机应用、网站应用、小程序、管理公众号的第三方平台。

在注册、完善、认证完开发者资质后,我们需要在管理中心创建一个网站应用。温馨提示:审核的周期规定是7天,请在开启项目前申请,以节约时间。

实现最简单的网页授权登录

微信提供了两种网页登录的方式,第一种很简单,如下图所示,这里是官方教程。

举个栗子:

https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect需要注意的几点:

  1. appid 是应用的唯一标识,后端使用的 appid 应当和前端使用的一致,否则会报错。
  2. redirect_uri 是回调地址。什么意思呢?因为登录是依靠微信进行的,微信的数据库中有这个人存在才允许他登录,所以微信会进行验证,如果通过了验证,微信就会给出一个 code(密钥),接在回调地址后面。比如 passport.yhd.com/wechat/callback.do,这个网址作为回调地址,微信验证通过后,浏览器的地址栏变为passport.yhd.com/wechat/callback.do?code=123456789
  3. 回调地址需要被编码,推荐常用的工具——UrlEncode编码/UrlDecode解码 - 站长工具
  4. state 怎么用,一般 state 可以做三件事,一是,安全机制的补充,判断登录是否合法,就像官方教程中说的那样。二是,用于用户身份的判定,state = 1 时是老师的账号登录,state = 2 时是学生登录。三是,用于判断设备的型号,手机网页的静默登录和 PC 端登录可以利用这个做统一处理,不用再另外写一个接口。
这里使用 1 号店的微信登录作为例子:

- appid:wxbdc5610cc59c1631- redirect_uri: https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do (已经编码过的)- 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 标签里,用户点击即跳转到微信提供的登录页面。以下代码就可以实现。

<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'>直接跳转到微信提供的网页</a>

模仿别人网站做出更友好的登录界面

微信提供的默认登录有一个黑框,爱美之心人皆有之,这不能忍。所以,我找到一个用微信登录的网站,想看看别人是怎么实现的。

我找到的是知识星球,原来名字叫做**小密圈**。首页登录长这样:

打开控制台看看有什么发现:







可以发现知识星球的攻城狮们把原来的黑框网页用 <iframe> 标签压缩,再经过精心的裁剪,拿到二维码而已,这样就可以实现 微信 & 账号 两不误登录。

直接拷贝代码到自己的代码中修改,替换 src 中的登录地址(就是黑框网页登录的那个地址),为了方便日后重复使用,我用 React 写了一个可以复用的组件,使用 antd 的 modal 组件实现遮幕效果。

主要的代码:

<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>最终效果如动图:




欢迎大家关注微信公众号:FrontEndVisDev

不仅有前端和可视化,还有我的创业经验

个人网站:KurryLuo's Website

各个分享平台的 KurryLuo 都是在下。

关键词:实现,自学

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭