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.
- authorizationUrl - the authorization URL where the form is being submitted
- clientDisplayName - the display name of the client
- nonce - random generated number to prevent cross-site request forgery (CSRF)
- client_id - see the OAuth 2.0 specification
- response_type - see the OAuth 2.0 specification
- redirect_uri - see the OAuth 2.0 specification
- state - see the OAuth 2.0 specification
- scope - 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.

<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" "http://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>