所有文章的源码将会被上传到github 仓库https://github.com/kurryluo/LearningByMyself，不用经过授权，即可转载所有文章和代码。
这篇文章将教会你：
1.如何实现微信帐号授权登录网站的前端部分。2.怎样模仿别人的网页，做出想要的效果。
在微信开放平台上申请网站应用
微信开放平台，是一个开放给企业或个人的技术平台。借助这个平台，我们可以开发与微信相关产品，比如微信号二次开发、手机应用、网站应用、小程序、管理公众号的第三方平台。
在注册、完善、认证完开发者资质后，我们需要在管理中心创建一个网站应用。温馨提示：审核的周期规定是7天，请在开启项目前申请，以节约时间。
实现最简单的网页授权登录
微信提供了两种网页登录的方式，第一种很简单，如下图所示，这里是官方教程。
举个栗子：
需要注意的几点：
- 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 标签里，用户点击即跳转到微信提供的登录页面。以下代码就可以实现。
<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="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>
最终效果如动图：
欢迎大家关注微信公众号：FrontEndVisDev
不仅有前端和可视化，还有我的创业经验
个人网站：http://kurryluo.github.io_
各个分享平台的 KurryLuo 都是在下。
