> For the complete documentation index, see [llms.txt](https://docs.wepin.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wepin.io/get-started/undefined.md).

# 퀵스타트

이 예제에서는 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 %}