| Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
| v:2.0:customer_portal [2020/02/07 23:20] – [Standalone SSO with the Portal] foxybrett | v:2.0:customer_portal [2020/05/18 17:13] – [Authenticating] foxybrett |
|---|
| }</code> | }</code> |
| * The ''cookieMaxAge'' is an integer value, and matches the session lifetime as configured in Foxy (in seconds). | * The ''cookieMaxAge'' is an integer value, and matches the session lifetime as configured in Foxy (in seconds). |
| * The ''jwt'' uses RS256 (public/private key) signing. This is //optional// functionality. | * The ''jwt'' uses HS256 (shared secret) signing. This is //optional// functionality. More details at [[https://jwt.io/|JWT.io]]. Note that we do have keypair-based JWT capabilities, but because the returned token is so huge, and the use case is often cookies, we feel that's less helpful. If you'd like to use a public/private keypair instead of shared secret, however, please let us know. |
| * <wrap tip>This cookie must be set manually,</wrap> for a variety of reasons (including the continuing obsolescence of 3rd party cookies). It is required for subsequent requests (below). If it cannot be sent in the ''Cookie'' header, it can be sent in a ''fx.customer'' header instead (since the ''Cookie'' header cannot be set via javascript for js-based requests). | * <wrap tip>This cookie must be set manually,</wrap> for a variety of reasons (including the continuing obsolescence of 3rd party cookies). It is required for subsequent requests (below). If it cannot be sent in the ''Cookie'' header, it can be sent in a ''fx.customer'' header instead (since the ''Cookie'' header cannot be set via javascript for js-based requests). |
| |
| "_embedded": { | "_embedded": { |
| "template_config": { | "template_config": { |
| "allow_next_date_modification": true | "allow_next_date_modification": true, |
| | "allow_frequency_modification": [ |
| | ["1m","2m","3m","6m","1y"] |
| | ] |
| } | } |
| } | } |
| * Pre-requisites & Notes: | * Pre-requisites & Notes: |
| * The "Allow Next Date Modification" setting must be true in the customer portal store config. | * The "Allow Next Date Modification" setting must be true in the customer portal store config. |
| | * The "Allow Frequency Modification" settings must exist in the form of a valid [[http://docs.jsonata.org/overview|JSONata query]] with an array of frequency values that are allowed if the JSONata query returns "truthy". For instance: ''$contains(frequency, "w")'' allows ''["1w","2w","3w","4w","5w","6w","7w","8w","9w","10w","11w","12w"]'', and ''$contains(frequency, "m")'' allows ''["1m","2m","3m","6m","1y"]''. (The ''transaction_template'' with ''items'' and ''item_options'' is zoomed on the transaction, and can be used in your JSONata queries. Only values returned in the ''allow_frequency_modification'' node are allowed to be patched, or the request will error. |
| * The URI is returned in the ''_links.self'' value (seen above). | * The URI is returned in the ''_links.self'' value (seen above). |
| * Response: The response will be an object of the subscription. | * Response: The response will be an object of the subscription. |
| When you do a ''GET /s/customer?sso=true'' (which happens by default if you're using the normal portal functionality), it includes the ''._links["fx:checkout"].ref'' value, which is a URI that will load the checkout with your customer already logged in, and sets a cookie named ''fx.customer.sso''. From there, you'll need to do the following: | When you do a ''GET /s/customer?sso=true'' (which happens by default if you're using the normal portal functionality), it includes the ''._links["fx:checkout"].ref'' value, which is a URI that will load the checkout with your customer already logged in, and sets a cookie named ''fx.customer.sso''. From there, you'll need to do the following: |
| |
| - Create a SSO URL for a guest (ie. ''customer_id=0''). (You may want to contact our support for this. Or use an online tool to generate a SHA1 hash of something like ''0|1893456000|{{YOUR_SECRET_HERE}}''.) | - Create a SSO URL for a guest (ie. ''customer_id=0''). (You can use an online tool like [[https://gchq.github.io/CyberChef/#recipe=SHA1()&input=MHwxODkzNDU2MDAwfFlPVVJfU0VDUkVUX0hFUkU|CyberChef]] to generate a SHA1 hash of something like ''0|1893456000|YOUR_SECRET_HERE''.) |
| - Create a new page on your website (at the same domain as the page that contains the ''<foxy-customer-portal />'' element) with the following code. Replace your domain, and the ''fc_auth_token=REPLACE_THIS'' bit with the SSO URL token from the above step.) (NOTE: The below code includes the doctype, html, head, and body tags. If you're inserting this into an existing template, you just want to grab the ''<script />'' block, and make sure the page is set to not be indexed by search engines.) <code html> | - Create a new page on your website (at the same domain as the page that contains the ''<foxy-customer-portal />'' element) with the following code. Replace your domain, and the ''fc_auth_token=REPLACE_THIS'' bit with the SSO URL token from the above step.) (NOTE: The below code includes the doctype, html, head, and body tags. If you're inserting this into an existing template, you just want to grab the ''<script />'' block, and make sure the page is set to not be indexed by search engines.) <code html> |
| <!doctype html> | <!doctype html> |
| window.location.replace(getCookie("fx.customer.sso") + "&fcsid=" + getUrlParameter("fcsid")); | window.location.replace(getCookie("fx.customer.sso") + "&fcsid=" + getUrlParameter("fcsid")); |
| } else { | } else { |
| window.location.replace("https://YOUR_FOXY_DOMAIN/checkout?fc_customer_id=0×tamp=1762241595&fc_auth_token=REPLACE_THIS&fcsid="+getUrlParameter("fcsid")); | window.location.replace("https://YOUR_FOXY_DOMAIN/checkout?fc_customer_id=0×tamp=1893456000&fc_auth_token=REPLACE_THIS&fcsid="+getUrlParameter("fcsid")); |
| } | } |
| |
| * **If you don't have access to the customer's password...** You can use your store's configured [[.:unified_order_entry|UOE password]] password. (This should //only ever// be serverside, as you should never share that password in the browser.) | * **If you don't have access to the customer's password...** You can use your store's configured [[.:unified_order_entry|UOE password]] password. (This should //only ever// be serverside, as you should never share that password in the browser.) |
| * Unlike the checkout, you likely would not want to allow login to the portal if the customer's not already logged into your system. Instead, redirect the customer to your login page so they'll be fully logged in (instead of logged into the Foxy customer portal, but not to your system or the checkout). | * Unlike the checkout, you likely would not want to allow login to the portal if the customer's not already logged into your system. Instead, redirect the customer to your login page so they'll be fully logged in (instead of logged into the Foxy customer portal, but not to your system or the checkout). |
| | |
| | ===== BETA Setup Instructions ===== |
| | |
| | Insert the following code in your page (''head'' or footer, depending on your requirements; you may remove the comments, of course): |
| | |
| | <code html> |
| | <!-- The following 2 lines are required. --> |
| | <script type="module" src="https://static.www.foxycart.com/beta/s/customer-portal/v0.9/dist/lumo/foxy/foxy.esm.js"></script> |
| | <script nomodule src="https://static.www.foxycart.com/beta/s/customer-portal/v0.9/dist/lumo/foxy.js"></script> |
| | <!-- The following style block is optional. You can customize your styles at https://demo.vaadin.com/lumo-editor/. |
| | Simply change all the `--lumo-` prefixes to `--foxy-`, and insert them below. --> |
| | <style> |
| | html { |
| | --foxy-border-radius: 0.5em; |
| | --foxy-shade-5pct: rgba(41, 41, 41, 0.05); |
| | --foxy-shade-10pct: rgba(41, 41, 41, 0.1); |
| | --foxy-shade-20pct: rgba(41, 41, 41, 0.2); |
| | --foxy-shade-30pct: rgba(41, 41, 41, 0.3); |
| | --foxy-shade-40pct: rgba(41, 41, 41, 0.4); |
| | --foxy-shade-50pct: rgba(41, 41, 41, 0.5); |
| | --foxy-shade-60pct: rgba(41, 41, 41, 0.6); |
| | --foxy-shade-70pct: rgba(41, 41, 41, 0.7); |
| | --foxy-shade-80pct: rgba(41, 41, 41, 0.8); |
| | --foxy-shade-90pct: rgba(41, 41, 41, 0.9); |
| | --foxy-shade: hsl(214, 0%, 16%); |
| | --foxy-primary-text-color: rgb(83, 39, 94); |
| | --foxy-primary-color-50pct: rgba(83, 39, 94, 0.5); |
| | --foxy-primary-color-10pct: rgba(83, 39, 94, 0.1); |
| | --foxy-primary-color: #53275E; |
| | --foxy-body-text-color: hsl(214, 0%, 16%); |
| | --foxy-secondary-text-color: hsl(214, 0%, 42%); |
| | --foxy-tertiary-text-color: rgba(87, 87, 87, 0.5); |
| | --foxy-disabled-text-color: rgba(173, 173, 173, 0.3); |
| | --foxy-header-text-color: hsl(214, 0%, 16%); |
| | |
| | background: var(--foxy-shade-5pct); |
| | } |
| | </style> |
| | |
| | <!-- Change the `endpoint` value to match your Foxy store domain. --> |
| | <foxy-customer-portal endpoint="https://your-api-endpoint.tld"> |
| | <!-- If you'd like to add a note above the login section, uncomment the below --> |
| | <foxy-sign-in slot="sign-in"> |
| | <h1>Hello! Please login…</h1> |
| | <p>If you have any trouble logging in, please try resetting your password below. Contact us if you can't get it working.</p> |
| | </foxy-sign-in> |
| | <!-- If you're not using subscriptions, uncomment the following line to override that default block. --> |
| | <!-- <div slot="subscriptions-container"></div> --> |
| | </foxy-customer-portal> |
| | </code> |
| | |
| |
| ===== Some Ideas and Best Practices ===== | ===== Some Ideas and Best Practices ===== |
