Lecaw

Учимся создавать Web-сайты

Как получить информацию профиля Google+ с использованием Google jQuery API key / Аутентификация Google

August 9, 2012 115hits

Сегодня я хотел бы рассказать вам о нескольких интересных вещах. Это Google jQuery API v3 и новое поколение шаблонов  - JsRender. Я покажу вам, как настроить аутентификацию с Google (OAuth 2.0) и выполнить некоторые API запросы. Один из них состоит в получении информации о зарегистрированном пользователе, а второй - получение ленты новостей. Другая сторона нашего урока является - JQuery шаблоны. Я покажу вам, как сделать HTML-контент с использованием шаблонов.

ДЕМО Исходные файлы

 

 

Получение Google API key

Я надеюсь, что вы уже создали свой собственный проект в Google APIs Console, как я описывал в Google API – получение списка контактов. Если у вас его нет – то создайте свой собственный проект Google API. Следующий шаг включает "Google + API", поэтому, пожалуйста, откройте консоль Google API, а затем выберите «Services». Здесь мы должны включить "Google + API":

google api

После этого, откройте 'API Access' и скопируйте 'Client ID' и 'API key':

google api

Шаг 1. HTML

Сейчас создайте index.html со следующим содержанием:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Как получить информацию профиля Google+ и ленту новостей с использованием Google JS API</title>
<link href="/css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.7.1");
</script>
<script type="text/javascript" src="/js/jsrender.js"></script> <!—определить шаблон для модулей -->
<script id="gplusTemplate" type="text/x-jsrender">
<div id="{{>id}}" class="gp">
<img src="/{{:actor.image.url}}" />
<div>
<p><a href="#" target="_blank">{{:actor.displayName}}</a><span>{{:published}}</span></p>
<p><a href="#" target="_blank">{{:title}}</a></p>
<p>{{:object.content}}</p>
</div>
</div>
</script>
</head>
<body>
<header>
<h2> Как получить информацию профиля Google+ и ленту новостей с использованием Google JS API </h2>
<a href="#" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<img src="/google-plus.jpg" class="google" alt="google plus" /> <center>
<button id="login" style="visibility: hidden">Authorize</button>
<div id="author"></div>
<div id="actList"></div>
</center> <script type="text/javascript">
// ваш client ID
var clientId = 'YOUR_CLIENT_ID_KEY'; // ваш ключ API
var apiKey = 'YOUR_API_KEY'; // объем авторизации
var scopes = 'https://www.googleapis.com/auth/plus.me'; // инициализация onliad
function onloadInitialization() {
// set our own api key
gapi.client.setApiKey(apiKey); // и checkAuth в 1мс
window.setTimeout(checkAuth, 1);
} // проверка авторизации
function checkAuth() {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: true
}, handleAuthResult);
} // результат авторизации
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('login');
if (authResult && ! authResult.error) {
authorizeButton.style.visibility = 'hidden';
makeGoogleApiCalls();
} else {
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
}
} // обработчик onclick событие кнопки Login
function handleAuthClick(event) {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: false
}, handleAuthResult); return false;
} // вызов Google API: получение информации и ленты новостей
function makeGoogleApiCalls() {
gapi.client.load('plus', 'v1', function() { // запрос1: получение информации о вошедших пользователях
var request = gapi.client.plus.people.get({
'userId': 'me'
});
request.execute(function(aInfo) { // подготовка массива
var authorInfo = [
{
'id': aInfo.id,
'actor': {'image': {'url': aInfo.image.url}, 'url': aInfo.url, 'displayName': aInfo.displayName},
'published': '',
'url': aInfo.url,
'title': 'My page at G+',
'object': {'content': ''}
}
];
// используем шаблон 'gplusTemplate'
$('#author').html(
$('#gplusTemplate').render(authorInfo)
);
}); // запрос2: получение ленты новостей
var restRequest = gapi.client.request({
'path': '/plus/v1/activities',
'params': {'query': 'Google+', 'orderBy': 'best'}
});
restRequest.execute(function(activityInfo) { // используем шаблон 'gplusTemplate'
$('#actList').html(
$('#gplusTemplate').render(activityInfo.items)
); });
});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=onloadInitialization"></script>
</body>
</html>

В заголовке наш файл загружает библиотеку jsrender.js и определяет пользовательские шаблоны. Мы будем использовать шаблон gplusTemplate для создания новостной ленты.

В теле страницы у нас есть кнопка "Авторизация" и 2 контейнера (для отображения нашей собственной информации и новостной ленты):

<button id="login" style="visibility: hidden">Авторизация</button>
<div id="author"></div>
<div id="actList"></div>

Важное замечание - вставьте собственные ClientID и Google API ключи в начало этого JavaScript кода. Некоторые функции в центре, предназначены для обработки кнопки Входа (авторизации). Когда страница загрузилась, мы устанавливаем Google API ключ и тайм-аут для проверки авторизации. Если мы уже вошли в систему - мы скрываем кнопку Войти. В противном случае – выводим её на экран и добавляем обработчик 'onclick' (чтобы вызвать авторизацию). Стандартный метод authorize() всегда показывает всплывающее окно, которое может немного раздражать, если вы просто пытаетесь обновить запрос OAuth 2.0. OAuth Google 2.0 также поддерживает режим " immediate ", который обновляет запрос без всплывающего окна.

Ну, а когда мы вошли в систему – мы можем сделать вызов Google API. Мы собираемся сделать 2 запроса API: получение своей информации и ленты новостей. Это очень просто:

// Запрос1: получение информации пользователя
var request = gapi.client.plus.people.get({
    'userId': 'me'
});
request.execute(function(aInfo) {
});
// Запрос2: получение новостной ленты
var restRequest = gapi.client.request({
    'path': '/plus/v1/activities',
    'params': {'query': 'Google+', 'orderBy': 'best'}
});
restRequest.execute(function(activityInfo) {
});

Как вы можете заметить - как обычно, мы получим ответ в формате JSON. Таким образом, у меня вопрос - как использовать данные из ответа JSON в целях получения результата в HTML-коде? Некоторые люди могут предложить метод " for " (проходит через все элементы массива JSON), но я хотел бы предложить новый метод - шаблоны. Он имеет одно важное преимущество - скорость. В результате скорость может быть очень высокой, особенно при формировании больших списков. Посмотрите на этот код, и вы поймете, что очень легко сделать HTML-контент с использованием библиотеки JsRender:

var restRequest = gapi.client.request({
    'path': '/plus/v1/activities',
    'params': {'query': 'Google+', 'orderBy': 'best'}
});
restRequest.execute(function(activityInfo) {
    // использование шаблона 'gplusTemplate' 
    $('#actList').html(
        $('#gplusTemplate').render(activityInfo.items)
    );
});

Вы можете скачать JQuery библиотеку JsRender здесь.

ДЕМО Исходные файлы

Дополнительная информация

RATTING:
(0 голосов)

Медиа