react 对接企业微信扫码登陆记录

react 对接企业微信扫码登陆记录

1.在package.json里引入wecom/jssdk

npm i @wecom/jssdk
yarn @wecom/jssdk 

我这里使用的版本是 "@wecom/jssdk": "^1.3.1",

2.在index.html里引入jdk

<script src="https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js"></script>

*注:试过好几个版本的jdk,都会有一些莫名其妙的报错,或者引用不到,或是引用会报错,这个jdk是我尝试比较好用的jdk
http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.jshttps://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js都可以使用 ,但是 https网站引入http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js会导致企业微信二维码显示不出来,建议直接使用https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js

3.在需要使用的组件中使用

import React, { Component } from 'react';
import * as ww from '@wecom/jssdk';
import { Link, withRouter } from 'react-router-dom';
@withRouter
export default class Weixin extends Component {
    constructor(props) {
        super(props);
    }
       //获取数据企业微信所需要的数据 appid、agentid、redirct_uri等数据
    fetchData = () => {
        fireGetRequest(GET_WECHATCONFIG, { type: 'WE_CHAT_INFO' })
            .then((res) => {
                if (res.code !== 200) {
                    // openNotification('error', '获取配置信息失败,请重试', res.message);
                    return;
                }
                //获取数据之后传入实例化函数
                this.initQrcode(res.data);
            })
            .catch((e) => {
                // openNotification('error', '获取配置信息失败,请重试', res.message);
            });
    };
  //实例化函数
    initQrcode = (data) => {
       //实例化对象,挂载到页面,这里返回的就是二维码
        new window.WwLogin({
            id: 'ww_login',  
            login_type: 'CorpApp',//登录类型。ServiceApp:服务商登录;CorpApp:企业自建/代开发应用登录。,
            appid: data.corpId, //企业微信注册的企业Id,必传
            agentid: data.agentId,//企业微信注册时的应用程序Id ,必传
            redirect_uri: encodeURI(  //扫码成功后的回调地址,这里我是前端写的页面,将路由给后端,当扫码成功后,由后端进行页面的跳转,必传
                `${data.redirectUri}?userId=${getItem(
                    STORAGE_KEY_MAPPING.USER_ID 
                )}`//userId是自己加的在回调页面需要的参数
            ),
            lang: 'zh' // 不必传
        });
    };
//必传参数如果没有传,二维码展示不出来,会报参数错误,有时候会提示哪个参数的错误,有时候只会报参数错误,请联系管理员
    //进入页面时获取数据
    componentDidMount() {
        this.fetchData();
    }
    render() {
//装载二维码的容器
        return (
            <div
                style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                id="ww_login"
            ></div>
        );
    }
}

*注,如果没有问题,到这里应该就可以展示出来企业微信的二维码了,这里只是前端需要做的东西,想要二维码正确展示出来少不了后端的配置,这里要和后端同学一起配置

*附:企业微信官网:https://developer.work.weixin.qq.com/document/path/98151

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容