Skip to main content
search

Integration of Keycloak with Shopify and WordPress: A Transformative Approach

By June 18, 2024Web Development
Featured

Making things easy and secure for users is key. Our client, a top player in the beauty industry, knows this well. 

Imagine effortlessly navigating between your favorite online stores with just a single login. This isn’t just a dream; it’s the reality that innovative companies like our client are bringing to life.

But implementing such a system isn’t just about flipping a switch. It requires meticulous planning, technical expertise, and a deep understanding of both the client’s needs and the intricacies of the technology at hand.

At Bitcot, we set out to seamlessly integrate Keycloak with SSO-enabled eCommerce stores of our client. Our process was as meticulous as it was innovative.

This article outlines our process, challenges faced, and successful implementation of Keycloak for our client project. 

Whether you’re seeking inspiration for your SSO integration or simply looking to understand what is Keycloak, exploring a Keycloak example can be highly instructive.

An Overview of Our Keycloak Integration Project

An Overview of Our Keycloak IntegrationOur client is a performance beauty company specializing in aesthetic products. They’re a leading player in the beauty industry with a focus on customer satisfaction and innovation.

They wanted to expand their online presence by adding a Shopify store in addition to their existing WordPress setup. But, they didn’t want users to deal with multiple logins. They needed a seamless login experience across both stores, which led us to explore the Keycloak identity provider for its Single Sign-On (SSO) capabilities.

Their quest for a unified login experience reflects a common concern among businesses operating multiple websites.

Keycloak, an open-source identity and access management system, serves as a third-party API facilitating SSO login across multiple websites. 

For instance, a business with numerous websites can use Keycloak to enable customers to log in directly without having to sign up on each site individually. Keycloak authorization ensures that only authorized users have access to specific resources within our application.

Leveraging Keycloak API, we’ve successfully integrated SSO functionality across various platforms, notably on both Shopify and WordPress stores for our client.

The implemented SSO functionality allows our client’s customers to seamlessly access both their WordPress and Shopify stores using a single set of credentials, enhancing user experience and streamlining login processes.

The Shopify SSO solution also includes robust user management features, such as user provisioning and role-based access control. This centralized management capability simplifies administration tasks and ensures consistent access control across all connected websites.

Our Process Behind Keycloak Integration With WordPress and Shopify

Our Process Behind KeycloakThorough Research: The Key Foundation

Our implementation process involved thorough research to gain a deep understanding of the platform’s features and capabilities. This groundwork was essential for a smooth integration process. 

We studied the documentation provided by the Keycloak organization and communicated frequently with the Keycloak support team. Following this, we compiled comprehensive integration documentation for developmental purposes.

Documentation Screenshot

Local Setup and Configuration

To begin, we downloaded the Keycloak folder from keycloak.org and set it up on our local server environment. Using the terminal, we executed the command “./kc.sh start-dev” to start the development environment for Keycloak.

We created a Keycloak admin user with credentials to access the admin console. Within the admin console, we established an admin account and proceeded to configure realms. 

Realms, in the context of Keycloak single sign-on, facilitate the provision of login functionalities across multiple websites, catering to businesses with numerous online platforms.

We created multiple realms to manage different sets of Keycloak permissions and users. Each Keycloak realm represents a separate security domain. Each client represents an application that users can authenticate against.

By creating multiple Keycloak realms and corresponding clients for each website, we streamlined the setup process. 

Streamlining Deployment to Main Server

Once Keycloak was set up and tested locally, we deployed it to the main server environment. We created a folder named “Keycloak” and deployed the Keycloak instance using the same process mentioned previously. We then accessed the server via SSH and navigated to the Keycloak folder.

Following a similar process as on the local system, we started the development environment for Keycloak on the main server.

Upon configuring the server environment, we launched the Keycloak server with a designated domain.

Implementation of the SSO Logins

For the Shopify store and the WordPress store, we implemented SSO logins. Users are redirected to the Keycloak login form when they opt for SSO login on the store’s login page.

We configured the stores as Clients within the Keycloak realm and utilized the Keycloak REST API to create users accordingly. Keycloak authentication was implemented to ensure secure access control and streamlined user management across the system.

Then, we adjusted the realm settings and implemented the integration in the stores’ settings sections.

To enable Shopify single sign-on integration with Keycloak, we developed an application using Laravel as a bridge that interacted with the Keycloak Admin API.  

Similarly, for the WordPress SSO implementation, we developed a functionality using a one-page code written in Core PHP to facilitate communication between WordPress and Keycloak.

During the setup, we securely managed and utilized Keycloak client credentials to authenticate our WordPress and Shopify Plus SSO integrations. These credentials played a pivotal role in ensuring secure access to Keycloak APIs and services, thereby enhancing the overall security.

Implementing Keycloak user registration simplified the onboarding process for users, ensuring a smooth and efficient start to their platform experience.

How We Solved Challenges in the Project

How We Solved Challenges in theThroughout this project, we encountered several challenges, primarily stemming from the initial unfamiliarity with Keycloak’s functionalities. Extensive research, including studying Keycloak API documentation and watching tutorials, was necessary to gain confidence in implementation.

Deploying Keycloak on the main server posed challenges due to compatibility issues. Our server initially lacked Java support which is essential for Keycloak SSO integration. Overcoming this challenge demanded extensive effort and collaboration with our DevOps team.

To address this issue, we diligently set up Java dependencies on the server, a process that took us 3 to 5 days to resolve. 

Leveraging resources like ChatGPT and conducting thorough research on Google enabled us to explore various solutions. Additionally, we sought assistance from relevant Slack communities like Cloud Native Computing Foundation, Shopify Partners, and Mixpanel. 

Through persistent efforts including extensive research, experimentation, and collaboration, we overcame the challenges, successfully implementing Shopify and WordPress SSO integration within the project’s scope.

Final Thoughts

FinalThe Bitcot team has enhanced the platforms’ user experience by implementing SSO with Keycloak, allowing seamless authentication across multiple applications while maintaining robust security measures.

This successful integration has empowered our client to offer their customers a frictionless login experience not just on one platform, but across all their online stores. By partnering with Bitcot and leveraging the capabilities of the identity provider Keycloak, our client has strengthened its position in the competitive beauty industry while enhancing user satisfaction and loyalty.

This project has not only widened Bitcot’s technical expertise further but also fostered a spirit of teamwork and innovation within our team.

Moving forward with the project, our team is currently in the process of integrating Keycloak into our client’s BigCommerce store as well. As we continue to refine and expand our integration, we carry forward valuable insights and experiences gained from this journey.

By showcasing a practical Keycloak SSO example, this article illustrated how businesses can streamline user access effectively through SSO for WordPress and Shopify. To learn more about Keycloak integration with Shopify and WordPress and how it can enhance security and authentication for your project, reach out to us for a free consultation.

Raj Sanghvi

Raj Sanghvi is a technologist and founder of BitCot, a full-service award-winning software development company. With over 15 years of innovative coding experience creating complex technology solutions for businesses like IBM, Sony, Nissan, Micron, Dicks Sporting Goods, HDSupply, Bombardier and more, Sanghvi helps build for both major brands and entrepreneurs to launch their own technologies platforms. Visit Raj Sanghvi on LinkedIn and follow him on Twitter. View Full Bio