패스키를 SvelteKit에 통합하는 방법-JS 튜토리얼-php.cn

패스키를 SvelteKit에 통합하는 방법

DDD

풀어 주다： 2024-09-13 06:24:02

원래의

1096명이 탐색했습니다.

How to Integrate Passkeys into SvelteKit

이 튜토리얼에서는 암호 키 인증을 통합하는 샘플 SvelteKit 애플리케이션을 구축하는 과정을 안내합니다. 안전하고 비밀번호 없는 인증을 위해 Corbado의 패스키 UI 구성요소를 원활하게 통합하는 방법을 보여드리겠습니다. 그 과정에서 Corbado Node.js SDK를 사용하여 서버에서 사용자 데이터를 검색하는 방법도 보여드리겠습니다.

여기에서 전체 원본 튜토리얼을 확인하세요

전제 조건

자세히 알아보기 전에 Svelte, JavaScript, HTML 및 CSS에 대해 잘 알고 있어야 합니다. 또한 개발 시스템에 Node.js와 NPM이 설치되어 있어야 합니다.

패스키가 있는 SvelteKit의 프로젝트 구조

기본 SvelteKit 프로젝트 구조를 설정하는 것부터 시작하겠습니다. 코드 복사

.
├── .env
├── package.json
└── src
    ├── app.html
    └── routes
        ├── +layout.svelte
        ├── +layout.server.ts
        ├── +page.svelte
        └── profile
            ├── +page.server.ts
            └── +page.svelte

로그인 후 복사

이것이 우리가 작업하게 될 필수 레이아웃입니다. 이 튜토리얼에서는 대부분의 다른 파일을 무시할 수 있습니다.

SvelteKit 프로젝트 설정

시작하려면 다음 명령을 사용하여 새 Svelte 프로젝트를 초기화하세요.

npm create svelte@latest example-passkeys-svelte
cd example-passkeys-svelte
npm install

로그인 후 복사

설정 중에 다음 옵션을 선택할 수 있습니다.

앱 템플릿: 스켈레톤 프로젝트
유형 확인: TypeScript를 사용하고 있지만 선호도에 따라 자유롭게 선택하세요.
추가 옵션: 코드 품질과 형식 지정을 위해 ESLint 및 Prettier를 권장합니다.

다음으로 Corbado의 web-js 및 node-sdk 패키지를 설치합니다.

npm i @corbado/web-js @corbado/node-sdk
npm i -D @corbado/types

로그인 후 복사

로컬에서 프로젝트를 실행하여 설정을 확인하세요.

npm run dev

로그인 후 복사

기본 Svelte 스켈레톤 앱은 http://localhost:5173에서 사용할 수 있습니다.

Corbado로 패스키 추가하기

1단계: Corbado 계정 및 프로젝트 설정

Corbado 개발자 패널에 가입하고 새 프로젝트를 만드세요. 제품으로 "Corbado Complete"를 선택하고 프레임워크로 "Svelte"를 지정합니다. 애플리케이션 URL을 정의하고 신뢰 당사자 ID를 localhost로 설정합니다. 그런 다음 환경 변수에 저장해야 하는 프로젝트 ID와 API 비밀번호를 검색하세요.

프로젝트의 .env 파일에 추가하세요.

PUBLIC_CORBADO_PROJECT_ID=your-corbado-project-id
CORBADO_API_SECRET=your-corbado-api-secret

로그인 후 복사

2단계: 암호키 UI 구성 요소 포함

먼저 서버 측 렌더링(SSR)은 현재 Corbado의 web-js 패키지에서 지원되지 않으므로 비활성화합니다. 다음 내용으로 레이아웃.서버.ts 파일을 만듭니다.

export const ssr = false;

로그인 후 복사

그런 다음 Corbado 암호 키 UI 구성 요소를 외부 레이아웃 구성 요소에서 초기화하여 프런트엔드에 삽입하세요. 이렇게 하면 Corbado가 초기화된 후에만 앱의 나머지 부분이 렌더링됩니다.

<script lang="ts">
  import Corbado from "@corbado/web-js";
  import { onMount } from "svelte";
  import { PUBLIC_CORBADO_PROJECT_ID } from '$env/static/public';let isInitialized = false;
  onMount(async () => {
    await Corbado.load({
      projectId: PUBLIC_CORBADO_PROJECT_ID,
      darkMode: 'off',
      setShortSessionCookie: true,
    });
    isInitialized = true;
  });
</script>
<div>
  {#if isInitialized}
    <slot></slot>
  {/if}
</div>

로그인 후 복사

3단계: 홈 페이지 수정

src/routes/page.svelte에 가입 및 로그인 UI 구성 요소를 통합합니다. 인증이 완료되면 사용자를 /프로필 페이지로 리디렉션하세요.

<script lang="ts">
  import Corbado from '@corbado/web-js';
  import { onMount } from 'svelte';let authElement;
  onMount(() => {
    Corbado.mountAuthUI(authElement, {
      onLoggedIn: () => window.location.href = "/profile",
    });
  });
</script>
<div bind:this={authElement}></div>

로그인 후 복사

4단계: 프로필 페이지 설정

/profile 경로 아래에 Corbado의 Node SDK를 사용하여 사용자 정보를 검색하고 표시할 프로필 페이지를 만듭니다.

page.server.ts에서 세션 쿠키를 검색하고 사용자 데이터를 반환합니다.

import { SDK, Config } from '@corbado/node-sdk';
import { PUBLIC_CORBADO_PROJECT_ID } from '$env/static/public';
import { CORBADO_API_SECRET } from '$env/static/private';

const config = new Config(PUBLIC_CORBADO_PROJECT_ID, CORBADO_API_SECRET);
const sdk = new SDK(config);
export async function load({ request }) {
  const cookies = parseCookies(request.headers.get('Cookie') || '');
  const cbo_short_session = cookies.cbo_short_session;
  if (!cbo_short_session) return { user: undefined };
  try {
    const user = await sdk.sessions().getCurrentUser(cbo_short_session);
    if (!user.isAuthenticated()) return { user: undefined };
    return { user: { email: user.getEmail(), userID: user.getID() } };
  } catch {
    return { user: undefined };
  }
}
function parseCookies(cookieHeader) {
  return Object.fromEntries(
    cookieHeader.split(';').map(cookie => {
      const [name, ...rest] = cookie.trim().split('=');
      return [name, rest.join('=')];
    })
  );
}

로그인 후 복사

해당 페이지에서는 당사 로더의 데이터에 액세스하여 사용자 이름과 사용자 ID를 표시하고 로그아웃 버튼을 제공합니다. 사용자가 로그인하지 않은 경우 홈페이지로 돌아가는 링크가 표시됩니다.

<script lang="ts">
    import type { PageData } from './$types';
    import Corbado from '@corbado/web-js';
    import { goto } from '$app/navigation';

    export let data: PageData

    async function handleLogout() {
        await Corbado.logout()
        await goto("/")
    }
</script>

<div>
    {#if (data.user)}
        <h1>
            Profile Page
        </h1>
        <p>
            User-id: {data.user.userID}
        </p>
        <p>
            Name: {data.user.email}
        </p>
        <button on:click={handleLogout}>
            Logout
        </button>
    {:else}
        <h1>
            You aren't logged in.
        </h1>
        <p>Go <a href="/">Home</a></p>
    {/if}
</div>

로그인 후 복사

애플리케이션 실행

모든 것이 설정되면 애플리케이션을 실행하세요.

npm run dev

로그인 후 복사

패스키 인증이 포함된 SvelteKit 앱이 이제 활성화되었습니다. 로그인하면 사용자의 ID와 이메일이 표시된 프로필 페이지로 리디렉션됩니다.

결론

이 가이드에서는 Corbado의 암호 키 인증을 SvelteKit 앱에 통합하는 방법을 보여주었습니다. 이 접근 방식은 Corbado의 구현이 간단한 UI 구성 요소를 사용하여 안전하고 비밀번호 없는 환경을 제공합니다. 이제 이를 확장하고 세션 관리나 다중 장치 지원과 같은 고급 기능을 탐색할 수 있습니다.

위 내용은 패스키를 SvelteKit에 통합하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!