인증 프로젝트 템플릿

다음 중 하나를 사용할 때 선택할 수 있는 여러 버전의 프로젝트(프로젝트 템플릿이라고 함)가 있습니다. new Ignite UI CLI를 사용한 명령, Ignite UI for Angular 사용 아니면 그 Ignite UI CLI를 사용한 단계별 모드 또는 Ignite UI for Angular.

Angular Schematics 또는 Ignite UI CLI를 사용하여 Ignite UI for Angular 생성할 때 사용자 관리를 통해 앱을 시작하는 데 추가 설정이 거의 필요하지 않은 클라이언트 측 인증 모듈의 기본 구현이 포함된 템플릿을 선택할 수 있습니다.

Create Authentication Project

'Ignite UI for Angular' 프로젝트 유형을 선택한 후 단계별 경험을 진행할 때 인증 프로젝트를 선택할 수 있습니다.

또는 새로운 명령을 통해:

ig new "Auth Project" --framework=angular --type=igx-ts --template=side-nav-auth

Schematics 컬렉션을 사용하는 경우 다음을 실행하세요.

ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=side-nav-auth

Description

이 템플릿은 측면 탐색 기본값을 기반으로 하며 로그인 버튼이나 로그인한 사용자의 아바타를 표시하는 프로필 페이지와 로그인 섹션을 앱의 탐색 모음에 추가합니다.

로그인 표시줄에는 로그인 또는 가입을 위한 대화 상자도 통합되어 있습니다.

이 프로젝트는 또한 다양한 외부 인증 공급자를 지원합니다.

In code

사용자 관리와 관련된 모든 내용은 src/app/authentication 폴더에 있습니다. 주목할만한 수출품은 다음과 같습니다:

• authentication.module.ts의 AuthenticationModule 모든 구성 요소와 서비스를 기본 앱 모듈로 내보냅니다.
• auth.guard.ts 경로에 적용할 수 있는 AuthGuard 내보냅니다.
• authentication-routing.module.ts 로그인 관련 경로를 설정합니다.
• services/user.service.ts의 UserService 현재 사용자 상태를 유지합니다.
• services/authentication.service.ts의 AuthenticationService 백엔드 API와 통신하는 데 사용됩니다.
• services/external-auth.service.ts의 ExternalAuthService 제3자 로그인을 위한 공급자를 처리합니다.

Required configuration

프로젝트는 REST API 서비스가 포함된 단일 페이지 앱에 대해 설정되었으므로 AuthenticationService 사용하여 다음 URL로 요청을 보냅니다.

• /login- 사용자 이름과 비밀번호로 로그인
• /register- 사용자 세부정보로 등록
• /extlogin- 외부 소스의 사용자 정보를 전달합니다.

모든 엔드포인트는 JWT(JSON Wen Token) 또는 메시지와 함께 오류 상태를 반환해야 합니다.

참고: 데모 목적으로 프로젝트에는 요청을 가로채는 services/fake-backend.service.ts가 있습니다. authentication.module.ts의 BackendProvider 프로덕션에서 사용하면 안 됩니다. 개발이 시작되면 공급자와 파일을 모두 제거해야 합니다.

모든 인증 모델과 마찬가지로 JWT를 사용하려면 보안 고려 사항이 필요합니다. 특히, REST API로부터 받은 토큰은 클라이언트에 저장됩니다. 개발 중 원활한 앱 재로드를 위해 사용자 데이터는 잠재적으로 XSS 공격에 취약한 브라우저 로컬 저장소에 저장됩니다.

참고: 프로덕션 전에 로컬 스토리지를 비활성화하십시오. 앱 요구 사항에서 토큰을 보호하기 위해 대체 경로를 허용하거나 선택하는 경우에만 토큰을 메모리에 보관하는 것이 좋습니다. 쿠키를 사용하는 것(CSRF 보호 고려)은 대안이며, 강화된 쿠키에서 토큰 서명이나 추가 '지문'을 분할하기도 합니다.

평소와 마찬가지로 항상 보안 측면을 평가하고 그에 따라 조정하십시오. 제공된 프로젝트 구조는 단지 시작점일 뿐입니다.

Add a third-party (social) provider

프로젝트의 기본 모듈 src/app/app.module.ts는 다음과 유사한 외부 인증 서비스가 삽입되고 주석 처리된 초기화를 사용하여 생성되어야 합니다.

// in app.module.ts
export class AppModule {
  constructor(private externalAuthService: ExternalAuthService) {
    // this.externalAuthService.addGoogle('<CLIENT_ID>');
    // this.externalAuthService.addMicrosoft('<CLIENT_ID>');
    // this.externalAuthService.addFacebook('<CLIENT_ID>');
  }
}

특정 제3자 제공업체로 사용자 로그인을 활성화하려면 특정 줄의 주석 처리를 제거하고 ``를 앱의 클라이언트 ID로 바꾸는 것이 필요합니다. 예를 들어 Google 계정 로그인을 위해 정보를 얻어야 하는 경우 다음의 제공업체별 가이드를 따르세요.

• 자격 증명 얻기

• 더 자세한 버전

리디렉션 URL과 허용된 도메인 원본은 프로젝트와 일치하도록 공급자별로 구성해야 합니다. 개발용 Google OAuth 2.0 클라이언트 ID를 생성할 때 http://localhost:4200/redirect-google 리디렉션 URI로 제공할 수 있습니다. 자세한 내용은 리디렉션 URL을 참조하세요.

ID(예: 123456789.apps.googleusercontent.com)가 있으면 다음과 같이 프로젝트에 대해 Google 공급자를 활성화할 수 있습니다.

// in app.module.ts
export class AppModule {
  constructor(private externalAuthService: ExternalAuthService) {
    this.externalAuthService.addGoogle('123456789.apps.googleusercontent.com');
    // this.externalAuthService.addMicrosoft('<CLIENT_ID>');
    // this.externalAuthService.addFacebook('<CLIENT_ID>');
  }
}

그러면 로그인 대화 상자에서 해당 버튼이 자동으로 활성화됩니다.

이 가이드에 따라 Microsoft 에서도 동일한 작업을 수행할 수 있습니다.

https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-v2-register-an-app

그리고 페이스북의 경우:

https://developers.facebook.com/docs/apps/#register

공급자를 활성화하면 모든 버튼이 활성화됩니다.

Provider details

프로젝트 템플릿과 함께 제공되는 기본 공급자는 다음과 같습니다.

공급자	용도	리디렉션 URL
Google	오픈ID 커넥트*	<app root>/redirect-google
마이크로소프트	오픈ID 커넥트*	<app root>/redirect-microsoft
페이스북	페이스북 연결**	<app root>/redirect-facebook

앱이 호스팅되는 위치에 따라 루트 URL이 결정됩니다. 예를 들어 첫 번째 앱 실행 시 기본적으로 http://localhost:4200 됩니다.

* https://github.com/damienbod/angular-auth-oidc-client를 사용하여 구현된 OpenID Connect 기능

** Facebook JS SDK를 사용하여 구현된 Facebook Connect 기능