OAuth - Private Models with SDK

const showcaseWindow = document.getElementById('showcase').contentWindow;
const bundleSdk = showcaseWindow.MP_SDK;
bundleSdk.connect(showcaseWindow, {
   auth: <token>,
});

const fetcher = {
   async fetch(oldToken) {
      const response = await fetch('<your server>/refresh?');
      return response.json();
   }
}

const refresher = bundleSdk.OAuth.createTokenRefresher({
   access_token: <token>,
   expires_in: <number>
}, fetcher);

const showcaseElement = document.getElementById('showcase');
const oauthOverlay = document.getElementById('oauth-overlay');
const oauthButton = document.getElementById('oauth-diag-submit');

// Origins we possibly expect to receive messages over `postMessage` from
const safeOrigins = [
   'https://static.matterport.com',
   'https://static.matterportvr.cn',
  window.location.origin,
];

// when the user auths through the button provided, start everything and get it running
oauthButton.addEventListener('click', async function () {
  async function onAuthMessage(msg) {
     if (!authWindow) return;
     // validate that we received a message from a known source
     if (
          msg.source === authWindow &&
          safeOrigins.includes(msg.origin) &&
          msg.data.type === 'auth_model'
     ) {
       // cleanup a bit: remove the message listener, and close the auth window
       window.removeEventListener('message', onAuthMessage);
       authWindow.close();

       // set up some url params for Showcase
       const { token, modelId } = msg.data;
       const showcaseParams = new URLSearchParams(window.location.search);
       showcaseParams.set('m', modelId);
       showcaseParams.set('applicationKey', config.applicationKey);
       showcaseParams.set('apiHost', 'https://my.matterport.com');
       // start the Showcase player, hide the OAuth overlay, and connect the SDK
       await loadShowcase(showcaseParams);
       oauthOverlay.classList.add('collapsed');
       await connectSdk({
         auth: token,
       });
    }
  }
  window.addEventListener('message', onAuthMessage);

  // open a window to start the user down the OAuth flow
  const authWindow = window.open(
    'https://authn.matterport.com/oauth/authorize?client_id=<client_id>&response_type=code&scope=ViewDetails',
    'sdk auth',
    'width=800,height=800'
  );
});

// load the bundle in the IFrame and return a promise to await its load
export function loadShowcase(params) {
   return new Promise((res) => {
      showcaseElement.onload = res;
      const src = './bundle/showcase.html';
      // append the other url params -- make sure `apiHost` is defined so that the bundle properly connects
      showcaseElement.src = src + '?' + params.toString();
   });
}

// connect to the Bundle SDK
async function connectSdk(options) {
   const showcaseWindow = showcaseElement.contentWindow;
   const bundleConnector = showcaseWindow.MP_SDK;
   return bundleConnector.connect(showcaseWindow, options);
}

oauthButton.addEventListener('click', async function () {
   // ...
   const authWindow = window.open(
      'https://authn.matterport.com/oauth/authorize?client_id=<client_id>&response_type=code&scope=ViewDetails',
      'sdk auth',
      'width=800,height=800'
   );
});

// redirect.js
const urlParams = new URLSearchParams(window.location.search);
const auth_code = urlParams.get('code');

const response = await fetch('https://path/to/server/token/?code=' + auth_code);
const responseJson = await response.json();
const oauthToken = responseJson.access_token;

app.use('/path/to/server/token', function (req, res) {
   const requestBody = new URLSearchParams({
      grant_type: 'authorization_code',
      code: req.query.code,
      scope: 'ViewDetails',
      client_id: <client_id>,
      client_secret: <client_secret>,
   });
   const tokenUrl = 'https://api.matterport.com/api/oauth/token';
   console.log(`requesting token from ${tokenUrl}`);
   const response = await fetch(tokenUrl, {
      method: 'POST',
      headers: {
         'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: requestBody,
   });
   const responseJson = await response.json();
   res.send(responseJson);
});

window.addEventListener('message', function (msg) {
   // validate the message is from our modelSelector IFrame
   if (msg.source === modelSelector.contentWindow) {
      const [modelId] = msg.data.models.split(','); // take just the first model id
      window.opener.postMessage({
         type: 'auth_model', // help distinguish this event from others
         modelId,
         token: oauthToken,
      }, '*'); // TODO: specify the receiver's domain to reduce the exposure of the event
   }
});

async function onAuthMessage(msg) {
   // validate that we received a message from a known source
   if (msg.source === authWindow &&
      safeOrigins.includes(msg.origin) &&
      msg.data.type === 'auth_model') {
     // cleanup a bit: remove the message listener, and close the auth window
      window.removeEventListener('message', onAuthMessage);
      authWindow.close();

      const { token, modelId } = msg.data;
      // ...
   }
}
window.addEventListener('message', onAuthMessage);

const showcaseWindow = showcaseElement.contentWindow;
const bundleConnector = showcaseWindow.MP_SDK;
bundleConnector.connect(showcaseWindow, {
   auth: token
});