twitter

topics/identity-broker/social/stack-overflow.adoc

@@ -1,44 +1,31 @@
 
 ==== StackOverflow
 
+There are a number of steps you have to complete to be able to login to StackOverflow.  First, go to the `Identity Providers` left menu item
+and selected `StackOverflow` from the `Add provider` drop down list.  This will bring you to the `Add identity provider` page.
+
+.Add Identity Provider
+image:../../../{{book.images}}/stack-overflow-add-identity-provider.png[]
+
+You can't click save yet, as you'll need to obtain a `Client ID`, `Client Secret`, and `Key` from StackOverflow.  One piece of data you'll need from this
+page is the `Redirect URI`.  You'll have to provide that to StackOverflow when you register {{book.project.name}} as a client there, so
+copy this URI to your clipboard.
+
 To enable login with StackOverflow you first have to register an OAuth application on https://stackapps.com/[StackApps].
-Then you need to copy the client id, secret and key into the Keycloak Admin Console.
+Go to http://stackapps.com/apps/oauth/register[registering your application on Stack Apps] url and login.
 
-Let's see first how to create an application with StackOverflow.
+NOTE: StackOverflow often changes the look and feel of application registration, so these directions might not always be up to date and the
+      configuration steps might be slightly different.
 
-. Go to http://stackapps.com/apps/oauth/register[registering your application on Stack Apps] url and login here.
-  Use any value for `Application Name`, `Application Website` and `Description` you want.
-  Set `OAuth Domain` to the domain where your Keycloak instance runs.
-  Click the `Register Your Application` button.
-. Copy `Client Id`, `Client Secret` and `Key` from the shown page.
+.Register Application
+image:../../../images/stack-overflow-app-register.png[]
 
-Now that you have the client id, secret and key, you can proceed with the creation of a StackOverflow Identity Provider in Keycloak.
-As follows:
+Enter in the application name and the dns domain name of your application and click `Register your Application`.  Type in anything you want
+for the other items.
 
-. Select the `StackOverflow` identity provider from the drop-down box on the top right corner of the identity providers table in Keycloak's Admin Console.
-  You should be presented with a specific page to configure the selected provided.
-. Copy the client id, client secret and key to their corresponding fields in the Keycloak Admin Console.
-  Click `Save`.
+.Settings
+image:../../../images/stack-overflow-app-settings.png[]
 
-That is it! This pretty much what you need to do in order to setup this identity provider.
-
-The table below lists some additional configuration options you may use when configuring this provider.
-
-.Configuration Options
-[cols="1,1", options="header"]
-|===
-|
-                                Configuration
-
-|
-                                Description
-
-|
-                                Default Scopes
-
-|
-                                Allows you to manually specify the scopes that users must authorize when authenticating with this provider.
-                                For a complete list of scopes, please take a look at application configuration in StackExchange API Authentication documentation. Keycloak uses the empty scope by default.
-
-|===
+Finally, you will need to obtain the client ID, secret, and key from this page so you can enter them back on the {{book.project.name}} `Add identity provider` page.
+Go back to {{book.project.name}} and specify those items.
 

topics/identity-broker/social/twitter.adoc

@@ -1,46 +1,44 @@
 
 ==== Twitter
 
+There are a number of steps you have to complete to be able to login to Twitter.  First, go to the `Identity Providers` left menu item
+and selected `Twitter` from the `Add provider` drop down list.  This will bring you to the `Add identity provider` page.
+
+.Add Identity Provider
+image:../../../{{book.images}}/twitter-add-identity-provider.png[]
+
+You can't click save yet, as you'll need to obtain a `Client ID` and `Client Secret` from Twitter.  One piece of data you'll need from this
+page is the `Redirect URI`.  You'll have to provide that to Twitter when you register {{book.project.name}} as a client there, so
+copy this URI to your clipboard.
+
 To enable login with Twtter you first have to create an application in the https://dev.twitter.com/apps[Twitter Developer Console].
-Then you need to copy the consumer key and secret into the Keycloak Admin Console.
 
-Let's see first how to create an application with Twitter.
+.Register Application
+image:../../../images/twitter-app-register.png[]
 
-. Log in to the https://dev.twitter.com/apps[Twitter Developer Console].
-  Click the `Create a new application` button.
-  Use any value for `Name`, `Description` and `Website` you want.
-  Insert the social callback url in `Callback URL`.
-  Then click `Create your Twitter application`.
-. Now click on `Settings` and tick the box `Allow this application to be used to Sign in with Twitter`, then click on `Update this Twitter application's settings`.
-. Now click `API Keys` tab.
-  Copy `API key` and `API secret` from the https://dev.twitter.com/apps[Twitter Developer Console].
 
-NOTE: Twitter doesn't allow `localhost` in the redirect URI.
-To test on a local server replace `localhost` with `127.0.0.1`.
+Click on the `Create New App` button.  This will bring you to the `Create an Application` page.
 
-Now that you have the client id and secret, you can proceed with the creation of a Twitter Identity Provider in Keycloak.
-As follows:
+.Register Application
+image:../../../images/twitter-app-create.png[]
 
-. Select the `Twitter` identity provider from the drop-down box on the top right corner of the identity providers table in Keycloak's Admin Console.
-  You should be presented with a specific page to configure the selected provided.
-. Copy the client id and secret to their corresponding fields in the Keycloak Admin Console.
-  Click `Save`.
 
-That is it! This pretty much what you need to do in order to setup this identity 		provider.
+Enter in a Name and Description.  The Website can be anything, but cannot have a `localhost` address.  For the
+`Callback URL` you must copy the `Redirect URI` from the {{book.project.name}} `Add Identity Provider` page.
 
-The table below lists some additional configuration options you may use when configuring this provider.
+WARNING: You cannot use `localhost` in the `Callback URL`.  Instead replace it with `127.0.0.1` if you are trying to
+         testdrive Twitter login on your laptop.
 
-.Configuration Options
-[cols="1,1", options="header"]
-|===
-|
-                                Configuration
+After clicking save you will be brought to the `Details` page.
 
-|
-                                Description
+.App Details
+image:../../../images/twitter-details.png[]
 
-|
-                                Default Scopes
 
-|===
+Next go to the `Keys and Access Tokens` tab.
+
+.Keys and Access Tokens
+image:../../../images/twitter-keys.png[]
+
+Finally, you will need to obtain the API Key and secret from this page and copy them back into the `Client ID` and `Client Secret` fields on the {{book.project.name}} `Add identity provider` page.