Рано чи пізно у розробника мобільних програм виникає бажання якимось чином виділити кожного користувача - створити йому особистий профіль, дати можливість перенести додаток на новий телефонбез втрати контенту або просто надіслати персоніфіковану рекламу.

Intro

Основа будь-якої персоналізації – це власний обліковий запис для кожного користувача. Але така вже влаштована людина, що мало хто захоче витрачати час на нудну реєстрацію, - у користувачів вже є Instagram, Twitter і Facebook, для нових акаунтів у голові місця може і не вистачити. Тут навіть нема чого далеко ходити за прикладом - зазирни у своє серце:). Уяви, що ти користувач, - на одного тебе Google Playприпадають десятки корисних додатків, Але реєструватися в кожному з них у тебе, напевно, немає жодного бажання.

Так з'явилася технологія OAuth – механізм авторизації користувача на сторонніх ресурсах за допомогою довіреної третьої сторони. Цей сервіс став надзвичайно популярним: Instagram, Facebook та багато інших великих проектів тепер дозволяють своїм користувачам швидко пройти авторизацію на сторонньому ресурсі. Приєднуйся і ти: навіть у невеликому проекті сьогодні має сенс реалізувати OAuth – користувачі вже звикли до цього механізму.

Хороший програміст, на відміну від джуніора, хоча б загалом розуміє, що саме він робить, тому перш ніж реалізовувати API, розберемо, як взагалі це все працює.

Зауважу, що OAuth прийшов у мобільні пристроїз Web'а, тому, навіть якщо ти далекий від Java і Android, інформація про те, як влаштований такий механізм авторизації, все одно може стати в нагоді.

Пристрій OAuth

З появою технології OAuth алгоритм реєстрації нового ресурсу для користувача різко змінився. Тепер не треба заучувати чергові облікові дані, а можна кількома натисканнями увійти на сайт за допомогою своєї облікового записуоднією із соціальних мереж.

Уявімо невелику програму під назвою App, де користувач дуже хоче завести собі акаунт. У нього немає бажання вигадувати нові логін та пароль, але є сторінка в якійсь соціальній мережі, тому він вирішує зайти в App за допомогою свого облікового запису, натиснувши на знайому іконку. Так запускається процес авторизації, в якому бере участь напрочуд багато сторін, хоча зовні все відбувається ніби всередині програми. Весь процес можна розбити на шість етапів.

Ось так і працює. Схема досить спрощена, і хочу звернути твою увагу на важливу особливість OAuth: ця технологія не виконує аутентифікаціюкористувача. OAuth не відповідає за валідність пари «логін - пароль» і тим більше за те, що ці дані вводить саме користувач! Весь процес передбачає тільки авторизацію- тобто програмі надаються права вчиняти дії з даними користувача, що зберігаються на сторонньому сервері.

При цьому автентифікація тут теж є і відбувається на етапах 1-3, але незримо протікає для нас за допомогою вбудованого в OAuth протоколу OpenID. У цьому протоколі реалізовано трохи криптографічної магії, опис якої вимагатиме кількох таких статей, тому її ми сьогодні зачіпати не будемо.

Реалізація

Теоретична частина закінчена, запускаємо Android Studio. OAuth зараз дуже популярна, на сайті проекту вказано понад десять великих проектів, що підтримують цю технологію. Як ти вже міг здогадатися, загальний принципроботи в кожному випадку однаковий, розрізняються лише назви класів та адреси центрів, що засвідчують.

Продовження доступне лише учасникам

Варіант 1. Приєднайтесь до спільноти «сайт», щоб читати всі матеріали на сайті

Членство у спільноті протягом зазначеного терміну відкриє тобі доступ до ВСІХ матеріалів «Хакера», збільшить особисту накопичувальну знижку та дозволить накопичувати професійний рейтинг Xakep Score!

Пропонуємо вам невеликий огляд, який, сподіваємося, буде цікавий дизайнерам, розробникам і насамперед  - продукт-менеджерам. Ми розповімо про те, коли краще показувати форму авторизації, як її показувати, як скоротити час заповнення, про що не можна забути при вході через соцмережі і як простіше зробити авторизацію через телефон.

Як у сексі: чим пізніше - тем краще

Чи змушуєте користувача проходити авторизацію або реєструватися у вашому додатку відразу після того, як він його завантажив і відкрив уперше? Отже, збільшуєте шанси програми негайно опинитися у кошику. Це підтверджується статистикою, тому наша перша порада: ставте авторизацію до моменту, коли вона справді необхідна. Це може бути надсилання замовлення або створення коментаря. .

Основні способи входу в програму, які сьогодні широко використовуються, це логін + пароль, соцмережі, телефон + код із SMS. Розберемо докладніше перший із названих способів.

Логін + пароль

Якщо користувачеві доводиться вводити особисті дані, наше завдання - запитати для нього цей процес.

Підказки до полів введення

У простих формах, наприклад, якщо ми використовуємо звичний введення логіну та паролю, ми можемо розташувати назви полів у placeholders, це досить очевидно для користувача. У складнішій формі, де є обмеження на введення даних, ми повинні використовувати labels і placeholder, наприклад, пояснення до довжини пароля. Labels і placeholders краще розміщувати над полем введення, так що для користувача в будь-який момент очевидно, що він заповнює, і як це слід робити.

У мобільних додатках не найкраща практика - розташовувати label в одному рядку з полем введення. Це з'їдає корисний горизонтальний простір. Наприклад, форма реєстрації Lamoda iPhone.

Дві якісні статті на тему: Placeholders in Form Fields Are Harmful, Mobile Form Usability: Never Use Inline Labels.

Автодоповнення

Автодоповнення популярних доменів. iOS бібліотека від HotelTonight прискорює введення електронної пошти на основі бази популярних поштових доменів. В Android можна зробити те саме вручну. Все це приємно прискорює введення електронної пошти.

Автодоповнення популярних поштових доменів

Автодоповнення e-mail за обліковими записами Google. Android-програма може отримати список Google-акаунтів пристрою та пропонувати користувачеві автодоповнення. Так роблять, наприклад, Evernote та Instagram. Можна діяти інакше: автоматично заповнювати поле введення одним з електронних адрес. Так як у більшості користувачів один обліковий запис Google, велика ймовірність, що ми вгадаємо. Так роблять Facebook та Twitter. iOS не дає доступу до e-mail користувача, тому зробити такий автокомпліт не можна.

Автоподіл пошти по облікових записах Google в Evernote

Автодоповнення імені. На стороні сервера або в програмі можна зберегти базу популярних імен та пропонувати користувачеві автодоповнення. В Android, знову ж таки, може допомогти Google+. Але це все ж таки неоднозначний спосіб - адже введення імені займає пару секунд, а будь-який автокомпліт в якійсь мірі відволікає користувача.

Автодополення раніше використаного логіну при авторизації. Якщо у програмі немає перемикання між обліковими записами, як в офіційному Twitter або Gmail, корисно при вході автодоповнювати раніше використані e-mail/логіни. Наприклад, Instagram показує останній використаний логін. Щоправда, такий спосіб не підходить для фінансових додатків, тому що у них важлива безпека. Якщо користувач вийшов із програми, то ніхто не повинен знати, який він використовував.

Автовизначення ♀ ♂. Програми можуть визначати підлогу за введеним ім'ям. Сервіс genderize.io містить базу з 200 000+ імен, 79 країн та 89 мов. 100 000 запитів на місяць коштують $9. Є SDK для обох платформ. В Android можна спробувати отримати підлогу з акаунта Google+. На жаль, він завжди проставлений користувачем, а Росії G+ взагалі мало використовують.

Автодоповнення адреси прискорює введення у формах оформлення замовлення, іноді таке поле є у формі реєстрації. Є хороший огляд сервісів, що вирішують завдання.

Паролі

У програмі важко вводити пароль двічі. Досить це робити один раз, а якщо введення відбулося з помилкою, користувач повинен мати можливість змінити/відновити пароль.

Пароль при введенні прийнято приховувати крапками. Корисна кнопка «показати пароль» - вона особливо важлива на екрані реєстрації, якщо ми не просимо користувача ввести пароль двічі. Це цікаво реалізовано в спортивних трекерах Runtastic: пароль відображається, кнопка «очей» затиснута.

Відновлення пароля - завдання не першорядне. У більшості топових програм користувача для цього надсилають на веб-сторінку. Відновлення не повинно бути окремим екраном, що відкривається у браузері, його можна реалізувати на екрані авторизації за допомогою простих анімацій. Відмінні приклади: Airbnb, Tumblr, Runtastic.

Відновлення пароля в Tumblr iOS

Перевірка полів, клавіатури та оферту

Правильність заповнення полів важливо перевіряти у самому додатку. Валідація на стороні сервера займає час користувача, і це дратує. Це правило стосується і перевірки доступних логінів/e-mail, яка повинна працювати «на льоту». Хороші приклади -  Яндекс Музика , Twitter.

Для всіх різних типівполів важливо використовувати відповідні типи клавіатури: iOS, Android. Якщо користувач вводить пошту, на клавіатурі має бути знак @, цифри для введення номера тощо.

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

Соц. мережі

Це найпростіший для користувача спосіб входу: йому не потрібно заповнювати логін та пароль вручну. Кнопки соцмереж резонно сортувати за частотою використання залежно від платформи та країни. Google+ зручніше для Android, VK є у більшості користувачів Росії, і т.д. Так робить сервіс Foursquare в Android.

З боку технологій реалізації входу можна використовувати універсальні oAuth бібліотеки, або офіційні SDK соцмереж. У офіційних SDK є важлива перевага: вони виробляють авторизацію через встановлені програмиабо через акаунти користувача в системних налаштуваннях. Якщо користувач авторизується через соцмережу, з великою ймовірністю у нього встановлено відповідну програму.

Схема роботи офіційних SDK

Номер телефону та код підтвердження

В Android можна зробити автокомпліт номери із SIM-карти, проте це працює не на всіх пристроях, тому в коді потрібно враховувати можливі помилки. На практиці я не знайшов програм, які так роблять, але застосування такого способу цілком допустиме.

Після введення та надсилання номера користувачу потрібно ввести код із SMS. Android-програма може робити це автоматично. Цей прийом використовують Viber, Telegram, Rocketbank. Важливо лише пояснити користувачеві, що скоро прийде SMS, потрібно трохи почекати.

Fabric Digits.У Twitter є безкоштовне готове рішення для авторизації через телефонний номер. Це SMS-шлюз + мобільні та веб SDK. Зовнішній виглядінтерфейсу в певних межах можна настроювати. Це найпростіше рішення задачі із коробки.

Fabric Digits

Висновок

Тут я постарався викласти всі думки щодо входу до додатку та роботи з формами, які сформулював останнім часом. Ця замітка - свого роду чек-лист, сподіваюся, вона буде вам корисна. Якщо є питання, пишіть: [email protected]

, PHP , Системи обміну повідомленнями

Ми раді представити спільноті сервіс PushAuth, що дозволяє Вашим клієнтам авторизуватися за допомогою PUSH-повідомлень на мобільному пристрої!

Ця ідея не нова і багато компаній у своїх програмах вже використовують цю технологію. Все виглядає досить просто, доки не розглядаєш питання: безпеки, менеджменту пристроїв та клієнтів, сумісності та комфортної роботи.

Як виникла ідея?

Ми використовуємо дуже багато сервісів: email, соціальні мережі, CRM-системи, системи контролю доступу, клієнт-банки та ін. У кожного із сервісів, як правильно, для доступу необхідно використовувати логін/emailі пароль. Можна зробити висновок, що:

1. Майже у кожного з нас є email.
2. Паролі здебільшого скрізь однакові. (Вважатимемо, що ми не використовуємо сторонні послуги, такі як 1password та інші)

Виходячи з двох пунктів, хотілося:

1. Використовуйте цей один email для авторизації.
2. Не використовувати паролі взагалі.

Що з того вийшло?

Ми в мобільних додатках для реєстрації не використовуємо паролів взагалі. Так, немає необхідності запам'ятовувати ще один пароль. Для реєстрації/авторизації в мобільному додатку достатньо ввести лише email, на який прийде лист із посиланням на підтвердження дії. Після наступного введення електронної пошти - Ви автоматично увійдете до програми без реєстрації.

Які види авторизації?

Наразі доступно два основних види запитів на авторизацію:

1. Push питанняна авторизацію, у якому клієнту необхідно дати відповідь: Так чи Ні. Для цього методу доступний сервіс routing, Про яке трохи нижче.
2. Безпечний Push-код, які власник сервісу сам відправляє у мобільний додаток клієнта за допомогою сервісу PushAuth.
3. QR-авторизація, яка дозволяє сканувати код мобільним додатком клієнта та пройти авторизацію. Цей спосібвже на стадії закритого тестування мобільними програмами і найближчим часом так само стане доступним.

Мобільні додатки

• Для доставки PUSH-повідомлень на Android та iOS ми використовуємо FireBase Cloud Messaging. Всі дані, що передаються від мобільного додаткадо сервера PushAuth підписуються HMAC SHA-256, персональними приватними ключами.
• Мобільний додаток має додатково захист PIN-кодом (TouchID-паролем), що підвищує безпеку від несанкціонованого доступу.
• Ми плануємо розробляти SDK, яке дозволить використовувати функціонал API у Ваших мобільних програмах.
• Клієнти можуть мати одразу 10 пристроїв, на які зможуть прийти PUSH-запити. Відповідавши одному з пристроїв, інших пристроях відповіді Push ігноруються. Ми плануємо ховати Push-повідомлення на інших пристроях у відповідь на одному.

Push-питання

Безпечний Push-код

Програми вже доступні:

Backend

Для власників сервісів доступна детальна статистика про статус авторизації їх клієнтів. Ви можете створювати для кожного сервісу свій окремий Application та стежити за його використанням. Крім того, Ви можете налаштувати Web-хуки, які надсилатимуть дані про авторизацію:

• QR-кодів
• Push-запитів
• TimeOut відповідей клієнтів

Де це можна використати?

CRM

Почнемо наш політ фантазії з IT-сервісів, наприклад, тих же CRM-систем, де є необхідність підтверджувати дію співробітника. Наприклад, завдяки сервісу routing, можна зробити так, що для підписання документа необхідно підтвердження керівництва. Таким чином, картина в цілому виглядає так:

1. Співробітник ініціює дію та отримує PUSH-запит та відповідає Так.
2. Його безпосередній начальник отримує PUSH-запит та відповідає Так.
3. Керівник, що стоїть вище, отримує PUSH-запит і відповідає Так.
4. Результатом усіх дій буде Так

Якщо на якомусь етапі хтось відповість Ні, то наступне вище ланка не отримає PUSH-запит і загальним результатом запитів буде відповідь Ні

Вище ми описали роботу сервісу routingіз черговістю. Але даний сервісможна використовувати і без черговості. Це означає, що всі ланки ланцюжка (співробітники) отримають одночасно PUSH-запит. І тільки якщо всі з них дадуть відповідь позитивно, тільки тоді загальний результат запитів буде позитивним.

Web-site

Двофакторна або проста однофакторна авторизація на сайті може спростити або убезпечити доступ до внутрішніх ресурсів. Наприклад, для доступу до web-панелі адміністратора того ж WordPress, коли Ви даєте доступ своєму підряднику/розробнику і хочете строго контролювати його за допомогою Push-запитів авторизації.

OS

Чи використовуєте SSH/telnet доступ? Або хочете відкриваючи кришку ноутбука отримувати запит про авторизацію? Тоді цей сервіс буде ідеальним варіантом.

Інженерія та обладнання

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

Безпека

Це найважливіше питання у цьому сервісі. Варто звернути на такі речі, як обмін даними між Сервісом користувача<-->Сервер PushAuth<-->Додаток клієнта.
Усі дані передаються over HTTPS (TLS), з підписом HMAC, алгоритмом SHA-256. У кожного клієнта та користувача сервісу є своя пара Public & Private Key. Публічний ключ у разі необхідний для ідентифікації загалом мережевому сховищіі може передаватися в відкритому вигляді. Приватний ключ передається надійним способом. У випадку мобільної програми всі ключі передаються тільки через APN/GCM. Таким чином, ми забезпечуємо додатковий захист на рівні сертифікатів даних сервісів.