프론트엔드11 웹 기반 통합 인증 (SSO) 구현 통합 인증 (SSO) 구현최근 여러 자사 서비스들을 개발하면서 전체 서비스들에 대한 통합 로그인 솔루션이 필요하게 되었습니다.통합 인증(SSO) 서비스 개발을 진행하면서 얻은 지식들을 정리하고 공유해보려고 합니다. SSO란?먼저 SSO(Single Sign-On)은 1회 사용자 인증으로 다수의 서비스에 로그인을 허용하는 통합 로그인(인증) 솔루션입니다.SSO는 여러 서비스들이 독립적으로 동작하지만 같은 회사에서 제공하는 서비스일 때 유용합니다. 기존 방식SSO를 사용하지 않고 기존 방식대로 세개의 서비스에 로그인 로직을 따로 구현할 때의 문제점은 다음과 같습니다.사용자: 세 쌍을 기억해야 합니다.서비스 개발자: 로그인 화면 세 개, 데이터 베이스 세 개, 로그인 프로세스 세 개를 각각 구현 해야 합니다.. 2024. 10. 11. 세션 기반 로그인 vs 토큰 기반 로그인 세션 기반 로그인 vs 토큰 기반 로그인유효한 사용자만 시스템 자원에 접근할 수 있도록 하는것을 접근 제어라고 합니다. 세션과 토큰에 관해 알아보기 전에 접근 제어의 개념에 대해 짚고 넘어가도록 하겠습니다. 인증과 인가접근 제어는 인증(Authentication)과 인가 (Authorization)라는 두가지의 개념을 포함하는데 두 개념이 비슷해서 혼동하는 경우가 많습니다.1. 인증인증은 사용자가 본인이 맞는지를 검증하는 절차를 의미합니다. 예시로는 아이디와 비밀번호를 통해 로그인을 하는 과정이 있습니다. 2. 인가인가는 인증된 사용자가 시스템 자원에 대한 접근 권한이 있는지 확인하는 절차를 의미합니다. 예시로는 게시글을 삭제하거나 수정할 때 작성자가 맞는지 확인하는 과정을 생각해보시면 됩니다. 세션과 .. 2024. 10. 11. (Vue 3) Custom v-directive 만들기 (Vue 3) Custom v-directive 만들기 참고문서 : https://v3.ko.vuejs.org/guide/custom-directive.html 오늘은 vue 3에서 custom v-directive를 만드는 방법을 알아보겠습니다. 만들기 앞서 v-directive란 뭔지 한번 짚고 넘어가볼게요. v-directive란? Vue로 개발을 하다보면 v-if, v-for, v-model 같은 앞에 v 접두사를 붙인 단어들을 한번씩은 사용해보게 됩니다. 이렇게 v 접두사가 붙은것들을 v-directive라고 합니다. v-directive를 사용하면 복잡한 기능을 단어 하나만 붙여서 해결하는것이 가능하기 때문에 매우 편리하고 강력한 기능이지요. 그런데 Vue에서 기본적으로 제공하는 v-direc.. 2022. 2. 21. 오픈그래프(open graph) & 트위터카드(Twitter card) 필수 속성 정리 오픈그래프(open graph) & 트위터카드(Twitter card) 필수 속성 정리 - 오픈그래프란 사이트가 SNS를 통해 공유될 때 미리보기 형식으로 나올 컨텐츠를 정하는 용도로 메타태그 안에 설정합니다. 카카오톡으로 url을 보냈을 때, 아래의 사진과 같이 사이트의 설명과 썸네일을 포함한 카드가 생기는 것을 많이 보셨을 거에요. 오픈그래프는 바로 이 카드의 내용을 설정할 때 쓰이는 것입니다. - 트위터카드는 트위터에 최적화된 오픈그래프라고 생각하면 됩니다. 보통 둘다 동시에 써주죠. 오픈그래프(SNS) 트위터카드(트위터) 오픈그래프 & 트위터카드 기본(basic) 속성 아래는 필수로 들어갈만한 속성들입니다. 속성의 이름을 보면 어떤 쓰임인지 대충 알테니 설명은 스킵하겠습니다. 보면 오픈그래프와 트.. 2022. 2. 6. Vue에서 Swiper 옵션 바인딩으로 정리하기 Vue에서 Swiper 옵션 바인딩으로 정리하기 https://swiperjs.com/demos#autoplay Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Swiper 공식 사이트의 demos를 보면 옵션들을 태그 안에다가 덕지덕지 끼워넣는 모습을 볼 수 있습니다. 그런데 옵션이 많아지다보면 코드가 매우 길어지고, 같은 옵션을 다른 슬라이드에 적용할 때도 중복이 발생하여 불편합니다. Slide 1 Slide 2 Slide 3 Vue에서는 이 긴 옵션들을 바인딩하여 코드의 가독성을 높히고, 더 .. 2022. 2. 6. Vue3에서 swiper 쓰는법 (오류 해결법) Vue3에서 swiper 사용법 (오류 해결법) swiper는 슬라이드를 만들때 사용하는 라이브러리로 많은 사랑을 받고 있습니다. 대부분의 사이트에서 슬라이드를 구현할 때 스와이퍼를 사용하죠. swiper의 공식 사이트에 가보면 기본 js 뿐만아니라 react, angular, vue의 demo 코드도 제공하기 때문에 초심자들도 따라 배우기가 쉽습니다. https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 문제 그런데 공식 사이트에서 제공하는 demo 코드.. 2022. 2. 5. 이전 1 2 다음
