JavaScript SDK
Дистрибутив Scorocode JavaScript SDK можно скачать тут.
Подключение SDK
Для использования SDK на стороне браузера, скачайте библиотеку lib/browser/scorocode.min.js и подключите ее в проекте:
<script src="js/scorocode.min.js"></script>
Для использования SDK на стороне сервера (NodeJS) установите модуль SDK npm install scorocode
и подключите его в проекте:
var sc = require('scorocode');
Быстрый старт
Зарегистрируйтесь и создайте приложение с любым именем в Scorocode.
Для разработки примера мы использовали библиотеку react и утилиту для быстрого создания каркаса приложения create-react-app Требования для установки смотрите по ссылке. Установить утилиту можно из консоли командой:
npm install -g create-react-app
Создайте новое приложение и установите JS SDK последовательностью команд в консоли:
create-react-app first-scorocode
cd first-scorocode
npm install scorocode --save
Откройте файл src/index.js
и добавьте в него строки, заменив ключи "xxx" на соответствующие ключи из вашего приложения (раздел Настройки -> Безопасность):
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import Scorocode from 'scorocode' // <- добавить импорт SDK Scorocode
// Добавить инициализацию SDK
sc.Init({
ApplicationID: "xxx", // <- заменить xxx на ключ appId приложения
JavaScriptKey: "xxx", // <- заменить xxx на ключ javascript приложения
MasterKey: "xxx" // <- заменить xxx на ключ masterKey приложения
});
ReactDOM.render(
<App >,
document.getElementById('root')
);
Откройте файл src/App.js
замените его содержимое на следующий код:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Scorocode from 'scorocode' // <- добавить импорт SDK
class App extends Component {
constructor(props) {
super(props);
// Создаем переменные, которые будут хранить результаты запросов
this.state = {
registerResult: "",
loginResult: ""
};
}
// Заменяем содержимое
// Создаем две формы: для регистрации и для авторизации
render() {
return (
<div>
<h2>Регистрация</h2>
<form onSubmit={(event) => {this.handleRegister(event)}}>
<input type="text" placeholder="имя пользователя"> {' '}
<input type="email" placeholder="email"> {' '}
<input type="password" placeholder="password">
<button type="submit">Зарегистрироваться</button>
</form>
<pre>{this.state.registerResult}</pre>
<h2>Вход в систему</h2>
<form onSubmit={(event) => {this.handleLogin(event)}}>
<input type="email" placeholder="email"> {' '}
<input type="password" placeholder="password">
<button type="submit">Войти</button>
</form>
<pre>{this.state.loginResult}</pre>
</div>
);
}
// Обработчик формы регистрации
handleRegister(event) {
event.preventDefault()
const username = event.target.elements[0].value
const email = event.target.elements[1].value
const password = event.target.elements[2].value
// Очищаем переменную результата
this.setState({registerResult: ""})
// Создадим новый экземпляр sc.User
var appUser = new sc.User();
// Установим данные, необходимые для регистрации пользователя приложения
appUser
.set("username", username)
.set("email", email)
.set("password", password);
// Зарегистрируем нового пользователя приложения
appUser.signup()
// Обработчик успешного выполнения запроса
.then((data)=>{
// Обновляем переменную результата, переводя полученный объект в строку
this.setState({registerResult: JSON.stringify(data, null, 2)})
})
.catch((err) => {
// Обновляем переменную результата, переводя полученный объект в строку
this.setState({registerResult: JSON.stringify(err, null, 2)})
})
}
// Обработчик формы авторизации
handleLogin(event) {
event.preventDefault()
const email = event.target.elements[0].value
const password = event.target.elements[1].value
// Очищаем переменную результата
this.setState({loginResult: ""})
// Создадим новый экземпляр sc.User
var appUser = new sc.User();
// Аутентифицируем пользователя приложения, используя email и password
appUser.login(email, password)
// Обработчик успешного выполнения запроса
.then((data)=>{
// Обновляем переменную результата, переводя полученный объект в строку
this.setState({loginResult: JSON.stringify(data, null, 2)})
})
.catch((err) => {
// Обновляем переменную результата, переводя полученный объект в строку
this.setState({loginResult: JSON.stringify(err, null, 2)})
})
}
}
export default App;
Сохраните файл и запустите приложение из консоли командой:
npm start
В результате в браузере откроется страница с двумя формами: регистрации и авторизации. Поэкспериментируйте с регистрацией пользователей и их авторизацией и посмотрите на ответы от API sc. После успешной регистрации вы можете увидеть в коллекции users добавленного пользователя и авторизоваться, используя его email и пароль.