oAuth2 404 Error on Redirect - Google and an Angular2 app

Issue Encountered:

Could never properly redirect back to our Angular2 application after successful social based authentication.

We were encountering a 404 (file not found) redirect issue in an Angular2 app after successfully authenticating via Google oAuth login. I was running my Angular application on Tomcat 9 and had the app running under an application context and not in the root (default-context> of the server. For example /example-application/index.html. The problem was the oAuth callback success url was set to /example-application/social-login-success?token= and you would just always get back a 404 error because the application/web server (Tomcat) was not able to retrieve a file at that location. That url is actually an Angular route that the angular router needs to handle, but the router was never being reached.

Solution:
Add a redirect at the tomcat level.

1) Create a WEB-INF folder at location of your application root <Tomcat-root>/<example-application>/WEB-INF
2) Create a web.xml file within the new WEB-INF folder with the following content:

  <web-app>
    <error-page>
      <error-code>404<error-code>
    </error-page> 
  </web-app>

Success! Now you will be able to log into your Angular2 based app via Google Login and successfully redirect to the right route within your Angular application. Cheers.

Comments

Where to start on AngularJS for Java Developer

Background: If you are a Java developer who is comfortable using Eclipse (JEE Developer version) you may be asking yourself where to start with AngularJS. There is all kinds of documentation out there in regards to AngularJS and https://angularjs.org/ provides, to the point, tutorials on how to get started. You can certainly go that route and use node.js embedded server and possibly a Javascript focused IDE like WebStorm. However I wanted to try and stay in a comfort zone, my comfort zone, of Eclipse and be in a position to deploy an Angular application to a container like Tomcat. This blog entry will present the trail I took to try and accomplish it. Note: This is an adventure into Angular 1.x, not 2.x. I would imagine this could all work with 2.x as well as it is focused on the dev environment setup. Start: Well the one consistent thing you will find to get started is to install the AngularJS Plugin, provided by Angelo ZERR. You can use the Eclipse 4.5 (Mars) plugin inst

WSO2: Simple Pass through proxy (REST to REST with HTML Reply)

Today I set out on trying to set up a simple passthrough proxy that would allow for a GET request to be made to REST style backend services that replies with HTML content. The proxy services was being set up on WS02 ESB v4.8.0. I thought this was really going to be as simple as walking though their wizard and setting up a new proxy endpoint that just handed off to the behinds the scene service. It was straight forward to set up the proxy, but then unfortunately when called it just didn't respond. It took quite awhile to figure out what the issues was. At first I was using the ESB admin console and review the System and Application Logs. The Application Logs were certainly more useful, but they still truncated stack traces which made it hard to clue in on the real issue. It wasn't until I went and review the logs on the server that I was able to detect the cause. <wso2_esb_root>/repository/logs/wso2-esb-errors.log 2015-03-19 16:09:43,001 [-] [Pass

HTML5 Canvas nightmares with JSF

The last couple of days have been one of those 'why is this so difficult' moments. I essentially lost more than a day trying to figure out how to get HTML5 canvases to show up in one of our JSF applications. Here is the background on the stack: JBoss AS 7.2.0 JDK 1.7.x Seam (JSF Framework) v2.2.0 Richfaces v3.3.3 Essentially we wanted to introduce a canvas to our page in order to graphical represent a numeric value and where it falls upon its normal range and possible range of values. The page was leveraging a <ui:include> in order to display the results section. It was a common component used among multiple pages and therefore the reason being pulled in via an include. A richfaces commandLink was being used to initiate an AJAX request that would pull back none, one or many results and re-render the display within a JSF panelGroup. Canvas Background: If you look at any of the examples of using HTML5 canvases, you generally will see the definitio

RizzoDev

Search This Blog