node.js - 如何在react JS或React-Redux JS中验证CloudKit JS

Question

我对网络开发非常陌生。 我已经下载了 CloudKit JS 并在 script 标签中添加了 index.html 。我确保它在我的 React-Redux 包 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')
);