JSまたはReact-Redux JSを反応させてCloudKit JSを認証する方法

Question

私はWeb開発のために非常に新しいです。 scriptタグのindex.htmlにCloudKit JS &を追加しました。そして私はそれが私の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と反応で認証するにはどうすればよいのエラー を次のですか？

Answer 1

421が期待されています。基本的に、CloudKit JSがサーバーにログインしているかどうかを確認しています。ログインする必要があります。

また、必要があります。

• は、サインイン/サインアウトボタンがにレンダリングされるべきDOM要素を提供します。
• componentWillMountの代わりにcontainer.setUpAuthをcomponentDidMountに呼び出します（このメソッドを呼び出すと、サインインボタンの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') 
);