Настройка страницы авторизации с помощью форм в веб-интерфейсе Outlook 2003

В этой статье Вы узнаете, как можно визуально изменить страницу авторизации с помощью форм при входе в систему MS Exchange.

Для начала давайте посмотрим на то, о чем мы будем говорить. Если у Вас стоит Exchange 2003 и разрещена авторизация с помощью форм (она разрешена в SBS2003 по умолчанию), тогда при входе в веб-интерфейс Outlook первая страница будет выглядеть так:

Довольно симпатичное окошко, зачем же его менять? Обычно для этого находятся следующие причины: 1) так хочет Ваш начальник; 2) просто для того, чтобы попробовать, возможно ли это. Вне зависимости от причины в этой статье Вы найдете рекомендации к изменению внешнего вида окна доступа без нанесения ему какого-либо вреда. Изменения, которые будут здесь описываться, будут заключаться в изменении цвета фона страницы входа и добавлении Вашего собственного логотипа или текста.

Процедура

Исходный код для этого окошка находится в файле logon.asp. Местоположение этого файла зависит от языковых установок Вашего сервера. Так как для моего сервера был установлен английский язык, то этот файл находится по адресу C:\Program Files\Exchsrvr\exchweb\bin\auth\usa

Если для Вашего сервера установлен другой язык, то тогда Вам нужно будет работать с файлом, находящемся в другой папке с соответствующим именем внутри папки auth. Но сначала, перед началом работы с тем файлом Вам нужно создать его резервную копию. Все, что Вам нужно будет сделать, это выбрать этот файл в экплорере и нажать комбинацию клавиш Ctrl+C для его копирования и Ctrl+V для его вставки в ту же самую папку. Аналогично Вы можете использовать меню Edit эксплорера, но вне зависимости от того, какой путь Вы выберете, Вам необходимо сделать резервную копию. Если при редактировании этого файла Вы допустите ошибку, то есть вероятность, что Вы не сможете пользоваться веб-интерфейсом Outlook, пока не найдете сохраненную копию. Если у Вас нет копии, то Вам придется переустановить Exchange для того, чтобы далее пользоваться авторизацией с помощью форм.

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

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

Учтите, что HTML код игнорирует пробелы, табуляцию, возврат каретки и т.д. Пробелы в начале этих линий являются очень простым способом для выделения схемы таблицы. В коде страницы авторизации с помощью форм при входе в веб-интерфейс Вы увидите множество таких меток. Также обратите внимание на использование слова "yellow"? в приведенном примере при определении значения свойства bgcolor, которое устанавливает цвет фона. Однако чаще в таких случаях используются значения RGB, которые выглядят следующим образом: #1278AB, так как в таком случае появляется возможность определения более точных тонов. В RGB представлении каждая пара цифр — это шестнадцатеричное двухзначное число, которое определяет красную, зеленую или голубую компоненту цвета.

Как и можно было ожидать, код страницы для типичной таблицы в окне авторизации с помощью форм намного более сложен, чем приведенный пример, но принцип тот же самый. Страница авторизации с помощью форм содержит таблицы в таблицах, а теги имеют намного больше свойств, чем просто?, как было приведено выше. Однако важно понимать, что все элементы страницы авторизации удерживаются на своих местах с помощью таблиц. Если Вам необходимо поместить новую картинку внизу уже существующей, тогда Вам нужно найти теги

Также необходимо упомянуть, что код, хранящийся в файле logon.asp, достаточно сложен. Единственное, что Вы можете сделать, это использовать имя уже существующей картинки в качестве опознавательного знака для того, чтобы найти конкретное место в файле. Слово Microsoft справа вверху является файлом logon_microsoft.gif, а большое цветное лого по середине называется logon_logo.gif. Посмотрите на скрин-шот 2, картинка слева разбита на две части: logon_IE_top.gif и logon_ie_bot.gif. Ширина logon_ie_bot.gif составляет всего один пиксель, но он растянут вертикально, и заполняет всю клетку, которая его содержит.

Также довольно полезно знать имена таблиц, если Вы собираетесь изменять цвет фона какой-либо из частей экрана. Часть экрана с голубым фоном — это таблица borderTable. Внутренняя часть окна, содержащая картинки и окна для ввода данных, называется mainTable, хотя цвет ее фона виден только между двумя картинками слева. Картинки с правой стороны содержатся в таблице, называющейся logoTable. Все, что находится снизу- содержится в таблице usertxtTable, а действительная область ввода находится в таблице, называющейся contentTable. Следующий скрин-шот, в котором все таблицы имеют свой цвет фона, чтобы показать, где каждая из них находится:

На этой картинке borderTable закрашена красным цветом, mainTable — оранжевым, logoTable — желтым, usertxtTable — зеленым, а contentTable — фиолетовым. Как несложно заметить, вставленные gif файлы не имеют прозрачного фона, так что если Вам необходимо изменить цвет их фона, то Вы можете заполнить его этим цветом или сделать фон прозрачным в графическом редакторе. Картинки находятся в папке C:\Program Files\Exchsrvr\exchweb\img. Маленький кусочек цвета фона самой страницы виден справа.

Теперь мы почти готовы внести некоторые изменения, но вместо того, чтобы просто открыть файл и сделать какие- то действия, было бы намного лучше сначала сформулировать идею того, что мы собираемся делать. Я собирают внести следующие изменения:

• Установить цвет #7B98B3 для таблицы borderTable
• Установить цвет #FFF1B0 для таблицы logoTable
• Установить цвет #B0D9FF для таблиц usertxtTable и contentTable
• Добавить собственный логотип (в данном случае воображаемое )рядом с логотипом Microsoft
• Добавить некоторый текст снизу логотипа

Хорошо. Теперь посмотрим на файл logon.asp. Лучше всего редактировать его в Notepad. Не пытайтесь использовать какой-либо редактор HTML — страница содержит слишком много скриптов для того, чтобы выдержать попытку редактирования в приложении WYSIWYG Web для редактирования веб-страниц. Открыв файл в Notepad, Вы сразу поймете, что он достаточно сложен. Файл содержит смесь VBScript, JavaScript и HTML. Нам интересна только HTML часть. VBScript части находятся между открывающими разделителями . Типичный пример некоторых скриптов VBScript — это первая строка, содержащая директиву ENABLESESSIONSTATE. Лучше всего VBscript не трогать, так как их можно легко попортить. То же самое относительно JavaScript частей. JavaScript содержится в разделителях .

Первое из нашего списка — это изменение цвета borderTable. Определение исходного цвета можно найти в тексте определения borderTable внутри страницы. Но нас не интересует первое же место, которое мы найдем (их всего два). Нам интересна только та часть страницы, которая находится в нижней части, которая следует после определения действия с формой owaauth.dll.

Так что сначала нам нужно найти ту часть страницы, которая содержит этот текст. Убедитесь, что курсор находится в начале файла, нажав комбинацию CTRL-HOME, а затем нажмите CTRL-F, наберите в поле поиска owaauth.dll, а затем нажмите enter. Нажмите cancel в диалог епоиска, когда текст будет найден, затем нажмите CTRL-G (Goto), чтобы отобразился номер текущей строчки. На моей машине SBS2003 — это строчка с номеров 594, но на другой не SBS машине, это строчка 560, и это может меняться в других служебных пакетах. Запишите этот номер, на который я в дальнейшем буду ссылаться как на стартовую позицию.

Теперь вернемся к изменению цвета borderTable. Сначала нажмет CTRL-G и наберите номер строки, чтобы придти на стартовую позицию, которую мы только что определили. Теперь нажмите CTRL-F, чтобы открыть диалог поиска и наберите слово borderTable, а затем нажмите enter. Выйдите из диалога поиска, когда найдете необходимую строку и просмотрите ту часть, которая начинается с bgcolor=". Измените ту величину, которая находится внутри кавычек, вставьте туда свой цвет, например #7B98B3. Теперь Вы можете нажать CTRL-S, чтобы сохранить изменения, и проверить, как теперь выглядит страница, с помощью своего браузера, или совершать дальнейшие изменения.

Далее мы меняем цвет logoTable. Вернитесь опять на стартовую позицию с помощью кнопок CTRL-G и введения необходимого номера строки, затем нажмите CTRL-F и введите слово logoTable. Выйдите из диалога поиска, когда найдете необходимую строку, найдите на это строчке атрибут bgcolor и измените его значение.

То же самое сделайте для usertxtTable и contentTable.

Теперь вставим в таблицу логотип. Я помещаю картинку в папку, где хранятся остальные .gif, так что путь к моей картинке совпадает с путями к остальным. Так как мой логотип будет идти сразу после логотипа Microsoft, то я буду использовать метод, который мы уже использовали для поиска имени файла логотипа Microsoft logon_microsoft.gif. Чтобы расположить картинку рядом с уже существующей, проще всего расположить ее внутри той же самой клетки таблицы, так что я располагаю тег прямо перед уже существующим. Мой тег картинки выглядит так:

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

Max Quad Ltd. No unauthorized access allowed.

Теперь я сохраняю файл с помощью клавиш CTRL-S и смотрю, как это выглядит в броузере. Не используйте команду Save As, так как тогда программа захочет сохранить файл с расширением .txt , а тогда Вы никаких изменений не увидите.

А вот окончательная страница входа. Может она придется не всем по вкусу, но я надеюсь, что я смог подать Вам некоторые идеи, как можно применить Вашу собственную схему цветов.

В заключение

Если Вы вносите изменения в файл logon.asp, которые Вы бы хотели сохранить, то учтите, что это файл может быть заменен при установке сервисного пакета Exchange 2003. Если Ваш файл был заменен, то я Вам советую внести изменения в новый файл, а не просто перезаписать на его место Вашу старую версию. В новом файле могут быть некоторые изменения в коде, которые выполняют новые защитные функции.