앱에서 OpenID Connect 및 OKTA를 사용한 각도 인증 설정

이 기사는 원래 Okta Developer Blog에 게시되었습니다. Sitepoint를 가능하게하는 파트너를 지원해 주셔서 감사합니다.

Angular (이전의 Angular 2.0이라고 함)는 현대적인 단일 페이지 앱을 구축하는 가장 강력한 방법 중 하나가되고 있습니다. 핵심 강도는 재사용 가능한 구성 요소를 구축하는 데 중점을 두므로 응용 프로그램의 다양한 문제를 분리하는 데 도움이됩니다. 예를 들어 인증을 받으십시오. 빌드하는 것은 고통 스러울 수 있지만, 일단 구성 요소로 랩핑하면 응용 프로그램 전체에서 인증 로직을 재사용 할 수 있습니다. 각도 CLI는 새로운 구성 요소와 전체 프로젝트를 쉽게 발판 할 수 있도록합니다. 각도 CLI를 사용하여 각도 코드를 신속하게 생성하지 않았다면 치료를 받으십시오! 이 예에서는 각도 개발 도구 인 Angular CLI를 사용하여 간단한 웹 응용 프로그램을 구축하게됩니다. 검색 및 편집 기능을 사용하여 응용 프로그램을 작성한 다음 인증을 추가합니다.

키 테이크 아웃 각도 CLI를 사용하여 신속하게 발판을 내고 새로운 각도 응용 프로그램을 실행하여 개발 효율성을 향상시킵니다. Okta와 OpenID Connect 앱을 설정하여 안전한 사용자 관리를 보장하여 인증을 원활하게 통합하십시오. 앵글의 강력한 구성 요소 시스템을 활용하여 검색 및 편집 기능을 추가하여 사용자 경험을 향상시킵니다. 라우팅을 사용하여 응용 프로그램 내에서 내비게이션을 관리하여 더 부드러운 사용자 흐름과 더 나은 상태 관리를 허용합니다. 데이터 무결성을 보장하고 피드백을 제공하여 전반적인 유용성을 향상시키기 위해 양식 검증을 구현하십시오. angular의 인증을 사용하여 민감한 정보를 보호하고 인증을 시행하는 응용 프로그램 경로를 안전하게 보안하십시오. angular 응용 프로그램을 만듭니다

팁 : 팁 : 각도 응용 프로그램 구축을 건너 뛰고 인증 추가에 바로 얻으려면 NG 데모 프로젝트를 복제 한 다음 Okta 섹션에서 OpenID Connect 앱 생성으로 건너 뛸 수 있습니다. >

필요한 것

약 20 분

좋아하는 텍스트 편집기 또는 IDE. 나는 Intellij Idea 를 추천합니다 node.js 및 npm이 설치되었습니다. nvm

를 사용하는 것이 좋습니다 Angular CLI 설치. Angular CLI가 설치되어 있지 않은 경우 npm install -g @angular/cli 를 사용하여 설치하십시오.

ng new 명령을 사용하여 새 프로젝트를 만듭니다 :
• 이것은 NG 데모 프로젝트를 만들고 NPM 설치를 실행합니다. 완료하는 데 약 1 분이 걸리지 만 연결 속도에 따라 달라질 수 있습니다.
.
• 당신은 ng -version과 함께 사용하는 Angular Cli의 어떤 버전을 볼 수 있습니다.
angular 응용 프로그램을 실행하십시오 프로젝트는 WebPack Dev 서버로 구성됩니다. 시작하려면 NG 데모 디렉토리에 있는지 확인한 다음 실행하십시오.

<span>git clone https://github.com/mraible/ng-demo.git
</span>

http : // localhost : 4200에서 아래의 화면과 같은 화면이 보일 것입니다.

새로운 프로젝트의 테스트가 통과되도록 할 수 있습니다. NG 테스트를 실행하십시오 :

검색 기능을 추가하십시오 검색 기능을 추가하려면 IDE 또는 좋아하는 텍스트 편집기에서 프로젝트를 엽니 다. Intellij Idea의 경우 파일> 새 프로젝트> 정적 웹을 사용하고 NG 데모 디렉토리를 가리 킵니다. 터미널 창에서 프로젝트 디렉토리에 CD를 사용하여 다음 명령을 실행하십시오. 검색 구성 요소가 생성됩니다

> SRC/APP/SEARCHEND/SEARCHING.COMPONTIN.HTML을 열고 기본 HTML을 다음으로 바꾸십시오 :

Angular의 라우터 문서는 방금 생성 한 검색업자에게 경로를 설정하는 데 필요한 정보를 제공합니다. 다음은 간단한 요약입니다 :

ng new ng-demo

SRC/APP/APP.MODULE.TS에서 에서 상수를 추가하고 @NGModule에서 가져 오기 : 에서 가져옵니다.

SRC/APP/APP.COMPONTE.HTML에서 에서 자리 표시 자 콘텐츠를 조정하고 태그를 추가하여 경로를 표시합니다.

라우팅 설정이 있었으므로 검색 기능을 계속 작성할 수 있습니다. 여전히 NG 서브가 실행중인 경우 브라우저가 자동으로 새로 고침해야합니다. 그렇지 않은 경우 http : // localhost : 4200으로 이동하십시오. 빈 화면이 표시 될 수 있습니다. JavaScript 콘솔을 열면 문제가 나타납니다.
이를 해결하려면 Src/App/App.Module.ts를 열고 @NGModule에서 가져 오기로 FormsModule을 추가하십시오 : .

이제 검색 양식이 표시됩니다.

이 구성 요소에 CSS를 추가하려면 SRC/App/Search/Search.component.css를 열고 일부 CSS를 추가하십시오. 예를 들면 :

<span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>

이 섹션에서는 각도 CLI를 사용하여 기본 각도 응용 프로그램에 새로운 구성 요소를 생성하는 방법을 보여주었습니다. 다음 섹션에서는 JSON 파일과 LocalStorage를 생성하고 사용하여 가짜 API를 만드는 방법을 보여줍니다. 검색 결과를 얻으려면 http가 JSON 파일에 요청하는 SearchService를 만듭니다. 새로운 서비스를 생성하여 시작하십시오

생성 된 Search.service.ts와 그 테스트를 앱/공유/검색으로 이동하십시오. 이 디렉토리를 만들어야합니다.

$ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64

데이터를 보유하려면 src/assets/data/people.json을 생성하십시오

src/app/shared/search/search.service.ts를 수정하고 생성자의 종속성으로 HTTP를 제공합니다. 이 같은 파일에서 모든 사람들을 수집하기 위해 getall () 메소드를 작성하십시오. 또한 JSON이 마샬링 할 주소 및 개인 클래스를 정의하십시오.

구성 요소에서 이러한 클래스를 소비 할 수 있도록 SRC/App/Shared/Index.ts를 편집하고 다음을 추가하십시오.

<span>git clone https://github.com/mraible/ng-demo.git
</span>

이 ​​파일을 생성하는 이유는 각 개별 클래스를 별도의 줄로 가져 오지 않고 한 줄로 여러 클래스를 가져올 수 있기 때문입니다. SRC/App/Search/Search.component.ts에서 이 클래스에 대한 가져 오기를 추가하십시오

이제 쿼리 및 SearchResults 변수를 추가 할 수 있습니다. 거기에있는 동안 SearchService를 주입하도록 생성자를 수정하십시오.

그런 다음 search () 메소드를 구현하여 서비스의 getall () 메소드를 호출합니다.

이 시점에서 브라우저 콘솔에 다음 메시지가 표시 될 수 있습니다.

위의 "제공자 없음"오류를 수정하려면 app.module.ts를 업데이트하여 SearchService를 가져오고 공급자 목록에 서비스를 추가하십시오. SearchService는 http에 의존하기 때문에 httpmodule도 가져와야합니다.

ng new ng-demo

이제 검색 버튼을 클릭하면 작동합니다. 결과를 더 좋아 보이려면 태그를 제거하고 SRC/App/Search/Search.component.html에서 로 바꾸십시오.

그런 다음 테이블 레이아웃을 개선하기 위해 SRC/App/Search/Search.component.css에 추가 CSS를 추가하십시오.

<span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>

이제 검색 결과가 더 좋아 보입니다.

그러나 잠깐만, 아직 검색 기능이 없습니다! 검색 기능을 추가하려면 SearchService에 Search () 메소드를 추가합니다.

그런 다음 쿼리 변수 로이 메소드를 호출하려면 SearchComponent를 리팩터링합니다.

$ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64

이제 검색 결과가 입력 한 쿼리 값으로 필터링됩니다. 이 섹션에서는 검색 결과를 가져오고 표시하는 방법을 보여주었습니다. 다음 섹션에서는이를 바탕으로 레코드를 편집하고 저장하는 방법을 보여줍니다. 편집 기능을 추가하십시오 사람 편집을위한 링크를 추가하려면 src/app/search/search.component.html을 수정하십시오.

다음 명령을 실행하여 editComponent를 생성합니다

src/app/app.module.ts : 에서이 구성 요소에 대한 경로를 추가하십시오

ng serve

편집 가능한 양식을 표시하려면 SRC/APP/EDIT/edit.component.html 업데이트를 업데이트하십시오. 대부분의 요소에 ID 속성을 추가 한 것을 알 수 있습니다. 이것은 오기체로 통합 테스트를 작성할 때 더 쉬워집니다.
EDITCOMPONONT를 모델 및 서비스 클래스 가져 오기 위해 수정하고 SearchService를 사용하여 데이터를 가져옵니다.

$ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>

SearchService를 수정하여 신분증으로 사람을 찾는 기능을 포함하여 저장하십시오. 거기에있는 동안 LocalStorage에서 업데이트 된 객체를 알기 위해 Search () 메소드를 수정하십시오.

양식을 조금 더 좋아 보이려면 src/app/edit/edit.component.css에 CSS를 추가 할 수 있습니다.

이 시점에서 사람을 검색하고 정보를 업데이트 할 수 있어야합니다. SRC/APP/edit/edit.component.html의
은 Save () 함수를 호출하여 사람의 데이터를 업데이트합니다. 당신은 이미 위에서 이것을 구현했습니다. 이 함수는 사용자를 검색 화면으로 다시 보낼 때 사람의 이름을 URL에 추가하는 gotolist () 함수를 호출합니다.
이 URL을 실행할 때 SearchComponent가 검색을 자동으로 실행하지 않으므로 다음 로직을 추가하여 해당 생성자에서 그렇게하십시오.
당신은이 구독을 정리하기 위해 ondestroy를 구현하고 ngondestroy 방법을 정의하고 싶을 것입니다.
<span>git clone https://github.com/mraible/ng-demo.git
</span>
.
이러한 모든 변경을 한 후에는 개인 정보를 검색/편집/업데이트 할 수 있어야합니다. 그것이 작동한다면 - 좋은 직업! 양식 검증 당신이 알아 차릴 수있는 한 가지는 양식의 입력 요소를 지우고 저장할 수 있다는 것입니다. 최소한 이름 필드가 필요합니다. 그렇지 않으면 검색 결과에서 클릭 할 것이 없습니다.
이름을 요구하려면 edit.component.html을 수정하여 .
ng new ng-demo
요소로 모든 것을 감싸 야합니다.
태그 후 을 추가하고 마지막 전에 닫습니다. 또한 (ngsubmit) 핸들러를 양식에 추가하고 저장 버튼을 일반 제출 버튼으로 변경해야합니다.
이러한 변경을 수행 한 후 필요한 속성이 필요한 필드가 필요합니다.
<span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>
이 스크린 샷에서 주소 필드가 비어 있음을 알 수 있습니다. 이것은 콘솔의 오류로 설명됩니다
수정하려면 모든 주소 필드에 이름 속성을 추가하십시오. 예를 들면 :
이제 값은 모든 필드에 표시되어야하며 이름이 필요합니다.
브라우저에 의존하는 대신 자신의 검증 메시지를 제공하려면 다음 단계를 완료하십시오.
ngnativeValidate를 제거하고 요소에 #editform = "ngform"을 추가하십시오 add #name = "ngmodel"을 요소 에 추가하십시오 저장
버튼에 [disabled] = "! editform.form.valid를 추가하십시오 이름 필드 아래에 다음을 추가하여 유효성 검사 오류를 표시합니다.
$ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64
형식 및 검증에 대해 자세히 알아 보려면 Angular Forms 문서를 참조하십시오. OKTA 에서 OpenID Connect 앱을 만듭니다 OpenID Connect (OIDC)는 OAUTH 2.0 프로토콜 위에 구축되었습니다. 이를 통해 고객은 사용자의 신원을 확인하고 기본 프로필 정보를 얻을 수 있습니다. 자세한 내용은 https://openid.net/connect를 참조하십시오 사용자 인증을 위해 OKTA를 통합하려면 먼저 OIDC 응용 프로그램을 등록하고 생성해야합니다. OKTA 계정에 로그인하거나 하나가없는 경우 작성하십시오. 응용 프로그램으로 이동하여 응용 프로그램 추가 버튼을 클릭하십시오. 스파를 선택하고 다음을 클릭하십시오. 다음 페이지에서 http : // localhost : 4200을 기본 URI, 로그인 URI 리디렉션 및 로그 아웃 리디렉션 URI로 지정하십시오. 완료를 클릭하면 다음과 같은 설정이 보일 것입니다.
NPM을 사용하여 Oauth 2 및 OpenID Connect 지원을 추가하려면 Manfred Steyer 프로젝트를 설치하십시오. src/app/app.component.ts를 수정하여 Oauthservice를 가져오고 Okta 응용 프로그램 설정을 사용하도록 앱을 구성하십시오.
<span>git clone https://github.com/mraible/ng-demo.git </span> 사용자가 인증되지 않으면 src/app/shared/auth.guard.service.ts를 만들려면 홈 클리 어 컴퍼니로 이동합니다.
SRC/SHARED/Index.ts : 에서 authguard를 내보내는
src /app /app.module.ts에서 oauthmodule을 가져오고 새 집합 요소를 구성하고 Authguard와 함께 /검색 및 /편집을 잠그십시오.
ng new ng-demo
이러한 변경을 한 후에는 NG 서빙을 실행하고 로그인 버튼을 볼 수 있어야합니다.
.
로그인 버튼을 클릭하고 OKTA 응용 프로그램에 구성된 사람 중 하나를 사용하여 로그인합니다.
<span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>
로그인 한 후
검색 를 클릭하고 사람들의 정보를 볼 수 있습니다.
작동한다면 - 훌륭합니다! 앱에서 자신의 로그인 양식을 작성하려면 OauthService와 함께 Okta Auth SDK를 사용하는 방법을 계속 읽으십시오. Okta Auth sdk $ ng <span>--version </span> _ _ ____ _ ___ / <span>\ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| </span> / △ <span>\ | '_ \ / _` | | | | |/ _` | '__| | | | | | | </span> / ___ <span>\| | | | (_| | |_| | | (_| | | | |___| |___ | | </span>/_/ <span>\_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| </span> <span>|___/ </span>@angular/cli: <span>1.3.2 </span>node: <span>8.4.0 </span>os: darwin x64 와 함께 인증 된 인증 Okta Auth SDK는 OTKA의 인증 API 및 OAUTH 2.0 API 위에 구축하여 JavaScript를 사용하여 완전 브랜드 로그인 경험을 만들 수 있습니다. npm을 사용하여 설치하십시오 :
.
이 섹션의 구성 요소는 부트 스트랩 CSS 클래스를 사용합니다. 부트 스트랩을 설치하십시오
ng serve
src/styles.css를 수정하여 부트 스트랩의 CSS 파일에 대한 참조를 추가하십시오.
Navbar 및 그리드 시스템에 부트 스트랩 클래스를 사용하려면 src/app/app.component.html을 업데이트하십시오.
src/app/shared/auth/alkta.auth.wrapper.ts를 생성하여 Okta Auth SDK를 감싸고 OauthService와 통합하십시오. 로그인 () 메소드는 Oktaauth를 사용하여 세션 토큰을 얻고 ID 및 액세스 토큰으로 교환합니다.
$ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>
위의 코드에서 Oauthservice.trylogin () Parses를 구문 분석하고 adtoken 및 ac SRC/Shared/Index.ts : 에서 OktaAuthWrapper 내보내기 <ta ta><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;git clone https://github.com/mraible/ng-demo.git &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <a> app.module.ts. 의 공급자로 OktaAuthWrapper를 추가하십시오 <p> <omp> homecomponent를 변경하여 Oktaauth를 선언하고 템플릿을 수정하여 로그인 할 수있는 버튼과 로그인 양식을 수정하십시오. </omp></p> <changes> 이러한 변경 후에는 가정 구성 요소가 다음과 같이 렌더링해야합니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">ng new ng-demo </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p> <ia> 사용자 이름 및 비밀번호 필드에 대한 로컬 변수 추가, OktaAuthWrapper를 가져오고 HomeComponent의 LoginWithPassword () 메소드를 구현하십시오. </ia></p> <able> 앱의 등록 된 사용자 중 하나를 사용하여 양식을 사용하여 로그인 할 수 있어야합니다. 로그인하면 검색 링크를 클릭하고 사람들의 정보를 볼 수 있습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;[mraible:~/dev] $ ng new ng-demo &lt;/span&gt;installing ng create .editorconfig create README.md create src/app/app.component.css create src/app/app.component.html create src/app/app.component.spec.ts create src/app/app.component.ts create src/app/app.module.ts create src/assets/.gitkeep create src/environments/environment.prod.ts create src/environments/environment.ts create src/favicon.ico create src/index.html create src/main.ts create src/polyfills.ts create src/styles.css create src/test.ts create src/tsconfig.app.json create src/tsconfig.spec.json create src/typings.d.ts create .angular-cli.json create e2e/app.e2e-spec.ts create e2e/app.po.ts create e2e/tsconfig.e2e.json create .gitignore create karma.conf.js create package.json create protractor.conf.js create tsconfig.json create tslint.json Successfully initialized git. Installing packages &lt;span&gt;for tooling via npm. &lt;/span&gt;Installed packages &lt;span&gt;for tooling via npm. &lt;/span&gt;You can &lt;span&gt;&lt;span&gt;`ng set --global packageManager=yarn`&lt;/span&gt;. &lt;/span&gt;Project &lt;span&gt;'ng-demo' successfully created. &lt;/span&gt;&lt;span&gt;[mraible:~] 46s $ &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p> <ta> angular okta </ta></p> 모든 것이 효과가 있다면 - 축하합니다! 문제가 발생하면 Okta 태그로 오버플로를 쌓거나 Twitter @Mraible에 나를 때리는 질문을 게시하십시오. <a> GitHub 의이 블로그 게시물에서 작성된 완성 된 응용 프로그램을 찾을 수 있습니다. Angular의 보안에 대한 자세한 내용은 Angular의 보안 문서를 참조하십시오. OpenID Connect에 대해 자세히 알아 보려면 아래의 진정 비디오를 시청하는 것이 좋습니다. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173967537769615.png" class="lazy" alt="앱에서 OpenID Connect 및 OKTA를 사용한 각도 인증 설정" > <questions> OIDC <p>를 사용한 각도 인증에 대한 자주 묻는 질문 (FAQ) <role> 각도 인증에서 OIDC의 역할은 무엇입니까? </role></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$ ng &lt;span&gt;--version &lt;/span&gt; _ _ ____ _ ___ / &lt;span&gt;\ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| &lt;/span&gt; / △ &lt;span&gt;\ | '_ \ / _` | | | | |/ _` | '__| | | | | | | &lt;/span&gt; / ___ &lt;span&gt;\| | | | (_| | |_| | | (_| | | | |___| |___ | | &lt;/span&gt;/_/ &lt;span&gt;\_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| &lt;/span&gt; &lt;span&gt;|___/ &lt;/span&gt;@angular/cli: &lt;span&gt;1.3.2 &lt;/span&gt;node: &lt;span&gt;8.4.0 &lt;/span&gt;os: darwin x64 </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> OpenID Connect (OIDC)는 OAUTH 2.0 프로토콜 위에 구축 된 간단한 아이덴티티 레이어입니다. 이를 통해 클라이언트는 인증 서버에서 수행 한 인증을 기반으로 최종 사용자의 신원을 확인할 수 있습니다. 각도에서 OIDC는 사용자 인증을 처리하는 데 사용됩니다. 여러 사용자 ID를 처리 할 수있는 안전하고 확장 가능한 프레임 워크를 제공하여 사용자 세션 및 액세스 제어를보다 쉽게 ​​관리 할 수 ​​있습니다. <p> angular에서 OIDC를 구현할 수있는 방법 </p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173967538041798.png" class="lazy" alt="앱에서 OpenID Connect 및 OKTA를 사용한 각도 인증 설정" > 각도에서 OIDC 구현은 어떻게 관련되어 있습니다. 몇 단계. 먼저 Angular-Auth-Oidc-Client와 같은 필요한 패키지를 설치해야합니다. 그런 다음 앱 모듈에서 OIDC 모듈을 구성하여 권한, 클라이언트 ID 및 응답 유형과 같은 필요한 매개 변수를 지정합니다. 그런 다음 OIDC 서비스를 사용하여 사용자 로그인, 로그 아웃 및 토큰 유효성 검사를 처리 할 수 ​​있습니다. <h2> Angular 처리 JWT 토큰은 어떻게 처리됩니까? </h2> JSON Web Tokens (JWT)는 각도에서 사용됩니다. JSON 개체로 당사자간에 정보를 안전하게 전송합니다. 사용자가 로그인하면 서버는 사용자의 ID가 포함 된 JWT를 생성하여 클라이언트로 보냅니다. 클라이언트는이 토큰을 저장하고 서버에 대한 모든 요청에 ​​포함시킵니다. 그런 다음 서버는 사용자가 인증되도록 토큰을 확인합니다. <p><difference> OAUTH2와 OIDC의 차이점은 무엇입니까? <h3> OAUTH2는 응용 프로그램이 HTTP 서비스에서 사용자 계정에 제한된 액세스를 얻을 수있는 프로토콜입니다. 승인에 사용됩니다. 반면, OIDC는 OAUTH2 위에 구축 된 신원 층입니다. 인증을 제공하기 위해 OAUTH2를 확장하여 응용 프로그램이 사용자의 신원을 확인할 수 있도록합니다. </h3> 각도 응용 프로그램을 어떻게 보호 할 수 있습니까? <p> </p> 각도 응용 프로그램 보안에는 여러 단계가 포함됩니다. 먼저 HTTPS를 사용하여 대중 교통에서 데이터를 암호화해야합니다. 둘째, 사용자 인증 및 세션 관리에 JWT를 사용하십시오. 셋째, 액세스 제어를 구현하여 사용자가 액세스 할 수있는 리소스를 제한하십시오. 마지막으로, 크로스 사이트 스크립팅 (XSS) 공격을 방지하기 위해 사용자 입력을 소독합니다. <h3> 각도에서 사용자 세션을 어떻게 처리 할 수 ​​있습니까? </h3> Angular의 사용자 세션은 JWT를 사용하여 처리 할 수 ​​있습니다. 사용자가 로그인하면 서버는 사용자의 ID가 포함 된 JWT를 생성하여 클라이언트로 보냅니다. 클라이언트는이 토큰을 저장하고 서버에 대한 모든 요청에 ​​포함시킵니다. 그런 다음 서버는 사용자가 인증되도록 토큰을 확인합니다. <p> 각도 Auth-Oidc-Client 패키지의 역할은 무엇입니까? </p> 각도에서 액세스 제어를 구현하려면 어떻게해야합니까? <h3> 각도의 액세스 제어는 경로 가드를 사용하여 구현할 수 있습니다. 루트 가드는 라우터에 요청 된 경로로의 탐색을 허용할지 여부를 알려주는 인터페이스입니다. 사용자의 역할 또는 인증 상태에 따라 특정 경로에 대한 액세스를 제한하는 데 사용될 수 있습니다. </h3> 각도 인증의 오류를 어떻게 처리 할 수 ​​있습니까? <p> </p> 각도 인증의 오류는 오류 처리기를 사용하여 처리 할 수 ​​있습니다. . 오류 핸들러는 매개 변수로 오류를 취하고 처리하는 함수입니다. 이를 사용하여 사용자에게 오류 메시지를 표시하거나 오류를 기록하거나 사용자를 다른 페이지로 리디렉션 할 수 있습니다. <h3> 각도 인증을 테스트 할 수있는 방법 </h3> <p> 각도 인증 테스트와 관련이 있습니다. 인증 서비스에 대한 단위 테스트 및 애플리케이션에 대한 엔드 투 엔드 테스트를 작성합니다. 단위 테스트를 위해 Jasmine 및 Karma와 같은 도구를 사용하고 엔드 투 엔드 테스트를위한 오기체를 사용할 수 있습니다. 이 테스트는 인증 프로세스가 예상대로 작동하고 오류를 올바르게 처리하는지 확인해야합니다.</p></difference></p></questions></a></able></changes></a></ta>

위 내용은 앱에서 OpenID Connect 및 OKTA를 사용한 각도 인증 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!