LoginSignup
3
1

API Business HubのSandbox APIをSAP Build Appsで使えるようにするには

Last updated at Posted at 2023-04-22

はじめに

最近、SAP Learningで以下のLearning Journeryを受講しました。

その中でSAP Build AppsからSAP Sales CloudのOData APIを呼び出すというハンズオンがあったのですが、指定されたURLが使えなかったためAPI Business HubのサンドボックスAPIを使用することにしました。

課題

API Business HubのAPIを呼ぶには、リクエストヘッダにAPIキーを指定する必要があります。この指定がないとSAP Build Appsで接続設定をしようとしたときにメタデータが取得できず、ODataサービスとして認識されません。
image.png

解決方法

2023/10/10 追記
Destinationのプロパティ:URL.headers.APIkeyにAPIキーを設定することが可能です。よってDestinationを使う場合、以下の設定は不要です。
参考:https://blogs.sap.com/2023/10/09/no-code-guide-sap-s-4hana-cloud-to-sap-build-apps-data-visibility/

API Managementを使用し、ヘッダにあらかじめAPIキーを設定したものをサービスとして公開します。

image.png

ステップ

  1. API HubからAPI仕様をダウンロード
  2. API ManagementでAPI Proxyを登録
  3. ポリシーを設定
  4. デプロイ

1. API HubからAPI仕様をダウンロード

API HubからJSONでAPI仕様をダウンロードします。
image.png

2. API ManagementでAPI Proxyを登録

API ManagementでAPI Proxyを登録します。"Create in API Designer"をクリックします。
※最初"Import API"からやろうとしたところ、ファイルを選択してOKをクリックしても何も起こりませんでした
image.png
"Import"ボタンからAPI仕様をインポートします。
image.png
"Save"で保存します。
image.png
任意の名前を指定して保存します。
image.png
"Proxy Endpoint"タブで以下の設定を追加します。これはリクエストのメソッドが"OPTIONS"(サーバ側で許可されたリクエストメソッドやリクエストヘッダを調べるリクエスト)の場合、ターゲットに転送しないという意味になります。
image.png

3. ポリシーを設定

"Policies"からポリシーを設定します。
image.png
ここでは以下のことを行います。

  • リクエストヘッダにAPIキーを追加
  • レスポンスヘッダにAccess-Control関係の設定を追加(CORS問題を回避するため)
  • preflightリクエストの追加

3.1. リクエストヘッダにAPIキーを追加

PreFlowに"Assign Message"のポリシーを置きます。
image.png
以下のようにポリシーを設定します。

<AssignMessage async="false" continueOnError="false" enabled="true" xmlns='http://www.sap.com/apimgmt'>
    <Add>
		<Headers>
		         <Header name="APIKey">API Hubで取得したキー</Header>
	    </Headers>     
     </Add>
	<IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
	<AssignTo createNew="false" transport="http" type="request"/>
</AssignMessage>

3.2. レスポンスヘッダにAccess-Control関係の設定を追加

PostFlowにも"Assgin Message"のポリシーを置きます。
image.png
以下のようにポリシーを設定します。

<AssignMessage async="false" continueOnError="false" enabled="true" xmlns='http://www.sap.com/apimgmt'>
		 <Set>
		     <Headers>
		         <Header name="Access-Control-Allow-Origin">*</Header>
		         <Header name="Access-Control-Allow-Headers">set-cookie, origin, accept, maxdataserviceversion, x-csrf-token, authorization, dataserviceversion, accept-language, x-http-method, content-type, X-Requested-With, apikey</Header>
		         <Header name="Access-Control-Max-Age">3628800</Header>
		         <Header name="Access-Control-Allow-Methods">GET, PUT, POST, DELETE</Header>
		         <Header name="Access-Control-Expose-Headers">set-cookie, x-csrf-token, x-http-method</Header>
		     </Headers>
		 </Set>
		 <IgnoreUnresolvedVariables>false</IgnoreUnresolvedVariables>
		 <AssignTo createNew="false" type="response">response</AssignTo>
</AssignMessage>

3.3. preflightリクエストの追加

"preflight"というProxyEndpointを追加します。設定値はrequest.verb == “OPTIONS”とします。正直なところ何のための設定かわかっていませんが(プリフライトリクエストが飛ぶのか?どのタイミングで?)、参考にしたブログにあったため入れています。
image.png

4. デプロイ

設定が完了したらAPI Proxyをデプロイします。
image.png
デプロイされるとProxy URLが表示されます。
image.png

ちょっとした注意点として、ここに表示されたリンクをクリックするとUnable to identify proxy for hostというエラーになります。
image.png
実は、API Proxy URLとリンクをクリックしたときに開くURLが違っています。リンクをクリックではなく、API Proxy URLをコピーしたものを使用するようにします。
API Proxy URL(正しい):
https://f83f5860trial-trial.integrationsuitetrial-apim.us10.hana.ondemand.com:443/f83f5860trial/sap/c4c/odata/v1/c4codataapi
リンクをクリックしたときに開くURL(正しくない):
https://f83f5860trial-trial.integrationsuitetrial-apim.us10.hana.ondemand.com/sap/c4c/odata/v1/c4codataapi/

以上で、SAP Build AppsからSandbox APIが使えるようになりました。
image.png

参考

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1