本文主要是介绍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", //第三方页面显示二维码的容器idappid: "", //应用唯一标识,在微信开放平台提交应用审核通过后获得scope: "", //应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即可redirect_uri: "",//重定向地址,需要进行UrlEncodestate: "",//用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验style: "",//提供"black"、"white"可选,默认为黑色文字描述。详见文档底部FAQhref: ""//自定义样式链接,第三方可根据实际需求覆盖默认样式。详见文档底部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: "", //微信开放平台网站应用appidscope: "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调用接口
// 以上都是后端处理
授权页面
授权后回调:后端接口处理完成后,处理回调当前页面
后端实现部分可以看下这篇大佬的文章 基于 Spring Boot 和 WxJava 实现网站接入微信扫码登录
这篇关于React 微信扫码登陆网页的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!