Javascript.Идентификация и аутентификация
Материал из Hivext Wiki
Содержание |
Идентификация и аутентификация
Рассмотрим пример использования сервиса идентификации и аутентификации на Javascript. Сервис поддерживает Google (@gmail.com), Yahoo! (@yahoo.com) и Yandex (@yandex.ru) аккаунты без регистрации.
Смотрим документацию
Документация сервиса Идентификация и аутентификация
Для урока выбраны методы:
- Signin - аутентификация пользователя;
- Signout - завершение сеанса;
- CheckSign - проверка идентификации.
Смотрим есть ли готовые Javascript клиенты для данного сервиса. Если под необходимый язык клиента нет, то методы сервиса вызываются напрямую (см. Подключение сервисов).
Приступаем к разработке
К началу разработки необходимо получить идентификатор приложения (см. Начинаем разработку).
Для примера идентификатор приложения (APPID) уже получен: 1dd8d191d38fff45e62564fcf67fdcd6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример идентификации и аутентификации</title>
<style>
body {
font-family: "Lucida Grande", Tahoma, Verdana, Arial, Sans-Serif;
font-size: 10pt;
color:#333;
}
.error {
border: 1px solid #ff5050;
background-color: #ffc5b5;
padding: 4px 10px;
margin-bottom: 6px;
display: none;
font-size: 8pt;
font-weight: bold;
}
</style>
<script src="http://code.hivext.ru/frameworks/js/core.js" type="text/javascript"></script>
<!-- Подключаем клиент сервиса Идентификация и аутентификация -->
<script src="http://api.hivext.ru/1.0/users/authentication.js" type="text/javascript"></script>
<script type="text/javascript">
function main() { // Точка входа.
//
// Здесь реализуем логику нашего приложения.
//
}
</script>
<body onload="main()">
<!-- Сюда будем выводить различные ошибки -->
<div id="error" class="error"></div>
<!-- Блок аутентификации с полями и кнопкой Signin -->
<div id="signin-block" style="display: none">
Электронная почта: <input id="email" value="guest@guest.com"/>
Пароль: <input id="password" value="guest" />
<input id="signin" value="Sign In" type="button" />
</div>
<!-- Блок со строкой приветствия и кнопкой Signout -->
<div id="signout-block" style="display: none">
<div id="welcome-message"></div>
<input id="signout" value="Sign Out" type="button" />
</div>
</body>
</html>
//
// Точка входа.
//
function main() {
function id(element) { return document.getElementById(element); }
function error(result, error) { return "Code: " + result + "<br />Error: " + error;}
// Идентификатор приложения (APPID).
var sAppid = "1dd8d191d38fff45e62564fcf67fdcd6";
// Идентификатор сессии. Если идентификатор был сохранен в cookies достанем его.
var sSession = Cookies.Get("session");
// Устанавливаем обработчик события на кнопку аутентификации Signin.
id("signin").onclick = function() {
id("error").style.display = "none";
// Проверям указал ли пользователь почту и пароль, если нет выводим ошибку.
if(!id("email").value || !id("password").value) {
id("error").innerHTML = "Введите электронную почту и пароль.";
id("error").style.display = "block";
return false;
}
//
// Вызываем метод аутентификации Signin.
//
Users.Authentication.Signin(sAppid, id("email").value, id("password").value, function(oResponse) {
// Проверяем код ответа метода.
if(oResponse.result === 0) { // Ошибок нет.
// Сохраним новую сессию в переменной и cookies.
sSession = oResponse.session;
Cookies.Set("session", sSession);
// Запишем в строку приветсвия имя пользователя, а если оно не указано то почту.
if(oResponse.name) id("welcome-message").innerHTML = oResponse.name;
else id("welcome-message").innerHTML = id("email").value;
// Уберем ненужные блоки и покажем блок со строкой приветствия и кнопкой Signout.
id("error").style.display = "none";
id("signin-block").style.display = "none";
id("signout-block").style.display = "block";
} else { // Если была ошибка, покажем ее.
id("error").innerHTML = error(oResponse.result, oResponse.error);
id("error").style.display = "block";
}
});
return true;
}
// Устанавливаем обработчик события на кнопку завершения сеанса Signout.
id("signout").onclick = function() {
id("error").style.display = "none";
//
// Вызываем метод завершения сеанса Signout.
//
Users.Authentication.Signout(sAppid, sSession, function(oResponse) {
// Проверям код ответа метода.
if(oResponse.result === 0) { // Ошибок нет.
// Очистим сессию в переменной и cookies.
sSession = '';
Cookies.Clear("session");
// Уберем ненужные блоки и покажем блок аутентификации с полями и кнопкой Signin.
id("signout-block").style.display = "none";
id("signin-block").style.display = "block";
} else { // Если была ошибка, покажем ее.
id("error").innerHTML = error(oResponse.result, oResponse.error);
id("error").style.display = "block";
}
});
return true;
}
//
// Вызываем метод проверки идентификации CheckSign.
//
Users.Authentication.CheckSign(sAppid, sSession, function(oResponse) {
if(oResponse.result === 0) { // Ошибок нет.
// Пользователь уже был аутентифицирован.
// Сохраним сессию в переменной и cookies.
sSession = oResponse.session;
Cookies.Set("session", sSession);
// Запишем в строку приветсвия имя пользователя, а если не оно указано то почту.
if(oResponse.name) id("welcome-message").innerHTML = oResponse.name;
else id("welcome-message").innerHTML = oResponse.email;
// Уберем ненужные блоки и покажем блок со строкой приветствия и кнопкой Signout.
id("signin-block").style.display = "none";
id("signout-block").style.display = "block";
} else {
// Уберем ненужные блоки и покажем блок аутентификации с полями и кнопкой Signin.
id("signin-block").style.display = "block";
id("signout-block").style.display = "none";
// Код ошибки 702 - пользователь не аутентифицирован, если произошла другая ошибка покажем ее.
if(oResponse.result != 702) {
id("error").innerHTML = error(oResponse.result, oResponse.error);
id("error").style.display = "block";
}
}
});
}
var Cookies = {
Set : function(name, value) {
var argv = arguments,
argc = arguments.length,
expires = (argc > 2) ? argv[2] : null,
path = (argc > 3) ? argv[3] : '/',
domain = (argc > 4) ? argv[4] : null,
secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
},
Get : function(name) {
var arg = name + "=",
alen = arg.length,
clen = document.cookie.length,
i = 0,
j = 0;
while(i < clen) {
j = i + alen;
if (document.cookie.substring(i, j) == arg)
return Cookies._getCookieVal(j);
i = document.cookie.indexOf(" ", i) + 1;
if(i == 0)
break;
}
return null;
},
Clear : function(name) {
if(Cookies.Get(name)) {
document.cookie = name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
},
_getCookieVal : function(offset) {
var endstr = document.cookie.indexOf(";", offset);
if(endstr == -1) {
endstr = document.cookie.length;
}
return unescape(document.cookie.substring(offset, endstr));
}
}
