---
title: Uygulamanızdan yetkilendirme
description: Yetkilendirme akışını uygulamanızdan başlatarak mağazaya erişim izni alın.
---

Ele alacağımız ilk senaryo, yetkilendirmenin uygulamadan başlatılmasıdır. Bu senaryoda uygulama, mağaza adını mağaza sahibinden almalı ve bunu `/api/oauth/authorize` API'sine göndermelidir.

### `app/page.tsx` Dosyasını Güncelleme

- Ana sayfayı açın ve authorize-store sayfasına yönlendiren kodu ekleyin. Bunun için aşağıdaki kodu kullanabilirsiniz.

```typescript
export default function Home() {
  return (
    <main className={styles.main}>
      <div>Please wait...</div>
    </main>
  );
}
```

- Ardından tarayıcınızda [http://localhost:3000](http://localhost:3000) adresini açın. Otomatik olarak mağaza yetkilendirme sayfasına yönlendirilmeniz gerekir.

![Mağaza yetkilendirme sayfası](https://builders.ikas.com/media/ikas-dev/authorize-store-4071232a347ce0b5f217cbad4977009b.jpg)

### Yetkilendirmeyi Başlatma

- Mağaza adınızı girip Enter tuşuna bastığınızda form, `storeName` query parametresiyle `/api/oauth/authorize` API'sine yönlendirir.
- Authorize API ardından `storeName`, `state`, `client_id`, `scope` ve `redirect_uri` değerleriyle yeni bir URL oluşturur ve sizi ikas Dashboard'a yönlendirir.

### Uygulamanıza Erişim İzni Verme

- Tüm query parametreleri doğruysa uygulama erişim izni (Grant App Access) sayfasını görmeniz gerekir:

![Uygulama erişim izni sayfası](https://builders.ikas.com/media/ikas-dev/grant-app-access-9ab1b058c2813a6f05c4fea394d112a2.jpg)

- Ardından **Install App** butonuna tıklayın.

### Yetkilendirmeyi Tamamlama

- Bu adımdan sonra ikas benzersiz bir `code` üretir ve `code`, `storeName` ve `state` değerleriyle `redirect_uri` adresinize, yani `/api/oauth/callback` API'sine yönlendirir.
- Callback, `state` değerini doğrular, `code` ile `access_token` ister ve token'ı Redis'e kaydeder.
- Tüm süreç tamamlandığında ikas Dashboard'a geri yönlendirilirsiniz.

### Uygulama Yükleyicisini Kapatma

- ikas Dashboard'da bir yükleme ekranı (loader) görürsünüz. Uygulama iframe'inin üzerini kaplayan bu loader'ı kapatmak için ikas App Bridge aracılığıyla ikas Dashboard'a loader'ı kapatmasını söylememiz gerekir.
- Loader'ı kapatmak için component'inizin mount hook'una `AppBridgeHelper.closeLoader()` fonksiyonunu eklemeniz yeterlidir.

```typescript
import { AppBridgeHelper } from '@ikas/app-helpers';
AppBridgeHelper.closeLoader();
```

- Mağaza yetkilendirme sayfasını ikas Dashboard içinde görüyorsanız uygulamanızı bir mağazaya başarıyla yetkilendirmişsiniz demektir.

![ikas içindeki uygulama sayfası](https://builders.ikas.com/media/ikas-dev/app-page-ikas-4bc9988e810d26d3026c1aa09c1af7be.jpg)