【アプリ開発者向け】アプリ追加後の動作について解説

カラーミーショップ アプリストアでは、カラーミーショップユーザーのショップ運営をサポートする機能（アプリ）を販売いただくことができます。

今回は、アプリを販売したいデベロッパーさん向けにアプリインストール後の挙動と仕様について解説いたします。
「デベロッパーテストショップだとアプリが追加できなくてアプリ追加後の挙動がわからない」「ドキュメントのどこを見ればいいの？」とお悩みの方は、ぜひ参照してください！

ご注意点
＊今回は「ウェルカムクーポン」を例としています。実際の設定はアプリごとに異なる場合がありますので、ドキュメントを必ずお読みください。
＊カラーミーショップAPIを利用するには、OAuth2.0 Authorization Code Grant に定められた手順によってアクセストークンを取得する必要があります。今回はAPIを利用したアプリを作成される方向けの解説になります。

❶ アプリストアにアクセスする

まず、ユーザーはアプリストアにアクセスしショップのログイン情報でログインします。その後、追加したいアプリをクリックします。

❷ アプリ詳細ページから「プランを選択してアプリを追加する」をクリック

【ユーザー側画面】
アプリ詳細ページ上部または下部にある「プランを選択してアプリを追加する」をクリックします。

❸ アプリを追加する

【ユーザー側画面】
料金プランと規約の確認画面が出るので、確認項目にチェックを入れて「アプリを追加する」をクリックします。

【アプリストアシステム側で起こっていること】
この時点でインストールフックがデベロッパー側に通知されます。
インストールフックの通知先はデベロッパーページの「インストール・アンインストール情報」から登録いただけます。

❹サービス（アプリ）側画面に遷移する

【ユーザー側画面】
インストールフック受け取りが成功すると、サービス（アプリ）側の画面に遷移します。

【アプリストアシステム側で起こっていること】
インストールフック受け取りに成功した際に、redirect_url パラメータをapplication/json 形式でレスポンスボディに付与し、 ステータスコード 200 レスポンスをカラーミーショップへ返却してください。
ここで指定する redirect_url が上記のページに当たります。
詳細の仕様についてはカラーミーショップアプリストア APIのドキュメントの「アプリのインストール」をご参照ください。
redirect_url パラメータの例）

{
 "redirect_url": "https://example.com"
}

❺カラーミーショップのショップ認証画面に遷移する

【ユーザー側画面】
❹の図の「ログイン画面」をクリックすると、ユーザー認証画面に遷移します。ユーザーはカラーミーショップのアカウントのログインIDとパスワードでログインします。

❻認可画面に遷移する

【ユーザー側画面】
ログイン後、ユーザーに認可を求めるページが表示されます。

ここのURLは https://api.shop-pro.jp/oauth/authorize に必要なパラメータをつけたものになります。
例）

https://api.shop-pro.jp/oauth/authorize?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=code&scope=read_products%20write_products

ユーザーはチェックを入れて、「アプリを連携」をクリックします。
ここで表示される「アプリが行う動作」は指定するscopeによって変わります。

❼アプリの利用が開始される

【ユーザー側画面】
「アプリを連携」をクリックすると、サービス（アプリ）側のページに遷移します。ウェルカムクーポンではこのページでアプリの設定をします。
以上でアプリ追加が完了します。

💡別途サービス（アプリ）側でもお申込が必要な場合は、こちらのページでお申し込みフォームを設定することをオススメします。

【アプリストアシステム側で起こっていること】
「アプリを連携」をクリックしてアプリとの連携が承認された場合、codeというクエリパラメータに認可コードが付与されます。
認可コードをアクセストークンに交換するため、必要なパラメータを付けて https://api.shop-pro.jp/oauth/token へリクエストを送ります。

💡承認がキャンセルされた、またはエラーが起きた場合は、 errorパラメータにエラーの内容を表す文字列が与えられます。

必要なパラメータは下記のとおりです。

client_id：アプリ詳細画面に表示されているクライアントID
client_secret：アプリ詳細画面に表示されているクライアントシークレット
code：取得した認可コード
grant_type："authorization_code"を指定
redirect_uri：アプリ登録時に入力したリダイレクトURI

クライアントID、クライアントシークレット、リダイレクトURIはデベロッパーページのアプリ名横の鉛筆マーククリック後、遷移する画面の「OAuth情報」から確認できます。

curlによるリクエストの例）

$ curl -X POST \
 -d'client_id=CLIENT_ID' \
 -d'client_secret=CLIENT_SECRET' \
 -d'code=CODE' \
 -d'grant_type=authorization_code'   \
 -d'redirect_uri=REDIRECT_URI'  \
 'https://api.shop-pro.jp/oauth/token'

リクエストが成功すると、以下のようなJSONが返却されます。

{
 "access_token": "d461ab8XXXXXXXXXXXXXXXXXXXXXXXXX",
 "token_type": "bearer",
 "scope": "read_products write_products"
}

取得したアクセストークンは、Authorizationヘッダに入れて使用します。
以下にショップ情報を取得する例を示します。

$ curl -H 'Authorization: Bearer d461ab8XXXXXXXXXXXXXXXXXXXXXXXXX' https://api.shop-pro.jp/v1/shop.json

詳細については、カラーミーショップ APIドキュメントの「利用手順」をご確認ください。

いかがでしたでしょうか。もっと詳しく知りたいという方は、「カラーミーショップ API」「アプリストアAPI」をご参照ください。

デベロッパーページからは「インストールテストをする」から、作成したアプリのインストール後の挙動を確認できます。

アプリストアでは、ネットショップの成長を支援するサービスをご提供いただける外部デベロッパーを募集しております。「カラーミーショップ」でのサービス提供を希望するデベロッパーは下記までお問い合わせください。
📝お問合せフォーム

▼アプリ開発デベロッパー向けページはこちら（資料請求もできます）

カラーミーショップ デベロッパー

▼アプリストアはこちら

カラーミーショップアプリストア