Кнопка входа - первое, к чему прикасается новый пользователь, поэтому она должна вписываться в ваш дизайн, работать с клавиатуры, корректно отображаться на арабском и рендериться на сервере без мерцания. @posty5/oauth-angular даёт приложению на Angular готовую кнопку Continue with Posty5 со всем этим, а также стоящий за ней процесс входа.

Это руководство проведёт вас от установки до работающей оформленной кнопки. Предполагается, что вы уже зарегистрировали OAuth-приложение, как описано в статье Как добавить вход через Posty5 на сайт или в приложение; руководство входит в описание платформы для разработчиков из руководства по API-ключам и SDK.

Сначала выберите режим

• startUrl - вход уже выполняет ваш бэкенд, например с @posty5/oauth. Кнопка лишь открывает ваш стартовый адрес. Это рекомендуемый режим, и именно его использует Trend Digest.
• codeHandler - пакет запускает PKCE в браузере и отправляет код на ваш бэкенд, который обменивает его с помощью client secret.
• browser - без бэкенда. Пакет обменивает код как публичный клиент и проверяет ID-токен через WebCrypto. OAuth-приложение должно разрешать вход из браузера с origin вашего сайта.

Ни в одном режиме client secret не попадает в браузер.

Добавляем кнопку шаг за шагом

1. Установите пакет командой npm install @posty5/oauth-angular. Поддерживаются версии Angular с 17.3 по 20.
2. Вызовите providePosty5Auth в конфигурации приложения с выбранным режимом.
3. Импортируйте Posty5SignInButtonComponent там, где он используется, и поставьте атрибут posty5SignInButton на настоящий элемент button, чтобы формы, фокус и клавиатура работали как обычно.
4. Для режимов codeHandler и browser направьте redirect URI на лениво загружаемую страницу с компонентом posty5Callback и выполняйте навигацию по его событиям signedIn и failed.
5. Один раз войдите сами и убедитесь, что возвращаетесь на страницу, с которой начинали.

// app.config.ts
import { providePosty5Auth } from "@posty5/oauth-angular";

export const appConfig = {
  providers: [
    providePosty5Auth({
      mode: "startUrl",
      startUrl: "/api/auth/posty5/start",
    }),
  ],
};

<button posty5SignInButton theme="outline" shape="pill" [width]="320" returnUrl="/dashboard"></button>

Подгоните кнопку под свой дизайн

• theme - filled (синий Posty5), outline (белый) или filledDark для тёмных страниц.
• size - large, medium или small; shape - rectangular, pill, circle или square (только логотип).
• text - Continue with Posty5, Sign in with Posty5, Sign up with Posty5 или Sign in; label полностью заменяет текст.
• logoAlignment, width, locale для каждой кнопки и unstyled, если хотите оформить всё сами.

.login-card .posty5-btn {
  --posty5-btn-radius: 9999px;
  --posty5-btn-font-family: "Cairo", sans-serif;
  --posty5-btn-hover-bg: #1a6bff;
}

Встроенные стили имеют нулевую специфичность, поэтому любое ваше правило побеждает без !important, а каждый цвет и размер задан как CSS custom property. Кнопки на арабском сами выстраиваются справа налево, а Posty5 всегда пишется латиницей.

Приветствуйте вернувшихся пользователей по имени

После входа кнопка может показывать фото пользователя, Continue as с его именем и частично скрытый email - как персонализированные кнопки других провайдеров входа. В режиме browser это происходит само; в остальных режимах вызовите rememberUser с данными, которые вернул ваш бэкенд, и forgetUser при выходе.

Запомненный пользователь хранит только имя, HTTPS-адрес фото и частично скрытый email - никаких токенов. Персонализированная кнопка появляется только после гидратации, поэтому HTML, отрендеренный на сервере, никогда не расходится с клиентским.

Полезно знать

• Пакет безопасен при серверном рендеринге: на сервере кнопка показывает общий текст, а вход там никогда не запускается.
• Он обращается к Posty5 через fetch, поэтому ваши HTTP-интерцепторы никогда не добавят ваш собственный заголовок Authorization к endpoints Posty5.
• Незавершённый вход хранится в session storage для одной вкладки и истекает через 10 минут.
• В режиме browser храните токены в памяти. Для длинных сессий лучше выбрать startUrl или codeHandler с cookie HttpOnly.

Частые вопросы