Angular 및 Eartho를 사용한 비밀번호 없는 인증

오늘 기사에서는 암호 없는 인증을 위해 Eartho를 사용하는 Angular 애플리케이션을 만들 것입니다. 우리는 단순성을 위해 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 인증 등을 모두 지원합니다.

우리가 만들 것

이 기사에서는 Eartho 및 Firebase Auth에 대해 알아보고 두 가지의 이점을 누리는 방법에 대해 알아봅니다.

이 글을 마치면 Firebase 인증을 사용하는 동안 모든 유형의 소셜 네트워크와 지갑으로 사용자를 한 번에 인증할 수 있는 팝업이 표시됩니다.

시작하기

계정 만들기 -> Eartho Creators
100% 무료이며 무제한 사용자가 무료입니다.

크리에이터의 홈 화면에서 "프로젝트 추가"를 클릭하여 첫 번째 프로젝트를 만드십시오. 프로젝트는 웹사이트 또는 앱일 수 있습니다.

프로젝트를 만든 후 엔티티 페이지에 "액세스 추가"가 표시됩니다. 관리할 액세스 포인트를 생성하여 시작하십시오. "로그인"또는 "프리미엄 패키지"또는 사용자/클라이언트에게 리소스에 대한 액세스를 제공하는 모든 것이 될 수 있습니다.

축하합니다 🎉 첫 번째 "액세스"를 만들었습니다. 이제 귀하는 Eartho 크리에이터 커뮤니티의 회원입니다 😊 Discord 서버로 이동하여 인사하세요.

SDK 통합

SDK 설치 및 Eartho One 초기화
npm 사용

npm install @eartho/one-client-angular

실 사용

yarn add @eartho/one-client-angular

https://creator.eartho.world/ 및

로 이동

"설정 탭"에서 eartho 클라이언트 ID 값을 복사하고 3단계 코드에서 "YOUR_EARTHO_CLIENT_ID"로 바꿉니다. 3. EarthoOneProvider에서 애플리케이션을 래핑하여 SDK를 구성합니다.

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를 사용하면 조직의 요구에 맞게 다양한 인증 체계를 결합할 수 있기 때문에 우리는 많은 자유를 누릴 수 있습니다.