Аутентификация без пароля с помощью Angular и Eartho

В сегодняшней статье мы создадим приложение Angular, которое использует Eartho для беспарольной аутентификации. Для простоты мы создадим наше приложение на основе Eartho Angular Starter. Мы рассмотрим преимущества беспарольной аутентификации и то, как она может обеспечить большую безопасность по сравнению с более традиционными методами аутентификации.
Eartho

https://www.npmjs.com/package/@eartho/one-client-angular

Почему стоит использовать Eartho?

Вот почему:

• Готовый высококонверсионный UI/UX
• Вам не нужно читать документы всех компаний и открывать там счета.
• Логин от Google, Twitter, Github, Facebook, Apple, Microsoft, VK, Snapchat, Yandex, Reddit, SMS, Metamask сразу без лишних шагов и усилий.
• Ваши пользователи будут защищены нашим третьим слоем, мы не позволяем компаниям следить за вашими пользователями.
• Установите границы и правила, чтобы остановить нежелательных для вас пользователей от подключения.
• Расширенная аналитика и информация о вашем приложении из всех источников. готово к использованию. никаких лишних шагов.
• No-Code / Ваш собственный сервер. Вы сами решаете. Eartho поддерживает все, ваш собственный сервер, наш сервер, firebase auth и многое другое.
• Что мы будем создавать
• В этой статье мы узнаем о Eartho и Firebase Auth и о том, как пользоваться преимуществами обоих.

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

Начало работы

1. Создайте аккаунт в -> Eartho Creators
   Это 100% бесплатно, неограниченное количество пользователей бесплатно.

2. Создайте свой первый проект, нажав на кнопку «Добавить проект» на главном экране создателей. Проект может быть веб-сайтом или приложением.

3. После создания проекта вы увидите «Добавить доступ» на странице сущности. Начните с создания точек доступа, которыми вы хотите, чтобы мы управляли; это может быть «логин» или «премиум-пакет» или что угодно, что дает вашим пользователям/клиентам доступ к ресурсам.

4. Поздравляем 🎉 Вы создали свой самый первый «доступ». Теперь вы член сообщества создателей Eartho 😊 Зайдите на наш сервер Discord и поздоровайтесь.

Интеграция SDK

Установите SDK и инициализируйте Eartho One
Используя npm

npm install @eartho/one-client-angular

Использование yarn

yarn add @eartho/one-client-angular

1. Перейдите на https://creator.eartho.world/ и

Скопируйте значения идентификатора клиента eartho из «setup tab» И замените его на «YOUR_EARTHO_CLIENT_ID» в коде этапа 3. 3. Настройте SDK, обернув ваше приложение в EarthoOneProvider:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import the module from the SDK
import { AuthModule } from '@eartho/one-client-angular';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
// Import the module into the application, with configuration
    AuthModule.forRoot({
      clientId: 'YOUR_EARTHO_CLIENT_ID',
    }),
  ],
bootstrap: [AppComponent],
})
export class AppModule {}

Начать использование

import { Component } from '@angular/core';
// Import the AuthService type from the SDK
import { AuthService } from '@eartho/one-client-angular';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'My App';
// Inject the authentication service into your component through the constructor
  constructor(public auth: AuthService) {}
connectWithRedirect(): void {
    // Call this to redirect the user to the login page
    this.auth.connectWithPopup({access_id:"YOUR_EARTHO_ACCESS_ID"});
  }
}

Серверная сторона

Если вы используете Eartho с приложением или сайтом, который взаимодействует с внутренним сервером, вы можете легко защитить свои маршруты с помощью нашего SDK. После того как ваши пользователи завершат вход в Eartho, они будут возвращены в ваше приложение по маршруту обратного вызова.

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