libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

Moved social config instructions from admin console to documentation

Browse source
This commit is contained in:
Stian Thorgersen 2014-01-17 17:21:44 +00:00
parent d34c73f9b9
commit 2b38df9495
14 changed files with 192 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js
View file

@ -696,15 +696,6 @@ module.controller('RealmSocialCtrl', function($scope, realm, Realm, $location, N
initSocial();
};
$scope.openHelp = function(pId) {
$scope.helpPId = pId;
$scope.providerHelpModal = true;
};
$scope.closeHelp = function() {
$scope.providerHelpModal = false;
};
});
module.controller('RealmTokenDetailCtrl', function($scope, Realm, realm, $http, $location, Dialog, Notifications, TimeUnit) {

32
admin-ui/src/main/resources/META-INF/resources/admin/partials/provider/facebook-help.html
View file

@ -1,32 +0,0 @@
<p>Open <a href="https://developers.facebook.com/apps" target="_blank">https://developers.facebook.com/apps</a>. Click on <i>Create New App</i></p>
<p>Use any app name that you'd like, click <i>Continue</i></p>
<p>Select <i>Disabled</i> for <i>Sandbox Mode</i></p>
<p>Under <i>Select how your app integrates with Facebook</i> select <i>Website with Facebook login</i>. Fill in the form with the following values:</p>
<ul>
<li><b>Site URL:</b> {{callbackUrl}}</li>
</ul>
<p>Click on <i>Save changes</i>. Insert <i>App ID</i> and <i>App Secret</i> in the form below.</p>
<form class="form-horizontal" name="fbHelpForm">
<div class="control-group">
<label class="control-label" for="providerHelp.key">App ID </label>
<div class="controls">
<input type="text" class="input-xlarge" id="providerHelp.key" ng-model="realm.socialProviders[helpPId+'.key']">
</div>
</div>
<div class="control-group">
<label class="control-label" for="providerHelp.secret">App Secret </label>
<div class="controls">
<input type="text" class="input-xlarge" id="providerHelp.secret" ng-model="realm.socialProviders[helpPId+'.secret']">
</div>
</div>
</form>
<p>
Close the help panel and click <i>save changes</i>.
</p>

35
admin-ui/src/main/resources/META-INF/resources/admin/partials/provider/google-help.html
View file

@ -1,35 +0,0 @@
<p>
Open <a href="https://cloud.google.com/console/project" target="_blank">https://cloud.google.com/console/project</a>.
Click <i>Create Project</i>.
</p>
<p>Use any project name and id that you'd want and click <i>Create</i>. Wait for the project to be created.</p>
<p>Click <i>APIs & auth</i>, under <i>APIs</i> make sure <i>Google+ API</i> is <i>ON</i>.
<p>Click <i>Credentials</i> and click on <i>Create New Client ID</i>. Select <i>Web application</i> as <i>Application
type</i>. <i>Authorized Javascript origins</i> should be empty. Add <i>{{callbackUrl}}</i> to <i>Authorized redirect
URI</i>. Click <i>Create Client ID</i></p>.
<p>Insert <i>Client ID</i> and <i>Client secret</i> in the form below.</p>
<form class="form-horizontal" name="googleHelpForm">
<div class="control-group">
<label class="control-label" for="providerHelp.key">Client ID </label>
<div class="controls">
<input type="text" class="input-xlarge" id="providerHelp.key"
ng-model="realm.socialProviders[helpPId+'.key']">
</div>
</div>
<div class="control-group">
<label class="control-label" for="providerHelp.secret">Client secret </label>
<div class="controls">
<input type="text" class="input-xlarge" id="providerHelp.secret"
ng-model="realm.socialProviders[helpPId+'.secret']">
</div>
</div>
</form>
<p>Close the help panel and click <i>save changes</i>.</p>

40
admin-ui/src/main/resources/META-INF/resources/admin/partials/provider/twitter-help.html
View file

@ -1,40 +0,0 @@
<p>
Open <a href="https://dev.twitter.com/apps" target="_blank">https://dev.twitter.com/apps</a>. Click on <i>Create a new
application</i>.
</p>
<p>Fill in name, description and website. For <i>Callback URL</i> use the following value:</p>
<ul>
<li><b>Callback URL:</b> {{callbackUrl}}</li>
</ul>
<p>Note: Twitter doesn't allow <b>localhost</b> as domain, use <b>127.0.0.1</b> instead!</p>
<p>Agree to the rules, fill in the captcha and click on <i>Create your Twitter application</i></p>
<p>
Now click on <i>Settings</i> and tick the box <i>Allow this application to be used to Sign in with Twitter</i>, and click on <i>Update
this Twitter application's settings</i>.
</p>
<p>Click on <i>Details</i>. Insert <i>Consumer key</i> and <i>Consumer secret</i> in the form below.</p>
<form class="form-horizontal" name="twitterHelpForm">
<div class="control-group">
<label class="control-label" for="providerHelp.key">Consumer key </label>
<div class="controls">
<input type="text" class="input-xlarge" id="providerHelp.key" ng-model="realm.socialProviders[helpPId+'.key']">
</div>
</div>
<div class="control-group">
<label class="control-label" for="providerHelp.secret">Consumer secret </label>
<div class="controls">
<input type="text" class="input-xlarge" id="providerHelp.secret" ng-model="realm.socialProviders[helpPId+'.secret']">
</div>
</div>
</form>
<p>
Close the help panel and click <i>save changes</i>.
</p>

24
admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-social.html
View file

@ -21,6 +21,12 @@
<li class="active">Social</li>
</ol>
<h2><span>{{realm.realm}}</span> Social Providers Settings</h2>
<div class="feedback info inline">
<p><strong>Social Callback URL:</strong> {{callbackUrl}}</p>
</div>
<form name="realmForm" novalidate>
<fieldset>
<div>
@ -64,7 +70,6 @@
ng-class="{'dirty': postSaveProviders.indexOf(pId) > -1}" required>
</td>
<td>
<div class="action-div"><i class="icon-question" ng-click="openHelp(pId)"></i></div>
<div class="action-div"><i class="icon-remove" ng-click="removeProvider(pId)"></i></div>
</td>
</tr>
@ -72,6 +77,7 @@
</table>
</div>
</fieldset>
<div class="form-actions">
<button type="submit" kc-save class="primary" data-ng-show="changed">Save
changes
@ -86,22 +92,6 @@
</div>
</div>
<div modal="providerHelpModal" close="closeHelp()" options="opts">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Configure {{helpPId}}</h3>
</div>
<div class="modal-body">
<div ng-include src="'partials/provider/'+ helpPId +'-help.html'"></div>
</div>
<div class="modal-footer">
<button ng-click="closeHelp()">Close</button>
</div>
</div>
</div>
</div>
<!-- TODO remove once this page is properly styled -->
<style type="text/css">
.social-provider input.ng-invalid.dirty,

18
docbook/reference/en/en-US/master.xml
View file

@ -7,6 +7,11 @@
<!ENTITY AdapterConfig SYSTEM "modules/adapter-config.xml">
<!ENTITY WildflyAdapter SYSTEM "modules/wildfly-adapter.xml">
<!ENTITY EAP6Adapter SYSTEM "modules/eap6-adapter.xml">
<!ENTITY SocialConfig SYSTEM "modules/social-config.xml">
<!ENTITY SocialFacebook SYSTEM "modules/social-facebook.xml">
<!ENTITY SocialGoogle SYSTEM "modules/social-google.xml">
<!ENTITY SocialTwitter SYSTEM "modules/social-twitter.xml">
<!ENTITY SocialProviderSPI SYSTEM "modules/social-spi.xml">
]>
<book>
@ -55,5 +60,18 @@
&EAP6Adapter;
</chapter>
<chapter>
<title>Social</title>
<para>
Social login description
</para>
&SocialConfig;
&SocialFacebook;
&SocialGoogle;
&SocialTwitter;
&SocialProviderSPI;
</chapter>
</book>

17
docbook/reference/en/en-US/modules/social-config.xml Normal file
View file

@ -0,0 +1,17 @@
<section id="social-config">
<title>Social Login Config</title>
<para>
Social login config description
</para>
<section id="social-callbackurl">
<title>Social Callback URL</title>
<para>
There is a single callback url used by all realms and social providers. This makes it possible to share
the configuration for a social network between multiple realms. An example callback url is
<literal>http://localhost:8080/auth/rest/social/callback</literal>. To get the callback url for your server
replace <literal>http://localhost:8080</literal> with the base address of your server. You can also
find the callback url in the Keycloak Admin Console under social settings.
</para>
</section>
</section>

45
docbook/reference/en/en-US/modules/social-facebook.xml Normal file
View file

@ -0,0 +1,45 @@
<section id="social-facebook">
<title>Facebook</title>
<para>
To enable login with Facebook you first have to create an app in the
<ulink url="https://developers.facebook.com/">Facebook Developer Console</ulink>. Then you need to copy
the client id and secret into the Keycloak Admin Console.
</para>
<orderedlist>
<listitem>
<para>
Log in to the <ulink url="https://developers.facebook.com/">Facebook Developer Console</ulink>. Click
<literal>Apps</literal> in the menu and select <literal>Create a New App</literal>. Use any value for
<literal>Display Name</literal> and <literal>Category</literal> you want, then click the
<literal>Create App</literal> button. Wait for the project to be created (this may take a while). If after
creating the app you are not redirected to the app settings, click on <literal>Apps</literal> in the
menu and select the app you created.
</para>
</listitem>
<listitem>
<para>
Once the app has been created click on <literal>Settings</literal> in sidebar on the left. Then click
on <literal>Advanced</literal>. Under <literal>Security</literal> make sure
<literal>Client OAuth Login</literal> is enabled. In <literal>Valid OAuth redirect URIs</literal> insert
the <link linkend="social-callbackurl">social callback url</link>. Facebook doesn't allow
<literal>localhost</literal> in the redirect URI, so if you are testing on a local server replace
<literal>localhost</literal> with <literal>127.0.0.1</literal>. Scroll down and click on the
<literal>Save Changes</literal> button.
</para>
</listitem>
<listitem>
<para>
Click <literal>Status &amp; Review</literal> and select <literal>YES</literal> for <literal>Do you want
to make this app and all its live features available to the general public?</literal>.
</para>
</listitem>
<listitem>
<para>
Click <literal>Basic</literal>. Copy <literal>App ID</literal> and <literal>App Secret</literal>
(click <literal>show</literal>) from the <ulink url="https://developers.facebook.com/">Facebook Developer Console</ulink> into the
settings page in the Keycloak Admin Console as the <literal>Key</literal> and <literal>Secret</literal>. Then
click <literal>Save</literal> in the Keycloak Admin Console to enable login with Facebook.
</para>
</listitem>
</orderedlist>
</section>

48
docbook/reference/en/en-US/modules/social-google.xml Normal file
View file

@ -0,0 +1,48 @@
<section id="social-google">
<title>Google</title>
<para>
To enable login with Google you first have to create a project and a client in the
<ulink url="https://cloud.google.com/console/project">Google Developer Console</ulink>. Then you need to copy
the client id and secret into the Keycloak Admin Console.
</para>
<orderedlist>
<listitem>
<para>
Log in to the <ulink url="https://cloud.google.com/console/project">Google Developer Console</ulink>. Click the
<literal>Create Project</literal> button. Use any value for <literal>Project name</literal> and
<literal>Project ID</literal> you want, then click the <literal>Create</literal> button. Wait for the project to
be created (this may take a while).
</para>
</listitem>
<listitem>
<para>
Once the project has been created click on <literal>APIs &amp; auth</literal> in sidebar on the left. To retrieve
user profiles the <literal>Google+ API</literal> has to be enabled. Scroll down to find it in the list. If its
status is <literal>OFF</literal>, click on <literal>OFF</literal> to enable it (it should move to the top of
the list and the status should be <literal>ON</literal>).
</para>
</listitem>
<listitem>
<para>
Now click <literal>Credentials</literal> in the sidebar on the left. Then click
<literal>Create New Client ID</literal>. Select <literal>Web application</literal> as
<literal>Application type</literal>. Empty the <literal>Authorized Javascript origins</literal> textarea. In
<literal>Authorized redirect URI</literal> enter the <link linkend="social-callbackurl">social callback url</link>
for your realm. Click the <literal>Create Client ID</literal> button.
</para>
</listitem>
<listitem>
<para>
Copy <literal>Client ID</literal> and <literal>Client secret</literal> from the
<ulink url="https://cloud.google.com/console/project">Google Developer Console</ulink> into the settings
page in the Keycloak Admin Console as the <literal>Key</literal> and <literal>Secret</literal>. Then click
<literal>Save</literal> in the Keycloak Admin Console to enable login with Google.
</para>
</listitem>
</orderedlist>
<para>
You may also want to configure how the Google Consent Screen looks when users log in to your application via
Google. To do this go to <ulink url="https://cloud.google.com/console/project">Google Developer Console</ulink>
and click on <literal>Consent Screen</literal> in the sidebar to the left.
</para>
</section>

11
docbook/reference/en/en-US/modules/social-spi.xml Normal file
View file

@ -0,0 +1,11 @@
<section id="social-spi">
<title>Social Provider SPI</title>
<para>
Keycloak provides an SPI to make it easy to add additional social providers. This is done by implementing the
<ulink url="https://raw.github.com/keycloak/keycloak/master/social/core/src/main/java/org/keycloak/social/SocialProvider.java">SocialProvider</ulink>
interface and providing a provider configuration file (<literal>META-INF/services/org.keycloak.social.SocialProvider</literal>).
</para>
<para>
A good reference for implementing a Social Provider is the <ulink url="https://github.com/keycloak/keycloak/tree/master/social/google">Google provider</ulink>.
</para>
</section>

35
docbook/reference/en/en-US/modules/social-twitter.xml Normal file
View file

@ -0,0 +1,35 @@
<section id="social-twitter">
<title>Twitter</title>
<para>
To enable login with Twtter you first have to create an application in the
<ulink url="https://dev.twitter.com/apps">Twitter Developer Console</ulink>. Then you need to copy
the consumer key and secret into the Keycloak Admin Console.
</para>
<orderedlist>
<listitem>
<para>
Log in to the <ulink url="https://dev.twitter.com/apps">Twitter Developer Console</ulink>. Click the
<literal>Create a new application</literal> button. Use any value for <literal>Name</literal>,
<literal>Description</literal> and <literal>Website</literal> you want. Insert the social callback url
in <literal>Callback URL</literal>. Twitter doesn't allow <literal>localhost</literal> in the redirect URI,
so if you are testing on a local server replace <literal>localhost</literal> with <literal>127.0.0.1</literal>.
Twitter also restricts connection to TLS/SSL connections only, this means that you have to use HTTPS to
access Keycloak in order to log in via Twitter. Then click <literal>Create your Twitter application</literal>.
</para>
</listitem>
<listitem>
<para>
Now click on <literal>Settings</literal> and tick the box <literal>Allow this application to be used to Sign in with Twitter</literal>,
then click on <literal>Update this Twitter application's settings</literal>.
</para>
</listitem>
<listitem>
<para>
Now click <literal>Details</literal>. Copy <literal>Consumer key</literal> and <literal>Consumer secret</literal> from the
<ulink url="https://dev.twitter.com/apps">Twitter Developer Console</ulink> into the settings
page in the Keycloak Admin Console as the <literal>Key</literal> and <literal>Secret</literal>. Then click
<literal>Save</literal> in the Keycloak Admin Console to enable login with Twitter.
</para>
</listitem>
</orderedlist>
</section>

2
pom.xml
View file

@ -269,7 +269,7 @@
<dependency>
<groupId>org.twitter4j</groupId>
<artifactId>twitter4j-core</artifactId>
<version>3.0.3</version>
<version>3.0.5</version>
</dependency>
<!-- QR Code Generator -->

5
social/facebook/src/main/java/org/keycloak/social/facebook/FacebookProvider.java
View file

@ -44,9 +44,12 @@ public class FacebookProvider implements SocialProvider {
public AuthRequest getAuthUrl(SocialProviderConfig config) throws SocialProviderException {
String state = UUID.randomUUID().toString();
String redirectUri = config.getCallbackUrl();
redirectUri = redirectUri.replace("//localhost", "//127.0.0.1");
return AuthRequest.create(state, AUTHENTICATION_ENDPOINT_URL).setQueryParam("client_id", config.getKey())
.setQueryParam("response_type", DEFAULT_RESPONSE_TYPE).setQueryParam("scope", DEFAULT_SCOPE)
.setQueryParam("redirect_uri", config.getCallbackUrl()).setQueryParam("state", state).setAttribute("state", state).build();
.setQueryParam("redirect_uri", redirectUri).setQueryParam("state", state).setAttribute("state", state).build();
}
@Override

9
social/twitter/src/main/java/org/keycloak/social/twitter/TwitterProvider.java
View file

@ -42,12 +42,15 @@ public class TwitterProvider implements SocialProvider {
}
@Override
public AuthRequest getAuthUrl(SocialProviderConfig request) throws SocialProviderException {
public AuthRequest getAuthUrl(SocialProviderConfig config) throws SocialProviderException {
try {
Twitter twitter = new TwitterFactory().getInstance();
twitter.setOAuthConsumer(request.getKey(), request.getSecret());
twitter.setOAuthConsumer(config.getKey(), config.getSecret());
RequestToken requestToken = twitter.getOAuthRequestToken(request.getCallbackUrl());
String redirectUri = config.getCallbackUrl();
redirectUri = redirectUri.replace("//localhost", "//127.0.0.1");
RequestToken requestToken = twitter.getOAuthRequestToken(redirectUri);
return AuthRequest.create(requestToken.getToken(), requestToken.getAuthenticationURL())
.setAttribute("token", requestToken.getToken()).setAttribute("tokenSecret", requestToken.getTokenSecret())