1

私はWeb開発に非常に慣れていません。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で認証するにはどうすればよいですか?

4

1 に答える 1

4

421 が予想されます。基本的にこれは、ユーザーがサインインしているかどうかをサーバーで確認する CloudKit JS です。ログ ステートメントには「ログインが必要です」が表示されます。

次のことも行う必要があります。

  • signIn / signOut ボタンを表示する dom 要素を提供します。
  • 代わりにcontainer.setUpAuth呼び出します(このメソッドを呼び出すときは、サインイン ボタンの dom 要素が存在している必要があります)。componentDidMountcomponentWillMount

サンプルコード ( 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')
);
于 2016-04-18T18:58:52.573 に答える