# 퀵스타트

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

* 로그인: 사용자의 위핀 지갑 로그인을 위한 OAuth 인증 토큰 및 이메일을 지원합니다.
* 위젯: 위젯 형태로 연동된 위핀의 지갑 기능을 제공합니다.
* 프로바이더 : 블록체인과 상호 작용하기 위한 프로바이더로, Ethereum Provider와 Wagmi Provider를 지원합니다.

{% hint style="info" %}
Wepin Provider를 Ethers.js 또는 Web3.js와 함께 사용하여 EVM 계열의 블록체인과 상호작용 할 수 있습니다. 자세한 내용은 [프로바이더 페이지](/widget-integration/web-javascript-sdk/provider.md)를 참고하세요.
{% endhint %}

### SDK 설치

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

{% tabs %}
{% tab title="npm" %}

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

{% endtab %}

{% tab title="yarn" %}

```sh
yarn add @wepin/login-js @wepin/sdk-js @wepin/provider-js
```

{% endtab %}
{% endtabs %}

### SDK 초기화하기

SDK를 초기화하기 위해서는 위핀에서 사용할 app Id와 app Key가 필요합니다. [위핀 워크스페이스](https://workspace.wepin.io/)에 가입하여 앱 정보를 등록 후 app Id와 app Key 값을 아래 코드에 붙여 넣습니다. 자세한 안내가 필요할 경우, [앱 등록 및 키 발급 페이지](/wepin/workspace/app-registration-and-key-issuance.md)를 참고하세요. 

```javascript
// 패키지 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',
})
```

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

### 다음 단계

이제 위핀 지갑을 사용할 준비를 마쳤습니다! 위핀에서 제공하는 [위젯의 다양한 기능](/widget-integration/web-javascript-sdk/widget/methods.md)과 [로그인 프로바이더](broken://pages/vxTFuTdrmfqTTqNlqGfS)를 활용하여 원하는 형태의 지갑을 구성해보세요.

{% hint style="info" %}
위핀 연동에 문제가 있을,경우 [문의하기](https://mail.google.com/mail/u/0/?to=wepin.contact@iotrust.kr\&su=%EB%AC%B8%EC%9D%98%ED%95%98%EA%B8%B0%5BGeneral%5D\&body=%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94.+%EA%B4%80%EB%A0%A8+%EB%AC%B8%EC%9D%98+%EC%82%AC%ED%95%AD%EC%9D%84+%EC%9E%85%EB%A0%A5%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94.\&fs=1\&tf=cm)를 통해 지원을 받아보세요.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wepin.io/get-started/undefined.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.