⚠️ This article refers to Pico Version 1.17 and will be removed or updated in the future once we release Pico Version 2.0.
The initial step would be to make sure that Pico is properly installed on the website and is actively running on the pages that Coral would be utilized. Please see our main installation guide here: https://help.trypico.com/en/articles/3199263-installing-pico-on-your-website
Once installed on the page, you will need to add a DOM element that includes the "PicoSignal" class. This class will allow that element to receive data emitted from the Pico plugin.
The data that we will want to latch onto for this integration will be the
data-pico-email variable. When a user logs into Pico, this data property will be updated with the user's email. Additional data that is emitted via Pico Signals can be seen here: https://help.trypico.com/en/articles/2906319-using-pico-signals
The Mutational Observer function should be configured to observe the DOM element for the signals emitted by the Pico plugin when a user logs in. Once the
data-pico-email value has updated with the user's email, the MutationObserver will respond to the login event, using that email value to make an XHR call to a backend server.
This backend server should process the email and return any additional information needed (unique identifier for the user on your system, expiry, domains permitted, etc.) to form a valid SSO claim to Coral back to the original Mutational Observer function. To see more about Coral's SSO implementation, please view their documentation here: https://docs.coralproject.net/coral/v5/integrating/sso/
For more about tokens, please see https://scotch.io/tutorials/the-anatomy-of-a-json-web-token
A visual representation of how this would be implemented can be seen below: