Auf: Аутентификация без границ

С самого начала моей карьеры программистом я всегда старался сделать что-то свое. У меня были разные проекты. Вот некоторые из них:

• iOS приложение календаря дней рождений.
• iOS приложение для изучения неправильных глаголов английского языка.
• Сервер для рассылки Push-уведомлений.
• Бот помощник проверки свободных мест на запись в консульства РФ.

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

Каждый раз, когда я садился делать очередное приложение, то какое-то время съедала настройка аутентификации. В календаре дней рождений я позволяю пользователям войти с помощью учетных записей Google и Apple. В случае с Google я получаю email пользователя и могу отправить ему письмо. Однако Apple генерирует случайные почтовые ящики, которые недоступны в случае отправки на них письма.

Изначально я хотел, чтобы пользователь аутентифицировался только через Google аккаунт, но Apple не пропустила такое приложение в Apple Store. Одно из обязательных требований при наличии кнопки аутентификации через Google, добавление кнопки аутентификации через аккаунт Apple.

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

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

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

• Email
• Последняя активность
• Тип устройства и информацию о браузере

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

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

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

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

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

Затем создаем API route, который будет получать временный ключ и создавать JWT токен с зашитой в него информацией о пользователе используя секретный ключ недоступный Auf.

// app/api/auf/route.js

import { fetchToken } from "auf-next";
import { NextResponse } from "next/server";

export async function GET(request) {
  const redirectUrl = await fetchToken(request);
  return NextResponse.redirect(redirectUrl);
}

Затем добавляем код кнопки "Войти" на сайт:

import { AuthBtn } from "auf-next";

<AuthBtn
  redirectUrl={
    process.env.NODE_ENV === "production"
      ? "https://my-site.com"
      : "http://localhost:3000"
  }
  appName="my-site"
  SignInComponent={<div className="btn">Sign in</div>}
  SignOutComponent={<div className="btn">Sign Out</div>}
/>;

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

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

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

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

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

• Мой канал: https://t.me/useruby
• Панель управления: https://auf.casply.com/
• Клиентская библиотека для NextJS: https://www.npmjs.com/package/auf-next
• Код серверной части: https://github.com/vitalyliber/auf
• Моя тележка: https://t.me/vitalyliber