所有文章的源码将会被上传到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

参数列表

需要注意的几点：

appid 是应用的唯一标识，后端使用的 appid 应当和前端使用的一致，否则会报错。
redirect_uri 是回调地址。什么意思呢？因为登录是依靠微信进行的，微信的数据库中有这个人存在才允许他登录，所以微信会进行验证，如果通过了验证，微信就会给出一个 code（密钥），接在回调地址后面。比如 https://passport.yhd.com/wechat/callback.do，这个网址作为回调地址，微信验证通过后，浏览器的地址栏变为https://passport.yhd.com/wechat/callback.do?code=123456789。
回调地址需要被编码，推荐常用的工具——站长工具

站长工具界面截图
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 标签里，用户点击即跳转到微信提供的登录页面。以下代码就可以实现。

直接跳转到微信提供的网页

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

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

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

知识星球登录效果图

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

控制台查看网站源码

可以发现知识星球的攻城狮们把原来的黑框网页用</code>标签压缩，再经过精心的裁剪，拿到二维码而已，这样就可以实现微信 & 账号两不误登录。</p> <p>直接拷贝代码到自己的代码中修改，替换 src 中的登录地址（就是黑框网页登录的那个地址），为了方便日后重复使用，我用 React 写了一个可以复用的组件，使用 antd 的 modal 组件实现遮幕效果。</p> <p>主要的代码：</p> <pre><code> <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">

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

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

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

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

你可能感兴趣的:(前端自学之路，在 React 构建的网页中实现微信登录)