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

Question

我是网络开发的新手。我已经下载了 CloudKit JS 并在脚本标签中添加了 index.html。我确保它在我的 react-redux 包 JS 之前加载。

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

我制作了单个 class 组件并且我运行组件的身份验证确实安装如下。

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 与服务器检查用户是否已登录。您仍然应该看到您的日志语句 'need to login'。

您还应该：

提供 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')
);

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

How to authenticate CloudKit JS in react JS or React-Redux JS

node.js

reactjs

cloudkit-web-services

redux

react-redux