Documentation You are here: start » v » 2.0 » customer_portal

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
v:2.0:customer_portal [2020/02/15 07:40]
foxybrett [Retrieving & Modifying Subscriptions]
v:2.0:customer_portal [2020/05/18 17:13] (current)
foxybrett [Authenticating]
Line 33: Line 33:
 }</​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).
  
Line 488: Line 488:
 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>
Line 516: Line 516:
  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&​timestamp=1762241595&​fc_auth_token=REPLACE_THIS&​fcsid="​+getUrlParameter("​fcsid"​));​+ window.location.replace("​https://​YOUR_FOXY_DOMAIN/​checkout?​fc_customer_id=0&​timestamp=1893456000&​fc_auth_token=REPLACE_THIS&​fcsid="​+getUrlParameter("​fcsid"​));​
  }  }
  
Line 534: Line 534:
   * **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 =====

Site Tools