OKTA를 사용하여 VUE 앱에 인증을 추가하는 방법

이 튜토리얼은 백엔드 REST API를 통한 CRUD 작업을 포함하여 OKTA의 OpenID Connect (OIDC) API가 확보 한 vue.js 응용 프로그램을 구축함으로써 안내합니다. 우리는 vue-cli, vue-router 및 okta vue sdk와 함께 vue.js를 사용하고 node.js, express, okta jwt verifier, sequelize 및 epilogue와 함께 백엔드를 사용할 것입니다.

주요 기능 :

OKTA의 OIDC API를 사용한 보안 인증 Vue-Cli의 PWA 템플릿을 사용한 vue.js 프로젝트 스캐 폴딩 인증 흐름 관리 및 경로 보호를위한 okta vue sdk. CRUD 작업을위한 Backend REST API 서버 (Node, Express, Sequelize).

인증 상태를 기반으로 한 동적 탐색 인증 및 CRUD 기능의 포괄적 인 테스트

vue.js에 대한 : vue.js는 사용자 친화적이고 강력한 JavaScript 프레임 워크입니다. 고성능 웹 애플리케이션을 구축하는 데 이상적입니다.

이 튜토리얼은 Frontend Spa (홈페이지, 로그인/로그 아웃, 게시물 관리자) 및 백엔드 REST API 서버 (Express, Sequelize, Epilogue)를 만듭니다. Okta의 OIDC는 Okta Vue SDK를 통한 인증을 처리합니다. 서버는 OKTA의 JWT Verifier Middleware에서 검증 한 JWT 기반 인증을 사용합니다. 노출 된 엔드 포인트 (
• ,
, , , ) 모두 유효한 액세스 토큰이 필요합니다.
• vue.js 앱을 설정 :
• 를 사용하여 프로젝트를 발판하려면 :
이것은 핫 재 장전 및 장치 테스트와 같은 기능을 갖춘 PWA를 만듭니다.
• > 부트 스트랩 설치 :
부트 스트랩 뷰로 UI를 향상시킵니다
부트 스트랩 뷰와 그 CSS를 포함하도록 를 수정하십시오 Okta 인증 통합 :
OKTA 개발자 계정에서 OIDC 애플리케이션을 만듭니다 OKTA VUE SDK를 설치하십시오 는 Okta의 플러그인으로 라우터 ()를 구성하여 자리 표시기를 OKTA 도메인 및 클라이언트 ID로 대체합니다. 경로 보호를 위해

를 구현하십시오

앱 레이아웃 사용자 정의 :

수정

를 사용하여 사용자의 인증 상태를 기반으로 "로그인"또는 "로그 아웃"을 동적으로 표시하도록 수정하십시오. Okta Vue SDK가 제공 한 객체를 사용하여 로그인 및 로그 아웃 방법을 구현하십시오.

백엔드 REST 생성 API 서버 :

의 종속성 설치 :
1. 생성 . 이 파일은 Express를 설정하고 속편 (SQLITE를 위해 SQLITE 사용), REST 엔드 포인트 생성을위한 에필로그 및 인증을위한 Okta JWT Verifier Middleware를 설정합니다. npm i --save express cors @okta/jwt-verifier sequelize sqlite3 epilogue axios 게시물 관리자 구성 요소 완료 :
2. 중앙 집중식 API 상호 작용을 위해 를 작성하십시오. 이 헬퍼는 API 요청에 액세스 토큰을 추가하는 것을 처리합니다. 그런 다음 ./src/server.js 헬퍼 함수를 ​​사용하여 CRUD 작업을 구현하려면 를 완료하십시오.
응용 프로그램 테스트 : 서버 ()와 프론트 엔드 ()를 실행하십시오. 테스트 인증 및 CRUD 기능

추가 리소스 :

vue.js ./src/api.js [Okta Developer Blog] (원본 블로그 게시물 URL- 사용 가능한 경우 실제 URL로 교체) github 리포지토리 ./src/components/PostsManager.vue api

(FAQS 섹션은 튜토리얼에서 이미 다루는 정보의 반복으로 제거되었습니다.)

위 내용은 OKTA를 사용하여 VUE 앱에 인증을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!