Webflow 통합하기

소개#

Webflow 는 웹사이트 제작 및 호스팅을 위한 SaaS 플랫폼으로, 최소한의 코드로 웹사이트를 디자인, 제작, 그리고 런칭하는 과정을 단순화하는 온라인 시각 편집기를 제공합니다.

이 글에서는 여러분의 Webflow 프로젝트에 Logto 를 통합하여 사용자 인증 기능을 원활하게 구현하는 방법을 안내합니다.

사전 조건#

1. 맞춤 코드 기능이 활성화된 Webflow 계정 (최소 'Basic' 요금제가 필요함).
2. 자체 호스팅이든 Logto Cloud 를 사용하든 실행 중인 Logto 인스턴스.

통합 단계#

준비 과정#

1. Logto 콘솔로 이동하여, “Vanilla JS” 템플릿 또는 “프레임워크 없이 생성”을 사용하여 애플리케이션을 생성하고, 앱 유형으로 "단일 페이지 애플리케이션"을 선택합니다.
2. Webflow 대시보드에서 새 사이트를 만듭니다.

JS SDK 통합#

이 단계에서는 사이트에 전역 수준의 맞춤 코드를 추가합니다. Webflow 가 정적 웹사이트인 점을 감안하여, 사용자 인증을 위해 @logto/browser (Vanilla JS) SDK 를 사용할 것입니다. NPM 을 사용할 수 없으므로, jsdelivr.com 과 같은 CDN 서비스를 통해 SDK 를 가져옵니다.

1. Webflow 대시보드에서 새로 생성한 사이트에 마우스를 올리고, 오른쪽 상단의 “기어” 아이콘을 클릭합니다.
2. 열리는 설정 페이지에서, 왼쪽 탐색 메뉴에서 “Custom code” 를 찾고, “Head code” 섹션에 아래의 JavaScript 코드를 붙여넣습니다. 앱 ID 와 엔드포인트 URL 은 Logto 애플리케이션 세부 정보에서 확인할 수 있습니다.

로그인 구현#

1. Logto 콘솔에서 애플리케이션 설정으로 이동하여, “Redirect URIs” 필드를 찾아 https://your-awesome-site.webflow.io/callback 을 입력한 후 “변경 사항 저장” 을 클릭합니다.
2. Webflow 디자이너로 돌아가 홈페이지에 “로그인” 버튼을 추가합니다. 이 튜토리얼의 간단함을 위해 우리는 또한 getElementById() 를 사용하기 위해 버튼에 ID “sign-in” 을 할당할 것입니다.

3. 이제 홈페이지에 일부 페이지 수준의 맞춤 코드를 추가해 봅시다. 페이지 메뉴에서 기어 아이콘을 클릭하고, 하단의 맞춤 코드 섹션을 찾아 아래 코드를 붙여넣어 로그인 버튼의 클릭 핸들러를 바인딩합니다.

4. Webflow 에서 새 “콜백” 페이지를 생성하고, 간단히 정적 텍스트 “리다이렉팅 중…” 을 추가합니다. 이 페이지에서 우리는 다음 맞춤 코드를 사용하여 로그인 콜백 로직을 처리할 것입니다.

5. 이제 Webflow 사이트를 배포하여 로그인 흐름을 테스트할 수 있습니다. 배포 후, 홈페이지에 “로그인” 버튼이 나타나야 합니다. 클릭하면 Logto 에서 호스팅하는 로그인 페이지로 이동합니다. 로그인 후, 먼저 “콜백” 페이지로 리다이렉트 된 후, “리다이렉팅 중…” 텍스트를 볼 수 있고, 마지막으로 다시 홈 페이지로 돌아가게 됩니다.

로그아웃 구현하기#

1. Logto 콘솔에서 애플리케이션 설정에서 “로그아웃 후 리다이렉트 URIs” 를 찾아 Webflow 사이트 URL https://your-awesome-site.webflow.io 을 입력합니다.
2. Webflow 디자이너로 돌아가 홈페이지에 “로그아웃” 버튼을 추가합니다. 마찬가지로 버튼에 ID “sign-out” 을 할당하고, 다음 코드를 페이지 수준 "맞춤 코드" 에 추가합니다.

인증 상태 처리하기#

Logto SDK 에서는 일반적으로 logtoClient.isAuthenticated() 메서드를 사용하여 인증 상태를 확인할 수 있습니다. 사용자가 로그인되어 있는 경우 값은 true; 그렇지 않으면 false 입니다.

Webflow 사이트에서도 이 메서드를 사용하여 로그인 및 로그아웃 버튼을 프로그래밍 방식으로 표시하거나 숨길 수 있습니다. 다음 맞춤 코드를 적용하여 버튼 CSS 를 적절히 조정합니다.

사용자 이름을 가져와 환영 메시지 표시하기#

1. 홈페이지에 ID “container” 를 가진 플렉스 컨테이너를 추가하고, 그 안에 ID “username” 이 있는 “Heading 1” 요소를 삽입합니다.
2. 로그인에 성공한 후 사용자 정보를 자동으로 가져오고, “Heading 1” 요소의 사용자 이름을 해당 항목으로 대체하며, 컨테이너를 표시합니다. 이 작업은 다음 맞춤 코드로 수행할 수 있습니다.

체크포인트: 애플리케이션 테스트하기#

이제, Webflow 사이트를 테스트하십시오:

1. 사이트 URL 을 배포하고 방문하면 로그인 버튼이 표시되어야 합니다.
2. 로그인 버튼을 클릭하면 SDK 가 로그인 프로세스를 시작하여 Logto 로그인 페이지로 리다이렉트됩니다.
3. 로그인 후, 사이트로 다시 리다이렉트되어 사용자 이름과 로그아웃 버튼을 볼 수 있습니다.
4. 로그아웃 버튼을 클릭하여 로그아웃 합니다.

요약#

이 튜토리얼에서는 Webflow 를 Logto 와 통합하는 방법을 설명했습니다. @logto/browser SDK 를 사용하여 몇 가지 단계만으로 여러분의 Webflow 사이트에 사용자 인증을 쉽게 통합할 수 있습니다.

더욱 자세한 내용(예: JWT 접근 토큰 가져오기 및 RBAC (역할 기반 접근 제어) 처리 등)은 전체 Webflow 통합 가이드 를 참조하십시오.

Webflow 데모는 여기 에서 읽기 전용 모드로 확인할 수 있으며, 배포된 사이트는 https://charless-trendy-site-f191c0.webflow.io/ 에서 이용할 수 있습니다.