Skip to Content

Configure SAP API Management policies to avoid CORS issues and generate an API Key

Learn how to set up API Management policies to avoid CORS issues when calling the API endpoint from SAP Build Apps (formerly SAP AppGyver), also you will learn how to apply security policies to enable the API consumption via an API Key.
You will learn
  • How to set up API Management policies to avoid CORS issues when calling the API endpoint.
  • How to apply security policies to enable the API consumption via an API Key.
mariajosesapMariajose MartinezNovember 22, 2022
Created by
mariajosesap
October 28, 2022
Contributors
mariajosesap

Prerequisites

  • Step 1
    1. Go to your SAP API Portal (in the main SAP Integration Suite portal).

    2. Create an API and select URL. Here you’re going to paste your IFlow endpoint from past tutorials. Give it a name: APIBestRunDemo. Give it a path: /https/salesOrder, and service type REST.

      Create the API
    3. After creating it, go to the Proxy Endpoint tab and add the following in this order, and save it:

      Add the route rules
    4. Now, go to Policies (if it doesn’t show up in the top-right of your screen, click on the 3 dots).

      Here you’ll add the required policies to avoid CORS issues while calling this API from SAP Build Apps and configure the API Key policy later on.

    5. On the Edit Mode, start adding the Policies as followed:

      In the PostFlow inside the Proxy Endpoint configuration, add an Assign Message policy as an OutgoingResponse and name it setCORS. Like this:

      Add the route rules
    6. Copy and paste this script (read message on line 5):

      XML
      Copy
      <!-- This policy can be used to create or modify the standard HTTP request and response messages -->
      <AssignMessage async="false" continueOnError="false" enabled="true" xmlns='http://www.sap.com/apimgmt'>
              <Add>
                  <Headers>
                  <!-- Set up this header, however if you come across to this error: " 'Access-Control-Allow-Origin' header contains multiple values, but only one is allowed when executing the test on Build Apps ", then remove it and try it again: <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>
              </Add>
              <IgnoreUnresolvedVariables>false</IgnoreUnresolvedVariables>
              <AssignTo createNew="false" type="response">response</AssignTo>
      </AssignMessage>
      

      Notice that you’re already adding apikey as a header in the policy.

      You should look it like this:

      CORS Policy
    7. In the ProxyEndpoint click on + to add one. Name it preflight and in the condition string paste: request.verb == "OPTIONS". Like this:

      Preflight Condition String

      This is all you need to avoid CORS issues when calling our API from SAP Build Apps.

  • Step 2
    1. Before adding the needed policies, create first a Key Value Map with your CPI credentials (to access the Cloud Integration Platform API endpoint). You will need this credential to reference it in the API Key Policy.

      Go to Configure (click on the tool icon) -> go to the Key Value Maps tab and create one.

      Create a Key Value Map
    2. Put CPICredentials as the name and declare your CPI credentials (username and password). Check the Encrypt Key Value Map box.

      Create a Key Value Map
  • Step 3

    Go back to your API policies.

    In the TargetEndpoint, add 3 policies in the PreFlow.

    1. Add a Key Value Map Operations policy, name it and leave it as a Incoming Request. This is needed to get the CPI Credentials created before, as a Key Value Map. Like this:

      Create a Key Value Map

      Copy and Paste this script (you will be referencing ‘CPICredentials’ with the mapIdentifier parameter):

      XML
      Copy
      <KeyValueMapOperations mapIdentifier="CPICredentials" continueOnError="false" enabled="true" xmlns="http://www.sap.com/apimgmt">
      <!-- Read parameter with key "username" and assign its value to private variable BasicAuthUsername-->
      <Get assignTo="private.BasicAuthUsername" index='1'>
      <Key><Parameter>username</Parameter></Key>
      </Get>
      <!-- Read parameter with key "password" and assign its value to private variable BasicAuthPassword-->
      <Get assignTo="private.BasicAuthPassword" index='1'>
      <Key><Parameter>password</Parameter></Key>
      </Get>
      <Scope>environment</Scope>
      </KeyValueMapOperations>
      

      Like this:

      Set up the Key Value Map Policy
    2. Add a Basic Authentication policy, name it and leave it with the IncomeRequest stream. Like this:

      Add a Basich Authentication Policy

      Copy and paste this script:

      XML
      Copy
      <BasicAuthentication async='true' continueOnError='false' enabled='true' xmlns='http://www.sap.com/apimgmt'>
          <!-- Operation can be Encode or Decode -->
          <Operation>Encode</Operation>
          <IgnoreUnresolvedVariables>false</IgnoreUnresolvedVariables>
          <!-- for Encode, User element can be used to dynamically populate the user value -->
          <User ref='private.BasicAuthUsername'></User>
          <!-- for Encode, Password element can be used to dynamically populate the password value -->
          <Password ref='private.BasicAuthPassword'></Password>
      
          <!-- Assign to is used to assign the encoded value of username and password to a variable. This should not be used if the operation is Decode -->
          <AssignTo createNew="true">request.header.Authorization</AssignTo>
      </BasicAuthentication>
      

      You should look it like this:

      Set up a Basich Authentication Policy
    3. Add a API Key verification policy to request the API Key every time the API is called (you’ll later need to create the API Product and subscribe to the application to get the API Key). Add the Verify API Key policy, same in the PreFlow. Like this:

      Set up a Basich Authentication Policy
      XML
      Copy
      <!--Specify in the APIKey element where to look for the variable containing the api key-->
          <VerifyAPIKey async='true' continueOnError='false' enabled='true'
              xmlns='http://www.sap.com/apimgmt'>
          <APIKey ref='request.header.ApiKey'/>
      </VerifyAPIKey>
      

      This should be the first policy to be triggered. Make sure it is set it up as the first one (you can change the order with the arrows in the top-right). Like this:

      Set up Verify API Key Policy
    4. Click on Update, Save and Deploy your API project.

      Deploy your API
  • Step 4
    1. Now you need to create the API Product. Go to the pencil icon (develop), click on the Products tab and create one. Put this name to your Product APIBestRunDemoProduct.

      Create an API Product
    2. Reference your API to your Product.

      Reference your API
    3. Publish your Product, click on Publish.

    4. Then, go to the API Business Hub Enterprise portal.

      Publish you Product

      You should be able to see it in your SAP API Business Hub:

      API Product
    5. Enter the API product and subscribe it by creating a new Application:

      Create API Application

      Name it APIBestRunDemoApplication, like this:

      Create API Application
    6. Here’s where you can get your API Key, crucial to authenticate to this API endpoint when consuming its service.

      Create API Application

    Now you’ve successfully created policies to avoid CORS issues and enable an API Key to authenticate and consume your API endpoint from SAP Integration Suite.

  • Step 5

    Right now, as following the whole exercises, the IFlow is returning us the SMS message sent by consuming the Twilio API. But for the purpose of the exercise with SAP Build Apps, you’re going to use as the return message, mainly the receipt URL when the payment transaction is successfully done with Stripe. For this, you need to save this message in the IFlow and retrieve it at the end of the IFlow.

    Remember the previous tutorial about “Set up Write, Filter and Get Tasks in the Integration Flow…” for filtering the payment data and later calling the SAP C4C OData service? well, you are going to do the same, but in this case to retrieve the receipt URL from the Stripe request response.

    1. Go back to SAP Cloud Integration and to your Integration Flow. Add a Write task after the Stripe Connector request reply, and configure the task as following:

      Add a Write Task
    2. And now add a Get task at the end of the IFlow to retrieve this returned message:

      Add a Get Task

      Save and deploy your IFlow.

    Now, it’s time to set up the integration with SAP Build Apps. Check out the next and final tutorial of this series: Integrate SAP Build Apps with SAP Integration Suite.

  • Step 6

    What were the policies needed to enable the API Key verification and in which order?

  • Step 7

    What is needed to get (and copy) an API Key for this Integration Flow?

Back to top