인증 프로젝트 템플릿
Ignite UI CLI와 함께 명령어new, Ignite UI for Angular 도면, 또는 CLI 또는 Ignite UI 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 안에 있습니다. 주요 수출품은 다음과 같습니다:
AuthenticationModule모든authentication.module.ts컴포넌트와 서비스를 메인 앱 모듈로 내보냅니다.auth.guard.ts내보내기(export)를 사용하고,AuthGuard경로에 적용할 수 있습니다authentication-routing.module.ts로그인 관련 경로를 설정합니다UserService현재services/user.service.ts사용자 상태를 유지합니다AuthenticationService는services/authentication.service.ts백엔드 API와 통신하는 데 사용됩니다ExternalAuthServiceINservices/external-auth.service.ts은 서드파티 로그인 제공업체를 처리합니다
Required configuration
이 프로젝트는 REST API 서비스를 제공하는 단일 페이지 앱으로 설정되어 있어,AuthenticationService 다음 URL로 요청을 보내는 데 사용됩니다:
/login- 사용자 이름과 비밀번호로 로그인/register- 사용자 정보로 등록/extlogin- 외부 소스에서 사용자 정보를 전달하는 것
모든 엔드포인트는 JWT(JSON Wen Token) 또는 메시지와 함께 오류 상태를 반환해야 합니다.
참고: 시연 목적을 위해 프로젝트에는 요청을 가로채는 a가
services/fake-backend.service.ts있습니다. 인BackendProvider은authentication.module.ts생산 과정에 사용 되어서는 안 됩니다. 개발이 시작되면 제공자와 파일 모두 제거되어야 합니다.
모든 인증 모델과 마찬가지로 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를 생성할 때, 리디렉션 URI로 제공할http://localhost:4200/redirect-google 수 있습니다. 자세한 내용은 리디렉션 URL을 참조하세요.
예를 들어 ID123456789.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 |
|---|---|---|
| 오픈ID 커넥트* | <app root>/redirect-google |
|
| 마이크로소프트 | 오픈ID 커넥트* | <app root>/redirect-microsoft |
| 페이스북 | 페이스북 연결** | <app root>/redirect-facebook |
앱이 호스팅되는 곳이 루트 URL을 결정하며, 예를 들어 첫 앱 실행http://localhost:4200 시 기본적으로 루트 URL이 결정됩니다.
* https://github.com/damienbod/angular-auth-oidc-client를 사용하여 구현된 OpenID Connect 기능
** Facebook JS SDK를 사용하여 구현된 Facebook Connect 기능
GitHub