如何在 React JS 或 React-Redux JS 中验证 CloudKit JS

Question

我对 Web 开发非常陌生。 我已经下载了 CloudKit JS 并在脚本标签中添加了 index.html。而且我确保它在我的 react-redux bundle JS 之前加载。

  <script src="/cloudkit.js"></script>
  <script src="/bundle.js"></script>

我已经制作了单类组件，并且我正在对组件进行身份验证，并安装如下。

componentWillMount() {
CloudKit.configure({
  containers: [{
    containerIdentifier: '<container ID>',
    apiToken: '<secret api token>',
    environment: 'development'
  }]
});
var container = CloudKit.getDefaultContainer();
container.setUpAuth().then(function(userInfo) {
  if(userInfo) {
            console.log(userInfo);
        } else {
            console.log('need to login');
        }
    });
}

然后我得到以下错误 如何使用 CloudKit JS 在 React 中进行身份验证？

Answer 1

421 是预期的：基本上这是 CloudKit JS 与服务器检查用户是否已登录。您仍然应该看到您的日志语句“需要登录”。

您还应该：

• 提供要在其中呈现登录/注销按钮的 dom 元素。
• 在componentDidMount 中调用container.setUpAuth 而不是componentWillMount（调用此方法时必须存在登录按钮的dom 元素）。

示例代码 (https://jsfiddle.net/byb7ha0o/4/)：

CloudKit.configure({
  containers: [{
    containerIdentifier: '<container>',
    apiToken: '<token>',
    environment: 'development'
  }]
});
const container = CloudKit.getDefaultContainer();

class HelloCloudKitJS extends React.Component {

  constructor() {
    super();
    this.state = {
        userInfo: null
    }
  }

  componentDidMount() {
    container
      .setUpAuth()
        .then(userInfo => {
        if(userInfo) {
            this.setState({userInfo: userInfo});
          return;
        }
        container
          .whenUserSignsIn()
            .then(userInfo => {
                this.setState({userInfo: userInfo})
          })  
      })
  }

  render() {
    return <div>
      <div>
        <div id="apple-sign-in-button"></div>
        <div id="apple-sign-out-button"></div>
      </div>
    </div>;
  }
}

ReactDOM.render(
  <HelloCloudKitJS />,
  document.getElementById('container')
);