Integrate User Login to Your WordPress Website with WSO2 Identity Server

WordPress is an open-source content management system written in PHP and paired with MYSQL and MariaDB databases.

WordPress.com: Fast, Secure Managed WordPress Hosting

If you like to try out WordPress locally, I can recommend the LOCAL WordPress development tool. It is available for all windows, Linux, Mac platforms.

Local

Why do we need an Identity Provider?

An Identity Provider (IdP) is responsible for authenticating users and issuing identification information by using security tokens like SAML 2.0, OpenID Connect, OAuth 2.0, and WS-Trust.

So we can think about an Identity Provider and WordPress website developers don’t need to worry about the IAM part and can focus on business use cases. Also, it is hard to build an IAM solution in-house, stay in compliance with regulatory requirements when handling users. So we can use an identity provider to solve and keep the development simple.

So if you are considering external identity providers and struggling to choose one, I can recommend WSO2 Identity Server which is one of the best identity providers in the world as your Identity Provider. You can get the latest version of the WSO2 Identity Server from below.

Deliver Seamless Login Experiences with WSO2 Identity Server

To securely authenticate users to the WordPress website, I will use miniOrange SAML Single Sign On(SSO) third-party plugin in WordPress.

SAML Single Sign On - SAML SSO Login

The Flow

The miniOrange SAML Single Sign On(SSO) plugin will act as the SAML 2.0 Service provider which can be configured to securely authenticate the user to the WordPress site. In this case, WSO2 Identity Server will act as our Identity Provider.

1. Requesting Service Provider’s(miniOrange SAML SSO plugin) service
2. Service Provider creates SAML authentication requests and the user redirects to the WSO2 Identity Server.
3. User Login with credentials and get authenticated
4. Identity Server sends SAML response
5. Service Provider verifies the SAML response and authorizes the user’s request

Let’s get started with the configuration.

Configure SAML SSO plugin in WordPress

1. From the WordPress Admin dashboard of your website, click plugins -> Add New from the left navigation pane.

2. Search for “SAML” and install and activate the SAML Single Sign On — SAML SSO Login plugin.

3. From the left pane, click miniOrange SAML 2.0 SSO > Plugin Configuration.

4. Go to Service Provider Metadata tab. Here you can see the configuration details which will be needed for Identity Provider configurations.

5. Click Upload IDP Metadata on the Service Provider Setup to configure the following fields.

• Identity Provider Name: WSO2IS
• Enter metadata URL: https://localhost:9443/identity/metadata/saml2

This endpoint will give us the WSO2 Identity Server’s SAML metadata.

<EntityDescriptor xmlns="urn:oasis:names:tc:SAML:2.0:metadata" entityID="localhost">
<IDPSSODescriptor WantAuthnRequestsSigned="false" protocolSupportEnumeration="urn:oasis:names:tc:SAML:2.0:protocol" validUntil="2022-02-02T19:18:52.989Z">
<KeyDescriptor use="signing">
<KeyInfo xmlns="http://www.w3.org/2000/09/xmldsig#">
<X509Data>
<X509Certificate>MIIDqTCCApGgAwIBAgIEXbABozANBgkqhkiG9w0BAQsFADBkMQswCQYDVQQGEwJVUzELMAkGA1UE CAwCQ0ExFjAUBgNVBAcMDU1vdW50YWluIFZpZXcxDTALBgNVBAoMBFdTTzIxDTALBgNVBAsMBFdT TzIxEjAQBgNVBAMMCWxvY2FsaG9zdDAeFw0xOTEwMjMwNzMwNDNaFw0yMjAxMjUwNzMwNDNaMGQx CzAJBgNVBAYTAlVTMQswCQYDVQQIDAJDQTEWMBQGA1UEBwwNTW91bnRhaW4gVmlldzENMAsGA1UE CgwEV1NPMjENMAsGA1UECwwEV1NPMjESMBAGA1UEAwwJbG9jYWxob3N0MIIBIjANBgkqhkiG9w0B AQEFAAOCAQ8AMIIBCgKCAQEAxeqoZYbQ/Sr8DOFQ+/qbEbCp6Vzb5hzH7oa3hf2FZxRKF0H6b8CO Mzz8+0mvEdYVvb/31jMEL2CIQhkQRol1IruD6nBOmkjuXJSBficklMaJZORhuCrB4roHxzoG19aW mscA0gnfBKo2oGXSjJmnZxIh+2X6syHCfyMZZ00LzDyrgoXWQXyFvCA2ax54s7sKiHOM3P4A9W4Q UwmoEi4HQmPgJjIM4eGVPh0GtIANN+BOQ1KkUI7OzteHCTLu3VjxM0sw8QRayZdhniPF+U9n3fa1 mO4KLBsW4mDLjg8R/JuAGTX/SEEGj0B5HWQAP6myxKFz2xwDaCGvT+rdvkktOwIDAQABo2MwYTAU BgNVHREEDTALgglsb2NhbGhvc3QwHQYDVR0OBBYEFEDpLB4PDgzsdxD2FV3rVnOr/A0DMB0GA1Ud JQQWMBQGCCsGAQUFBwMBBggrBgEFBQcDAjALBgNVHQ8EBAMCBPAwDQYJKoZIhvcNAQELBQADggEB AE8H/axAgXjt93HGCYGumULW2lKkgqEvXryP2QkRpbyQSsTYcL7ZLSVB7MVVHtIsHh8f1C4Xq6Qu 8NUrqu5ZLC1pUByaqR2ZIzcj/OWLGYRjSTHSVmVIq9QqBq1j7r6f3BWqaOIiknmTzEuqIVlOTY0g O+SHdS62vr2FCz4yOrBEulGAvomsU8sqg4PhFnkhxI4M912Ly+2RgN9L7AkhzK+EzXY1/QtlI/Vy sNfS6zrHasKz6CrKKCGqQnBnSvSTyF9OR5KFHnkAwE995IZrcSQicMxsLhTMUHDLQ/gRyy7V/ZpD MfAWR+5OeQiNAp/bG4fjJoTdoqkul51+2bHHVrU=</X509Certificate>
</X509Data>
</KeyInfo>
</KeyDescriptor>
<ArtifactResolutionService Binding="urn:oasis:names:tc:SAML:2.0:bindings:SOAP" Location="https://localhost:9443/samlartresolve" index="1"/>
<SingleLogoutService Binding="urn:oasis:names:tc:SAML:2.0:bindings:SOAP" Location="https://localhost:9443/samlsso" ResponseLocation="https://localhost:9443/samlsso"/>
<SingleLogoutService Binding="urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST" Location="https://localhost:9443/samlsso" ResponseLocation="https://localhost:9443/samlsso"/>
<SingleLogoutService Binding="urn:oasis:names:tc:SAML:2.0:bindings:HTTP-Redirect" Location="https://localhost:9443/samlsso" ResponseLocation="https://localhost:9443/samlsso"/>
<SingleSignOnService Binding="urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST" Location="https://localhost:9443/samlsso"/>
<SingleSignOnService Binding="urn:oasis:names:tc:SAML:2.0:bindings:HTTP-Redirect" Location="https://localhost:9443/samlsso"/>
</IDPSSODescriptor>
</EntityDescriptor>

6. Click Fetch Metadata

Then you can see the fetched metadata information as below.

Configure the service provider in the WSO2 Identity Server

1. Access the management console on the browser and log in.

Access -> https://localhost:9443       
Use the super admin credentials to login 
username -> admin
password -> admin

2. Create a new Service Provider by clicking Identity > Service Providers > Add on the Main menu from the left side navigation pane.

3. Enter the name of the Service provider. You can also provide a brief Description of the service provider and the description is not mandatory.

4. Click Register. Then you will be redirected to the new service provider configuration page.

5. Set Saas Application true by ticking the checkbox. The SaaS Application configuration defines which users you want to be able to log into your web application.

By default, the SaaS Application checkbox is disabled, which means the web application is not shared among tenants so only users in the current tenant (the one you use to define the service provider) will be allowed to log into the web application.

6. Expand the Claim Configuration and select Use Local Claim Dialect. Then click Add Claim URI.

7. Add https://wso2.org/claims/emailaddress claim URI as a Requested Claim. set this claim as mandatory.

8. Set Subject Claim URI to https://wso2.org/claims/fullname

9. Expand the Inbound Authentication Configuration > SAML2 Web SSO Configuration section and click Configure.

10. You will be redirected to the Register New Service Provider page. Then select URL Configuration as the configuration Mode.

11. Retrieve the metadata URL from the miniOrange SAML 2.0 SSO plugin.

12. Enter the retrieved metadata URL and click Upload.

13. Click Edit in SAML2 Web SSO Configuration section.

14. Add the below configurations.

• check Enable Response Signing
• check Enable Single Logout
• Check Enable Attribute Profile and Include Attributes in the Response Always
• Retrieve the Audience URI and Recipient URL from the SAML SSO plugin in WordPress. You can find these from the Service Provider Metadata tab.

• Check Enable Audience Restriction and enter the Audience URL.
• Check Enable Recipient Validation and enter the Recipient URL.

• Click Update.

Let’s Try Out

• On the Service Provider Setup tab, click theTest Configuration button at the bottom of the page.

• Log in with a user in the WSO2 Identity Server.

• Give the consent and you will be able to see a page like below.

The Authentication flow is successful !!!

Integrate miniOrange SAML2.0 SSO Plugin as a widget to a WordPress Website

• Click Appearance -> Widgets from the left side pane.

• Select the Widget by searching “SAML” and then add it to the theme. This step will not be like below as it depends on the theme you are using.
• Click Update.

• Let’s try to log in to the website. Click the login link on the widget.

• You will be redirected to the Identity Server login page to authenticate.

• You will be redirected to the WordPress webpage after authentication is completed. Then you can find the logout link in the widget to initiate the logout flow.

Cheers !!!

• You can log out by clicking the Logout link of the widget. Then you will be able to see the same Widget with the Login with WSO2IS link.

Hope you got some idea about how to login into a WordPress website with the WSO2 Identity Server.

Thank you for reading this article!