| Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
| v:2.0:customer_portal [2020/02/15 07:40] – [Retrieving & Modifying Subscriptions] foxybrett | v:2.0:customer_portal [2020/03/10 06:52] – [BETA Setup Instructions] foxybrett |
|---|
| 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 ===== |
