Создание логина: Генератор логинов

Способы создания авторизации на сайте. Руководство с примерами. Безопасность в браузере — Разработка на vc.ru

В данной статье мы разберем 4 способа как зарегистрировать нового пользователя: Сторонние сервисы авторизации (такие как Google), Авторизация с использованием токенов, Авторизация с помощью номера телефона, Логин + Пароль. Статья даст вам конкретный алгоритм реализации каждого способа. Необходимые библиотеки, а также примеры кода. Я постараюсь приводить в пример реализацию на чистейшем JavaScript, для того чтобы вы смогли внедрить функционал в свое проект, не зависимо от используемого фреймворка, однако также будут примеры для тандема Angular + Asp .Net Core. Мы обсудим как защитить ваш сайт от взлома. На сколько это сложно и возможно ли в принципе гарантировать 100% защиту. Итак, давайте приступим.

2550 просмотров

Регистрация. Аутентификация. Авторизация.

И прежде чем подходить к конкретным примерам, давайте разберемся какие процессы происходят в момент когда пользователь нажимает на кнопку Sign In и Sign Up.

Начнем с процесса регистрации. Перед вами форма с несколькими полями: Имя, Логин, Пароль, Кличка вашей собаки и т.д. Вы покорно заполняете все поля со звездочками, после чего жмякаете на кнопку “Зарегистрироваться”. Ваши данные отправляются на сервер при помощи HTTP, сервер создает в базе данных новую запись, и если все проходит успешно, то вы зарегистрировались в системе. То есть процесс регистрации – это просто сохранение на сервере “в определенном текстовом файле” данных, которые вы заполнили на сайте.

Это пример самого простого способа регистрации, который только можно представить. В реальности так никогда не делают, но вот общий принцип неизменен. Более подробно, как происходит процесс регистрации в современных системах, мы разберем позднее, а сейчас давайте взглянем на процесс авторизации.

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

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

Разница между аутентификацией, идентификацией и авторизацией

По большому счету – это разные этапы одного процесса (предоставление доступа пользователю).

И хоть все эти этапы и разделяют, но обычно в процессе реализации – это могут быть просто 3 разных метода (функции), вызывающихся в приложении последовательно.

Разделение также нужно для тех случаев, если вы можете опустить какой-либо из этапов (и выполнить только 2 других). К примеру, пользователь прошел все 3 этапа и получил токен доступа. Токен подтверждает тот факт, что человек прошел аутентификацию, а значит при следующем обращении можно опустить этот этап. Backend приложение должно будет только проверить id пользователя (хранящийся в токене) и по id достать права.

Далее под словом “авторизация” (для простоты) будет подразумеваться весь процесс получение доступа.

Что представляет из себя база данных.

Выше я писал про чудесный “текстовый файл”, в котором хранятся все данные пользователей. Вы безусловно можете организовать хранение данных в обычных .txt файлах, но на практике так никто не делает. Данная формулировка была использована, для того чтобы вы понимали, что ваши данные хранятся на жестком диске, таким же образом, как вы храните у себя на компьютере фотки, записи и видео.

Но используют для этих целей определенные программы “Базы данных”. База данных – это программа, которая работает в фоновом режиме, функциями которой вы можете пользоваться из других программ (написанных вами). Что это за функции? – если коротко, то это операции сохранения и получения данных, но в отличии от обычного текстового файла, база данных выполняет операции сохранения и получение намного быстрее (Особенно когда этих данных становится очень много).

Таким образом работу backend приложения можно представить, как работу 2-х независимых программ:

1. Серверное приложение – программа, которая отвечает за функционал сервера
2. База данных – программа, которая отвечает за управление данными, и которую использует серверное приложение. При этом База данных не может использовать функционал серверного приложения.
   

Почему современные приложения не используют логин + пароль для авторизации.

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

Основной момент – обеспечение безопасности. Давайте взглянем на основные методы, с помощью которых злоумышленники могут получить доступ к вашему аккаунту:

• Фишинг – хакеры могут создать копию сайта, на котором вы введете свой логин и пароль. После чего эти данные сохраняются на сервере злоумышленников, и они могут войти в ваш аккаунт используя их. Сюда же входят различные звонки от сотрудников банка, которые просят предоставить информацию.
• Перебор паролей автоматическим программами.
  
• Перехват трафика – для того чтобы залогиниться на сайте нужно отправить на сервер логин и пароль с помощью HTTP , которые могут быть перехвачены хакерами.
  
• XSS – вставка на сайт вредоносного JS кода, который будет изменять логику приложения.
  

Какой бы метод авторизации вы не использовали он не спасет от взлома, если будут использованы фишинг или перебор паролей. Просто потому что в первом случае вы “по собственной воле” говорите свой пароль, а во втором этот пароль у вас “отгадывают”. Но в любом случае хакеры узнают ваши данные для входа в том виде, в котором используете их вы. А значит для приложения теперь вы ничем не отличаетесь (Ну разве что IP с которого будет происходить вход). Здесь единственная мера защиты – это смотреть на каком сайте вы вводите пароль и использовать сложный пароль. “Усовершенствованные” методы авторизации спасают именно в тех случаях, когда злоумышленники пытаются косвенно получить ваши данные (к примеру перехватом трафика).

В чем проблема авторизации при помощи логина + пароль

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

В дополнении к этому логин и пароль придется где-то хранить (Чтобы использовать их в последующих запросах к серверу. Иначе придется постоянно просить пользователя ввести пароль при переходе на новую страницу) – следовательно есть возможность получения доступа к этим данным в случае использования XSS.

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

Использование токенов в процессе авторизации

Токен представляет из себя простую строку из символов, на примере этой:

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJPbmxpbmUgSldUIEJ1aWxkZXIiLCJpYX QiOjE2Nzc5MTcxOTYsImV4cCI6MTcwOTQ1MzE5NiwiYXVkIjoid3d3LmV4YW1wbGUuY29tIiwic3ViI joianJvY2tldEBleGFtcGxlLmNvbSIsIkdpdmVuTmFtZSI6IkpvaG5ueSIsIlN1cm5hbWUiOiJSb2Nr ZXQiLCJFbWFpbCI6Impyb2NrZXRAZXhhbXBsZS5jb20iLCJSb2xlIjpbIk1hbmFnZXIiLCJQcm9qZWN 0IEFkbWluaXN0cmF0b3IiXX0.

sBi4RpRuoIHRisficYOs3278nuu83ufS9ZUH-IkDGRs

Давайте кратко опишем этапы авторизации с помощью токена:

1. Ввод логина и пароля.
2. Шифрование (преобразование логина и пароля в закодированную строку).
   
3. Передача шифрованных данных на сервер.
   
4. Генерация сервером токена доступа, с помощью которого web-приложение будет обращаться к backend приложению для получения данных.
   
5. Отправка токена обратно в браузер.
   
6. Сохранение токена в локальном хранилище или в куки, для дальнейшего использования.

Суть здесь в том, что мы 1 раз передаем приватные данные по сети, после чего используем токен, который содержит только публичные данные.

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

Авторизация на самом сайте

В этом случае логин и пароль, вводятся на том сайте на котором вы сейчас находитесь, после чего они кодируются и отправляются на сервер, где генерируется токен и возвращается на сайт.

Авторизация на стороннем сервисе (Gmail).

Здесь пользователя перебрасывает на сторонний ресурс (открывается новая вкладка или окно браузера), где он вводит данные авторизации. Этот метод, отличается тем, что во-первых – это намного проще для пользователя. А во-вторых – не нужно вводить данные от вашего аккаунта (к примеру от аккаунта Google), на неизвестном сайте, который запрашивает регистрацию. Пользователь вводит свои данные, сторонний сервис (в нашем случае Gmail) генерирует токен доступа и отправляет его на тот сайт, с которого перешел пользователь. После чего сайт работает уже не с вашими авторизационными данными от сервиса, а с токеном.

Этапы такой авторизации описываются в стандартах – OAuth и OAuth 2.0. Обе версии описывают один и тот же алгоритм, но 2 версия – более защищенная.

Алгоритм авторизации – подробно.

1. После того как пользователь ввел свои данные, то желательно их закодировать, чтобы не передавать по сети в простом текстовом виде. Здесь можно использовать любой алгоритм шифрования, можно даже закодировать в простую Base64 строку. Дело в том, что из браузера не получится зашифровать данные так, чтобы гарантировать их 100% безопасность при передаче по сети, т.к для этого нужно использовать какой-то ключ, который знает и сервер и браузер (чтобы первый смог закодировать, а второй декодировать). Но поскольку любые данные в браузере – публичные и при желании код в браузере можно посмотреть, то и этот ключ хакеры могут потенциально перехватить. Таким образом мы хоть и кодируем данные при передаче из браузера, но при желании и должных знаниях эту информацию можно узнать. Поэтому момент передачи логина и пароля связан с определенными рисками.
2. Итак, авторизационные данные пришли на сервер. Бекенд приложение декодирует полученные данные и добавляет новую запись с вашими данными в БД (базу данных). После чего в ответ возвращается строка(токен). Особенность этой строки в том, что она закодирована при помощи уникального ключа, который известен, только бекенд приложению. Внутри этой строки закодированы какие-то данные и никто, кроме сервера (даже клиентское приложение), не может узнать что-это за данные (для этого нужен ключ).
   
3. Токен возвращается на клиент и если в дальнейшем браузер захочет запросить данные, то он вместе с http запросом должен будет отправить токен, который будет декодирован на сервере, чтобы убедиться что вы это вы. И что токен не был изменен в процессе (если его изменить, то сервер не сможет декодировать его, что будет сигнализировать о потенциальной попытке взлома).
   
4. Токен может передаваться любым способом. Вы можете поместить его в тело (Body) http запроса, передать через куки или в Header. Здесь цель просто доставить эту строку на сервер. При этом обычно токен отправляется как дополнительный заголовок хедера:

Host: net.tutsplus.com

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1

Authorization: {token}

А вот как выглядит реализация на Angular.

Для передачи токена используют хедер, потому что – это во-первых, удобнее, т.к вам не нужно модифицировать структуру каждого вашего запроса и помещать его в Body. А во-вторых, многие библиотеки, реализующие авторизацию, работают именно с хедером запроса.

JWT(JSON Web Token)

Как мы выяснили любой токен представляет из себя строку. И каждое приложение, которое реализует процесс авторизации, может на свое усмотрение использовать любую структуру токена. Но для браузерной авторизации чаще всего используют JWT токен. Это просто некоторый общепринятый стандарт.

Что представляет из себя этот стандарт ? Как можно догадаться из названия, этот стандарт основан на JSON и позволяет передавать вместе с токеном любой JSON объект (а поскольку мы можем любые данные представить в качестве объекта, который в последствии будет превращен в JSON, то внутри JWT можно передавать всё что угодно). JWT состоит из 3-х частей:

1) Header

2) Payload

3) Уникальный ключ, для шифрования

Получается у нас есть объект, состоящий из 3-х полей. В хедере мы указываем, что за тип токена мы используем и как будут кодироваться данные. В секции payload – данные, которые мы хотим передавать с сервера на клиент и обратно. А уникальный ключ – это пароль, с помощью которого мы кодируем 2 предыдущих части и превращаем их в строку.

Ключ, всегда хранится только на сервере. И клиентское приложение не имеет к нему доступа. Таким образом гарантируется, что изменить токен может только приложение у которого есть этот ключ (то есть только сервер). Здесь важно, что именно ИЗМЕНИТЬ, т.к декодировать токен и получить из него header и payload может любой, кто получил этот токен. Эти данные публичные.

Алгоритм генерации JWT токена на Java Script

Сначала мы превращаем header и payload в base64. Далее используем алгоритм шифрования из библиотеки CryptoJs, для того чтобы закодировать две полученные base64 строки и получить сигнатуру(которая тоже является строкой). После чего просто объединяем 3 полученные строки в одну, разделяя точками.

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

Access и Refresh токены

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

Для решения этой проблемы существуют Access и Refresh токены. Здесь мы не начинаем использовать какой-то новый способ авторизации. Используется все тот же JWT, но теперь единственный токен, который у нас был мы называем Access Token, при этом в дополнении к нему появляется второй Refresh токен, который также представляет из себя строку, имеет одинаковую структуру с Access Token, поэтому может хранить внутри какие-то данные (хоть и не обязательно и обычно это не требуется).

Важно то, что у Access и Refresh токенов появляются обязательные поля внутри их payload (iat, exp). Об их существовании я уже упоминал, но когда у нас есть только 1 токен, то эти поля по большому счету не используются и содержат дополнительную информацию.

Iat (issued at time) – время, когда токен сгенерирован.

Exp (expiration time) – время, до которого токен будет считаться валидным.

Алгоритм авторизации с использованием Refresh и Access токенов.

1. Пользователь вводит логин и пароль. Они отправляются на сервер (Аналогично с использованием одного токена).
2. Сервер создает/находит пользователя в Базе данных, после чего генерирует 2 токена (генерация происходит по уже известному алгоритму), но в этот раз добавляются iat и exp поля. При этом для Access Token, exp – устанавливается на короткий срок (15 -20 минут), а вот для Refresh Token, значение exp задается большим (несколько дней или недель).
   
3. Далее сервер возвращает 2 токена в браузер, где они сохраняются в локальном хранилище.
   
4. Теперь, если клиентское приложение хочет получить доступ к данным, то прежде чем отправлять запрос с Access Token в заголовке, нужно проверить не истек ли его срок жизни и если, нет, то отправлять запрос, если же токен expired, то прежде чем отправлять запрос нужно обновить токен (а иначе сервер получит не валидный токен и вернет ошибку).
   
5. Для того чтобы обновить AccessToken, клиент отправляет специальный запрос, в котором отправляет Refresh Token. Сервер, получает этот Refresh Token и на его основе генерирует новую пару Access + Refresh токенов, которые возвращаются на клиент и опять сохраняются. Однако в случае, если при создании новой пары токенов, оказывается, что и RefreshToken уже устарел, то возвращается ошибка и пользователя просят еще раз ввести свой логин и пароль.
   

Почему нельзя обойтись одним Access токеном

Как мы ранее выяснили 1 токен защищает от ситуаций, когда хакеры меняют данные внутри токена (payload), но не защищают от того, что с похищенным токеном злоумышленник может получить доступ к аккаунту пользователя. Refresh Token частично решает эту проблему.

Давайте разберемся что у нас произойдет, если ваши токены похищены. Хакер получил доступ к вашему аккаунту и может делать все что угодно, до тех пор пока вы не зайдете в систему. Потому что в этот момент истечет срок действия вашего Access токена и вам придется обновить пару токенов на новую, следовательно похищенные токены станут не валидными. Или представим др. ситуацию. Хакер провел долгое время на вашей странице, а значит требуется обновить Access Token с его стороны (что он успешно сделает), ведь он завладел обеими (в том числе и Refresh). Следовательно, теперь уже когда вы попытаетесь зайти в свой аккаунт сервер вернет ошибку, т.к уже ваш Refresh Token не валидный, после чего вы введете свои данные и не валидной станет пара токенов, похищенная злоумышленником.

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

Где хранить токены

Есть 2 популярных варианта Local Storage и куки (либо внутри сессионного хранилища). И хранить пару Access и Refresh токенов лучше в куки. Это обосновано тем, что если на сайт встроят вредоносный код, то через JS хакеры могут получить доступ к Local Storage, но вот куки не хранятся в локальном хранилище браузера, они передаются с запросом. Соответственно, для того чтобы получить к ним доступ, нужно сделать как минимум один запрос авторизации. (с неизвестными логином и паролем).

Хотя существуют методики и для хищения данных из куки. Здесь нужно запомнить один момент. У вас не получится на 100% защититься от всех атак в браузере, но чем больше уровней защиты вы установите, тем меньше вероятность взлома.

Авторизация через внешние сервисы

Общий алгоритм добавления авторизации через сторонние сервисы следующий:

1. Вам нужно сделать редирект со своего сайта на сайт сервиса.
2. Дождаться пока пользователь введет там свои данные и сервис сгенерирует токен авторизации.
   
3. Дождаться HTTP respons-а от стороннего сервиса и получить токен доступа (внутри которого хранятся данные о пользователе).
   
4. Отправить полученный токен уже на собственный сервер и сгенерировать пару Access + Refresh токен на основе данных пользователя. После чего сохранить их в браузере.
   
5. А далее идет обычный flow с JWT авторизацией, описанный выше.
   

А теперь на примере Gmail авторизации давайте взглянем на детали:

В Gmail, ровно как и в других похожих сервисах первое что вам нужно будет сделать – это создать “Приложение” для вашего сайта на специальном сервисе для разработчиков. У каждого сервиса авторизации он свой. Для Google – это Developer Console. Как зарегистрировать профиль, создать приложение и получить ключ можно прочитать здесь.

Как вы могли догадаться целью создания профиля является получение этого самого ключа. У гугл он называется Client Id. Client Id будет использоваться в нашем frontend приложении. Вот как это может выглядеть на TypeScript:

HTML

<button>Sign In with Google</button>

Type Script

DIALOG_PARAMS – настройки окна, где пользователь будет вводить авторизационные данные.

googleAuthListener – слушает сообщения от GMail и в случае успешной авторизации возвращает ответ с кодом авторизации (это не тоже самое что токен, но с его помощью можно получить токен).

dialogUrl – URL на который переходит пользователь для ввода логина и пароля.

Получилось довольно громоздко, но есть укороченная версия. Вот к примеру реализация, если вы используете фреймворк Angular.

Авторизация по номеру телефона

Авторизация по номеру телефона почти идентична обычной с использованием логина и пароля с той лишь разницей, что теперь вместо email мы используем номер, а вместо пароля, одноразовый проверочный код. На этом моменте не нужно долго останавливаться.

Однако интерес может вызвать механизм отправки смс вашим приложением. Также не нужно забывать, что при реализации обычной авторизации по Email считается хорошей практикой отправлять код или ссылку с подтверждением на вашу почту. Давайте разберем как это делать.

Сервисы для отправки Email и СМС сообщений.

Начнем с отправки email. Чтобы отправить сообщение на почту вам необходим SMTP сервер (и без него обойтись не получится). Здесь есть 2 варианта:

Вариант 1 – сложный. Вы создаете отдельный свой сервер и настраиваете его, чтобы он понимал SMTP протокол. В большинстве случаев это слишком сложно и излишне.

Вариант 2 – рациональный. Вы используете сторонние сервисы, которые берут на себя работу по обслуживанию SMTP сервера, а вам предоставляют, либо готовый API для отправки сообщений, либо сам адрес SMTP сервера, который вы можете использовать.

Как вы могли догадаться, в обоих случаях удовольствие это не бесплатное. Или почти не бесплатное. В случае с SMTP сервисами, многие провайдеры предоставляют триал или бесплатное использование на время разработки (то есть у вас все будет работать, но только на маленьких нагрузках). Одним из таких сервисов является SMTP.bz.

Для того чтобы отправить email с помощью этого сервиса, нужно зарегистрироваться и привязать домен вашего сайта (на сервисе есть инструкция), после чего вам выдаются логин, пароль, адрес и порт от сервера, которые нужны для подключения к SMTP. Приведу небольшой кусок кода (на C#), как отправить Email используя SMTP сервер.

Теперь разберемся с сервисами для отправки СМС сообщений. В этом случае у нас также есть готовые API для отправки смс. Например — smsc.ru. Использование довольно простое – отправка http запроса с номером телефона и сообщением.

Однако в данном случае я не нашел сервисов, у которых есть бесплатные периоды (Напишите в комментариях если вы знаете такие) Возможно это связано с тем, что в цепочке отправки смс также участвует сотовый оператор, который взымает плату за отправку с “смс сервисов”. Потому они не могут предоставить бесплатный триал доступ, как в случае с SMTP.

А нужна ли вам вообще авторизация на сайте ?

Любая авторизация – это очень очень сложно для пользователя. Поэтому по возможности не надо донимать регистрацией. Если у вас лендинг, блог или информационный сайт, который не подразумевает личного кабинета и уровней доступа, то вообще не делайте авторизацию. Потому что а зачем она вам ?

Заканчиваем

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

Создание логина в системе My Benefits (Мои льготы)

Ver en español | 查看中文 | 한국어로 보기 | Xem bằng tiếng việt

Создайте новые данные для входа в систему My Benefits (Мои льготы) и получите доступ к льготам по обучению, здравоохранению и надежному пенсионному обеспечению.

В системе My Benefits (Мои льготы) все помощники с требованиями к обучению смогут воспользоваться новой платформой онлайн-обучения — Caregiver Learning Center (Центр обучения помощников). Возможности Caregiver Learning Center (Центр обучения помощников):

• Удобный поиск и регистрация на курсы.
• Просмотр всех курсов в едином разделе.
• Быстрый просмотр требований к обучению и потребностей в нем.
• Загрузка сертификатов и стенограмм аудиозаписей.

Создание логина и работа с Caregiver Learning Center (Центр обучения помощников)

Ниже приведен список и видеозапись простых шагов по созданию логина в системе My Benefits (Мои льготы) и работы с Caregiver Learning Center (Центр обучения помощников). Нажмите значок «+» для получения подробной информации о каждом шаге.

Чтобы смотреть видео с субтитрами, нажмите CC (Субтитры).

Как создать логин в системе

My Benefits (Мои льготы)

1. Зайдите на myseiubenefits.org и нажмите кнопку Create Login (Создать логин).
   • Возможно, вы получили письмо по электронной почте со ссылкой для создания логина, которая приведет вас на эту же страницу. Если вы переходите на экран Create Login (Создать логин) по этой ссылке, возможно, некоторая информация уже будет введена. 
   • Если ее нет, введите свое имя, фамилию и последние четыре цифры номера социального страхования. 
2. Дважды введите свой адрес электронной почты и пароль. Адрес электронной почты можно ввести любой — главное, чтобы он был доступен только вам. 
   • Если раньше у вас была учетная запись My Benefits (Мои льготы), можно указать тот же адрес электронной почты.   
3. Прокрутите вниз, чтобы выбрать предпочтительный язык, которым вы пользуетесь чаще всего и который наиболее удобен для вас. Вы можете выбрать только один предпочтительный язык. Можно прокрутить вниз или ввести язык в поле поиска. Чтобы выбрать язык, нажмите на него. 
4. В разделе Fluent languages (Свободно владею) добавьте все языки, на которых свободно говорите. Здесь можно выбрать несколько языков. Например, если вы предпочитаете испанский язык, но свободно владеете испанским и английским, выберите испанский в качестве предпочтительного языка и укажите английский язык в разделе Fluent language(s) (Свободно владею).
5. Далее добавьте свои контактные данные и выберите предпочтительный способ связи. Здесь вы можете указать номер своего мобильного или домашнего телефона. Важно добавить действующий номер, чтобы с вами можно было связаться в случае изменения или обновления льгот.
6. Затем выберите предпочтительный способ связи с вами. Это может быть Text (SMS), Phone (Телефон) либо Email (Электронная почта).
7. При первичном входе в систему вы должны будете дать Consent for Release (Согласие на публикацию), чтобы SEIU 775 Benefits Group могла сообщить информацию вашему работодателю. 
8. Далее вам нужно будет принять Academic Code of Conduct (Академический кодекс поведения). Если вы выберете ответ Disagree (Не принимаю), то не сможете проходить необходимое обучение, получать доступ к информации или проходить сертификацию.

После выполнения этих действий на ваш электронный адрес будет отправлено письмо со ссылкой для активации. Обязательно нажмите ссылку в письме электронной почты. После этого вы перейдете на страницу входа в систему, где нужно будет ввести только что созданные логин и пароль. Теперь у вас есть доступ к системе My Benefits (Мои льготы)!

В следующий раз просто перейдите на myseiubenefits.org и нажмите кнопку Log In (Войти), чтобы перейти на страницу входа в систему.

Запись на Basic Training (базовое обучение), вебинары, курсы по повторению навыков и передачу медсестрой полномочий в Caregiver Learning Center (Центр обучения помощников)

В системе My Benefits (Мои льготы) есть два способа записаться на курс. На такие учебные программы, как Basic Training (базовое обучение), вебинары, курсы по повторению навыков и передача медсестрой полномочий, можно записаться, щелкнув ссылку, которую вы получите по электронной почте. 

Запись по ссылке:

1. Щелкните ссылку в полученном вами письме электронной почты. 
2. После нажатия на эту ссылку вам нужно будет войти в систему My Benefits (Мои льготы).
3. После входа в систему вы сможете ознакомиться с полным расписанием занятий. Прокрутите вниз и нажмите кнопку Confirm Enrollment (Подтвердить запись). 

Поздравляем! Вы записаны на курс! На экране подтверждения вы можете нажать кнопку Go to my course (Перейти к курсу), чтобы просмотреть всю информацию о курсе, включая расписание и место проведения занятий.

Обратите внимание: если занятие в серии не подходит для вашего расписания, после регистрации в системе My Benefits (Мои льготы) вы можете отредактировать отдельные занятия.

Запись на курс по переподготовке в Caregiver Learning Center (Центр обучения помощников)

1. Чтобы записаться на курс по переподготовке (CE), сначала войдите в систему My Benefits (Мои льготы). 
2. После входа в систему вы перейдете на информационную панель My Benefits (Мои льготы). Щелкните Caregiver Learning Center (Центр обучения помощников). 
3. В Caregiver Learning Center (Центр обучения помощников) вы увидите все текущие курсы, на которые доступна запись, каталог курсов и требования к вашему обучению. 
4. Чтобы записаться на курс, щелкните Course Catalog (Каталог курсов)*, а затем View all (Просмотреть все), чтобы увидеть все доступные курсы. Будут показаны только доступные вам курсы.
   • Здесь вы можете применить фильтр к онлайн-курсам, вебинарам, очным курсам и языкам проведения. Если вас заинтересовал какой-то курс, вы можете нажать на него, чтобы увидеть описание курса, количество зачетных единиц CE за его прохождение, формат курса и доступные языки.  
5. Для записи на курс нажмите Enroll (Записаться).
6. После этого вы попадете на экран обзора. Здесь нажмите Confirm enrollment (Подтвердить запись), чтобы записаться на курс. 

Поздравляем! Вы записаны на курс! На экране подтверждения вы можете нажать кнопку Go to my course (Перейти к курсу), чтобы просмотреть все курсы, на которые вы записаны, а также всю информацию о курсе, включая дату, время и место проведения.  

* Обратите внимание: если в профиле My Benefits (Мои льготы) вашим предпочтительным языком выбран English (Английский), вы увидите все курсы на английском языке. Если у вас другой предпочтительный язык и желаемый курс доступен на этом языке, вы сможете сами выбрать, на каком языке будете проходить этот курс: на предпочтительном или на английском. Выберите желаемый язык. 

Как посмотреть свое расписание занятий или отменить запись на курс

В Caregiver Learning Center (Центр обучения помощников) вы можете просмотреть всю информацию о вашем занятии, включая полное расписание обучения.

1. Войдите в систему My Benefits (Мои льготы). После входа в систему вы перейдете на информационную панель My Benefits (Мои льготы). 
2. Щелкните Caregiver Learning Center (Центр обучения помощников). 
3. В разделе My Courses (Мои курсы) вы увидите все курсы, на которые вы в настоящее время записаны. Щелкните View all (Просмотреть все), сам курс или My Courses (Мои курсы) в правом верхнем углу.
4. Чтобы увидеть полное расписание, включая дату, время и место проведения, щелкните Schedule (Расписание) в правом верхнем углу экрана. Его можно загрузить, нажав кнопку Download (Загрузить) в правом верхнем углу.
5. Чтобы посмотреть время, дату и место проведения отдельных занятий, в разделе My Courses (Мои курсы) нажмите Edit (Редактировать). 

Как отменить запись на курс

1. Отмените запись на курс, нажав Edit (Редактировать) для нужного курса. 
2. В нижней части экрана информации о курсе вы увидите кнопку Unenroll (Отменить запись). Для отмены записи нажмите ее. 
3. После этого появится экран подтверждения отмены записи на курс. 
   • Обратите внимание, что если вы хотите перенести очное занятие или записаться на новое, вам нужно будет обратиться в Member Resource Center (Учебно-методический центр для участников, MRC). 

 

Как просмотреть информацию о пройденных занятиях, стенограммы и сертификаты

Информация о пройденных вами занятиях, стенограммы и сертификаты находятся в Caregiver Learning Center (Центр обучения помощников). Для доступа к нему войдите в систему My Benefits (Мои льготы) и щелкните Caregiver Learning Center (Центр обучения помощников) на информационной панели My Benefits (Мои льготы).

Как просмотреть пройденные занятия:

1. В Caregiver Learning Center (Центр обучения помощников) найдите My Courses (Мои курсы).  
2. Щелкните View all (Просмотреть все) или My Courses (Мои курсы) в правом верхнем углу, чтобы просмотреть все курсы, которые вы прошли или на которые записаны сейчас.
3. В разделе My Courses (Мои курсы) щелкните вкладку Completed (Пройденные). На странице пройденного курса в левой части экрана вы можете отфильтровать свои курсы по годам. 

Как получить сертификат:

1. Чтобы получить сертификат, нажмите на пройденный курс. Сертификат появится на экране. 
2. Чтобы загрузить сертификат, нажмите в правом верхнем углу кнопку Download Certificate (Загрузить сертификат). 
3. Сохраните свой сертификат на телефоне, планшете или компьютере. 

Как просмотреть стенограммы: 

1. Чтобы просмотреть свои стенограммы, вернитесь на страницу Completed Courses (Завершенные курсы). 
2. В правом верхнем углу экрана вы увидите кнопку Transcript (Стенограмма). Нажмите эту кнопку, чтобы перейти к вашей стенограмме. 
3. Чтобы загрузить стенограмму, нажмите кнопку Download (Загрузить) в правом верхнем углу экрана.  
4. Сохраните стенограмму на вашем устройстве.

Как посещать курсы

 

Чтобы перейти на страницу ваших курсов в Caregiver Learning Center (Центр обучения помощников), сначала войдите в систему My Benefits (Мои льготы). После входа в систему вы перейдете на информационную панель My Benefits (Мои льготы). Здесь щелкните Caregiver Learning Center (Центр обучения помощников). 

1. В разделе My Courses (Мои курсы) вы увидите все курсы, которые вы прошли или на которые записаны сейчас. Щелкните View all (Просмотреть все), сам курс или My Courses (Мои курсы) в правом верхнем углу. 
2. Здесь отображаются 3 типа курсов: онлайн-курсы, очные курсы и вебинары. Тип курса указан справа от его названия. 
3. Теперь нажмите курс, который вы хотите посетить. 
4. Если курс доступен онлайн, вы будете перенаправлены на страницу ваших онлайн-курсов.
5. Для очных курсов вы увидите дату, время и место проведения курса, нажав кнопку Edit (Редактировать) для выбранного курса или кнопку Schedule (Расписание) в правом верхнем углу.  
6. Для онлайн-вебинаров в разделе информации о курсе есть ссылка Zoom.
   • В запланированную дату и время вашего вебинара перейдите на вкладку My Courses (Мои курсы), найдите вебинар и нажмите кнопку Edit (Редактировать). Щелкните отображаемую здесь ссылку Zoom, чтобы перейти к онлайн-вебинару.   
   • До начала занятия загрузите Zoom. См. подробнее о том, как загрузить и использовать Zoom. 

Вопросы?

Помощники, у которых заканчивается срок прохождения обучения, получат уведомления по электронной почте с инструкциями по прохождению обучения. Вам не нужно звонить в Member Resource Center (Учебно-методический центр для участников, MRC).

По другим вопросам обращайтесь в Member Resource Center (Учебно-методический центр для участников, MRC) по телефону 1-866-371-3200 с понедельника по пятницу с 8:00 до 16:30 часов (по Тихоокеанскому времени) или по электронной почте [email protected]. В связи с большой загрузкой на телефонной линии настоятельно рекомендуем обращаться в MRC по электронной почте.

Как создать страницу входа в HTML?

Обзор

Мы разработаем страницу входа с использованием HTML и CSS. Страница входа в HTML собирает информацию от пользователя и имеет кнопку отправки для отправки сведений об операциях на стороне сервера. Однако наша цель здесь — разработать страницу входа, а не заниматься внутренними задачами.

Предварительные требования

Чтобы начать со страницы входа в систему в HTML, нам необходимо знать следующее:

• HTML-формы
• КСС
• Flexbox и его свойства

Что мы создаем?

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

Сначала мы рассмотрим HTML-код страницы входа, а затем переключимся на CSS, чтобы он выглядел лучше.

Создание структуры страницы входа с помощью HTML

По сути, мы собираемся использовать тег

в HTML. Формы легко доступны в HTML для сбора информации от пользователя.

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

Давайте начнем с написания базовой структуры HTML.

Выход

Как уже упоминалось, мы разрабатываем страницу входа без каких-либо операций на стороне сервера, поэтому атрибут действия будет оставлен пустым. За ним будет контейнер, который собирает и позволяет пользователю отправить свое имя пользователя и пароль. Контейнер формы будет оформлен позже, но исходная структура должна быть предоставлена ​​в первую очередь.

Будет два элемента

; один содержит заголовки форм, а другой — для сбора информации от пользователя.

Выход

Хотя контейнеры div не видны, вы вскоре заметите изменения, как только мы добавим поля ввода в форму.

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

Тип ввода имени пользователя — текст, и мы поместим <требуется ввод>, поскольку пользователь должен ввести свое имя пользователя и пароль.

Выход

Теперь давайте добавим кнопку отправки и ссылку для регистрации (если пользователь не является участником). Ссылка для регистрации будет установлена ​​как Зарегистрируйтесь здесь!, потому что в настоящее время у нас нет страницы регистрации.

Выход

Поскольку мы использовали обязательный атрибут, он гарантирует, что ввод должен быть предоставлен в поля ввода, когда мы Кнопка входа .

Внутри основного контейнера будет еще один подконтейнер для сохранения флажка и ссылки для забытого пароля на том же уровне. Для того же необходимо базовое использование flexbox.

Выход Это наша окончательная структура.

Тем не менее, это пока не очень хорошо. Поскольку мы закончили с кодом HTML для страницы входа, теперь мы рассмотрим часть стиля в следующем разделе.

Стилизация страницы входа с помощью CSS

Мы создадим отдельную таблицу стилей для страницы входа. Итак, нам нужно связать эту новую таблицу стилей со страницей входа в систему HTML. Ссылку можно добавить внутри тега.

Вот скриншот для справки.

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

Выход

Мы также хотим, чтобы форма содержала только 35 относительных единиц своего корневого элемента. Кроме того, он должен располагаться по центру горизонтально, что можно сделать с помощью margin: auto;.

Поскольку мы использовали два тега (для имени пользователя и пароля), мы можем стилизовать их следующим образом:

box-sizing установлен как border-box, потому что нам нужно ограничить ширину ввода внутри общей ширины контейнера формы.

Теперь давайте стилизуем кнопку в соответствии со страницей. Вы можете выбрать свой собственный цвет фона и цвет текста. Кроме того, при наведении на кнопку непрозрачность (прозрачность) кнопки будет установлена ​​на 0,6, а курсор мыши будет отображаться как указатель .

Пока что это наш код CSS (вместе со стилем кнопки).

Выход

Придадим форме хороший полупрозрачный вид.

Выход

Не должны ли элементы внутри формы иметь небольшое расстояние между ними и крайними концами формы? Нам нужно будет обеспечить заполнение для этого.

Выход

Для подконтейнера нам нужен display: flex; и элементы внутри него нужно выровнять в ряд (flex-direction: row;). Чтобы центрировать их по вертикали, align-items: center; будут использоваться, и они должны быть размещены на обоих концах формы, поэтому justify-content: space-between; будет использован.

Выход

Вы можете использовать следующий код для стилей ссылок.

Выход

Чтобы сделать страницу отзывчивой, нам нужно использовать медиа-запросы, которые делают страницу адаптивной в соответствии с разрешением экрана. Это делает страницу полезной не только для настольного компьютера, но и для мобильного телефона. Мы просто хотим, чтобы форма уменьшалась по горизонтали с уменьшением ширины экрана.

Итак, мы находимся на заключительном этапе нашего кода для страницы входа. Кроме того, давайте просто добавим немного больше заполнения для основного контейнера.

Выход

Более того, страница стала еще и адаптивной.

Заключение

• В этой статье мы создали простую форму входа в систему в HTML.
• Кроме того, мы можем обрабатывать события, интегрируя код JavaScript вместе с HTML и CSS.
• Мы использовали такие концепции, как flexbox и медиа-запросы в CSS, чтобы страница адаптировалась к различным разрешениям экрана.
• Тег в основном использовался для создания страницы входа в систему в HTML с кодом CSS.

Создать профиль и подать заявку — Карьера

Перейти к содержимому страницы Нажмите для поиска

Поиск

Кто мы

Чем мы занимаемся

Отдел новостей

Ресурсы

Карьера

Открыть/закрыть меню навигации

Назад
до вершины

Как подать заявку

Вот что вам нужно знать и как начать.

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

Создать профиль | Совершенствуйте свое приложение | Использование приложения eCareers

Создайте профиль

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

Сначала вы создадите имя пользователя и пароль, а затем заполните профиль своей информацией. Начните здесь:

Создайте мой профиль

Войдите в учетную запись

Если вы забыли свое имя пользователя или пароль, вы можете восстановить их, выбрав ссылку «Забыли имя пользователя» или «Забыли пароль», которые появляются в правом нижнем углу страницы входа и следуя инструкциям. Вы также можете перейти по этим ссылкам:

Вход в профиль Забыл имя пользователя Забыл пароль

Полезные советы по управлению своим профилем

• Вы можете создать только один профиль.
• Профиль будет содержать большую часть информации для вашего приложения и может быть повторно использован для разных должностей, на которые вы претендуете.
• Вы можете редактировать определенные разделы своего карьерного профиля или приложения, перейдя в этот конкретный раздел или страницу, чтобы внести изменения. Вы не можете редактировать «Обзор данных» на экране «Просмотр/выпуск».

Создав свой профиль кандидата, вы теперь можете войти в свою учетную запись в любое время, чтобы заполнить заявки.

Улучшите свое заявление

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

• Убедитесь, что вы заполнили все пункты, которые являются обязательными и отмечены звездочкой (*).
• Предлагаем вам загрузить свое резюме, если оно у вас есть.

После подачи заявки вы получите электронное письмо с подтверждением получения, поэтому мы советуем вам внимательно следить за своей электронной почтой для получения всех сообщений. Если вы его не видите, возможно, оно попало в папку «Спам». Вы всегда можете проверить статус своей заявки, щелкнув ссылку «Мои заявки» в разделе «Вакансии» в профиле кандидата.

• В сводке достижений должен быть указан список требований к работе. При заполнении этого раздела мы рекомендуем вам написать о том, насколько ваш набор навыков, образование и подготовка соответствуют объявлению о вакансии, в дополнительном документе, который нужно загрузить вместе с вашим заявлением. Это гарантирует, что вы сможете полностью объяснить свой опыт комитету по рассмотрению в большей степени, чем в самой форме.
• При наличии списка требований кандидаты должны соответствовать всем требованиям, чтобы их рассматривали на эту должность.
• Если конкретный список требований не предоставлен, кандидаты могут пропустить заполнение Сводки достижений. Тем не менее, заявителям по-прежнему рекомендуется предоставлять рекомендации в рамках Сводки о достижениях.
• Текстовое поле «Сводка достижений» не может содержать более 6000 символов. Однако есть и другие разделы приложения или профиля, куда вы можете вставить такого рода информацию.
  • Раздел «Опыт работы» в профиле кандидата содержит 2000 символов для представления вашей квалификации.
  • Раздел «Навыки/ассоциации» может содержать 2000 символов для описания вашего опыта.

Напишите, насколько ваши навыки, опыт работы и образование соответствуют каждому требованию.

• Важно продемонстрировать свои способности на примерах и количественно оценить свою работу и достижения. Например, «Я управлял учетной записью в социальной сети с XX подписчиками и увеличил вовлеченность на XX%».
• Использование формата STAR – ситуация, задача, действие и результат – это подход, который может помочь четко определить ваши достижения.

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

Использование приложения eCareers

Мы надеемся максимально упростить заполнение заявления на нашем сайте eCareers. Если вы обнаружите, что вам нужна помощь, обратитесь к приведенным ниже советам по применению, которые были собраны из часто задаваемых вопросов.

Ваша заявка перейдет из статуса «черновик» только после того, как будут отмечены все необходимые флажки. Вы можете перейти на вкладку «Отправить заявку» и подтвердить, что вся необходимая информация заполнена и она отправлена.

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

Вы можете сохранять объявления о вакансиях в Избранное, чтобы позже быстро найти их на вкладке Избранное. Однако сохранение не продлевает крайний срок подачи заявок, поэтому не забудьте подать заявку до даты и времени закрытия.

Вы можете узнать статус своего заявления, выбрав вкладку «Вакансии» и найдя ссылку «Приложения».

При копировании и вставке текста из другого источника, несовместимого с нашим приложением, в скопированном тексте теперь могут быть заменены все апострофы на знаки #.