Skip to content

Latest commit

 

History

History
 
 

cors

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
angular-product-app
angular-product-app
 
 
database-service
database-service
 
 
README.md
README.md
 
 
cors-realm.json
cors-realm.json
 
 
pom.xml
pom.xml
 
 

README.md

Keycloak CORS support

The following examples requires Wildfly 8.0.0, JBoss EAP 6.x, or JBoss AS 7.1.1. This example simulates Browser CORS requests. While the examples will run on one machine, the servers/applications are configured to point to different domains:

  • localhost-auth is where the Keycloak auth server lives
  • localhost-db is where a database REST service lives
  • localhost is where the Javascript application lives

In the demo you will visit the Javascript application and be redirected to Keycloak to login. As part of the login process, the javascript application will have to make a CORS request to the auth server (localhost-auth) to obtain a token. After it logs in, the application will make another CORS request to the REST database service (localhost-db).

Here are some of the configuration additions to this example to enable CORS:

  1. The angular-product application in realm configuration has a Web Origin of http://localhost:8080. When you log into the angular-product application, Keycloak will add the Web Origins for that application to the token. Any CORS request made will check these allowed origins to make sure they match up with the Origin header the browser is sending
  2. The angular-product application config (keycloak.json) points the auth-server at http://localhost-auth:8080/auth
  3. The database-service config (keycloak.json) has an additional flag set enable-cors

Step 1: Edit your hosts file

The demo expects additional host mappings for localhost. So, you need to edit your machine's host file (/etc/hosts or C:\Windows\System32\drivers\etc\hosts) and add the following entries:

127.0.0.1 localhost-auth
127.0.0.1 localhost-db

Step 2: Make sure you've set up the Keycloak Server and have it running

You will run this demo on the same server as the keycloak server. Its best to use the appliance as everything is all set up. See documentation on how to set this up.

Step 3: Import the Test Realm

Next thing you have to do is import the test realm for the demo. Clicking on the below link will bring you to the create realm page in the Admin UI. The username/password is admin/admin to login in. Keycloak will ask you to create a new admin password before you can go to the create realm page.

http://localhost-auth:8080/auth/admin/index.html#/create/realm

Import the cors-realm.json file that is in the cors/ example directory. Feel free to browse the setup of the realm, particularly the angular-product application.

Step 4: Build and deploy

next you must build and deploy

cd cors
mvn clean install wildfly:deploy

Step 5: Login and Observe Apps

Try going to the customer app and view customer data:

http://localhost:8080/angular-cors-product/index.html

This should take you to the auth-server login screen. Enter username: [email protected] and password: password. You should be brought back to a simple and boring HTML page. Click the Reload button to show the product listing. Reload causes an HTTP request to a different domain, this will trigger the browser's CORS protocol.