WEPIN Developer Documentation
WepinBlogContact
한국어
한국어
  • 시작하기
    • 소개
  • 위핀
    • 특징
    • 아키텍처
      • 키 생성
      • 서명
      • 키 백업
    • 워크스페이스
      • 앱 등록 및 키 발급
      • 네트워크 및 자산 추가
      • 위젯 디자인
    • 지원 블록체인
    • 계정 추상화
  • 로그인
    • 개요
    • 소셜 로그인 인증 프로바이더
      • Email/Password
      • Google
      • Apple
      • Discord
      • Naver
      • Facebook
      • Line
      • Kakao
    • 사용자 인터페이스
    • 로그인 일원화
    • 리소스
  • 위젯 연동
    • 사전 준비
    • Web: JavaScript SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 핀 패드
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
        • 확인하기
      • 프로바이더
        • Ethereum Provider
        • Kaia Provider
        • Solana Provider
        • Wagmi Connector
      • 월렛 어댑터
        • Solana Wallet Adapter
    • Android: Java & Kotlin SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 핀 패드
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
    • iOS: Swift SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 핀 패드
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
    • Flutter SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
        • 확인하기
      • 핀 패드
        • 설치
        • 초기화하기
        • 메서드
    • React Native SDK
      • 로그인
        • 설치
        • 초기화
        • 메서드
    • Unity SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
    • Compose Multiplatform SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
        • 확인하기
  • API
    • 개요
    • 등록 절차
    • 로그인
    • 지갑 생성 및 관리
    • 토큰 및 NFT 조회
    • 트랜잭션
  • Deprecated
    • Web: JavaScript SDK
      • SDK
        • 설치
        • 초기화하기
        • 메서드
        • 확인하기
      • 프로바이더
        • Ethereum Provider
      • Wagmi Connector
    • Android: Java & Kotlin SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
    • iOS: Swift SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
    • Flutter SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
    • React Native SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
      • 프로바이더
        • EVM 호환
  • 기타
    • 로고 & 브랜드 가이드라인
Powered by GitBook
On this page
  • 패키지 매니저로 설치하기
  • <script> 태그로 설치하기

Was this helpful?

  1. Deprecated
  2. Web: JavaScript SDK
  3. SDK

설치

패키지 매니저로 설치하기

Wepin Widget Javascript SDK를 npm 패키지로 설치 가능합니다.

해당 패키지는 웹 환경에서만 사용 가능합니다. Android, iOS 하이브리드 앱(Webview)에서는 사용할 수 없습니다.

터미널에서 아래와 같이 npm install 명령어를 입력합니다.

npm install @wepin/widget-sdk

설치가 완료되면 package.json에서 아래와 "dependencies"에 추가된 것을 확인할 수 있습니다.

{
  "name": "wepin-widget-test-app",
  "version": "1.0.0",
  "description": "Wepin Widge Test App"
  "main": "app.js",
  "author": "honggildong@test.wepin.io",
  "dependencies": {
    "@wepin/widget-sdk": "^1.0.0"
  }
}

설치가 완료되면 아래와 같이 앱 ID와 앱 키를 넣고 init함수를 호출하면 wepin을 사용할 준비가 완료됩니다.

// 1. 패키지 import
import '@wepin/widget-sdk'
const testAppKey = 'ak_test_ghq1D5s1sfG234sbnhdsw24mnovk313' // 테스트용 앱 키 
const testAppId = 'app_id_eg12sf3491azgs520' // 테스트용 앱 ID
// 2. 초기화
const Wepin = window?.Wepin
const wepin = await Wepin.init( 
  testAppId,
  testAppKey  
)

<script> 태그로 설치하기

위핀 위젯을 연동할 HTML 페이지에 Javascript 파일을 추가 합니다.

스크립트 로드가 완료되면 전역 객체(window)에 Wepin이 생성 되고, 이 객체를 이용해서 초기화를 진행할 수 있습니다.

<head>
  <title>위핀 연결 하기<title>
  <!-- 1. 스크립트 추가 -->
  <script src="https://cdn.jsdelivr.net/npm/@wepin/widget-sdk@1.0.0/dist/wepin-widget-sdk.min.js" defer async></script>
</head>
<script>
  const testAppKey = 'ak_test_ghq1D5s1sfG234sbnhdsw24mnovk313' // 테스트용 앱 키 
  const testAppId = 'app_id_eg12sf3491azgs520' // 테스트용 앱 ID
  // 2. 초기화
  const wepin = await Wepin.init( 
    testAppId,
    testAppKey
  )
</script>
PreviousSDKNext초기화하기

Last updated 9 months ago

Was this helpful?