Update Social Identity Providers documentation (#24601)

Signed-off-by: Tomas Ondrusko <tondrusk@redhat.com>

docs/documentation/server_admin/topics.adoc

@@ -37,13 +37,13 @@ include::topics/identity-broker/social/facebook.adoc[]
 include::topics/identity-broker/social/github.adoc[]
 include::topics/identity-broker/social/gitlab.adoc[]
 include::topics/identity-broker/social/google.adoc[]
+include::topics/identity-broker/social/instagram.adoc[]
 include::topics/identity-broker/social/linked-in.adoc[]
 include::topics/identity-broker/social/microsoft.adoc[]
 include::topics/identity-broker/social/openshift.adoc[]
 include::topics/identity-broker/social/paypal.adoc[]
 include::topics/identity-broker/social/stack-overflow.adoc[]
 include::topics/identity-broker/social/twitter.adoc[]
-include::topics/identity-broker/social/instagram.adoc[]
 include::topics/identity-broker/oidc.adoc[]
 include::topics/identity-broker/saml.adoc[]
 include::topics/identity-broker/suggested.adoc[]

docs/documentation/server_admin/topics/identity-broker/social/bitbucket.adoc

@@ -15,6 +15,6 @@ image:images/bitbucket-add-identity-provider.png[Add Identity Provider]
 .. Paste the value of *Redirect URI* into the *Callback URL* field.
 .. Ensure you select *Email* and *Read* in the *Account* section to permit your application to read email.
 . Note the `Key` and `Secret` values Bitbucket displays when you create your consumer.
-. In {project_name}, paste the value of the `Key` into the *Consumer Key* field.
-. In {project_name}, paste the value of the `Secret` into the *Consumer Secret* field.
+. In {project_name}, paste the value of the `Key` into the *Client ID* field.
+. In {project_name}, paste the value of the `Secret` into the *Client Secret* field.
 . Click *Add*.

docs/documentation/server_admin/topics/identity-broker/social/facebook.adoc

@@ -4,17 +4,41 @@
 
 .Procedure
 . Click *Identity Providers* in the menu.
-. From the `Add provider` list, select `Facebook`. {project_name} displays the configuration page for the Facebook identity provider.
+. From the `Add provider` list, select `Facebook`.
 +
 .Add identity provider
 image:images/facebook-add-identity-provider.png[Add Identity Provider]
 . Copy the value of *Redirect URI* to your clipboard.
-. In a separate browser tab, follow the https://developers.facebook.com/docs/development/[Facebook Developer Guide's] instructions to create a project and client in Facebook.
-.. Ensure your app is a website-type app.
-.. Enter the *Redirect URI's* value into the `Site URL` of the Facebook `Website` settings block.
-.. Ensure the app is public.
+. In a separate browser tab, open the https://developers.facebook.com/[Meta for Developers].
+.. Click *My Apps*.
+.. Select *Create App*.
 +
-. Enter the https://developers.facebook.com/docs/facebook-login/guides/access-tokens[`Client ID` and `Client Secret`] values from your Facebook app into the `Client ID` and `Client Secret` fields in {project_name}.
+.Add a use case
+image:images/meta-add-use-case.png[Add a use case]
++
+.. Select `Other`.
++
+.Select an app type
+image:images/meta-select-app-type.png[Select an app type]
++
+.. Select `Consumer`.
++
+.Create an app
+image:images/meta-create-app.png[Create an app]
++
+.. Fill in all required fields.
+.. Click *Create app*. Meta then brings you to the dashboard.
++
+.Add a product
+image:images/meta-add-product.png[Add Product]
++
+.. Click *Set Up* in the *Facebook Login* box.
+.. Select *Web*.
+.. Enter the *Redirect URI's* value into the `Site URL` field and click *Save*.
+.. In the navigation panel, select *App settings* - *Basic*.
+.. Click *Show* in the *App Secret* field.
+.. Note the `App ID` and the `App Secret`.
+. Enter the https://developers.facebook.com/docs/facebook-login/guides/access-tokens[`App ID` and `App Secret`] values from your Facebook app into the *Client ID* and *Client Secret* fields in {project_name}.
 . Click *Add*
 
 . Enter the required scopes into the *Default Scopes* field. By default, {project_name} uses the `email` scope. See https://developers.facebook.com/docs/graph-api[Graph API] for more information about Facebook scopes. 

docs/documentation/server_admin/topics/identity-broker/social/github.adoc

@@ -15,8 +15,8 @@ image:images/github-add-identity-provider.png[Add Identity Provider]
 . Copy the value of *Redirect URI* to your clipboard.
 . In a separate browser tab, https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app[create an OAUTH app].
 .. Enter the value of *Redirect URI* into the `Authorization callback URL` field when creating the app.
-.. Note the Client ID and Client secret on the management page of your OAUTH app.
+.. Note the `Client ID` and `Client secret` on the management page of your OAUTH app.
 . In {project_name}, paste the value of the `Client ID` into the *Client ID* field.
-. In {project_name}, paste the value of the `Client Secret` into the *Client Secret* field.
+. In {project_name}, paste the value of the `Client secret` into the *Client Secret* field.
 . Click *Add*.
 

docs/documentation/server_admin/topics/identity-broker/social/gitlab.adoc

@@ -6,14 +6,14 @@
 . From the `Add provider` list, select `GitLab`.
 +
 .Add identity provider
-image:images/gitlab-add-identity-provider.png[Add identity provider]
+image:images/gitlab-add-identity-provider.png[Add Identity Provider]
 +
 . Copy the value of *Redirect URI* to your clipboard.
 . In a separate browser tab, https://docs.gitlab.com/ee/integration/oauth_provider.html[add a new GitLab application].
 .. Use the *Redirect URI* in your clipboard as the *Redirect URI*.
-.. Note the `Client ID` and `Client Secret` when you save the application.
-. In {project_name}, paste the value of the `Client ID` into the *Client ID* field.
-. In {project_name}, paste the value of the `Client Secret` into the *Client Secret* field.
+.. Note the `Application ID` and `Secret` when you save the application.
+. In {project_name}, paste the value of the `Application ID` into the *Client ID* field.
+. In {project_name}, paste the value of the `Secret` into the *Client Secret* field.
 . Click *Add*.
 
 

docs/documentation/server_admin/topics/identity-broker/social/google.adoc

@@ -11,16 +11,16 @@ image:images/google-add-identity-provider.png[Add Identity Provider]
 +
 . Copy the value of *Redirect URI* to your clipboard.
 . In a separate browser tab open https://console.cloud.google.com/[the Google Cloud Platform console].
-. In the Google dashboard for your Google app, click the *OAuth consent screen* menu. Create a consent screen, ensuring that the user type of the consent screen is external.
+. In the Google dashboard for your Google app, in the Navigation menu on the left side, hover over *APIs & Services* and then click on the *OAuth consent screen* option. Create a consent screen, ensuring that the user type of the consent screen is *External*.
 . In the Google dashboard:
 .. Click the *Credentials* menu.
 .. Click *CREATE CREDENTIALS* - *OAuth Client ID*.
 .. From the *Application type* list, select *Web application*.
 .. Use the *Redirect URI* in your clipboard as the *Authorized redirect URIs*
 .. Click *Create*.
-.. Note *Your Client ID* and *Your Client Secret*.
-. In {project_name}, paste the value of the *Your Client ID* into the *Client ID* field.
-. In {project_name}, paste the value of the *Your Client Secret* into the *Client Secret* field.
+.. Note `Your Client ID` and `Your Client secret`.
+. In {project_name}, paste the value of the `Your Client ID` into the *Client ID* field.
+. In {project_name}, paste the value of the `Your Client secret` into the *Client Secret* field.
 . Click *Add*
 . Enter the required scopes into the *Default Scopes* field. By default, {project_name} uses the following scopes: `openid` `profile` `email`. See the https://developers.google.com/oauthplayground/[OAuth Playground] for a list of Google scopes.
 . To restrict access to your GSuite organization's members only, enter the G Suite domain into the `Hosted Domain` field.

docs/documentation/server_admin/topics/identity-broker/social/instagram.adoc

@@ -8,41 +8,41 @@
 .Add identity provider
 image:images/instagram-add-identity-provider.png[Add Identity Provider]
 . Copy the value of *Redirect URI* to your clipboard.
-. In a separate browser tab, open the https://developers.facebook.com/[Facebook Developer Console].
+. In a separate browser tab, open the https://developers.facebook.com/[Meta for Developers].
 .. Click *My Apps*.
-.. Select *Add a New App*.
+.. Select *Create App*.
 +
-.Add a new app
-image:images/instagram-add-new-app.png[Add a New App]
+.Add a use case
+image:images/meta-add-use-case.png[Add a use case]
 +
-.. Select `For Everything Else`.
+.. Select `Other`.
 +
-.Create a new app ID
-image:images/instagram-create-app-id.png[]
+.Select an app type
+image:images/meta-select-app-type.png[Select an app type]
++
+.. Select `Consumer`.
++
+.Create an app
+image:images/meta-create-app.png[Create an app]
 +
 .. Fill in all required fields. 
-.. Click *Create App*. Facebook then brings you to the dashboard.
-.. In the navigation panel, select *Settings* - *Basic*.
-+
-.Add platform
-image:images/instagram-add-platform.png[Add Platform]
-+
-.. Select *+ Add Platform*.
+.. Click *Create app*. Meta then brings you to the dashboard.
+.. In the navigation panel, select *App settings* - *Basic*.
+.. Select *+ Add Platform* at the bottom of the page.
 .. Click *[Website]*.
 .. Enter a URL for your site.
 +
 .Add a product
-image:images/instagram-add-product.png[]
+image:images/meta-add-product.png[Add Product]
 +
 .. Select `Dashboard` from the menu.
-.. Click *Set Up* in the Instagram box. 
-.. Select *Instagram* - *Basic Display* from the menu.
+.. Click *Set Up* in the *Instagram Basic Display* box.
 .. Click *Create New App*.
 +
-.Create a new Instagram app ID
+.Create a New Instagram App ID
 image:images/instagram-create-instagram-app-id.png[Create a New Instagram App ID]
 +
-.. Enter a value into *Display Name*.
+.. Enter a value into the *Display name* field.
 +
 .Set up the app
 image:images/instagram-app-settings.png[Setup the App]
@@ -51,11 +51,11 @@ image:images/instagram-app-settings.png[Setup the App]
 .. Paste the *Redirect URL* from {project_name} into the *Deauthorize Callback URL* field.
 .. Paste the *Redirect URL* from {project_name} into the *Data Deletion Request URL* field.
 .. Click *Show* in the *Instagram App Secret* field.
-.. Note the *Instagram App ID* and the *Instagram App Secret*.
+.. Note the `Instagram App ID` and the `Instagram App Secret`.
 .. Click *App Review* - *Requests*.
 .. Follow the instructions on the screen.
-. In {project_name}, paste the value of the *Instagram App ID* into the *Client ID* field.
-. In {project_name}, paste the value of the *Instagram App Secret* into the *Client Secret* field.
+. In {project_name}, paste the value of the `Instagram App ID` into the *Client ID* field.
+. In {project_name}, paste the value of the `Instagram App Secret` into the *Client Secret* field.
 
 . Click *Add*.
 

docs/documentation/server_admin/topics/identity-broker/social/linked-in.adoc

@@ -14,8 +14,8 @@ image:images/linked-in-add-identity-provider.png[Add Identity Provider]
 . In a separate browser tab, https://developer.linkedin.com[create an app] in the LinkedIn developer portal.
 .. After you create the app, click the *Auth* tab.
 .. Enter the value of *Redirect URI* into the *Authorized redirect URLs for your app* field.
-.. Note *Your Client ID* and *Your Client Secret*.
+.. Note `Your Client ID` and `Your Client Secret`.
 .. Click the *Products* tab and *Request access* for the *Sign In with LinkedIn using OpenID Connect* product.
-. In {project_name}, paste the value of the *Client ID* into the *Client ID* field.
-. In {project_name}, paste the value of the *Client Secret* into the *Client Secret* field.
+. In {project_name}, paste the value of the `Client ID` into the *Client ID* field.
+. In {project_name}, paste the value of the `Client Secret` into the *Client Secret* field.
 . Click *Add*.

docs/documentation/server_admin/topics/identity-broker/social/microsoft.adoc

@@ -11,10 +11,12 @@
 image:images/microsoft-add-identity-provider.png[Add Identity Provider]
 +
 . Copy the value of *Redirect URI* to your clipboard.
-. In a separate browser tab, https://account.live.com/developers/applications/create[create a Microsoft app].
-.. Click *Add URL* to add the redirect URL to the Microsoft app.
-.. Note the *Application ID* and *Application Secret*.
-. In {project_name}, paste the value of the *Application ID* into the *Client ID* field.
-. In {project_name}, paste the value of the *Application Secret* into the *Client Secret* field.
+. In a separate browser tab, register an app on https://azure.microsoft.com/en-us/[Microsoft Azure] under *App registrations*.
+.. In the Redirect URI section, select *Web* as a platform and paste the value of *Redirect URI* into the field.
+.. Find you application under *App registrations* and add a new client secret in the *Certificates & secrets* section.
+.. Note the *Value* of the created secret.
+.. Note the `Application (client) ID` in the *Overview* section.
+. In {project_name}, paste the value of the `Application (client) ID` into the *Client ID* field.
+. In {project_name}, paste the *Value* of the secret into the *Client Secret* field.
 . Click *Add*.
 

docs/documentation/server_admin/topics/identity-broker/social/openshift.adoc

@@ -3,7 +3,7 @@
 
 .Procedure
 . Click *Identity Providers* in the menu.
-. From the `Add provider` list, select `Openshift`.
+. From the `Add provider` list, select `Openshift v3`.
 +
 .Add identity provider
 image:images/openshift-add-identity-provider.png[Add Identity Provider]

docs/documentation/server_admin/topics/identity-broker/social/paypal.adoc

@@ -11,11 +11,14 @@ image:images/paypal-add-identity-provider.png[Add Identity Provider]
 . Copy the value of *Redirect URI* to your clipboard.
 . In a separate browser tab, open the https://developer.paypal.com/developer/applications[PayPal Developer applications area].
 .. Click *Create App* to create a PayPal app.
-.. Note the Client ID and Client Secret. Click the *Show* link to view the secret.
-.. Ensure *Connect with PayPal* is checked.
-.. Set the value of the *Return URL* field to the value of *Redirect URI* from {project_name}.
-. In {project_name}, paste the value of the *Client ID* into the *Client ID* field.
-. In {project_name}, paste the value of the *Client Secret* into the *Client Secret* field.
+.. Note the `Client ID` and `Client Secret`. Click the *Show* link to view the secret.
+.. Ensure *Log in with PayPal* is checked.
+.. Under Log in with PayPal click on *Advanced Settings*.
+.. Set the value of the *Return URL* field to the value of *Redirect URI* from {project_name}. Note that the URL can not contain `localhost`. If you want to use {project_name} locally, replace the `localhost` in the *Return URL* by `127.0.0.1` and then access {project_name} using `127.0.0.1` in the browser intead of `localhost`.
+.. Ensure *Full Name* and *Email* fields are checked.
+.. Click *Save* and then *Save Changes*.
+. In {project_name}, paste the value of the `Client ID` into the *Client ID* field.
+. In {project_name}, paste the value of the `Secret key 1` into the *Client Secret* field.
 
 . Click *Add*.
 

docs/documentation/server_admin/topics/identity-broker/social/stack-overflow.adoc

@@ -22,9 +22,10 @@ image:images/stack-overflow-app-register.png[Register Application]
 .Settings
 image:images/stack-overflow-app-settings.png[Settings]
 +
-. Note the *Client ID* and *Client Secret*.
-. In {project_name}, paste the value of the *Client ID* into the *Client ID* field.
-. In {project_name}, paste the value of the *Client Secret* into the *Client Secret* field.
+. Note the `Client Id`, `Client Secret`, and `Key`.
+. In {project_name}, paste the value of the `Client Id` into the *Client ID* field.
+. In {project_name}, paste the value of the `Client Secret` into the *Client Secret* field.
+. In {project_name}, paste the value of the `Key` into the *Key* field.
 . Click *Add*.
 
 

docs/documentation/server_admin/topics/identity-broker/social/twitter.adoc

@@ -15,12 +15,15 @@ image:images/twitter-add-identity-provider.png[Add Identity Provider]
 +
 . Copy the value of *Redirect URI* to your clipboard.
 . In a separate browser tab, create an app in https://developer.twitter.com/apps/[Twitter Application Management].
-.. Enter any value for name and description.
-.. The value for *Website* can be any valid URL except `localhost`.
-.. Paste the value of the *Redirect URL* into the *Callback URL* field.
-.. When you create your Twitter app, note the value of *Consumer Key* and *Consumer Secret* in the *Keys and Access Tokens* section.
-. In {project_name}, paste the value of the *Consumer Key* into the *Client ID* field.
-. In {project_name}, paste the value of the *Consumer Secret* into the *Client Secret* field.
+.. Enter App name and click *Next*.
+.. Note the value of `API Key` and `API Key Secret` and click *App settings*.
+.. In the *User authentication settings* section click on the *Set up* button.
+.. Select *Web App* as the *Type of App*.
+.. Paste the value of the *Redirect URL* into the *Callback URI / Redirect URL* field.
+.. The value for *Website URL* can be any valid URL except `localhost`.
+.. Click *Save* and then *Done*.
+. In {project_name}, paste the value of the `API Key` into the *Client ID* field.
+. In {project_name}, paste the value of the `API Key Secret` into the *Client Secret* field.
 
 . Click *Add*.