Ant Design Pro 运用点滴 [5]

最新推荐文章于 2024-09-10 19:50:21 发布

antdz

最新推荐文章于 2024-09-10 19:50:21 发布

阅读量2.1k

点赞数

分类专栏： AntDesignProV2

本文链接：https://blog.csdn.net/antdz/article/details/82078597

版权

本文介绍了如何在Ant Design Pro项目中集成企业微信扫码登录功能，包括前端组件的实现、跨域问题的解决以及涉及到的服务端验证。在实现过程中遇到了跨域错误，通过设置Access-Control-Allow-Origin和Access-Control-Allow-Credentials头解决了问题。

摘要由CSDN通过智能技术生成

Ant Design Pro 运用点滴

z turn 第三方登录之企业微信

企业微信扫码登录

在这个问题上折腾了好久，网上也没有找到什么方案。只好自己动手写了一个组件，还不是很成熟。直接放代码

import React, { Component } from 'react';
import fetch from 'dva/fetch';
import styles from './index.less';


export default class Ww extends Component {
   

  constructor(props) {
    super(props);
    this.state = {
      loaded: false,
      frame:null,
    }
  }

  componentWillMount() {

  }
  handleWindowListen=message=> {  
    message.data && message.origin.indexOf("work.weixin.qq.com") > -1 
    //利用message.data,请求接口，返回值jwt写入
    //在这里我们利用这个机会，请求服务器信息，如用户的id，jwt-token等等
    //但是还没有完善，最好将这个请求整到login models中，
    //但是怎么搞还没有头绪
    let url = message.data;
    fetch(url, {method: 'GET',})
    .then(function(response){
      console.log(response)
    })
    .catch(e => {
     console.log(e)
    });
  }

  handleLoad = event => {
    this.setState({ loaded: true,frame:event.currentTarget });
    window.addEventListener("message", this.handleWindowListen);
    event.currentTarget.contentWindow.postMessage("ask_usePostMessage", "*");
  }

  componentWillUnmount() { if(this.state.loaded){window.removeEventListener("message", this.handleWindowListen);} }

  render() {
    const { appid, agentid, uri, state, hr } = this.props;
    const src = "https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=" + appid + "&agentid=" + agentid + "&redirect_uri=" + uri + "&state=" + state + "&login_type=jssdk";

    return <iframe src={src} onLoad={
  this.handleLoad} height='400px' width='100%' frameBorder="0" ></iframe>;
  }
}

第二天补记：又折腾了好几个小时，算是比较符合我的想法了。又在跨域上，折腾了一会。直奔代码，这一次涉及的地方要多一些。

下面的代码片段还是昨天的那个组件，不过有改动

import React, { Component } from 'react';
import styles from './index.less';


export default class Ww extends Component {
   

  constructor(props) {
    super(props);
    this.state = {
      loaded: false,
      frame:null,
    }
  }

  componentWillMount() {

  }
  handleWindowListen=mes