Merge pull request #954 from pedroigor/master

[KEYCLOAK-992] - More examples. Improving client code.

examples/broker/facebook-authentication/README.md

@@ -0,0 +1,179 @@
+# Keycloak Broker: Facebook Social Identity Provider Quickstarts
+
+What is it?
+-----------
+
+This example demonstrates how to use Social Ientity Providers with KeyCloak to authenticate users. In this case,
+users are authenticated with Facebook using KeyCloak Identity Broker capabilities using the oAuth 2 protocol.
+
+From this example, you'll learn how to:
+
+* Setup a social identity provider for a specific realm
+* Store tokens from a social identity provider and use these tokens to invoke the social provider API
+
+Basically, once you try to access the application for the first time, you'll be redirected to KeyCloak's login page.
+In this page you'll note that there is a "Facebook" button that allows you to authenticate with Facebook Identity Provider.
+
+After clicking the "Facebook" button, you'll be redirected to Facebook's login page from where you must authenticate
+and grant the necessary permissions to KeyCloak in order to access your personal information from Facebook.
+
+If everything is fine, Facebook will redirect you back to KeyCloak and at this point you'll be asked to provide some
+basic profile information in order to create a new user in KeyCloak based on your social account. Once you update your profile,
+you'll be authenticated and redirected to the application.
+
+Basically, what the application does is obtain some basic information for the authenticated user and also allow users to
+load their profile from Facebook. For that, this application demonstrates how to retrieve the token issued by a social provider
+for the authenticated user and use this token to invoke Facebook's API.
+
+Make sure you've set up a application in Facebook
+--------------------------------------
+
+This example application requires you to create a Facebook Application. How to create it is beyond the scope of this
+documentation.
+
+Please take a look on [Facebook Developer Console](https://developers.facebook.com/apps/) for more details.
+
+Once you have a Facebook Application configured, you need to obtain both **App ID** and **App Secret** and update the
+**facebook-identity-provider-realm.json** configuration file with these information. There you'll find a section as follows:
+
+        "identityProviders": [
+                {
+                  "id" : "facebook",
+                  "providerId" : "facebook",
+                  "name" : "Facebook",
+                  "enabled": true,
+                  "updateProfileFirstLogin" : "true",
+                  "storeToken" : "true",
+                  "config": {
+                    "clientId": "CHANGE_CLIENT_ID",
+                    "clientSecret": "CHANGE_CLIENT_SECRET"
+                  }
+                }
+            ]
+
+Please, update both *clientId* and *clientSecret* configuration options with the **App ID** and **App Secret**.
+
+Make sure you've set up the Keycloak Server
+--------------------------------------
+The Keycloak Appliance Distribution comes with a preconfigured Keycloak server (based on Wildfly).  You can use it out of
+the box to run these demos.  So, if you're using this, you can head to Step 2.
+
+Alternatively, you can install the Keycloak Server onto any EAP 6.x, or Wildfly 8.x server, but there is
+a few steps you must follow.
+
+Obtain latest keycloak-war-dist-all.zip.  This distro is used to install Keycloak onto an existing JBoss installation.
+This installs the server.
+
+    $ cd ${wildfly.jboss.home}/standalone
+    $ cp -r ${keycloak-war-dist-all}/deployments .
+
+To be able to run the demos you also need to install the Keycloak client adapter. For Wildfly:
+
+    $ cd ${wildfly.home}
+    $ unzip ${keycloak-war-dist-all}/adapters/keycloak-wildfly-adapter-dist.zip
+
+For JBoss EAP 6.x
+
+    $ cd ${eap.home}
+    $ unzip ${keycloak-war-dist-all}/adapters/keycloak-eap6-adapter-dist.zip
+
+For JBoss AS 7.1.1:
+
+    $ cd ${as7.home}
+    $ unzip ${keycloak-war-dist-all}/adapters/keycloak-as7-adapter-dist.zip
+
+Unzipping the adapter ZIP only installs the JAR files.  You must also add the Keycloak Subsystem to the server's
+configuration (standalone/configuration/standalone.xml).
+
+    <server xmlns="urn:jboss:domain:1.4">
+
+        <extensions>
+            <extension module="org.keycloak.keycloak-subsystem"/>
+            ...
+        </extensions>
+
+        <profile>
+            <subsystem xmlns="urn:jboss:domain:keycloak:1.0"/>
+            ...
+        </profile>
+
+Boot Keycloak Server
+---------------------------------------
+Where you go to start up the Keycloak Server depends on which distro you installed.
+
+From appliance:
+
+```
+$ cd keycloak/bin
+$ ./standalone.sh
+```
+
+
+From existing Wildfly/EAP6/AS7 distro
+
+```
+$ cd ${wildfly.jboss.home}/bin
+$ ./standalone.sh
+```
+
+
+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:8080/auth/admin/master/console/#/create/realm](http://localhost:8080/auth/admin/master/console/#/create/realm)
+
+Import the **facebook-identity-provider-realm.json** file that is in the saml/ example directory.
+
+
+Start JBoss Enterprise Application Platform 6 or WildFly with the Web Profile
+-------------------------
+
+1. Open a command line and navigate to the root of the JBoss server directory.
+2. The following shows the command line to start the server with the web profile:
+
+        For Linux:   JBOSS_HOME/bin/standalone.sh
+        For Windows: JBOSS_HOME\bin\standalone.bat
+
+
+Build and Deploy the Quickstart
+-------------------------
+
+_NOTE: The following build command assumes you have configured your Maven user settings. If you have not, you must include Maven setting arguments on the command line. See [Build and Deploy the Quickstarts](../README.md#build-and-deploy-the-quickstarts) for complete instructions and additional options._
+
+1. Make sure you have started the JBoss Server as described above.
+2. Open a command line and navigate to the root directory of this quickstart.
+3. Type this command to build and deploy the archive:
+
+        For EAP 6:     mvn clean package jboss-as:deploy
+        For WildFly:   mvn -Pwildfly clean package wildfly:deploy
+
+4. This will deploy `target/facebook-authentication.war` to the running instance of the server.
+
+
+Access the application
+---------------------
+
+The application will be running at the following URL: <http://localhost:8080/facebook-authentication>.
+
+
+Undeploy the Archive
+--------------------
+
+1. Make sure you have started the JBoss Server as described above.
+2. Open a command line and navigate to the root directory of this quickstart.
+3. When you are finished testing, type this command to undeploy the archive:
+
+        For EAP 6:     mvn jboss-as:undeploy
+        For WildFly:   mvn -Pwildfly wildfly:undeploy
+
+
+Debug the Application
+------------------------------------
+
+If you want to debug the source code or look at the Javadocs of any library in the project, run either of the following commands to pull them into your local repository. The IDE should then detect them.
+
+        mvn dependency:sources
+        mvn dependency:resolve -Dclassifier=javadoc

examples/broker/facebook-authentication/facebook-identity-provider-realm.json

@@ -38,11 +38,7 @@
             "adminUrl": "/facebook-authentication",
             "baseUrl": "/facebook-authentication",
             "redirectUris": [
-              "/facebook-authentication/*",
-              "http://localhost:8080/facebook-authentication/*"
-            ],
-            "webOrigins": [
-              "http://localhost:8080"
+              "/facebook-authentication/*"
             ]
         }
     ],

examples/broker/facebook-authentication/pom.xml

@@ -10,7 +10,7 @@
         <relativePath>../../pom.xml</relativePath>
     </parent>
 
-    <name>Keycloak Examples - Facebook Authentication</name>
+    <name>Keycloak Broker Examples - Facebook Authentication</name>
     <artifactId>facebook-authentication</artifactId>
     <packaging>war</packaging>
 

examples/broker/facebook-authentication/src/main/webapp/index.html

@@ -18,15 +18,34 @@
 
 <div id="content-area" class="col-md-9" role="main">
     <div id="content">
-        <h2>Hello, {{identity.name}}</h2>
+        <h2>Hello, {{identity.name}} [<a href="" ng-click="logout()">Sign Out</a>]</h2>
         <div>
-            <p><button type="submit" data-ng-click="getSocialProfile()">Load your social profile</button></p>
+            <p><b>This is your KeyCloak Profile</b>:</p>
+            <p>
+                <ul>
+                    <li><b>Id</b>: {{identity.sub}}</li>
+                    <li><b>Username</b>: {{identity.preferred_username}}</li>
+                    <li><b>Email</b>: {{identity.email}}</li>
+                    <li><b>Full Name</b>: {{identity.name}}</li>
+                </ul>
+            </p>
+        </div>
+        <div>
+            <p><button type="submit" data-ng-click="loadSocialProfile()">Load your social profile</button></p>
 
             <div data-ng-show="socialProfile">
-                <p>{{socialProfile}}</p>
+                <p><b>This is your Facebook Profile</b>:</p>
+                <p>
+                    <ul>
+                        <li><b>Id</b>: {{socialProfile.id}}</li>
+                        <li><b>First Name</b>: {{socialProfile.first_name}}</li>
+                        <li><b>Last Name</b>: {{socialProfile.last_name}}</li>
+                        <li><b>Gender</b>: {{socialProfile.gender}}</li>
+                        <li><b>Profile Link</b>: <a href="{{socialProfile.link}}">{{socialProfile.link}}</a></li>
+                    </ul>
+                </p>
             </div>
         </div>
-        <h3><a href="" ng-click="logout()">Sign Out</a></h3>
     </div>
 </div>
 </body>

examples/broker/facebook-authentication/src/main/webapp/js/app.js

@@ -8,7 +8,7 @@ angular.element(document).ready(function ($http) {
             var Auth = {};
 
             Auth.logout = function() {
-                window.location = keycloakAuth.authServerUrl + "/realms/facebook-identity-provider-realm/tokens/logout?redirect_uri=http://localhost:8080/facebook-authentication";
+                keycloakAuth.logout();
             }
 
             Auth.getIdentity = function() {
@@ -19,6 +19,12 @@ angular.element(document).ready(function ($http) {
                 return keycloakAuth.token;
             }
 
+            Auth.refreshToken = function() {
+                return window.location = keycloakAuth.createLoginUrl({
+                    idpHint: 'facebook'
+                });
+            }
+
             return Auth;
         });
 
@@ -69,14 +75,14 @@ angular.element(document).ready(function ($http) {
     });
 });
 
-module.controller('GlobalCtrl', function($scope, $http, Auth) {
+module.controller('GlobalCtrl', function($scope, $http, $location, Auth) {
     $scope.logout = function() {
         Auth.logout();
     }
 
     $scope.identity = Auth.getIdentity();
 
-    $scope.getSocialProfile = function() {
+    $scope.loadSocialProfile = function() {
         $http.get('http://localhost:8081/auth/broker/facebook-identity-provider-realm/facebook/token').success(function(data) {
             var accessTokenParameter = 'access_token=';
             var accessToken = data.substring(data.indexOf(accessTokenParameter) + accessTokenParameter.length, data.indexOf('&'));
@@ -86,7 +92,8 @@ module.controller('GlobalCtrl', function($scope, $http, Auth) {
                     $scope.socialProfile = profile;
                 })
                 .error(function(data, status, headers, config) {
-                    $scope.socialProfile = 'Could not obtain social profile.Try to logout and login again using the social provider.';
+                    $scope.socialProfile = 'Could not obtain social profile. Trying to refresh your token.';
+                    Auth.refreshToken();
                 });
         });
     }

examples/broker/facebook-authentication/src/main/webapp/keycloak.json

@@ -2,7 +2,7 @@
   "realm" : "facebook-identity-provider-realm",
   "resource" : "facebook-authentication",
   "realm-public-key" : "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCrVrCuTtArbgaZzL1hvh0xtL5mc7o0NqPVnYXkLvgcwiC3BjLGw1tGEGoJaXDuSaRllobm53JBhjx33UNv+5z/UMG4kytBWxheNVKnL6GgqlNabMaFfPLPCF8kAgKnsi79NMo+n6KnSY8YeUmec/p2vjO2NjsSAVcWEQMVhJ31LwIDAQAB",
-  "auth-server-url": "http://localhost:8081/auth",
+  "auth-server-url": "/auth",
   "ssl-required" : "external",
   "public-client" : true
 }