Add with-credentials attribute to configure three.js loader (google#3239

) * Add with-credentials attribute * Remove withCredentials example * Improve withCredentials description * Update operators from == to === * Remove redundant declaration * Fix spelling mistake * Improving withCredentials integration
ggbound · Mar 4, 2022 · d712c98 · d712c98
1 parent 81326c7
commit d712c98
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/packages/model-viewer/src/model-viewer-base.ts b/packages/model-viewer/src/model-viewer-base.ts
@@ -159,6 +159,8 @@ export default class ModelViewerElementBase extends UpdatingElement {
 
   @property({type: String}) src: string|null = null;
 
+  @property({type: Boolean, attribute: 'with-credentials'}) withCredentials: boolean = false;
+
   protected[$isElementInViewport] = false;
   protected[$loaded] = false;
   protected[$loadedTime] = 0;
@@ -376,6 +378,10 @@ export default class ModelViewerElementBase extends UpdatingElement {
       const ariaLabel = this.alt == null ? this[$defaultAriaLabel] : this.alt;
       this[$userInputElement].setAttribute('aria-label', ariaLabel);
     }
+
+    if (changedProperties.has('withCredentials')) {
+      CachingGLTFLoader.withCredentials = this.withCredentials
+    }
   }
 
   /** @export */

diff --git a/packages/model-viewer/src/three-components/CachingGLTFLoader.ts b/packages/model-viewer/src/three-components/CachingGLTFLoader.ts
@@ -89,6 +89,8 @@ const $GLTFInstance = Symbol('GLTFInstance');
 export class CachingGLTFLoader<T extends GLTFInstanceConstructor =
                                              GLTFInstanceConstructor> extends
     EventDispatcher {
+  static withCredentials: boolean;
+
   static setDRACODecoderLocation(url: string) {
     dracoDecoderLocation = url;
     dracoLoader.setDecoderPath(url);
@@ -189,6 +191,7 @@ export class CachingGLTFLoader<T extends GLTFInstanceConstructor =
   async preload(
       url: string, element: ModelViewerElementBase,
       progressCallback: ProgressCallback = () => {}) {
+    this[$loader].setWithCredentials(CachingGLTFLoader.withCredentials);
     this.dispatchEvent(
         {type: 'preload', element: element, src: url} as PreloadEvent);
     if (!cache.has(url)) {

diff --git a/packages/modelviewer.dev/data/docs.json b/packages/modelviewer.dev/data/docs.json
@@ -67,6 +67,18 @@
           "default": "auto",
           "options": "auto, interaction, manual"
         }
+      },
+      {
+        "name": "with-credentials",
+        "htmlName": "withCredentials",
+        "description": "This attribute makes the browser include credentials (cookies, authorization headers or TLS client certificates) in the request to fetch the 3D model. It's useful if the 3D model file is stored on another server that require authentication. By default the file will be fetch without credentials. Note that this has no effect if you are loading files locally or from the same domain.",
+        "links": [
+          "<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials\">MDN documentation</a>"
+        ],
+        "default": {
+          "default": "false",
+          "options": "true, false"
+        }
       }
     ],
     "CSS": [