Angular를 사용하여 JWT를 인증하는 방법NET 코어 C#API(OpenAPI/Swagger)에서 NSwag 유형 스크립트 사용

이 설명서의 배경 및 구조

컨텐트

1. ASP에서 NSwag을 사용합니다.네트워크 코어 백엔드

브라우저에서 결과 테스트

API 프로젝트를 시작하고 브라우저에서 Swigger UI를 엽니다.내 프로젝트에서 이것은https://localhost:5002/swagger:

API가 좀 지루해요.인증 테스트에만 사용되기 때문에 매개 변수도 반환값도 없습니다

OpenAPI 사양 로드

OpenAPI 사양에 액세스할 수도 있습니다(NSwag Studio의 다음 단계에는 URL이 필요합니다):

이 가이드의 이 단계와 다음 단계를 더 읽습니다. Using NSwag to Generate Angular Client for an ASP.NET Core 3 API 저자 Eric Anderson

2. NSwag Studio를 사용하여 TypeScript 클라이언트 생성

Download NSwag Studio 및 설치

NSwag Studio를 시작하고 이 설명서의 이전 단계에서 사양 URL(e.q."https://localhost:5002/swagger/v1/swagger.json을 입력합니다.출력으로 TypeScript 클라이언트 선택:

Make sure your API project from the previous step is running. NSwag Studio needs to access the OpenAPI sepcification.

"Angular"템플릿을 선택하고 "기본 클래스 이름"으로 "ApiBase"를 추가:

나중에 기본 클래스에 인증 헤더를 추가할 수 있도록 "transformOptions"를 선택하십시오:

파일 apibase를 만듭니다.ts(예: C:\dev\apibase.ts)이 코드는 인증 헤더를 설정합니다.ApiBase는 NSwag에서 생성할 파일의 기본 클래스입니다.

다음에apibase를 설정합니다.ts를 NSwag Studio의 확장 코드 파일로 사용:

"출력 생성"단추를 누르고 출력 복사:

3. Authenticate and Access the API from Angular

파일 만들기api.이 가이드의 마지막 출력을 붙여넣기:

프로그램에서 생성된 코드를 사용합니다.구성 요소ts 액세스 API파일 가져오기(4행) 및 API 호출(24-26행):

Start the app

c:\dev>ng serve

디버거와 크롬 브라우저의 로그에 로그인하여 백엔드의 호출과 인증이 유효한지 확인합니다:

4. Final Thoughts and Outlook

NSwag을 사용하여 API에 OpenAPI/Swagger 사양을 자동으로 생성합니다.그리고 NSwag Studio에서 TypeScript 클라이언트를 만들었습니다. Angular에서 이 클라이언트를 사용했습니다

이 프로그램이 전면적으로 실행 중입니다!이것은 예시 프로그램일 뿐입니다. 코드를 정리하고 각도와 각도를 사용해야 합니다.NET 핵심 설계 모드, 오류 처리 등을 통해 프로덕션에서 사용할 수 있습니다

로그아웃과 시간 초과를 처리해야 합니다.인증이 필요 없는 API 경로가 필요할 수도 있습니다. NSwag 명령줄 도구를 사용하여 파이프를 자동화할 수 있습니다

내 후속 이야기 참조:

질문, 생각 또는 건의가 있으면 저에게 연락하세요