Web UI to Create Client App and Contract to Access an API in API Manager (Mule 4)
By
CORE
·
·
Tutorial
CORE
·
Likes
(3)
Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!
Comment
Save
13.1K Views
Join the DZone community and get the full member experience.
Join For Free
When you create a policy in API Manager, there is need to create an application and contract between the application and the API instance. API Gateway is responsible to enforce policy based on contact created.
Mule doesn't have a single API that can be used to create an API instance and contract. You can achieve using a sequence of call to their platform API. Click here to see the steps provided by Mulesoft knowledge base.
To make this process user friendly, you can prepare a web UI in the Mule application that would help to achieve entire steps in easy two steps.
Create a Mule Application to Build a UI-Based Web Page
- File -> New Mule Project
Project Name : api-mule-client-contract-registratiom
- Create a properties file
YAML
xxxxxxxxxx
1
1
http
2
host"0.0.0.0"
3
port"8081"
4
cloudhub
5
rest
6
api
7
url"https://anypoint.mulesoft.com/apiplatform/repository/v2/organizations"
- Create Mule flow as below
XML
xxxxxxxxxx
1
129
1
2
3
<mule xmlns:ee="http://www.mulesoft.org/schema/mule/ee/core" xmlns:http="http://www.mulesoft.org/schema/mule/http"
4
xmlns="http://www.mulesoft.org/schema/mule/core"
5
xmlns:doc="http://www.mulesoft.org/schema/mule/documentation" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mulesoft.org/schema/mule/core http://www.mulesoft.org/schema/mule/core/current/mule.xsd
6
http://www.mulesoft.org/schema/mule/http http://www.mulesoft.org/schema/mule/http/current/mule-http.xsd
7
http://www.mulesoft.org/schema/mule/ee/core http://www.mulesoft.org/schema/mule/ee/core/current/mule-ee.xsd">
8
<http:listener-config name="HTTP_Listener_config" doc:name="HTTP Listener config" doc:id="95c71995-11da-4d13-a3e1-f327f82c1bd0" >
9
<http:listener-connection host="0.0.0.0" port="${http.port}" ></http:listener>
10
</http:listener-config>
11
<configuration-properties doc:name="Configuration properties" doc:id="58f39ca5-93c4-4eab-8f58-bf1f1d157a6e" file="config.yaml" ></configuration>
12
<http:request-config name="HTTP_Request_configuration" doc:name="HTTP Request configuration" doc:id="2f1aa104-cb1c-42e5-acef-2d58a235e7c9" enableCookies="false" >
13
<http:request-connection protocol="HTTPS" host="anypoint.mulesoft.com" port="443" ></http:request>
14
</http:request-config>
15
<flow name="api-mule-client-contract-registratiomFlow" doc:id="c64ea0b8-1aaf-418b-9118-a293b3ed4c1d" >
16
<http:listener doc:name="Listener" doc:id="2e4d656c-3527-49eb-b7ff-e01c8aa15272" config-ref="HTTP_Listener_config" path="/index.html"></http:listener>
17
<set-payload value='<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <title>Mule API Consumer Registration</title> <body> <br> <div style=" margin: auto; width: 50%; padding: 10px; " > <div > <div class="card"> <h5 class="card-header">Client Registration Form</h5> <div class="card-body"> <form action="/process-request" method="post"> <div class="form-group"> <label for="organizationId"><strong>Organization Name</strong></label> <input type="text" name="organizationId" class="form-control form-control-sm" id="organizationId" required> </div><div class="form-group"> <label for="consumerName"><strong>Client Name</strong></label> <input type="text" name="consumerName" class="form-control form-control-sm" id="consumerName" required> </div> <div class="form-group"> <label for="consumerDescription"><strong>Client Description</strong></label> <input type="text" name="consumerDescription" class="form-control form-control-sm" id="clientId" required > </div> <div class="form-group"> <label for="clientId"><strong>Client ID</strong></label> <input type="text" name="clientId" class="form-control form-control-sm" id="clientId" required> </div> <div class="form-group"> <label for="clientSecret"><strong>Client Secret</strong></label> <input type="text" name="clientSecret" class="form-control form-control-sm" id="clientSecret" required> </div> <div class="row"> <div class="col"> <div class="form-group"> <label for="autoDiscovery"><strong>Autodiscovery ID</strong></label> <input type="text" name="autoDiscoveryID"class="form-control form-control-sm" id="autoDiscovery" required > </div> </div> <div class="col"> <div class="form-group"> <label for="grantType"><strong>Grant Type</strong></label> <select name="grantType" class="mdb-select colorful-select dropdown-primary md-form" multiple> <option value="client_credentials">Client Credentials</option> <option value="password">Password</option> </select> </div> </div> </div> <div class="form-group"> <label for="jwtToken"><strong>Anypoint Platform token</strong></label> <input type="text" name="jwtToken" class="form-control form-control-sm" id="jwtToken" required > </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> </div> </body> </html>' doc:name="return index.html" doc:id="42a6e73e-2065-4840-8f17-3f7f42a2a403" ></set>
18
19
20
</flow>
21
22
<flow name="webformFlow1" doc:id="ff95cfa6-fae0-4b69-b54b-f352efa33188" >
23
<http:listener doc:name="Listener" doc:id="3a4f5510-b2a5-4fca-80a7-376644fb14a2" config-ref="HTTP_Listener_config" path="/process-request"></http:listener>
24
<set-variable value="#[%dw 2.0 output application/json --- payload]" doc:name="requestPayload" doc:id="0d8f9b81-14cc-452f-8ddc-af854540e448" variableName="requestPayload"></set>
25
<logger level="INFO" doc:name="request log" doc:id="99d686a5-8755-45e0-9083-9c31bdd8537d" message="#[vars.requestPayload]"></logger>
26
<ee:transform doc:name="Transform Message" doc:id="a6459c1a-cd59-4031-a0b8-66f539b12f98" >
27
<ee:message >
28
<ee:set-payload ><![CDATA[%dw 2.0
29
output application/json
30
---
31
{
32
33
"name" : vars.requestPayload.consumerName,
34
"description" : vars.requestPayload.consumerDescription,
35
"clientSecret" : vars.requestPayload.clientSecret,
36
"clientId" : vars.requestPayload.clientId,
37
"grantTypes" : vars.requestPayload.*grantType,
38
}]]></ee:set-payload>
39
</ee:message>
40
</ee:transform>
41
<logger level="INFO" doc:name="Logger" doc:id="8c9cda44-52d4-4658-957e-f3f0e983d6f0" message="transformed payload :#[payload]"></logger>
42
<http:request method="POST" doc:name="Register auth0 Client to Anypoint" doc:id="a0f77d86-afc1-4fa6-8e5f-434233544184" url="${cloudhub.rest.api.url}/{organization-id}/applications" target="response1" sendCorrelationId="AUTO">
43
<http:body ><![CDATA[#[output application/json
44
---
45
payload]]]></http:body>
46
<http:headers ><![CDATA[#[output application/java
47
---
48
{
49
"Authorization" : "Bearer " ++ vars.requestPayload.jwtToken
50
}]]]></http:headers>
51
<http:uri-params ><![CDATA[#[output application/java
52
---
53
{
54
"organization-id" : vars.requestPayload.organizationId
55
}]]]></http:uri-params>
56
57
</http:request>
58
<try doc:name="Try" doc:id="22ee4df3-e4f5-4e12-afe1-9301b2b42210" >
59
<http:request method="POST" doc:name="Register Consumer App to with the API" doc:id="1bc1b388-c396-43a3-9ab8-bbe5de4d1a1f" url="${cloudhub.rest.api.url}/{organization-id}/applications/{consumer-id}/contracts">
60
<http:body><![CDATA[#[%dw 2.0
61
output application/json
62
---
63
{
64
"apiVersionId":vars.requestPayload.autoDiscoveryID,
65
"applicationId": vars.requestPayload.autoDiscoveryID,
66
"partyId": vars.requestPayload.autoDiscoveryID,
67
"partyName": vars.response1.name,
68
"acceptedTerms": true
69
}]]]></http:body>
70
<http:headers><![CDATA[#[output application/java
71
---
72
{
73
"Authorization" : "Bearer " ++ vars.requestPayload.jwtToken
74
}]]]></http:headers>
75
<http:uri-params><![CDATA[#[output application/java
76
---
77
{
78
"consumer-id" : vars.response1.id,
79
"organization-id" : vars.requestPayload.organizationId
80
}]]]></http:uri-params>
81
</http:request>
82
<error-handler>
83
<on-error-propagate enableNotifications="true" logException="true" doc:name="On Error Propagate" doc:id="254ea273-fbb5-425f-bc11-ca53d415b14f" >
84
<http:request method="DELETE" doc:name="Delete the Created Consumer " doc:id="a736dd6d-1ff1-4eae-b094-4ca6e973d49f" url="${cloudhub.rest.api.url}/organizations/{organization-id}/applications/{consumer-id}">
85
<http:uri-params><![CDATA[#[output application/java
86
---
87
{
88
"consumer-id" : vars.response1.id,
89
"organization-id" : vars.requestPayload.organizationId
90
}]]]></http:uri-params>
91
</http:request>
92
<set-variable value="#[true]" doc:name="Set Variable" doc:id="591e8b2e-d55c-4c74-a2dd-640a618253f6" variableName="isConsumerDeleted" ></set>
93
</on-error-propagate>
94
</error-handler>
95
</try>
96
<error-handler >
97
<on-error-propagate enableNotifications="true" logException="true" doc:name="On Error Propagate" doc:id="b0364bb7-ed73-4048-83ea-f3b210a0e6fb" >
98
<set-payload value="#[payload]" doc:name="Set Payload" doc:id="e5c64a52-adc9-4fcd-827f-07b1dc01ce85" ></set>
99
</on-error-propagate>
100
</error-handler>
101
</flow>
102
<flow name="api-mule-token-generation-form-flow" doc:id="613859f5-7521-4ffd-b876-8b7106d4fba2" >
103
<http:listener doc:name="Listener" doc:id="fe0fd7d1-2c34-4cbb-b0be-29a2245f4e49" config-ref="HTTP_Listener_config" path="/token.html"></http:listener>
104
<set-payload value='<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <title>Mule Token Genration</title> <body> <br> <div style=" margin: auto; width: 50%; padding: 10px; " > <div > <div class="card"> <h5 class="card-header">Anypoint platform Toke Genration</h5> <div class="card-body"> <form action="/token" method="post"> <div class="form-group"> <label for="userName"><strong>User Name</strong></label> <input type="text" name="userName" class="form-control form-control-sm" id="userName" required> </div><div class="form-group"> <label for="password"><strong>Password </strong></label> <input type="password" name="password" class="form-control form-control-sm" id="password" required> </div><button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> </div> </body> </html>' doc:name="token generation form" doc:id="db21c255-6e0a-480b-b1ee-64b722079e49" ></set>
105
</flow>
106
<flow name="api-mule-token-generate-registratiom-flow" doc:id="24d1f1d8-e104-4746-804e-06cddc373dc6" >
107
<http:listener doc:name="Listener" doc:id="f951eadf-fdad-4938-bc0d-5ab47bc7444e" config-ref="HTTP_Listener_config" path="/token"></http:listener>
108
<set-variable value="#[%dw 2.0 output application/json --- payload]" doc:name="Token payload" doc:id="aa572d2f-6337-4499-b800-880a07bcb388" variableName="tokenPayload"></set>
109
<logger level="INFO" doc:name="Logger" doc:id="d0e79acb-24de-47b4-ad19-72b9769e64f7" message="#[vars.tokenPayload]]"></logger>
110
<http:request method="POST" doc:name="Request" doc:id="0d311c36-6c94-4d5b-bd76-da9b9d513aab" outputMimeType="application/json" config-ref="HTTP_Request_configuration" path="/accounts/login">
111
<http:body ><![CDATA[#[%dw 2.0
112
output application/json
113
---
114
{
115
"username": vars.tokenPayload.userName,
116
"password": vars.tokenPayload.password
117
}]]]></http:body>
118
<http:headers ><![CDATA[#[output application/java
119
---
120
{
121
"Accept" : "*/*",
122
"Accept-Encoding" : "gzip, deflate, br",
123
"Content-Type" : "application/json",
124
"Connection" : "keep-alive"
125
}]]]></http:headers>
126
</http:request>
127
</flow>
128
</mule>
129
-
Run Application
Create Anypoint Platform Token :
The token is a must to communicate to Anypoint platform API. Open URL in the browser: http://localhost:8081/token.html
Provide your Anypoint platfrom user name and password and click on submit.
You would see the below response. This token will be needed in the next steps.
JSON
xxxxxxxxxx
1
1
{
2
"access_token": "6f55ae90-34f7-44fe-ba77-82cacb8c5a3f",
3
"token_type": "bearer",
4
"redirectUrl": "/home/"
5
}
Run the application and call: GET http://localhost:8081/index.html
Provide all required values, as per the above screenshot, and click on the submit button. The response should look like the following JSON payload. It means that the client and contract have created in API Manager.
JSON
xxxxxxxxxx
1
129
1
{
2
"audit": {
3
"created": {
4
"date": "2020-03-31T11:10:24.145Z"
5
},
6
"updated": {}
7
},
8
"masterOrganizationId": "4b52dfb0-db02-49e3-ac33-ca67fd4a51a1",
9
"organizationId": "4b52dfb0-db02-49e3-ac33-ca67fd4a51a1",
10
"id": 881807,
11
"status": "APPROVED",
12
"approvedDate": "2020-03-31T11:10:24.228Z",
13
"rejectedDate": null,
14
"revokedDate": null,
15
"applicationId": 396196,
16
"application": {
17
"audit": {
18
"created": {
19
"date": "2020-03-31T11:10:23.749Z"
20
},
21
"updated": {}
22
},
23
"masterOrganizationId": "4b52dfb0-db02-49e3-ac33-ca67fd4a51a1",
24
"id": 396196,
25
"name": "auth-demo-order-app2",
26
"description": "client registratin for order application1",
27
"coreServicesId": "3ytxMlvSIuqZfKZghCoeKXZ6x3qqi7WB",
28
"url": null,
29
"grantTypes": [
30
"client_credentials"
31
],
32
"redirectUri": [],
33
"clientId": "3ytxMlvSIuqZfKZghCoeKXZ6x3qqi7WB",
34
"clientSecret": "1haFgLq-_O6G3JBzZAL0CgK4KUJImmaEEjtbfoPWtutkfygCK42xZVM7AKa_OIhI",
35
"owner": "Mukesh Thakur",
36
"email": "mukesh.aec@gmail.com",
37
"owners": [
38
{
39
"id": "ff13fd4d-4498-4cc6-a71a-a4b18264553c",
40
"createdAt": "2020-03-16T04:18:17.845Z",
41
"updatedAt": "2020-03-31T10:26:10.023Z",
42
"organizationId": "4b52dfb0-db02-49e3-ac33-ca67fd4a51a1",
43
"firstName": "Mukesh",
44
"lastName": "Thakur",
45
"email": "mukesh.aec@gmail.com",
46
"phoneNumber": "09602109706",
47
"idprovider_id": "mulesoft",
48
"username": "mukesh-aec6",
49
"enabled": true,
50
"deleted": false,
51
"lastLogin": "2020-03-31T10:26:00.000Z",
52
"roles": [
53
"cc43e20e-c04b-4c86-a29e-49ac7e7f8b58"
54
],
55
"type": "host"
56
}
57
]
58
},
59
"tierId": null,
60
"tier": null,
61
"requestedTierId": null,
62
"requestedTier": null,
63
"terms": null,
64
"apiVersionId": 16080933,
65
"apiVersion": {
66
"audit": {
67
"created": {
68
"date": "2020-03-30T12:33:51.892Z"
69
},
70
"updated": {
71
"date": "2020-03-31T01:43:55.613Z"
72
}
73
},
74
"masterOrganizationId": "4b52dfb0-db02-49e3-ac33-ca67fd4a51a1",
75
"organizationId": "4b52dfb0-db02-49e3-ac33-ca67fd4a51a1",
76
"id": 16080933,
77
"apiId": 211297588,
78
"portalId": null,
79
"name": "v1:16080933",
80
"instanceLabel": "policy-order-API",
81
"groupId": "4b52dfb0-db02-49e3-ac33-ca67fd4a51a1",
82
"assetId": "ordersapi",
83
"assetVersion": "1.0.1",
84
"productVersion": "v1",
85
"description": null,
86
"tags": [],
87
"order": 1,
88
"providerId": null,
89
"rootFileId": null,
90
"deprecated": false,
91
"lastActiveDate": "2020-03-31T09:56:30.469Z",
92
"endpointUri": null,
93
"environmentId": "426522f5-3b79-4e69-aa9d-3f01ac91182e",
94
"isPublic": false,
95
"stage": "release",
96
"terms": null,
97
"termsDate": null,
98
"endpoint": {
99
"audit": {
100
"created": {},
101
"updated": {}
102
},
103
"id": 788261,
104
"type": "raml",
105
"uri": null,
106
"apiGatewayVersion": "4.2.2",
107
"proxyUri": null,
108
"proxyRegistrationUri": null,
109
"lastActiveDate": null,
110
"isCloudHub": null,
111
"deploymentType": "CH",
112
"policiesVersion": null,
113
"referencesUserDomain": null,
114
"muleVersion4OrAbove": true,
115
"responseTimeout": null,
116
"wsdlConfig": null
117
},
118
"deployment": null,
119
"lastActiveDelta": 4433,
120
"permissions": {
121
"update": true
122
}
123
},
124
"groupInstanceId": null,
125
"groupInstance": null,
126
"partyId": "16080933",
127
"partyName": "auth-demo-order-app2",
128
"condition": "APPLIED"
129
}
Verifying Clients and Contract in API Manager
Click here to download the source code.
API
application
app
Opinions expressed by DZone contributors are their own.
Comments