スマレジ・アプリマーケットのアプリ開発のはじめ方 ④アプリアクセストークン取得APIの使い方（全5回）

# はじめに

スマレジ・デベロッパーズについて学んできたことを、『スマレジ・アプリマーケットのアプリ開発のはじめ方』というタイトルで投稿します。全 5 回中の 4 回目です。

https://developers.smaregi.jp/

スマレジ公式のチュートリアル、その他開発パートナーの方が書いた Qiita 記事などを参考にしながら、調べたり手を動かしてきた内容について、記事にしていきます。

## 投稿内容（全 5 回）

本連載は以下の順序で投稿します。

- [① スマレジ・デベロッパーズとは](https://qiita.com/ryamate/items/e04e0ef65cc676afa5d0)
- [② スマレジ・デベロッパーズのアカウント登録](https://qiita.com/ryamate/items/33d760144cfb2fd73fb1)
- [③ アプリの新規登録](https://qiita.com/ryamate/items/fa9d26b87c3d1ef38a2b)
- **④ アプリアクセストークン取得 API の使い方**
- [⑤ 商品一覧取得 API の使い方](https://qiita.com/ryamate/items/e16e5547f539853f4d6e)

今回は、 **④ アプリアクセストークン取得 API の使い方** についてです。Postman を利用して、スマレジ・プラットフォーム API のアプリアクセストークン取得をテストする手順です。

## 目次

[1. Postman のアカウント登録](#1-postman-のアカウント登録)
　[1-1. Postman アプリのダウンロード](#1-1-postman-アプリのダウンロード)
　[1-2. Postman のアカウント登録](#1-2-postman-のアカウント登録)
　[1-3. ログイン後の画面準備](#1-3-ログイン後の画面準備)
[2. Postman での API 送信の設定](#2-postman-での-api-送信の設定)
　[2-1. Collection・request（HTTPリクエスト）の作成](#2-1-collectionrequesthttpリクエストの作成)
　[2-2. request（HTTPリクエスト）の設定](#2-2-requesthttpリクエストの設定)
　[2-3. 環境変数の設定](#2-3-環境変数の設定)
[3. リクエスト送信](#3-リクエスト送信)


# 1. Postman のアカウント登録

Postman は API の HTTP リクエスト、レスポンスをテストできるアプリです。

> Postmanは、APIを構築および使用するためのAPIプラットフォームです。Postmanは、APIライフサイクルの各ステップを簡素化し、コラボレーションを合理化するため、より優れたAPIをより迅速に作成できます。
> 

https://www.postman.com/product/what-is-postman/

<br>

Postman を利用するために、アカウント登録します。
Postman にアカウント登録済みの場合は、「2. Postman でのAPIテスト」に進みます。

<br>

※ Visual Studio Code の拡張機能である [Thunder Client](https://github.com/rangav/thunder-client-support) は Postman とほぼ同様の使用感で利用できると思いますので、Thunder Client でも問題ないかと思います。

## 1-1. Postman アプリのダウンロード

下記ページより、 Postman アプリ（zipファイル）をダウンロードします。（Mac Intel Chip、Mac Apple ChipやWindowsを選択します。Macの画面で以下進めます。）

https://www.postman.com/downloads/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/81b4b837-d8aa-1340-69a4-7f156bfb31ee.png)

ダウンロードした zip ファイルを解凍すると、「Postman.app」という名前のアプリケーションファイルが展開されるので、アプリケーションフォルダに移動し、アプリを開きます。

## 1-2. Postman のアカウント登録

Postman のアカウントを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/a24b0a50-4644-b192-7377-559447c72b98.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/f592a06a-9782-558d-90f7-5b6af3bf5f3d.png)

ここでは詳細を省略しますが、その後も画面の指示に従い、進めていきます。

## 1-3. ログイン後の画面準備

ログイン後の Postman アプリ画面です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/6994b90c-dfb5-0181-16b0-e675f697d281.png)

Workspaces タブから My Workspace を押し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/66d58c8b-946b-80d3-111a-83970172140d.png)

スタンバイOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/d426696f-d295-0fc1-2c04-be3b4f7d6e64.png)

# 2. Postman での API 送信の設定

※ スマレジ公式のチュートリアルの対応箇所はこちらです。

https://note.com/smaregi_devtaro/n/n4344414aa2d4

Postman を利用し、アプリアクセストークンを取得します。

アプリからユーザーのデータに API アクセスするには、アプリアクセストークンを取得する必要があります。

## 2-1. Collection・request（HTTPリクエスト）の作成

### Collectionの作成

「Collection」と「request」は、「フォルダ」と「ファイル」の関係性のような感じです。
Postman の左サイドバーの「Collections」 → 画面左上「＋」（Create new Collection）を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/68db6df9-0904-a5c1-0326-ec8d617027f9.png)

Collection が作成されました。 Collection の名前はなんでも大丈夫です。（ここでは「スマレジ・プラットフォームAPI」と付けています。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/53cf7ed3-5c91-ecfd-2e08-d2cafe6d32f3.png)

### request（HTTPリクエスト）の作成

「Add a request」を押します。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/19e64b54-c1b0-97ba-5ca7-f6513506e3ea.png)

request は「アプリアクセストークン取得」と名付けています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/6124ae45-3bbf-78e8-7fcb-3035f2de760d.png)

## 2-2. request（HTTPリクエスト）の設定

### アプリアクセストークン発行用エンドポイントの設定

アプリアクセストークン発行用のエンドポイントに、リクエストパラメータと一緒に POST する設定をします。

**エンドポイント**
※ [共通仕様書](https://developers.smaregi.dev/apidoc/common/#:~:text=POST%20https%3A//id.smaregi.dev/app/%7B%E5%A5%91%E7%B4%84ID%7D/token) に記載があります。

```
POST https://id.smaregi.dev/app/{契約ID}/token
```

環境変数を使用できるため、以下のように記述しておきます。（環境変数は後ほど設定します。）

```
https://id.smaregi.dev/app/{{CONTRACT_ID}}/token
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/16c789c2-9be7-6afe-ef3e-72f2faf88148.png)

<br>

### リクエストヘッダー・リクエストボディの入力

「Authorization」タブを開いて、下記のとおり選択＆入力します。 契約ID同様に環境変数を設定しておきます。

|  |  |
| --- | --- |
| Type | Basic Auth |
| Username | `{{CLIENT_ID}}` |
| Password | `{{CLIENT_SECRET}}` |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/4c161e4f-732e-5e38-803d-c8ccb8a58269.png)

「Body」タブについて、「x-www-form-urlencoded」（Content-Type）を選択します。（選択することで、ヘッダーに「`Content-Type: x-www-form-urlencoded`」が追加されます）

|  |  |
| --- | --- |
| `grant_type` | `client_credentials` |
| `scope` | （空） |

※ スコープは、使用するAPIによって指定します。今回は空で送信します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/3eeae5ec-2d79-1e90-e51f-f782cfb3beb1.png)

入力したら、画面右上のほうの「Save」を押しておきましょう。

<br>

## 2-3. 環境変数の設定

### 契約ID・クライアントID・クライアントシークレットの確認

環境変数として設定する下記について、スマレジ・デベロッパーズ管理画面で確認します。

|  |  |
| --- | --- |
| `CONTRACT_ID` | 契約ID |
| `CLIENT_ID` | クライアントID |
| `CLIENT_SECRET` | クライアントシークレット |

スマレジデベロッパーズトップ画面左上で、「契約ID」を確認します。

アプリを新規登録したときに発行されている「クライアントID」と「クライアントシークレット」を確認できるページは、以下のとおりページを進みます。

:::note
**サイドバー「トップ」 → 「アプリ」 → 「パブリックアプリ」 → 「概要を見る」 → 「環境設定タブ（/ 開発タブ）」**
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/2380adea-5845-752a-4e9a-285716390cf5.png)

### 環境変数の設定

Postman画面左サイドバーの「Environments」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/8a159a6f-8070-f1aa-925c-e8e04667d35a.png)

名前はなんでも大丈夫ですが、「開発_スマレジ・プラットフォームAPI」と付けています。

確認した内容の通り、変数名と値（契約IDなど）を入力します。

| VARIABLE | INITIAL VALUE |
| --- | --- |
| `CONTRACT_ID` | `sb_●●●●●●●●`（先ほど確認した「契約ID」） |
| `CLIENT_ID` | 「クライアントID」 |
| `CLIENT_SECRET` | 「クライアントシークレット」 |

※ 「TYPE」については、default、secretなど、適宜設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/9531da77-d009-e867-5e3c-c55d5333d72a.png)

### 環境変数の有効化

「スマレジ・プラットフォームAPI_サンドボックス」を「active」に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/440ed899-6e61-8001-25e2-78d40a40691a.png)

### 環境変数の保存

「スマレジ・プラットフォームAPI_サンドボックス」を「Save」します。 ※「Save」については、リクエスト、環境変数ともに必要ですが、以降記載省略することがありますので適宜お願いします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/b270f614-99bf-3ff5-39b5-0a4b37a32a49.png)

# 3. リクエスト送信

「Send」を押すと、アプリアクセストークンが取得できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/5dcc3a85-3a01-7806-ead9-76ccbd3561b9.png)


# おわりに

今回は、 **④ アプリアクセストークン取得 API の使い方** でした。

次回は、 **[⑤ 商品一覧取得 API の使い方](https://qiita.com/ryamate/items/e16e5547f539853f4d6e)** です。Postman で実際にスマレジ・プラットフォーム API の一つである、商品一覧取得 API を使用してみます。

ありがとうございました。