使用Reactjs在客户端通过CIVIC登录

时间:2019-02-25 21:36:57

标签: javascript reactjs api

我需要使用Reactjs通过CIVIC创建登录名,看来,我无法访问civic全局变量,我在遵循文档https://docs.civic.com/#Browse,但我可能做错了任何想法。我将脚本链接移到html主体的顶部,并移到底部,并得到相同的错误消息。谢谢。

我收到此错误“第4行:'civic'未定义为no-undef“

/public/index.html

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="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>React App</title>

    <link rel="stylesheet" href="https://hosted-sip.civic.com/css/civic-modal.min.css">
    <script src="https://hosted-sip.civic.com/js/civic.sip.min.js">
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
/CivicLogin.js

import React from 'react';

const CivicLogin = () => {  
  var civicSip = new civic.sip({ appId: 'myAppID' });

  return (
    <button id="signupButton" class="civic-button-a medium" type="button">
      <span>Log in with Civic</span>
    </button>

  );
}


export default CivicLogin;

1 个答案:

答案 0 :(得分:0)

我只是将窗口添加到civic.sip中,因此可以从窗口对象中读取全局变量,请在此处https://facebook.github.io/create-react-app/docs/using-global-variables

/CivicLogin.js

import React from 'react';

const CivicLogin = () => {  
  var civicSip = new window.civic.sip({ appId: 'myAppID' });

  return (
    <button id="signupButton" class="civic-button-a medium" type="button">
      <span>Log in with Civic</span>
    </button>

  );
}


export default CivicLogin;