15 분 안에 Okta의 로그인 위젯으로 각도 앱을 구축하십시오.

키 하이라이트 :

후진 호환성이 부족하더라도 각도 2와 4는 UI 프레임 워크 중 3 위를 차지하고 있습니다 (RECT 및 HTML5 이후). OKTA는 간소화 된 사용자 계정 관리를위한 사용자 친화적 인 API를 제공하며 Angular 응용 프로그램과 완벽하게 통합됩니다. 로그인 위젯은 비밀번호 재설정, 암호 잊어 버린 암호 복구 및 강력한 인증 기능을 포함하는 사용자 정의 가능한 JavaScript 솔루션을 제공합니다. Okta의 로그인 위젯을 각도 프로젝트에 통합하는 것은 NPM과 최소 코드를 사용하여 간단하여 사용자 정의가 응용 프로그램 미학과 일치하도록합니다. 각도 응용 프로그램 내에서 철저한 테스트는 OKTA에 의해 촉진되며, OKTA를 제공자로 정의함으로써 쉽게 해결되는 문제가 있습니다. 전체 응용 프로그램은 Github에서 액세스 할 수 있습니다 AngularJS는 한때 JavaScript MVC 프레임 워크를 지배했지만 후속 버전에 대한 비 백드 호환성 발표는 일부 커뮤니티 격변을 일으켜 React 및 Vue.js와 같은 경쟁자에게 도움이되었습니다. 그러나 TypeScript를 활용하는 Angular 2 및 4는 놀랍도록 탄력적으로 입증되어 세 번째로 인기있는 UI 프레임 워크로 강력한 위치를 유지합니다. 이 기사에서는 기본 각도 응용 프로그램에서 사용자 인증을 위해 Okta의 로그인 위젯이 빠르게 통합되어 있음을 보여줍니다. 각도 초보자에게는 보충 각도 자습서가 권장됩니다. 소스 코드는 github에서 사용할 수 있습니다 사용자 인증을 위해 OKTA를 선택하는 이유는 무엇입니까?

OKTA는 사용자 계정 관리, 데이터 저장 및 여러 응용 프로그램에 연결하기위한 포괄적 인 API를 제공합니다. 이는 계정 관리를 단순화하고 보안을 향상 시키며 배포를 가속화합니다. OKTA 로그인 위젯은 비밀번호 재설정, 잊혀진 암호 기능 및 강력한 인증을 포함하여 OKTA의 표준 사인온 페이지의 기능을 미러링하는 쉽게 사용자 정의 할 수 있고 임베드 가능한 JavaScript 로그인 솔루션을 제공합니다. OKTA 정책을 통해 관리되는 모든 사용자 정책이 필요하지 않습니다. 소셜 로그인은 소비자 대면 응용 프로그램에도 지원됩니다 각도 응용 프로그램 구축
• Angular 4 및 Angular CLI 1.0을 사용하면 새 응용 프로그램을 작성하는 것이 간단합니다.
angular cli를 설치하십시오 :
• 새 응용 프로그램을 만듭니다 :
• 로 기능을 확인하십시오
Okta의 로그인 위젯 통합
위젯을 설치하십시오 :
1. css를 npm install --save @okta/okta-signin-widget : 에 추가하십시오
2. src/styles.css
위젯을 관리하려면 를 작성하십시오

@import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-sign-in.min.css';
@import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-theme.css';

3. src/app/shared/okta/okta.service.ts

import { Injectable } from '@angular/core';
import * as OktaSignIn from '@okta/okta-signin-widget/dist/js/okta-sign-in.min.js';

@Injectable()
export class Okta {
  widget;

  constructor() {
    this.widget = new OktaSignIn({
      baseUrl: 'https://{yourOktaDomain}.com',
      clientId: '{clientId}',
      redirectUri: 'http://localhost:4200'
    });
  }

  getWidget() {
    return this.widget;
  }
}

OKTA 계정에서 OpenID Connect 애플리케이션을 작성하여 및 및 로 대체하십시오.

• > 로그인/로그 아웃 기능을 구현하고 Okta>를 조정하여 위젯 및 사용자 정보를 표시하도록 조정하십시오. app.module.ts

테스트 및 커스터마이징

• okta.service.ts run 응용 프로그램을 테스트합니다. 의 공급자로 ClientId를 추가하여 잠재적 테스트 실패를 해결하십시오. 사용자 정의 CS를 만들어 위젯의 모양을 사용자 정의하십시오. 완성 된 응용 프로그램은 github에서 사용할 수 있습니다 자주 묻는 질문 (FAQS) Okta Domain (이것은 간결하게 요약되어 있으며, 완전한 답변은 원본을 참조하십시오.)

  Angular와의 OKTA 통합 :
OKTA Angular SDK를 설치하고 OKTA 도메인 및 클라이언트 ID로 구성하고 인증, 세션 관리 및 경로 보안에 해당 방법을 사용하십시오. oktaauthservice :
• 로그인, 로그 아웃, 인증 확인 및 세션 처리를 포함한 사용자 인증 관리.

  > 보안 경로 : app.component.ts app.component.html 사용을 사용하여 인증 된 사용자에 대한 액세스를 제한하십시오. Okta 콜백 구성 요소 :

  alkta에서 인증 콜백을 처리합니다
로그인 페이지 사용자 정의 : Okta Admin 대시 보드 또는 사용자 정의 HTML/CSS를 통해 사용자 정의. 세션 관리 : 세션을 작성, 점검, 갱신 및 폐쇄하는 데 Okta의 방법을 사용하십시오. Okta 토큰 관리자 :

토큰을 안전하게 관리합니다 오류 처리 : SDK는 오류 처리 기능을 제공합니다 테스트 : 모의 서비스와 함께 단위 테스트를 사용하십시오 SDK 업데이트 : a .

Okta는 인증을 단순화하여 개발자가 응용 프로그램 기능에 집중할 수 있도록합니다. 무료 개발자 계정을 실험 할 수 있습니다. 질문은 스택 오버플로, 트위터 또는 github

위 내용은 15 분 안에 Okta의 로그인 위젯으로 각도 앱을 구축하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!