# 설치

## 요구사항 <a href="#requirements" id="requirements"></a>

* **Android**: API 버전 <mark style="color:blue;">**21**</mark> 이상
  * `android/app/build.gradle` 파일에서 `compileSdkVersion`을 <mark style="color:blue;">**34**</mark>로 설정해야 합니다.
* **iOS**: 버전 <mark style="color:blue;">**13.0**</mark> 이상
  * Flutter 프로젝트의 `ios/Podfile`에서 `platform :ios` 버전을 <mark style="color:blue;">**13.0**</mark> 으로 업데이트하고, 필요에 따라 `ios/Podfile`을 확인하고 수정해야 합니다.

{% hint style="info" %}
해당 패키지는  **Android**, **iOS** 환경에서만 사용 가능합니다. **Web**, **MacOS**, **Window**, **Linux** 환경에서는 사용할 수 없습니다.&#x20;
{% endhint %}

## 설치하기 <a href="#installation" id="installation"></a>

Wepin Flutter Widget SDK는 [pub.dev](https://pub.dev/packages/wepin_flutter_widget_sdk)에 배포되어 있으며, 아래 명령어나 앱의 `pubspec.yaml`에 dependency를 추가하여 설치할 수 있습니다.

#### Flutter pub add 명령어로 추가 <a href="#add-using-flutter-pub-add-command" id="add-using-flutter-pub-add-command"></a>

```sh
$ flutter pub add wepin_flutter_widget_sdk
```

#### pubspec.yaml 의 dependency 에 `wepin_flutter_widget_sdk`추가 <a href="#add-to-dependencies-in-pubspec.yaml" id="add-to-dependencies-in-pubspec.yaml"></a>

```yaml
dependencies:
    wepin_flutter_widget_sdk: ^0.0.1
```

## 설정하기 <a href="#configuration" id="configuration"></a>

### Deep Link 설정  <a href="#deep-link-configuration" id="deep-link-configuration"></a>

OAuth 로그인 기능(`login.loginWithOauthProvider`)을 활성화하려면 Deep Link 스킴을 설정해야 합니다.

* **Deep Link scheme format** : `wepin. + Wepin 앱 ID`

**Android**

* `build.gradle (app)` 파일에서 `manifestPlaceholders`를 추가하여 Wepin Widget SDK가 이 커스텀 스킴을 통한 모든 리디렉션을 쉽게 캡처할 수 있도록 설정합니다.

{% code title="build.gradle(app)" %}

```gradle
// Deep Link 설정 => 리디렉션 스킴 형식: wepin. + Wepin 앱 ID
android.defaultConfig.manifestPlaceholders = [
  'appAuthRedirectScheme': 'wepin.{{YOUR_WEPIN_APPID}}'
]
```

{% endcode %}

**iOS**

* 인증 프로세스 후 앱으로 다시 리디렉션하기 위해 앱의 URL 스킴을 `Info.plist` 파일에 추가해야 합니다.&#x20;

<pre class="language-xml" data-title="Info.plist"><code class="lang-xml"><strong>&#x3C;key>CFBundleURLTypes&#x3C;/key>
</strong>&#x3C;array>
    &#x3C;dict>
        &#x3C;key>CFBundleURLName&#x3C;/key>
        &#x3C;string>unique name&#x3C;/string>
        &#x3C;key>CFBundleURLSchemes&#x3C;/key>
        &#x3C;array>
            &#x3C;string>wepin.{{YOUR_WEPIN_APPID}}&#x3C;/string>
        &#x3C;/array>
    &#x3C;/dict>
&#x3C;/array>
</code></pre>

### Permission 설정 <a href="#permission-configuration" id="permission-configuration"></a>

Wepin Flutter Widget SDK를 사용하려면 카메라 접근 권한이 필요합니다. 카메라 기능은 QR 코드 형식의 주소를 인식하는 데 필수적입니다. \[[Reference: permission\_handle](https://pub.dev/packages/permission_handler)]

**Android**

앱의 `AndroidManifest.xml` 파일에 아래 줄을 추가합니다.

{% code title="AndroidManifest.xml" %}

```xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.INTERNET" />
  <!-- ... -->
</manifest>
```

{% endcode %}

**iOS**

1. **`Podfile` 업데이트**: Podfile 파일에 카메라 권한을 추가합니다.

{% code title="Podfile " %}

```ruby
post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)

    target.build_configurations.each do |config|
       # 자세한 정보는 https://github.com/BaseflowIT/flutter-permission-handler/blob/master/permission_handler/ios/Classes/PermissionHandlerEnums.h 를 참조하세요.
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
        '$(inherited)',
        ## dart: PermissionGroup.camera
        'PERMISSION_CAMERA=1',
        ]
    end
  end
end
```

{% endcode %}

2. **`Info.plist`업데이트**: 필요한 권한 사용 설명을 추가합니다.

{% code title="Info.plist" %}

```xml
다<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <!-- 🚨 Keep only the permissions used in your app 🚨 -->
  <key>NSCameraUsageDescription</key>
  <string>YOUR TEXT</string>
  <!-- … -->
</dict>
</plist>
```

{% endcode %}