Custom consent form template
The OAuth authorization server provides a template to acquire user consent information about which OAuth clients are authorized to access the protected resource in given scopes. The authorization request from the OAuth client shows a list of requested scopes in the template.
WebSphere® Application Server allows the consent form template to be either a static HTML page or a dynamic web page. In both cases, the template must be provided as an unprotected web resource. The form retriever in WebSphere Application Server integration does not perform any authentication when accessing this template URL.
The WebSphere Application
Server OAuth provider includes a simple sample consent form, and allows
customization by using oauthFormData
variable.
oauthFormData
variable
by using Javascript. The following variables are included in the form
data:authorizationUrl
- the authorization URL where the form is being submittedclientDisplayName
- the display name of the clientnonce
- random generated number to prevent cross-site request forgery (CSRF)client_id
- see the OAuth 2.0 specificationresponse_type
- see the OAuth 2.0 specificationredirect_uri
- see the OAuth 2.0 specificationstate
- see the OAuth 2.0 specificationscope
- see the OAuth 2.0 specification
The developer of a form template is responsible for rendering the
template with what is in the oauthFormData
variable
with Javascript. The developer must interpret the scope value to be
a meaningful value to a user. When a user authorizes the request,
the developer can call the submitForm(oauthFormData)
method
to perform the authorization The submitForm
method
is provided by default. However, if developers are familiar with OAuth2
protocol, they can implement their own function to submit the OAuth
authorization request.
clientDisplayName
variable is not escaped in HTML. The template developer must
sanitize the value, as the value is input by a user during client registration.oauth20.authorization.form.template
parameter
and add the template URL as the value. The following example shows
a sample template entry in the provider configuration:<parameter name="oauth20.authorization.form.template" type="cc" customizable="true">
<value>https://acme.com:9043/oath20/template.html</value>
</parameter>
<parameter name="oauth20.authorization.loginURL" type="cc" customizable="true">
<value>https://acme.com:9043/oath20/login.jsp</value>
</parameter>
function escapeHTML(str) {
var ele = document.createElement("div");
ele.innerText = ele.textContent = str;
return ele.innerHTML;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OAuth authorization form</title>
<script language="javascript">
function init() {
var scope = oauthFormData.scope;
var scopeEle = document.getElementById("oauth_scope");
var ul = document.createElement("ul");
if(scope) {
for(var i=0; i< scope.length; i++) {
var n = document.createElement("li");
n.innerHTML = scope[i];
ul.appendChild(n);
}
}
scopeEle.appendChild(ul);
// set client name
var clientEle = document.getElementById("client_name");
clientEle.innerHTML = escapeHTML(oauthFormData.clientDisplayName);
}
function escapeHTML(str) {
var ele = document.createElement("div");
ele.innerText = ele.textContent = str;
return ele.innerHTML;
}
</script>
</head>
<body onload="init()">
<div>Do you want to allow client
<span id=client_name style="font-weight:bold">xxxxxxx</span> to access your data?</div>
<div id="oauth_scope"></div>
<div>
<input type="button" value="Yes" onclick="javascript:submitForm(oauthFormData);"/>
<input type="button" value="No, Thanks"/>
</div>
</body>
</html>