2016-04-16 7 views
0

Я очень новичок в разработке веб-сайтов. Я загрузил CloudKit JS &, добавив в index.html в тег скрипта. И я убедился, что он загружается до моего пакета JS с редукцией-редукцией.Как аутентифицировать CloudKit JS в реакции 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'); 
     } 
    }); 
} 

Затем я получаю следующее сообщение об ошибке enter image description here Как проверить подлинность в React с CloudKit JS?

+0

Можете ли вы попробовать запустить тот же код за пределами Реагировать? Кажется, что проблема с CloudKit только – iofjuupasli

+0

Я хочу использовать CloudKit дальше в React для обработки данных. Аутентификация - это только начало. Фактически асинхронная загрузка скрипта из CDN начинается, но я загрузился в скрипт, чтобы избежать этой проблемы. –

ответ

3

Ожидается 421: в основном это проверка CloudKit JS с сервером, если пользователь выполнил вход. Вы все равно должны видеть, что ваш оператор журнала «должен войти».

Вы также должны:

  • Предоставлять элементы DOM, где кнопки для входа в аккаунт/SignOut должны быть отображены.
  • Звоните container.setUpAuth в componentDidMount вместо 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') 
); 
+0

Я сам пришел к такому выводу. Сегодня я пришел, чтобы удалить вопрос. Но я хотел бы дать вам очки. Спасибо за вашу помощь. –