support implicit flow auth (#613)

* support implicit flow auth

* fix lint

* upgrade commons

Author: embbnux

package.json

@@ -38,7 +38,7 @@
     "react-router-redux": "^4.0.7",
     "ringcentral": "^3.1.3",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.7.35"
+    "ringcentral-integration": "^0.7.37"
   },
   "devDependencies": {
     "alias-webpack-plugin": "^1.0.6",

src/lib/OAuthBase/index.js

@@ -3,10 +3,12 @@ import { prefixEnum } from 'ringcentral-integration/lib/Enum';
 import { Module } from 'ringcentral-integration/lib/di';
 import ensureExist from 'ringcentral-integration/lib/ensureExist';
 import proxify from 'ringcentral-integration/lib/proxy/proxify';
-import parseCallbackUri from 'ringcentral-integration/lib/parseCallbackUri';
+
 import required from 'ringcentral-integration/lib/required';
 import qs from 'qs';
 import url from 'url';
+
+import parseCallbackUri from '../parseCallbackUri';
 import baseActionTypes from './baseActionTypes';
 import getOAuthBaseReducer from './getOAuthBaseReducer';
 import oAuthMessages from './oAuthMessages';
@@ -72,16 +74,16 @@ export default class OAuthBase extends RcModule {
   }
 
   @proxify
-  async _handleCallbackUri(callbackUri) {
+  async _handleCallbackUri(callbackUri, refresh = false) {
     try {
-      const code = parseCallbackUri(callbackUri);
-      if (code) {
-        await this._auth.login({
-          code,
-          redirectUri: this.redirectUri,
-        });
+      const query = parseCallbackUri(callbackUri);
+      if (refresh) {
+        await this._refreshWithCallbackQuery(query);
+      } else {
+        await this._loginWithCallbackQuery(query);
       }
     } catch (error) {
+      console.error('oauth error: ', error);
       let message;
       switch (error.message) {
         case 'invalid_request':
@@ -104,6 +106,32 @@ export default class OAuthBase extends RcModule {
     }
   }
 
+  async _loginWithCallbackQuery(query) {
+    if (!(query.code || query.access_token)) {
+      return;
+    }
+    await this._auth.login({
+      code: query.code,
+      accessToken: query.access_token,
+      expiresIn: query.expires_in,
+      endpointId: query.endpoint_id,
+      redirectUri: this.redirectUri,
+      tokenType: query.token_type,
+    });
+  }
+
+  async _refreshWithCallbackQuery(query) {
+    if (!query.access_token) {
+      return;
+    }
+    await this._auth.refreshImplicitToken({
+      tokenType: query.token_type,
+      accessToken: query.access_token,
+      expiresIn: query.expires_in,
+      endpointId: query.endpoint_id,
+    });
+  }
+
   @required
   async prepareOAuth() {}
 
@@ -125,9 +153,21 @@ export default class OAuthBase extends RcModule {
       brandId: this._brand.id,
       state: btoa(Date.now()),
       display: 'page',
+      implicit: this._auth.isImplicit,
     })}&${extendedQuery}`;
   }
 
+  get implictRefreshOAuthUri() {
+    return `${this._auth.getLoginUrl({
+      redirectUri: this.redirectUri,
+      brandId: this._brand.id,
+      state: btoa(Date.now()),
+      display: 'page',
+      prompt: 'none',
+      implicit: this._auth.isImplicit,
+    })}`;
+  }
+
   get status() {
     return this.state.status;
   }

src/lib/parseCallbackUri.js

@@ -0,0 +1,29 @@
+import url from 'url';
+import qs from 'qs';
+
+/**
+ * @function
+ * @param {String} callbackUri
+ * @return {Object}
+ */
+export default function parseCallbackUri(callbackUri) {
+  const { query, hash } = url.parse(callbackUri, true);
+  const hashObject = hash ? qs.parse(hash.replace(/^#/, '')) : {};
+  if (query.error || hashObject.error) {
+    const error = new Error(query.error || hashObject.error);
+    for (const key in query) {
+      if (query::Object.prototype.hasOwnProperty(key)) {
+        error[key] = query[key];
+      }
+      if (hashObject::Object.prototype.hasOwnProperty(key)) {
+        error[key] = query[key];
+      }
+    }
+    throw error;
+  }
+
+  return {
+    ...query,
+    ...hashObject,
+  };
+}

src/modules/ProxyFrameOAuth/index.js

@@ -33,6 +33,33 @@ export default class ProxyFrameOAuth extends OAuthBase {
     this._defaultProxyRetry = defaultProxyRetry;
 
     this._reducer = getProxyFrameOAuthReducer(this.actionTypes);
+
+    this._loggedIn = false;
+  }
+
+  _onStateChange() {
+    super._onStateChange();
+    if (this._auth.loggedIn === this._loggedIn) {
+      return;
+    }
+    this._loggedIn = this._auth.loggedIn;
+    if (this._loggedIn && this._auth.isImplicit) {
+      console.log('new login, start refresh token timeout');
+      this._createImplicitRefreshTimeout();
+    }
+    if (!this._loggedIn && this._auth.isImplicit) {
+      this._clearImplicitRefreshIframe();
+      if (this._implicitRefreshTimeoutId) {
+        clearTimeout(this._implicitRefreshTimeoutId);
+      }
+    }
+  }
+
+  async _handleCallbackUri(options) {
+    await super._handleCallbackUri(options);
+    if (this._auth.isImplicit && this._auth.loggedIn) {
+      this._createImplicitRefreshTimeout();
+    }
   }
 
   get name() {
@@ -137,4 +164,62 @@ export default class ProxyFrameOAuth extends OAuthBase {
       }, '*');
     }
   }
+
+  _createImplicitRefreshIframe() {
+    this._clearImplicitRefreshIframe();
+    this._implicitRefreshFrame = document.createElement('iframe');
+    this._implicitRefreshFrame.src = this.implictRefreshOAuthUri;
+    this._implicitRefreshFrame.style.display = 'none';
+    document.body.appendChild(this._implicitRefreshFrame);
+    // eslint-disable-next-line
+    this._implictitRefreshCallBack = ({ origin, data }) => {
+      const { refreshCallbackUri } = data;
+      if (refreshCallbackUri && this._auth.loggedIn) {
+        this._handleCallbackUri(refreshCallbackUri, true);
+        this._clearImplicitRefreshIframe();
+      }
+    };
+    window.addEventListener('message', this._implictitRefreshCallBack);
+  }
+
+  _clearImplicitRefreshIframe() {
+    if (this._implicitRefreshFrame) {
+      document.body.removeChild(this._implicitRefreshFrame);
+      this._implicitRefreshFrame = null;
+      window.removeEventListener('message', this._implictitRefreshCallBack);
+      this._callbackHandler = null;
+    }
+  }
+
+  // create a time out to refresh implicit flow token
+  _createImplicitRefreshTimeout() {
+    if (this._implicitRefreshTimeoutId) {
+      clearTimeout(this._implicitRefreshTimeoutId);
+    }
+    const authData = this._auth.token;
+    const refreshTokenExpiresIn = authData.expiresIn;
+    const { expireTime } = authData;
+    if (!refreshTokenExpiresIn || !expireTime) {
+      return;
+    }
+    // set refresh time to (token exposre time) / 3
+    let refreshTokenTimeoutTime = (parseInt(refreshTokenExpiresIn, 10) * 1000) / 3;
+    if (refreshTokenTimeoutTime + Date.now() > expireTime) {
+      refreshTokenTimeoutTime = expireTime - Date.now() - 5000;
+      if (refreshTokenTimeoutTime < 0) {
+        return;
+      }
+    }
+    this._implicitRefreshTimeoutId = setTimeout(() => {
+      if (!this._auth.loggedIn) {
+        return;
+      }
+      if (this._tabManager && !this._tabManager.active) {
+        this._createImplicitRefreshTimeout();
+        return;
+      }
+      this._createImplicitRefreshIframe();
+      this._implicitRefreshTimeoutId = null;
+    }, refreshTokenTimeoutTime);
+  }
 }

yarn.lock

@@ -7164,7 +7164,7 @@ ringcentral-client@^1.0.0-rc1:
 
 "ringcentral-integration@https://github.com/ringcentral/ringcentral-js-integration-commons#latest":
   version "0.1.0"
-  resolved "https://github.com/ringcentral/ringcentral-js-integration-commons#38b7ee200d14a517f1a94013acba725f3c972ceb"
+  resolved "https://github.com/ringcentral/ringcentral-js-integration-commons#e46d8e78ab3926f487bac270a3f0b6acaf27bb62"
   dependencies:
     file-loader "^0.11.2"
     json-mask "^0.3.8"