search
Ctrlk
WepinBlogContact

퀵스타트

이 예제에서는 JavaScript 기반의 WEB 어플리케이션에 위핀 지갑을 빠르게 통합하는 방법에 대해 설명합니다. 위핀에서는 아래 세 가지를 각각의 패키지로 제공하며, 필요에 따라서 선택하여 설정할 수 있습니다.

  • 로그인: 사용자의 위핀 지갑 로그인을 위한 OAuth 인증 토큰 및 이메일을 지원합니다.

  • 위젯: 위젯 형태로 연동된 위핀의 지갑 기능을 제공합니다.

  • 프로바이더 : 블록체인과 상호 작용하기 위한 프로바이더로, Ethereum Provider와 Wagmi Provider를 지원합니다.

circle-info

Wepin Provider를 Ethers.js 또는 Web3.js와 함께 사용하여 EVM 계열의 블록체인과 상호작용 할 수 있습니다. 자세한 내용은 프로바이더 페이지를 참고하세요.

hashtag
SDK 설치

패키지 매니저로 SDK를 설치합니다. 

npm install @wepin/login-js @wepin/sdk-js @wepin/provider-js

hashtag
SDK 초기화하기

SDK를 초기화하기 위해서는 위핀에서 사용할 app Id와 app Key가 필요합니다. 위핀 워크스페이스arrow-up-right에 가입하여 앱 정보를 등록 후 app Id와 app Key 값을 아래 코드에 붙여 넣습니다. 자세한 안내가 필요할 경우, 앱 등록 및 키 발급 페이지를 참고하세요. 

// 패키지 import
import { WepinLogin } from '@wepin/login-js'
import { WepinSDK } from '@wepin/sdk-js'
import { WepinProvider } from '@wepin/provider-js'

// WepinLogin 초기화
const wepinLogin = new WepinLogin({
    appId: 'your-wepin-app-id',
    appKey: 'your-wepin-api-key',
})

// wepin SDK 초기화
const wepinSdk = new WepinSDK({
    appId: 'your-wepin-app-id',
    appKey: 'your-wepin-api-key',
})

// WepinProvider 초기화
const WepinProvider = new WepinProvider({
    appId: 'your-wepin-app-id',
    appKey: 'your-wepin-api-key',
})
circle-exclamation

위 패키지는 클라이언트 사이드 렌더링(CSR: Client Side Rendering) 환경에서만 동작합니다. 서버 사이드 렌더링(SSR: Server Side Rendering) 환경에 대한 안내는 패키지별 설치 페이지를 참고하세요.

hashtag
다음 단계

이제 위핀 지갑을 사용할 준비를 마쳤습니다! 위핀에서 제공하는 위젯의 다양한 기능과 로그인 프로바이더를 활용하여 원하는 형태의 지갑을 구성해보세요.

circle-info

위핀 연동에 문제가 있을,경우 문의하기arrow-up-right를 통해 지원을 받아보세요.

Last updated

Was this helpful?