React 微信扫码登陆网页

微信扫码登陆网页

- - 第一步：微信开放平台申请应用
  - 第二步：前端生成二维码
  - 第三步：微信扫码授权

微信官方开发说明文档

第一步：微信开放平台申请应用

微信开放平台注册开发者账号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程

进入微信开放平台。
使用帐号登录后进入帐号中心 =》开发者资格认证 =》认证（需要年费300RMB，另外认证需要提交公司营业执照一些信息）此处按要求填写即可。
进入管理中心=》网站应用=》创建网站应用=》填写基本信息=》填写网站信息。需要说明的是开发信息中有个授权回调域，此处填写的是我们项目所在的域名（此域名可以修改，其他信息修改需要重新审核）。
提交成功后等待审核。审核成功能拿到 AppID 和AppSecret。

第二步：前端生成二维码

// 步骤1：在页面中先引入如下JS文件（支持https）：
http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

//步骤2：在需要使用微信登录的地方实例以下JS对象
 var obj = new WxLogin({
	 self_redirect:true, //true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
	 id:"login_container", //第三方页面显示二维码的容器id
	 appid: "", //应用唯一标识，在微信开放平台提交应用审核通过后获得
	 scope: "", //应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
	 redirect_uri: "",//重定向地址，需要进行UrlEncode
	 state: "",//用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
	 style: "",//提供"black"、"white"可选，默认为黑色文字描述。详见文档底部FAQ
	 href: ""//自定义样式链接，第三方可根据实际需求覆盖默认样式。详见文档底部FAQ
 });
// react 实战例子
import React from "react";
import _ from "lodash";
import { useMount } from "ahooks";
import './styles.less'

export const QrCodeLogin = function (props: { onSuccess?: Function }) {
	useMount(() => {
		initQrcode()
	})
	const initQrcode = async () => {
		// 注意 这里样式是使用的base64加密方式，也可以跟官方文档一样使用css链接处理
		let customeStyle = "data:text/css;base64,Lnd4X3FyY29kZSBpZnJhbWUgeyB3aWR0aDogMjAwcHggIWltcG9ydGFudDsgaGVpZ2h0OiAyMDBweCAhaW1wb3J0YW50OyBtYXJnaW46IDA7IHBhZGRpbmc6IDA7fQoubG9naW5QYW5lbCB7IG1hcmdpbjowOyBwYWRkaW5nOiAwOyB9Ci5sb2dpblBhbmVsIC50aXRsZSwgLmxvZ2luUGFuZWwgLmluZm8geyBkaXNwbGF5OiBub25lOyB9Ci5pbXBvd2VyQm94IC5xcmNvZGUgeyBtYXJnaW46IDA7IHdpZHRoOiAyMDBweDsgYm9yZGVyOiBub25lOyB9";
		let stateData: any = await _RequestTools.promiseQuery({//_RequestTools封装的请求方法 这里向后端请求拿到state的值
			url: "/auth/**/**",
			queryParams: {}
		})
		new WxLogin({
			self_redirect: false,
			id: "wx_login_container",
			appid: "", //微信开放平台网站应用appid
			scope: "snsapi_login",
			redirect_uri: encodeURI('https://xxxxx.com'), //设置扫码成功后回调页面接口
			state: stateData,
			style: "black",
			href: customeStyle,  //自定义微信二维码样式文件
		});
	}
	return (
		<div className="wxlogin-box">
			<div style={{ fontSize: 16, color: '#333', marginBottom: 10 }}>扫码登录</div>
			<div id='wx_login_container' className="wx_qrcode"></div>
			<div style={{ fontSize: 14, color: '#666' }}>请使用微信扫描二维码登录</div>
		</div>
	)
}

实现效果
在这里插入图片描述

第三步：微信扫码授权

// 通过code获取access_token
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
//刷新access_token有效期
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
//通过access_token调用接口
// 以上都是后端处理