CDI Sample
###Introduction This is the step by step guide to show how to develop a CDI application using socialauth library. If you want demo application of CDI, you can get it from SDK.
###Prerequisites
Authenticating using the external oAuth providers requires that we regitser our application with the providers and obtain a key/secret from them that will be configured in our application. So following steps are needed to be set up before we can begin.
- Public domain - You will need a public domain for testing. You should have a public domain because most of the providers require a public domain to be specified when you register an application with them.
- Get the API Keys: You can get the API keys from the following URLs. * Google (show screenshot) - http://code.google.com/apis/accounts/docs/RegistrationForWebAppsAuto.html * Yahoo (show screenshot) - https://developer.apps.yahoo.com/dashboard/createKey.html * Twitter - http://twitter.com/apps * Facebook - http://www.facebook.com/developers/apps.php * Hotmail (show screenshot) - http://msdn.microsoft.com/en-us/library/cc287659.aspx * FourSquare - (show screenshot) - https://foursquare.com/oauth/ * MySpace - (show screenshot) - http://developer.myspace.com/Apps.mvc * Linkedin - (show screenshot) - https://www.linkedin.com/secure/developer * Salesforce - (show screenshot) * Yammer - (show screenshot) - https://www.yammer.com/client_applications * Mendeley - (show screenshot) - http://dev.mendeley.com/applications/register/
- You can now develop the application using keys and secrets obtained above and deploy the application on your public domain. However, most people need to test the application on a local development machine using the API keys and secrets obtained above.
- We do not recommend it at all, but if you do not want to obtain your own keys and secrets while testing, you can use the keys and secrets that we obtained by registering "opensource.brickred.com" for our demo. Follow the same steps as above but with domain as "opensource.brickred.com" and keys from our sample.
###Development With the prerequisites out of the way, we are ready to begin development. Since Eclipse is our choice of the development environment, we have shown examples using Eclipse.
###Step 1. Create eclipse maven project
Create a maven web project in eclipse and provide groupId and artifactId. Lets say groupId is "org.brickred" and artifactId is "socialauth-cdi-demo".
Directory structure will be as given below:-
###Step 2. Add following dependency in pom.xml file.
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.brickred</groupId>
<artifactId>socialauth-cdi-demo</artifactId>
<packaging>war</packaging>
<version>1.0</version>
<name>socialauth-cdi-demo</name>
<url>http://code.google.com/p/socialauth/</url>
<dependencies>
<dependency>
<groupId>org.brickred</groupId>
<artifactId>socialauth-cdi</artifactId>
<version>[2.1,)</version>
<exclusions>
<exclusion>
<groupId>javax.faces</groupId>
<artifactId>jsf-api</artifactId>
</exclusion>
<exclusion>
<groupId>xml-apis</groupId>
<artifactId>xml-apis</artifactId>
</exclusion>
<exclusion>
<groupId>xerces</groupId>
<artifactId>xercesImpl</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>javax.enterprise</groupId>
<artifactId>cdi-api</artifactId>
<version>1.0</version>
<scope>provided</scope>
<exclusions>
<exclusion>
<groupId>javax.faces</groupId>
<artifactId>jsf-api</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>javax.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.0</version>
<exclusions>
<exclusion>
<groupId>xerces</groupId>
<artifactId>xercesImpl</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.jboss.seam.faces</groupId>
<artifactId>seam-faces</artifactId>
<version>3.0.0.Alpha3</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>2.5.1</version>
<configuration>
<source>1.6</source>
<target>1.6</target>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.1-beta-1</version>
<configuration>
<warName>socialauth-cdi-demo</warName>
</configuration>
</plugin>
</plugins>
</build>
<repositories>
<repository>
<id>jboss-repo</id>
<url>http://repository.jboss.org/nexus/content/groups/public/</url>
</repository>
<repository>
<id>sonatype-oss-public</id>
<url>https://oss.sonatype.org/content/groups/public/</url>
<releases>
<enabled>true</enabled>
</releases>
</repository>
</repositories>
</project>
###Step 3. beans.xml Although, in our example it would not contain any specific CDI information but it needs to be in the WAR to enable CDI services. It should be in WEB-INF folder.
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/beans_1_0.xsd">
</beans>
###Step 4. faces-config.xml It’s a JSF configuration file. Since this web project uses JSF MVC so this file is required to be in WEB-INF folder. This file comprises the settings for message resource bundles as well.
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0">
<application>
<resource-bundle>
<base-name>org.brickred.socialauthcdi.bundle.MessageResources</base-name>
<var>msg</var>
</resource-bundle>
</application>
</faces-config>
###Step 5. web.xml This is a standard web configuration file. It doesn’t having any special entry except standard JSF configuration and a context parameter for interfacing with socialauth library.
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<display-name>CDI Sample</display-name>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<context-param>
<param-name>successUrl</param-name>
<param-value>/success.xhtml</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>10</session-timeout>
</session-config>
<security-constraint>
<display-name>Restrict access to XHTML documents</display-name>
<web-resource-collection>
<web-resource-name>XHTML</web-resource-name>
<url-pattern>*.xhtml</url-pattern>
</web-resource-collection>
<auth-constraint />
</security-constraint>
<mime-mapping>
<extension>gif</extension>
<mime-type>image/gif</mime-type>
</mime-mapping>
<mime-mapping>
<extension>jpeg</extension>
<mime-type>image/jpeg</mime-type>
</mime-mapping>
<mime-mapping>
<extension>jpg</extension>
<mime-type>image/jpg</mime-type>
</mime-mapping>
<mime-mapping>
<extension>png</extension>
<mime-type>image/png</mime-type>
</mime-mapping>
</web-app>
###Step 6. oauth_consumer.properties file Create oauth_consumer.properties file in src\main\resources folder and configure application clienId and clientSecret for various providers. You can copy keys from our sample
###Step 7. Creating the Authenticator component Create a CDI component i.e. Authenticator. It is wrapped the socialauth-cdi library component (SocialAuth) and processes the user’s UI operations.
package org.brickred.socialauthcdi.session;
import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
import javax.faces.context.ExternalContext;
import javax.faces.event.ActionEvent;
import javax.faces.event.ComponentSystemEvent;
import javax.inject.Inject;
import javax.inject.Named;
import org.apache.log4j.Logger;
import org.brickred.socialauth.cdi.SocialAuth;
/**
* This is the main component class, it is referred in application pages and
* provides the navigation functionality to the user.
*
* @author [email protected]
*
*/
@SessionScoped
@Named("socialauthenticator")
public class Authenticator implements Serializable{
private static final Logger log = Logger.getLogger(Authenticator.class);
@Inject
SocialAuth socialauth;
/**
* Variable for storing open id from main form
*/
private String openID;
/**
* Track the user interaction with main page and set the state of components
* accordingly.
*
* @param ActionEvent
*/
public void updateId(ActionEvent ae) {
String btnClicked = ae.getComponent().getId();
log.info("*************login method called ************"
+ socialauth.getId());
ExternalContext context = javax.faces.context.FacesContext
.getCurrentInstance().getExternalContext();
String viewUrl = context.getInitParameter("successUrl");
socialauth.setViewUrl(viewUrl);
if (btnClicked.indexOf("facebook") != -1) {
socialauth.setId("facebook");
log.info("***facebook*********" + socialauth.getId());
} else if (btnClicked.indexOf("twitter") != -1) {
socialauth.setId("twitter");
log.info("***twitter*********" + socialauth.getId());
} else if (btnClicked.indexOf("yahoo") != -1) {
socialauth.setId("yahoo");
log.info("***yahoo*********" + socialauth.getId());
} else if (btnClicked.indexOf("hotmail") != -1) {
socialauth.setId("hotmail");
log.info("***hotmail*********" + socialauth.getId());
} else if (btnClicked.indexOf("google") != -1) {
socialauth.setId("google");
log.info("***google*********" + socialauth.getId());
} else if (btnClicked.indexOf("linkedin") != -1) {
socialauth.setId("linkedin");
log.info("***linkedin*********" + socialauth.getId());
} else if (btnClicked.indexOf("foursquare") != -1) {
socialauth.setId("foursquare");
log.info("***foursquare*********" + socialauth.getId());
} else {
socialauth.setId(openID);
log.info("***openID*********" + socialauth.getId());
}
}
/**
* Redirect the user back to the main page from success view.
*
* @param ActionEvent
*/
public String mainPage() {
return "/home.xhtml";
}
public String getOpenID() {
return openID;
}
public void setOpenID(String openID) {
this.openID = openID;
}
public void verify(ComponentSystemEvent cse) {
boolean ajaxRequest = javax.faces.context.FacesContext
.getCurrentInstance().getPartialViewContext().isAjaxRequest();
if (!ajaxRequest) {
try {
socialauth.connect();
} catch (Exception e) {
log.warn(e);
}
}
}
}
###Step 8. Creating the UpdateStatus component This component is used to update the status text on various integrated social sites.
package org.brickred.socialauthcdi.session;
import java.io.Serializable;
import javax.enterprise.context.RequestScoped;
import javax.faces.context.FacesContext;
import javax.inject.Inject;
import javax.inject.Named;
import javax.servlet.http.HttpServletRequest;
import org.apache.log4j.Logger;
import org.brickred.socialauth.cdi.SocialAuth;
/**
* This class used to update the user status on various public sites.
*
* @author [email protected]
*
*/
@RequestScoped
@Named("socialAuthUpdateStatus")
public class UpdateStatus implements Serializable {
private static final Logger log = Logger.getLogger(Authenticator.class);
@Inject
SocialAuth socialauth;
String statusText;
/**
* Method which updates the status on profile.
*
* @param ActionEvent
* @throws Exception
*/
public void updateStatus() throws Exception {
final HttpServletRequest request = (HttpServletRequest) FacesContext
.getCurrentInstance().getExternalContext().getRequest();
String statusText = request.getParameter("statusMessage");
if (statusText != null && !statusText.equals("")) {
socialauth.setStatus(statusText);
socialauth.updateStatus();
setStatus("Status Updated Successfully");
System.out.println("status text:" + statusText);
}
}
public String getStatus() {
return statusText;
}
public void setStatus(String statusText) {
this.statusText = statusText;
}
}
###Step 9. Adding resource bundles Resource bundle is available in package org.brickred.socialauthcdi.bundle under resources folder. Please copy the resource bundles from there and configure it in faces-config.xml file. Please make sure that resource bundle file names are same as configured in
tag in faces-config.xml file.
label.welcome= Welcome to Social Auth Demo
label.pleaseClick=Please click on any icon.
label.openid= Open Id
label.profileInfo=Profile Information
label.field= Profile Field
label.value= Value
label.email= Email
label.firstName =First Name
label.lastName =Last Name
label.country =Country
label.language = Language
label.fullName = Full Name
label.displayName = Display Name
label.dob = DOB
label.gender = Gender
label.location = Location
label.profileImage=Profile Image
label.updateStatus=Update status
label.contactDet=Contact Details
label.profileURL=Profile URL
msg.error= There is an issue while authentication or verification with the server.
msg.noContactAvailable= No contact available.
msg.authenticationSuccessfull=Authentication has been successful.
msg.footerMsg1=BrickRed is India's leading provider of commercial grade offshore software development services to technology and IT enabled SME's worldwide. Lead by technocrat's from IIT's, our mission has been to provide professional and process oriented outsourcing services to SME sector that only fortune companies could muster till date by paying high prices to big service providers. BrickRed Technologies, founded in 2002, is a privately held organization head quartered at a state-of-art offshore development center in Noida, Delhi. With offices in the US, UK, Dubai, and recently, The Netherlands,we provide services for end to end development of commercial grade software products and applications to Start-up, Emerging and Established technology companies & IT enabled organizations.
validator.assertFalse=validation failed
validator.assertTrue=validation failed
validator.future=must be a future date
validator.length=length must be between {min} and {max}
validator.max=must be less than or equal to {value}
validator.min=must be greater than or equal to {value}
validator.notNull=may not be null
validator.past=must be a past date
validator.pattern=must match "{regex}"
validator.range=must be between {min} and {max}
validator.size=size must be between {min} and {max}
validator.email=must be a well-formed email address
org.jboss.cdi.loginFailed=Login failed
org.jboss.cdi.loginSuccessful=Welcome, #0
org.jboss.cdi.TransactionFailed=Transaction failed
org.jboss.cdi.NoConversation=The conversation ended, timed out or was processing another request
org.jboss.cdi.IllegalNavigation=Illegal navigation
org.jboss.cdi.ProcessEnded=Process #0 already ended
org.jboss.cdi.ProcessNotFound=Process #0 not found
org.jboss.cdi.TaskEnded=Task #0 already ended
org.jboss.cdi.TaskNotFound=Task #0 not found
org.jboss.cdi.NotLoggedIn=Please log in first
javax.faces.component.UIInput.CONVERSION=value could not be converted to the expected type
javax.faces.component.UIInput.REQUIRED=value is required
javax.faces.component.UIInput.UPDATE=an error occurred when processing your submitted information
javax.faces.component.UISelectOne.INVALID=value is not valid
javax.faces.component.UISelectMany.INVALID=value is not valid
javax.faces.converter.BigDecimalConverter.DECIMAL=value must be a number
javax.faces.converter.BigDecimalConverter.DECIMAL_detail=value must be a signed decimal number consisting of zero or more digits, optionally followed by a decimal point and fraction, eg. {1}
javax.faces.converter.BigIntegerConverter.BIGINTEGER=value must be an integer
javax.faces.converter.BigIntegerConverter.BIGINTEGER_detail=value must be a signed integer number consisting of zero or more digits
javax.faces.converter.BooleanConverter.BOOLEAN=value must be true or false
javax.faces.converter.BooleanConverter.BOOLEAN_detail=value must be true or false (any value other than true will evaluate to false)
javax.faces.converter.ByteConverter.BYTE=value must be a number between 0 and 255
javax.faces.converter.ByteConverter.BYTE_detail=value must be a number between 0 and 255
javax.faces.converter.CharacterConverter.CHARACTER=value must be a character
javax.faces.converter.CharacterConverter.CHARACTER_detail=value must be a valid ASCII character
javax.faces.converter.DateTimeConverter.DATE=value must be a date
javax.faces.converter.DateTimeConverter.DATE_detail=value must be a date, eg. {1}
javax.faces.converter.DateTimeConverter.TIME=value must be a time
javax.faces.converter.DateTimeConverter.TIME_detail=value must be a time, eg. {1}
javax.faces.converter.DateTimeConverter.DATETIME=value must be a date and time
javax.faces.converter.DateTimeConverter.DATETIME_detail=value must be a date and time, eg. {1}
javax.faces.converter.DateTimeConverter.PATTERN_TYPE=a pattern or type attribute must be specified to convert the value
javax.faces.converter.DoubleConverter.DOUBLE=value must be a number
javax.faces.converter.DoubleConverter.DOUBLE_detail=value must be a number between 4.9E-324 and 1.7976931348623157E308
javax.faces.converter.EnumConverter.ENUM=value must be convertible to an enum
javax.faces.converter.EnumConverter.ENUM_detail=value must be convertible to an enum or from the enum that contains the constant {1}
javax.faces.converter.EnumConverter.ENUM_NO_CLASS=value must be convertible to an enum or from the enum, but no enum class provided
javax.faces.converter.EnumConverter.ENUM_NO_CLASS_detail=value must be convertible to an enum or from the enum, but no enum class provided
javax.faces.converter.FloatConverter.FLOAT=value must be a number
javax.faces.converter.FloatConverter.FLOAT_detail=value must be a number between 1.4E-45 and 3.4028235E38
javax.faces.converter.IntegerConverter.INTEGER=value must be an integer
javax.faces.converter.IntegerConverter.INTEGER_detail=value must be an integer number between -2147483648 and 2147483647
javax.faces.converter.LongConverter.LONG=value must be an integer
javax.faces.converter.LongConverter.LONG_detail=must be an integer number between -9223372036854775808 and 9223372036854775807
javax.faces.converter.NumberConverter.CURRENCY=value must be a currency amount
javax.faces.converter.NumberConverter.CURRENCY_detail=value must be a currency amount, eg. {1}
javax.faces.converter.NumberConverter.PERCENT=value must be a percentage amount
javax.faces.converter.NumberConverter.PERCENT_detail=value must be a percentage amount, eg. {1}
javax.faces.converter.NumberConverter.NUMBER=value must be a number
javax.faces.converter.NumberConverter.NUMBER_detail=value must be a number
javax.faces.converter.NumberConverter.PATTERN=value must be a number
javax.faces.converter.NumberConverter.PATTERN_detail=value must be a number
javax.faces.converter.ShortConverter.SHORT=value must be an integer
javax.faces.converter.ShortConverter.SHORT_detail=value must be an integer number between -32768 and 32767
javax.faces.validator.DoubleRangeValidator.MAXIMUM=value must be less than or equal to {0}
javax.faces.validator.DoubleRangeValidator.MINIMUM=value must be greater than or equal to {0}
javax.faces.validator.DoubleRangeValidator.NOT_IN_RANGE=value must be between {0} and {1}
javax.faces.validator.DoubleRangeValidator.TYPE=value is not of the correct type
javax.faces.validator.LengthValidator.MAXIMUM=value is must be shorter than or equal to {0} characters
javax.faces.validator.LengthValidator.MINIMUM=value is must be longer than or equal to {0} characters
javax.faces.validator.LongRangeValidator.MAXIMUM=value must be less than or equal to {0}
javax.faces.validator.LongRangeValidator.MINIMUM=value must be greater than or equal to {0}
javax.faces.validator.LongRangeValidator.NOT_IN_RANGE=value must be between {0} and {1}
javax.faces.validator.LongRangeValidator.TYPE=value is not of the correct type
javax.faces.validator.NOT_IN_RANGE=value must be between {0} and {1}
javax.faces.converter.STRING=value could not be converted to a string
###Step 10. Writing the template.xhtml Create template.xhtml file under webapp\layout folder.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:loadBundle basename="org.brickred.socialauthcdi.bundle.MessageResources" var="msg"/>
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Social Auth</title>
<style type="text/css">
.showBold{
font-weight:bold;
}
.grey{background-color: gray;color:black;}
</style>
<link rel="stylesheet" type="text/css" href="./stylesheet/style.css" />
</h:head>
<body>
<div id="logo">
<div id="slogan">
</div>
</div>
<ui:insert name="mainForm">Main Form Goes Here</ui:insert>
<div id="footer">
<div id="left_footer">
<b>© 2010 BrickRed All Rights Reserved .</b></div>
<div id="right_footer">
<b>BrickRed Technologies Pvt. Ltd</b></div>
</div>
</body>
</html>
Note: Please add css and images files from demo application into current project.
###Step 11. Writing the index.xhtml Please redirect to the “home.jsf” once user hits index page of the application.
<html>
<head>
<meta http-equiv="Refresh" content="0; URL=home.jsf">
</head>
</html>
###Step 12. Writing the home.xhtml Application home page comprises login links for different providers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="layout/template.xhtml">
<ui:define name="mainForm">
<div id="main">
<div id="sidebar">
<h1><a href="http://www.brickred.com/"><img alt="" src="images/logo.png" style="border: 0px" /></a></h1>
</div>
<div id="text" >
<h:form>
<table cellpadding="10" cellspacing="10" align="center">
<tr><td colspan="6"><h3 align="center">${msg['label.welcome']}</h3></td></tr>
<tr><td colspan="6"><p align="center">${msg['label.pleaseClick']}</p></td></tr>
<tr>
<td>
<h:commandLink id="facebook" name="facebook" action="#{socialauth.login}"
actionListener="#{socialauthenticator.updateId}">
<h:graphicImage value="/images/facebook_icon.png"/>
</h:commandLink>
</td>
<td>
<h:commandLink id="twitter" name="twitter" action="#{socialauth.login}"
actionListener="#{socialauthenticator.updateId}">
<h:graphicImage value="/images/twitter_icon.png"/>
</h:commandLink>
</td>
<td>
<h:commandLink id="google" name="google" action="#{socialauth.login}"
actionListener="#{socialauthenticator.updateId}">
<h:graphicImage value="/images/gmail-icon.jpg"/>
</h:commandLink>
</td>
<td>
<h:commandLink id="yahoo" name="yahoo" action="#{socialauth.login}"
actionListener="#{socialauthenticator.updateId}">
<h:graphicImage value="/images/yahoomail_icon.jpg"/>
</h:commandLink>
</td>
<td>
<h:commandLink id="hotmail" name="hotmail" action="#{socialauth.login}"
actionListener="#{socialauthenticator.updateId}">
<h:graphicImage value="/images/hotmail.jpeg"/>
</h:commandLink>
</td>
<td>
<h:commandLink id="linkedin" name="linkedin" action="#{socialauth.login}"
actionListener="#{socialauthenticator.updateId}">
<h:graphicImage value="/images/linkedin.gif"/>
</h:commandLink>
</td>
<td>
<h:commandLink id="foursquare" name="foursquare" action="#{socialauth.login}"
actionListener="#{socialauthenticator.updateId}">
<h:graphicImage value="/images/foursquare.jpeg"/>
</h:commandLink>
</td>
</tr>
</table>
</h:form>
<h:form id="my" name="my" >
<table cellpadding="10" cellspacing="10" align="center">
<tr>
<td class="showBold">${msg['label.openid']}</td>
<td>
<h:inputText value="#{socialauthenticator.openID}" id="idfield" required="true" requiredMessage="Please enter valid input" />
</td><td>
<h:commandButton id="openid" name="openid" action="#{socialauth.login}"
value="Openid" actionListener="#{socialauthenticator.updateId}"/>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center;color:red">
<h:messages/>
</td>
<td> </td>
</tr>
</table>
</h:form>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p class="additional">
${msg['msg.footerMsg1']}
</p>
</div>
</div>
</ui:define>
</ui:composition>
</html>
###Step 13. Writing the success.xhtml Success view page, it renders on successful login and display various information about logged in user.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<f:metadata>
<f:event type="preRenderView" listener="#{socialauthenticator.verify}" />
</f:metadata>
</h:head>
<ui:composition template="layout/template.xhtml">
<ui:define name="mainForm">
<div id="main">
<div id="sidebar">
<h1><a href="http://www.brickred.com/"><img alt="" src="images/logo.png" style="border: 0px" /></a></h1>
</div>
<div id="text" >
<h2 align="center">${msg['msg.authenticationSuccessfull']}</h2>
<br/>
<div align="center">
<h:form>
<h:commandLink action="#{socialauthenticator.mainPage}" value="Back" actionListener="socialauth.logout" />
</h:form>
</div>
<br />
<h3 align="center">${msg['label.profileInfo']}</h3>
<ui:fragment rendered="${not empty socialauth.profile}" >
<table cellspacing="1" border="0" bgcolor="e5e5e5" width="60%" align="center">
<tr class="sectiontableheader">
<th>${msg['label.field']}</th>
<th>${msg['label.value']}Value</th>
</tr>
<tr class="sectiontableentry1">
<td>${msg['label.email']}:</td>
<td>${socialauth.profile.email}</td>
</tr>
<tr class="sectiontableentry2">
<td>${msg['label.firstName']}:</td>
<td>${socialauth.profile.firstName}</td>
</tr>
<tr class="sectiontableentry1">
<td>${msg['label.lastName']}:</td>
<td>${socialauth.profile.lastName}</td>
</tr>
<tr class="sectiontableentry2">
<td>${msg['label.country']}:</td>
<td>${socialauth.profile.country}</td>
</tr>
<tr class="sectiontableentry1">
<td>${msg['label.language']}:</td>
<td>${socialauth.profile.language}</td>
</tr>
<tr class="sectiontableentry2">
<td>${msg['label.fullName']}:</td>
<td>${socialauth.profile.fullName}</td>
</tr>
<tr class="sectiontableentry1">
<td>${msg['label.displayName']}:</td>
<td>${socialauth.profile.displayName}</td>
</tr>
<tr class="sectiontableentry2">
<td>${msg['label.dob']}:</td>
<td>${socialauth.profile.dob}</td>
</tr>
<tr class="sectiontableentry1">
<td>${msg['label.gender']}:</td>
<td>${socialauth.profile.gender}</td>
</tr>
<tr class="sectiontableentry2">
<td>${msg['label.location']}:</td>
<td>${socialauth.profile.location}</td>
</tr>
<tr class="sectiontableentry1">
<td>${msg['label.profileImage']}:</td>
<td>
<ui:fragment rendered="${socialauth.profile.profileImageURL != null}">
<img src="${socialauth.profile.profileImageURL}"/>
</ui:fragment>
</td>
</tr>
<tr class="sectiontableentry2">
<td>${msg['label.updateStatus']}:</td>
<td>
<!--input type="button" value="Click to Update Status" onclick="updateStatus();" id="btnUpdateStatus"/-->
<h:panelGrid>
<h:form prependId="false">
<h:inputHidden id="statusMessage"/>
<h:commandButton value="Click to Update Status" id="btnUpdateStatus"
actionListener="#{socialAuthUpdateStatus.updateStatus}" onclick="return preUpdateStatus();">
<f:ajax execute="statusMessage" render="statusPanel" onevent="processEvent" onerror="processError"/>
</h:commandButton>
<h:panelGroup id="statusPanel" >
<h:outputText value="#{socialAuthUpdateStatus.status}" style="color:red"/>
</h:panelGroup>
</h:form>
</h:panelGrid>
</td>
</tr>
</table>
<h3 align="center">${msg['label.contactDet']}</h3>
<table cellspacing="4" border="0" bgcolor="e5e5e5" align="center" width="60%">
<tr class="sectiontableheader">
<th width="15%">${msg['label.fullName']}</th>
<th>${msg['label.email']}</th>
<th>${msg['label.profileURL']}</th>
</tr>
<ui:fragment rendered="${not empty socialauth.contactList}">
<ui:repeat value="#{socialauth.contactList}" var="contact">
<tr class="sectiontableentry1">
<td>${contact.firstName}</td>
<td>${contact.email}</td>
<td><a href="${contact.profileUrl}" target="_new">${contact.profileUrl}</a></td>
</tr>
</ui:repeat>
</ui:fragment>
<ui:fragment rendered="${empty socialauth.contactList}">
<tr>
<td colspan="4">
${msg['msg.noContactAvailable']}
</td>
</tr>
</ui:fragment>
</table>
</ui:fragment>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p class="additional">
${msg['msg.footerMsg1']}
</p>
</div>
</div>
<script>
function disableUpdateStatusButton(){
var btn = document.getElementById('btnUpdateStatus');
btn.disabled=true;
}
function enableUpdateStatusButton(){
var btn = document.getElementById('btnUpdateStatus');
btn.disabled=false;
}
function preUpdateStatus(){
disableUpdateStatusButton();
var msg = prompt("Enter your status here:");
if(msg == null || msg.length == 0){
enableUpdateStatusButton();
return false;
}
document.getElementById('statusMessage').value=msg;
}
function processEvent(e){
var status= e.status
if(status=='complete'){
enableUpdateStatusButton();
}
}
function processError(e){
alert("A error has been occured.")
enableUpdateStatusButton();
}
</script>
</ui:define>
</ui:composition>
</html>
###Step 14. Writing the error.xhtml Error page displays in case of abnormal behaviour of application.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a="http://richfaces.org/a4j"
xmlns:c="http://java.sun.com/jstl/core">
<ui:composition template="layout/template.xhtml">
<ui:define name="mainForm">
<div id="main">
<h1>Error</h1>
<p>Something bad happened :-(</p>
<h:messages styleClass="message"/>
</div>
</ui:define>
</ui:composition>
</html>
###Step 15. Building & deploying the war file
Run maven build and deploy the generted war in your application server.
Homw page will look like as given below. You will have to copy CSS and images from example in your project.
