Authorization Flow
WithWine offers a secure Authorization Flow that enables users of your website to connect with their WithWine accounts, this functionality allows them to seamlessly purchase products and checkout, or manage club memberships etc., through your platform.
The below information is relevent to both the WithWine WordPress Plugin and the WithWine JavaScript SDK, but the implementation details do vary to some degree.
Authorization flow overview
The above diagram illustrates the typical flow that allows users to login or register an account, then return to the page they were viewing. Likewise, logging out is a simple process that is managed entirely on your platform.
Authorization flow step-by-step
Typically a website will have some form of header or navigation menu, this is where the Login / Register link would often be placed. When a user clicks the Login / Register link or button one of two things can happen depending on how your website implements the Authorization Flow:
- The browser makes a request to your webserver which implements a server function
- The browser is redirected to a route on your webserver that implements a server function
The server function that is implemented will send a POST request to the
WithWine Authorization API along with several pieces of data including a set of
tokens and keys that ensure the request is originating from a verified source.
The response of that request will be a fully qualified URL containing everything needed to send the user to the Login / Register page on the WithWine Account Website, as well as return the user to your website once they have completed the login process.
Once your webserver recieves the URL, the user will be redirected to the Login / Register page where they will proceed to login with a user name and password or register a new account if they don't already have one.
Once the user has completed the selected process, they are redirected back to a
/loginCallback route on your webserver, here a server function will
handle a POST request from the WithWine API. With the data recieved, this
function will set the user session on your website then redirect the user
back to the page they were on when they first clicked the Login / Register link.
At this point the user is now logged in and can access data unique to their account.
When a user clicks the Logout button the process is very similar with the exception that there is no form to interact with on the WithWine Auth website, one of two things will occur:
- The browser makes a request to your webserver which implements a server function
- The browser is redirected to a route on your webserver that implements a server function
The server function that is implemented will call the appropriate WithWine
Auth API and destroy the users session, the user is then redirected to the
/LogoutCallback route on your webserver via a POST request from the
WithWine API. At this point all that is left to do is to run a server function
on your webserer to destroy the user session and then the user is redirected
back to the page they were viewing.
From the users perspective
And it is, but from the users perspective:
- They clicked the Login or register link and were sent to the Login / Register page on the WithWine Account website
- They filled in the login or register form and submitted the form
- They returned to the page they were on but now have access to data which is unique to their account
The above diagram illustrates the same process as the Authorization flow overview above, but this time from the users perspective, i.e. this is how the Authorization Flow feels to the user.
Implementing the Authorization Flow
Currently there are two ways to implement the WithWine Authorization Flow into a website:
- Via the WithWine WordPress Plugin
- Via the WithWine JavaScript SDK
Obviousley the method used will depend on the type of website you have (or are planning to build).