React项目中第三方使用微信扫码登录

写在前面：同之前分享的钉钉扫码登录一样，前期准备工作就不说了，官网写的很清楚，这是一个传送门
直接来看在react项目中咋使用。
我的思路：微信扫码是一个新的组件，通过外部传入的visible来控制出现还是消失（点击一个按钮出现扫码组件）。扫码组件在页面挂载后开始实例一个JS对象，生成专属于你们这个项目的二维码，然后手机扫码确认登录后，当前页面地址栏参数会发生变化，拿到需要的参数去进行你需要的操作。

首先，还是在Index.html文件中引入js


<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="theme-color" content="#000000" /><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><title>登录</title>//  引入文件<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script></head><body><div id="root"></div></body>
</html>

接下来，新建微信扫码组件WxLoginCode.jsx

import React from 'react'
import util from '../../util/util';export default class WxLoginCode extends React.Component {constructor(props) {super(props)this.state = {//  一个appid对应一个回调地址APPID: YOUR_APPID,// 扫码成功后要跳转的页面REDIRECT_URI: encodeURIComponent(YOUR_URL)}}componentDidMount() {var obj = new window.WxLogin({self_redirect: false,id: "login",appid: this.state.APPID,scope: "snsapi_login",redirect_uri: this.state.REDIRECT_URI,state: "",style: "",href: ""});// 监听页面地址栏url的改变 获取参数codewindow.onhashchange = () => {//用一个方法拿到当前地址的参数let params = util.getQueryParams(this.props.history.location.search);// 扫码成功后地址栏会拼上一个code参数  if (params.code || params['?code']) {let code = params.code ? params.code : params['?code']// 拿到参数去做你自己的操作//我们项目中是先调用一个接口来获取用户信息（后台提供），然后调用登录接口进入系统// .........}}}render() {return <div id='login' ></div>}
}

写在后面：当时在做这个时候，按照官网文档new WxLogin这样实例js对象总是不行，说找不到WxLogin，查了下说是因为引入的js在react中是挂在window对象下，得new window.WxLogin这样才行。也是个坑吧，记录一下。

React项目中第三方使用微信扫码登录相关推荐

前后端分离项目知识汇总（微信扫码登录，手机验证码登录，JWT）
整合篇二前言整合JWT 用户登录业务介绍单一服务器模式 SSO(single sign on)模式 SSO登录三种常见的方式传统用户身份验证解决方案 JWT令牌 JWT的原则整合整合腾讯 ...
微信扫码登录、支付项目总结
一.前期准备项目代码https://gitee.com/lcaicai/xdvideo.git 微信网站应用扫码登录官方文档:https://open.weixin.qq.com/cgi-bin/s ...
Vue+abp微信扫码登录
最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册 ...
网站微信扫码登录总结
文章目录微信扫码前端操作后端操作企业微信扫码总结补充网站微信扫码登录从最初的惊艳四座到如今在各大网站普及已经过了7年的时间,如今网站微信扫码登录靠着便捷.安全的特性成为了网站与用户的首选 ...
VUE项目中的微信扫码登录
微信扫码登录功能首先了解微信扫码登录的流程和详解,详见微信扫码登录,这边仅是vue前端相关流程一.创建微信登录按钮及方法,配置相关参数 1.创建微信登录按钮 <!--微信授权登录按钮--&g ...
项目整合微信扫码登录功能
项目整合微信登录功能一.准备工作 https://open.weixin.qq.com 1.注册 2.邮箱激活 3.完善开发者资料 4.开发者资质认证准备营业执照,1-2个工作日审批.300元 5 ...
第三方登录之微信扫码登录
文章目录 1. 申请微信接入: 2. 项目环境搭建: 3.后端Controller接口: 4.HTML页面代码: 5.测试结果: 6.补充说明: 小伙伴们有各种疑问可以去参考官方文档进行详细的学习下 ...
【网课平台】Day10.对接第三方：实现微信扫码登录
文章目录一.需求:微信扫码登录 1.接口文档 2.开发环境准备 3.接入分析 4.接口定义 5.申请令牌 6.查询用户信息 7.保存用户信息一.需求:微信扫码登录 (和第三方对接的流程) 1.接口 ...
Java+spring boot+mybatis plus+redis实现企业微信扫码登录并同步通讯录到数据库表中
1.首先需要有企业微信管理员账号,以便在企业微信管理端设置一些参数,参数如下: 企业id.AgentId-应用id.secret-应用的secret.授权登录的回调域名.通讯录同步下的secret. ...
Vue - 实现微信扫码登录功能（项目植入微信扫码登录功能）超详细完整流程详解及详细代码及注释，附带完整功能源码、常见问题解决方案
前言如果您需要 Nuxt.js 版本的教程,请访问 Nuxt.js - 微信扫码登录功能. 网上的大部分教程都太乱且没有任何注释和解释,对于新手而言简直是根本无从下手, 本文将站在新手小白的角度,从 ...

React项目中第三方使用微信扫码登录

React项目中第三方使用微信扫码登录相关推荐

最新文章

热门文章