Logto 테넌트에 애플리케이션을 등록하고, SDK를 설치하여 로그인 기능을 구현하는 방법을 안내합니다. React 예시를 기준으로 설명하며, 다른 프레임워크에도 동일한 흐름이 적용됩니다. --- ## 2.1 Admin Console에서 앱 등록 ### Step 1: 애플리케이션 유형 선택 Admin Console → **Applications** → **Create application**을 클릭합니다. | 앱 유형 | 설명 | 예시 | |---------|------|------| | Single Page App (SPA) | 브라우저에서 실행되는 프론트엔드 앱 | React, Vue, Angular | | Traditional Web | 서버에서 렌더링되는 웹 앱 | Next.js SSR, Django, Rails | | Native App | 모바일/데스크탑 앱 | iOS, Android, Electron | | Machine to Machine | 서버 간 통신 | API 서버, cron job | React 앱의 경우 **Single Page App**을 선택합니다. ### Step 2: 앱 기본 정보 입력 ``` App name: My React App ``` **Create application** 버튼을 클릭하면 앱이 생성됩니다. ### Step 3: Redirect URI 설정 생성된 앱의 설정 페이지에서 **Redirect URIs**를 등록합니다. ``` Redirect URI: http://localhost:3000/callback Post sign-out URI: http://localhost:3000/ ``` > 운영 환경에서는 `https://yourdomain.com/callback` 형태로 변경하십시오. ### Step 4: 앱 인증 정보 확인 설정 페이지 상단에서 다음 값을 확인하고 메모하십시오. ``` App ID: your-app-id App Secret: your-app-secret (Traditional Web, M2M만 해당) Endpoint: https://your-tenant-id.logto.app ``` --- ## 2.2 SDK 설치 및 초기화 ### React SDK 설치 ```bash npm install @logto/react # 또는 yarn add @logto/react ``` ### LogtoProvider 설정 앱의 최상위 컴포넌트에 `LogtoProvider`를 감쌉니다. ```tsx // src/index.tsx 또는 src/main.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import { LogtoProvider, LogtoConfig } from '@logto/react'; import App from './App'; const config: LogtoConfig = { endpoint: 'https://your-tenant-id.logto.app', appId: 'your-app-id', }; ReactDOM.createRoot(document.getElementById('root')!).render( ); ``` --- ## 2.3 로그인 / 로그아웃 구현 ### useLogto 훅 사용 ```tsx // src/components/AuthButton.tsx import { useLogto } from '@logto/react'; export function AuthButton() { const { signIn, signOut, isAuthenticated, isLoading } = useLogto(); if (isLoading) return

로딩 중...

; if (isAuthenticated) { return ( ); } return ( ); } ``` ### 콜백 페이지 처리 로그인 후 Redirect URI로 돌아올 때 인증 코드를 처리합니다. ```tsx // src/pages/Callback.tsx import { useEffect } from 'react'; import { useLogto } from '@logto/react'; import { useNavigate } from 'react-router-dom'; export function Callback() { const { handleSignInCallback } = useLogto(); const navigate = useNavigate(); useEffect(() => { handleSignInCallback(window.location.href) .then(() => navigate('/')) .catch(console.error); }, []); return

로그인 처리 중...

; } ``` ### 라우터 설정 (React Router v6) ```tsx // src/App.tsx import { Routes, Route } from 'react-router-dom'; import { Callback } from './pages/Callback'; import { Home } from './pages/Home'; export default function App() { return ( } /> } /> ); } ``` --- ## 2.4 사용자 정보 가져오기 ### 기본 클레임 조회 ```tsx // src/pages/Profile.tsx import { useLogto } from '@logto/react'; import { useEffect, useState } from 'react'; export function Profile() { const { fetchUserInfo, isAuthenticated } = useLogto(); const [userInfo, setUserInfo] = useState(null); useEffect(() => { if (isAuthenticated) { fetchUserInfo().then(setUserInfo); } }, [isAuthenticated]); if (!userInfo) return null; return (

프로필

이름: {userInfo.name}

이메일: {userInfo.email}

); } ``` ### 접근 토큰(Access Token) 획득 API 서버 호출 시 Bearer 토큰이 필요한 경우: ```tsx import { useLogto } from '@logto/react'; function useApiClient() { const { getAccessToken } = useLogto(); const fetchData = async (url: string) => { const token = await getAccessToken('https://api.yourapp.com'); const response = await fetch(url, { headers: { Authorization: `Bearer ${token}`, }, }); return response.json(); }; return { fetchData }; } ``` > Access Token을 사용하려면 먼저 Admin Console에서 **API Resources**를 등록해야 합니다. 자세한 내용은 [Logto 인가(Authorization) 설정](/spaces/iam/wiki) 페이지를 참고하십시오. --- ## 2.5 인증 보호 라우트 로그인한 사용자만 접근할 수 있는 페이지를 보호합니다. ```tsx // src/components/ProtectedRoute.tsx import { useLogto } from '@logto/react'; import { Navigate } from 'react-router-dom'; interface Props { children: React.ReactNode; } export function ProtectedRoute({ children }: Props) { const { isAuthenticated, isLoading } = useLogto(); if (isLoading) return

로딩 중...

; if (!isAuthenticated) return ; return <>{children}; } ``` --- ## 2.6 Next.js 연동 (참고) Next.js App Router 기반 프로젝트의 경우: ```bash npm install @logto/next ``` ```ts // app/logto.ts import LogtoClient from '@logto/next'; export const logtoClient = new LogtoClient({ appId: process.env.LOGTO_APP_ID!, appSecret: process.env.LOGTO_APP_SECRET!, endpoint: process.env.LOGTO_ENDPOINT!, baseUrl: process.env.APP_BASE_URL!, cookieSecret: process.env.LOGTO_COOKIE_SECRET!, cookieSecure: process.env.NODE_ENV === 'production', }); ``` ```ts // app/api/logto/[action]/route.ts import { logtoClient } from '@/app/logto'; export const GET = logtoClient.handleAuthRoutes(); ``` --- ## 다음 단계 앱 연동이 완료되었습니다. 이메일, 소셜 로그인, MFA 등 다양한 인증 방식을 설정할 수 있습니다. > **다음**: [Logto 인증 방식 설정](/spaces/iam/wiki) — 이메일, 소셜 로그인, OTP, MFA 설정 --- *참고: Logto React SDK — https://docs.logto.io/sdk/react*

Keycloak (키클록) 가이드

댓글