QuickBlox Developers (API docs, code samples, SDK)

Simple sample for Users (on the PhoneGap platform) ru

From QuickBlox Developers (API docs, code samples, SDK)
Jump to: navigation, search

Contents

Быстрый старт с Simple sample for Users

Для быстрого старта и изучения базовых возможностей работы с модулем QuickBlox Users рекомендуем вам ознакомитсья с этим простым примером для платформы PhoneGap.

Начнине работу с Simple Sample for Users:

  1. Репозиторий: https://github.com/QuickBlox/SimpleSample-users-phonegap
  2. Скачать код из репозитория git@github.com:QuickBlox/SimpleSample-users-phonegap.git или в zip-архиве https://github.com/QuickBlox/SimpleSample-users-phonegap/zipball/master
  3. Создать Android Project в Eclipse и указать для Create from existing source путь к коду приложения
  4. Запустить как приложение Android
8.png9.png10.png

Создание PhoneGap приложения для Android

В этом руководстве описан процесс создания простого приложения использующего модуль QuickBlox Users для платформы PhoneGap.

PhoneGap приложение состоит из двух частей -- непосредственно кода приложения на HTML/JavaScript и "обертки" в виде простого приложения на одной из мобильных платформ (PhoneGap поддерживает Android, iOS, Blackberry, WP, WebOS, Symbian).

Для начала необходимо создать пустое PhoneGap приложение. В нашем случае -- для платформы Android. Процесс создания такого приложения описан в руководстве на сайте PhoneGap, но мы продублируем его здесь, чтобы не упустить деталей.

  1. Создать Android приложение в Eclipse

    2. 1.png

    2.png

    3.png

  2. Скачать последнюю версию PhoneGap. Мы будем работать с директорией Android.
  3. В корне приложения создать папку libs, скопировать туда jar-библиотеку PhoneGap, в нашем случае это файл phonegap-1.4.1.jar
  4. Добавить библиотеку в Build Path приложения. Для этого в окне Package Explorer необходимо вызвать контекстное меню для приложения и перейти в Build Path → Configure Build Path, затем во вкладке Libraries добавить библиотеку с помощью Add JARs.

    5. 4.png

  5. Далее необходимо добавить файлы
    6. res/xml/phonegap.xml
    <?xml version="1.0" encoding="utf-8"?>
<phonegap>
    <access origin="http://127.0.0.1*"/>
    <log level="DEBUG"/>
</phonegap>

    и 

    res/xml/plugins.xml
    <?xml version="1.0" encoding="utf-8"?>
<plugins>
	<plugin name="Device" value="com.phonegap.Device" />
</plugins>
  6. Изменить код класса src/com/quickblox/sample/SimpleSampleUsersPhoneGap.java
    7. package com.quickblox.sample;
 
import android.os.Bundle;
import com.phonegap.*;
 
public class SimpleSampleUsersPhoneGap extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}
  7. Добавить следующий код в AndroidManifest.xml внутрь корневого элемента manifest
    8. <supports-screens
    android:anyDensity="true"
    android:largeScreens="true"
    android:normalScreens="true"
    android:resizeable="true"
    android:smallScreens="true" />
 
<uses-permission android:name="android.permission.INTERNET" />

    Добавить android:configChanges="orientation|keyboardHidden" в тэг activity, а также добавить новое активити после существующего 

    <activity
    android:name="com.phonegap.DroidGap"
    android:configChanges="orientation|keyboardHidden"
    android:label="@string/app_name" >
    <intent-filter>
    </intent-filter>
</activity>

    В итоге, файл AndroidManifest.xml должен иметь следующее содержимое 

    <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.quickblox.samples"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk android:minSdkVersion="7" />
 
    <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true" />
 
    <uses-permission android:name="android.permission.INTERNET" />
 
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name="com.quickblox.sample.SimpleSampleUsersPhoneGap"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.phonegap.DroidGap"
            android:configChanges="orientation|keyboardHidden"
            android:label="@string/app_name" >
            <intent-filter>
            </intent-filter>
        </activity>
    </application>
 
</manifest>
  8. Добавить файл assets/www/index.html
    9. <!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Hello, PhoneGap!</title>
</head>
<body>
	Hello, PhoneGap!
</body>
</html>
  9. Если все правильно, проект должен иметь следующую структуру

    10. 6.png

  10. Запустить проект на устройстве или эмуляторе

    11. 7.png

Использование модуля QuickBlox Users в HTML/JavaScript приложении

В этом раздерделе будет рассмотрен процесс создания HTML/JavaScript приложения как составной части PhoneGap-инфраструктуры. Весь код приложения размещается в папке assets/web.

Приложение содержит следующие файлы

  1. index.html -- код страницы приложения
  2. main.js -- JavaScript код приложения
  3. jquery.min.js -- библиотека jQuery
  4. phonegap-1.4.1.js -- библиотеку PhoneGap, которую можно найти в архиве, скачанном с официального сайта

JavaScript код приложения

Инициализация данных, для подключения к приложению QuickBlox. Все эти значения можно найти в свойствах приложения в админпанели QuickBlox

QuickBlox Application Settings.png 

// QuickBlox application settings
var QB = {
	appId : '203',
	ownerId : '4431',
	authKey : '5a-YN-8saK8-yTs',
	authSecret : 'ttwUEV7rGGaOrnV'
}

Функция init() запускается сразу после загрузки тэга body в index.html. Функция document.addEventListener("deviceready", main, true); добавляет слушателя на событие deviceready при совершении которого запускается функция main(). 

// Script runs main() when when PhoneGap is fully loaded.
// http://docs.phonegap.com/en/1.4.1/phonegap_events_events.md.html#deviceready
function init() {
	document.addEventListener("deviceready", main, true);
//	$(document).ready(main);
}

Функция main() отображает на странице настройки приложения вызывает функцию аутентификации приложения authApp(appHasToken, errorCallback) 

function main() {
	$('#phoneGapStatus').html("it's working");
 
	// Show QuickBlox application parameters.
	$('#appId').html(QB.appId);
	$('#ownerId').html(QB.ownerId);
	$('#authKey').html(QB.authKey);
	$('#authSecret').html(QB.authSecret);
 
	authApp(appHasToken, errorCallback);
}

Функция authApp(successCallback, errorCallback) отправляет POST запрос на https://admin.quickblox.com/auth c параметрами

  • app_id
  • auth_key
  • nonce -- случайное значение
  • timestamp -- unix timestamp
  • signature

Наиболее интересный параметр -- signature, он вычисляется следующим образом -- параметры app_id, auth_key, nonce, timestamp вместе со значениями сортируются по алфавиту, например 

app_id=203&auth_key=5a-YN-8saK8-yTs&nonce=0&timestamp=1325016104

и шифруются с помощью HMAC-SHA, где в качестве ключа выступает authorization secret из настроек приложения.

В коде рассматриваемого приложению эту функцию выполняет getSignature().

Подробнее о запросе на странице документации -- Authentication_and_Authorization#API_Session_Creation 

// Authenticate specified QuickBlox application.
// Calls successCallback if finished successfully, and errorCallback if not.
function authApp(successCallback, errorCallback) {
	var s = getSignature(); // gets signature
 
	// See more documentation on the wiki -- http://wiki.quickblox.com/Authentication_and_Authorization#API_Session_Creation
	var url = 'https://admin.quickblox.com/auth';
	var data = 'app_id=' + QB.appId + 
			'&auth_key=' + QB.authKey + 
			'&nonce=' + s.nonce + 
			'&timestamp=' + s.timestamp + 
			'&signature=' + s.signature;
 
	console.log('[DEBUG] Authenticate specified application: POST ' + url + '?' + data);
 
	$.ajax({
	  type: 'POST',
	  url: url,
	  data: data,
	  success: successCallback,
	  error: errorCallback
	});
}

appHasToken(xml) выполянется в случае успешного завершения аутентификации приложения. 

// Calls when QuickBlox application authorize.
function appHasToken(xml) {
	// Finds token in retrieved xml response.
	var token = $(xml).find('token').text();
 
	console.log('[DEBUG] Your token: ' + token);
 
	$('#auth').unbind('click');
	$('#auth').click(function(){
		authUser(token);
	});
 
	$('#register').unbind('click');
	$('#register').click(function(){
		addUser(token);
	});
 
	$('#users a').die('click');
	$('#users a').live('click', function(){
		var userId = $(this).attr('id');
		deleteUser(token, userId);
	});
 
	getAllUsers(token);
}

getAllUsers(token) получет всех пользователей приложения. Отправляет GET запрос на https://users.quickblox.com/users.json

Подробнее о запросе на странице документации -- Retrieve_API_Users_for_current_application 

// Gets all users of QuickBlox application and prints them into the page.
function getAllUsers(token) {
	// See more documentation on the wiki -- http://wiki.quickblox.com/Users#Retrieve_API_Users_for_current_application
	var url = 'https://users.quickblox.com/users.json'
	var data = 'token=' + token;
 
	console.log('[DEBUG] Getting all users: GET ' + url + '?' + data);
 
	$.ajax({
		type: 'GET',
		url: url,
		data: data,
		success: function(response) {
			console.log('[DEBUG] Server response:');
			console.log(response);
 
			// Prints users list into the #users container.
			$('#users').html('');
			$('#usersCount').html(' (' + response.items.length + ')');
			$(response.items).each(function(index, current){
				var element = '<li>[<a href="#" id="' + current.id + '">delete</a>] (' + current.id + ') ' + current.login + '</li>';
				$('#users').append(element);
			});
			if (response.items.length == 0) {
				$('#users').append('<li><i>There are no users in application.</i></li>');
			}
		},
		error: errorCallback
	});
}

Расширение .json означает, что возвращаемый результат будет представлен в формате JSON, например 

{
  "page": 1,
  "page_size": 10,
  "total_pages": 6,
  "items": [
    {
      "blob_id": null,
      "created_at": "2011-12-27T20:10:43Z",
      "custom_parameters": null,
      "device_id": null,
      "email": "user@injoit.com",
      "external_user_id": null,
      "facebook_id": null,
      "full_name": null,
      "id": 343,
      "last_request_at": "2012-02-08T13:35:52Z",
      "login": "batman",
      "owner_id": 4342,
      "phone": null,
      "twitter_id": null,
      "updated_at": "2012-02-08T13:35:52Z",
      "website": null
    },
    ...
}

Любые действия по редактированию или удалению данных необходимо совершать от имени пользователя, для этого необходимо пройти аутентификацю пользователя (не путать с аутентификацией приложения).

Подробнее о запросе на странице документации -- Authentication_and_Authorization#API_User_Sign_In 

// Authenticates user.
function authUser(token) {
	var login = $('#login').val();
	var password = $('#password').val();
 
	// See more documentation on the wiki -- http://wiki.quickblox.com/Authentication_and_Authorization#API_User_Sign_In
	var url = 'https://users.quickblox.com/users/authenticate.json'
	var data = 'user[owner_id]=' + QB.ownerId + 
			'&login=' + login + 
			'&password=' + password +
			'&token=' + token;
 
	console.log('[DEBUG] Authenticate existing user: POST ' + url + '?' + data);
 
	$.ajax({
		type: 'POST',
		url: url,
		data: data,
		success: function(response) {
			console.log('[DEBUG] User has been successfully authenticated. Server response:');
			alert('[DEBUG] User has been successfully authenticated, user id = ' + response.id);
			console.log(response);
		},
		error: errorCallback
	});
}

Добавление нового пользователя.

Подробнее о запросе на странице документации -- Users#API_User_Sign_Up 

// Adds new user.
function addUser(token) {
	var login = $('#new_login').val();
	var password = $('#new_password').val();
 
	// See more documentation on the wiki -- http://wiki.quickblox.com/Users#API_User_Sign_Up
	var url = 'https://users.quickblox.com/users.json'
	var data = 'user[owner_id]=' + QB.ownerId + 
			'&user[login]=' + login + 
			'&user[password]=' + password +
			'&token=' + token;
 
	console.log('[DEBUG] Add new user: POST ' + url + '?' + data);
 
	$.ajax({
		type: 'POST',
		url: url,
		data: data,
		success: function(response) {
			console.log('[DEBUG] User has been successfully added, server response:');
			console.log(response);
			alert('User has been successfully added, user id = ' + response.id);
			getAllUsers(token);
		},
		error: errorCallback
	});
}

Удаление существующего пользователя (перед удалением необходимо пройти аутентификацию для удаляемого пользователя).

Подробнее о запросе на странице документации -- Users#Delete_API_User_by_identifier 

// Deletes existing user by id.
function deleteUser(token, id) {
 
	// See more documentation on the wiki -- http://wiki.quickblox.com/Users#Delete_API_User_by_identifier
	var url = 'https://users.quickblox.com/users/' + id + '.json';
	var data = 'token=' + token;
 
	console.log('[DEBUG] Delete user: DELETE ' + url + '?' + data);
 
	$.ajax({
		type: 'DELETE',
		url: url,
		data: data,
		complete : function(jqXHR, textStatus) {
			console.log(jqXHR);
			alert(jqXHR.statusText + ' ' + jqXHR.status +  ' : ' + jqXHR.responseText);
 
			if (jqXHR.status == 200) {
				authApp(appHasToken, errorCallback);
			}
		}
	});
}

Получение подписи для осуществления процедуры аутентификации приложения. 

// Gets signature. Signature uses for application authentication.
function getSignature() {
	var nonce = Math.floor(Math.random() * 1000); // Gets random number (0;1000)
	var timestamp = Math.round((new Date()).getTime() / 1000); // Gets unix timestamp (http://en.wikipedia.org/wiki/Unix_time) 
 
	// Creating message where parameters are sorted by alphabetical order.
	var message = 'app_id=' + QB.appId + '&auth_key=' + QB.authKey + '&nonce=' + nonce + '&timestamp=' + timestamp;
	var secret = QB.authSecret;
	// Encrypting message with secret key from QuickBlox application parameters.
	var hmac = Crypto.HMAC(Crypto.SHA1, message, secret);
 
	var signatureObj = {
		nonce : nonce,
		timestamp : timestamp,
		signature : hmac
	};
 
	return signatureObj; 
}

Читайте также

Retrieved from "http://quickblox.com/developers/index.php?title=Simple_sample_for_Users_(on_the_PhoneGap_platform)_ru&oldid=2071"

Back to Top