feat: idframe [wip]

Alan-Liang · Alan-Liang · commit 99c52e708111 · 2020-12-31T17:48:05.000+08:00
diff --git a/components/set-property.vue b/components/set-property.vue
@@ -41,32 +41,14 @@ export default {
   data () {
     return { submitting: false }
   },
-  inject: [ 'snackbar' ],
+  inject: [ 'snackbar', 'setIdframe' ],
   computed: {
     valid () {
       return this.validate ? this.validate() : true
     },
   },
-  mounted () {
-    const idFrameEl = document.createElement('span')
-    window.idFrameEl = idFrameEl
-    idFrameEl.style.cssText = 'top: 12px; right: 12px; position: fixed; --mdc-theme-primary: #f5fafd;'
-    const scriptEl = document.createElement('script')
-    scriptEl.src = 'https://idframe.keeer.net/js/appbar.js'
-    document.head.appendChild(scriptEl)
-    document.body.appendChild(idFrameEl)
-    const intervalId = setInterval(function () {
-      if ('idFrame' in window) {
-        clearInterval(intervalId)
-        // eslint-disable-next-line no-new, no-undef
-        new idFrame.AppBarFrame({ container: idFrameEl, base: location.origin })
-      }
-    }, 100)
-  },
-  beforeDestroy () {
-    document.body.removeChild(window.idFrameEl)
-    delete window.idFrameEl
-  },
+  mounted () { this.setIdframe(true) },
+  beforeDestroy () { this.setIdframe(false) },
   methods: {
     back () { this.$router.back() },
     async submit () {
diff --git a/idframe/appbar.js b/idframe/appbar.js
@@ -0,0 +1,227 @@
+{
+  const data = __data__ // eslint-disable-line no-undef
+  const defaultItems = [ 'nickname', 'myaccount', 'divider', 'kredit', 'recharge', 'divider', 'logout' ]
+  const shortItems = {
+    divider: () => ({ _isDivider: true, text: null }),
+    nickname: () => ({ text: esc(data.nickname) }),
+    myaccount: () => ({ text: '管理帐号信息', link: url('/') }),
+    kredit: () => ({ text: 'Kredit 余额：' + data.kredit / 100 }),
+    recharge: () => ({ text: '充值', link: url('/recharge') }),
+    logout: () => ({ text: '退出登录', id: 'idframe-log-out', onclick: () => window.idFrame.logout() }),
+  }
+
+  const url = path => data.base + path
+  const esc = str => str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  if (!('idFrame' in window)) window.idFrame = {}
+  if (!('logout' in window.idFrame)) window.idFrame.logout = () => {
+    const req = new XMLHttpRequest()
+    req.onload = () => location.reload()
+    req.onerror = () => alert('网络错误')
+    req.open('DELETE', url('/api/token?set-cookie=true'))
+  }
+
+  const waitMdc = new Promise((resolve, reject) => {
+    const timeout = 300000
+    setTimeout(reject, timeout)
+    const intervalId = setInterval(() => {
+      if (!('mdc' in window)) return
+      if ('ripple' in window.mdc && 'menu' in window.mdc) return resolve()
+    }, 200)
+    setTimeout(() => clearInterval(intervalId), timeout)
+  })
+
+  /**
+   * Class representing a IDFrame object.
+   * @constructor
+   * @param {string|HTMLElement} config.container IDFrame container, string will be interpreted as selector
+   * @param {string} [config.loginUrl] login button URL
+   * @param {string} [config.signupUrl] signup button URL
+   * @param {(string|object)[]} [config.items] items to show
+   * @param {string} [config.serviceName] KAS service name to include in login and sign up URLs
+   */
+  window.idFrame.AppBarFrame = class AppBarFrame {
+    constructor (config) {
+      this.config = config
+      if (!(config.container instanceof HTMLElement)) {
+        if (typeof config.container === 'string') config.container = document.querySelector(config.container)
+        if (!(config.container instanceof HTMLElement)) throw new Error('Container not found.')
+      }
+      this.container = config.container
+      if (!config.serviceName) {
+        this.loginUrl = config.loginUrl || url('/login#login')
+        this.signupUrl = config.signupUrl || url('/login#signup')
+      } else {
+        this.loginUrl = config.loginUrl || url(`/login?service=${config.serviceName}#login`)
+        this.signupUrl = config.signupUrl || url(`/login?service=${config.serviceName}#signup`)
+      }
+      this.ready = this._init()
+    }
+
+    /**
+     * Initializes frame UI.
+     * @private
+     */
+    _init () {
+      return waitMdc.then(() => {
+        if (!data.loggedIn) {
+          this.container.innerHTML = `
+          <span class="idframe idframe--appbar idframe--not-logged-in">
+            <a class="mdc-button" href="${this.loginUrl}"><div class="mdc-button__ripple"></div><span class="mdc-button__label">登录</span></a>&nbsp;
+            <a class="mdc-button mdc-button--outlined" href="${this.signupUrl}"><div class="mdc-button__ripple"></div><span class="mdc-button__label">注册</span></a>
+          </span>`
+          const els = this.container.querySelectorAll('.mdc-button')
+          for (let i = 0; i < els.length; i++) window.mdc.ripple.MDCRipple.attachTo(els[i])
+        } else { // logged in
+          this.container.innerHTML = `<span class="idframe idframe--appbar" role="button" title="KEEER 帐号">
+            <span class="idframe--appbar__avatar" style="background-image: url('${data.avatar})"></span>
+            <span class="idframe--appbar__nickname" dir="ltr">${esc(data.nickname)}</span>
+            <span class="idframe--appbar__dropdown-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg></span>
+          </span>`
+          this.container.firstElementChild.onclick = () => this._menu.open = true
+          this.updateItems(this.config.items || [].concat(defaultItems))
+        }
+      })
+    }
+
+    /**
+     * Gives layout of frame items.
+     * @private
+     */
+    _handleItems () {
+      let html = '<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">'
+      const listeners = {}
+      for (let i = 0; i < this.items.length; i++) {
+        let item = this.items[i]
+        if (typeof item === 'string') {
+          if (!(item in shortItems)) throw new Error(`Item ${item} not found.`)
+          item = shortItems[item](this)
+        }
+        if (!('text' in item)) throw new Error('Invalid item ' + item)
+        if (item._isDivider) html += '<li role="separator" class="mdc-list-divider"></li>'
+        else if ('link' in item) {
+          html += `<a class="mdc-list-item" role="menuitem" href="${item.link}"><span class="mdc-list-item__text">${esc(item.text)}</span></a>`
+        } else if ('onclick' in item) {
+          if (!('id' in item)) throw new Error(`Item ${item} has an onclick listener without ID.`)
+          const id = `${item.id}-${Math.floor(Math.random() * 100000)}`
+          listeners[id] = item.onclick
+          html += `<a id="${id}" class="mdc-list-item" role="menuitem" href="javascript:;"><span class="mdc-list-item__text">${esc(item.text)}</span></a>`
+        } else {
+          html += `<li class="mdc-list-item idframe-list-item--disabled" role="menuitem"><span class="mdc-list-item__text">${esc(item.text)}</span></li>`
+        }
+      }
+      if (!this._menuEl) {
+        const el = document.createElement('span')
+        el.className = 'mdc-menu-surface--anchor'
+        this._menuEl = document.createElement('div')
+        this._menuEl.className = 'mdc-menu mdc-menu-surface'
+        el.appendChild(this._menuEl)
+        this.ready.then(() => this.container.firstElementChild.appendChild(el))
+      }
+      html += '</ul>'
+      this._menuEl.innerHTML = html
+      this._menuEl.querySelector('ul').addEventListener('click', function (e) { e.stopPropagation() })
+      this._menu = new window.mdc.menu.MDCMenu(this._menuEl)
+      const els = this._menu.list_.listElements
+      for (let i = 0; i < els.length; i++) new window.mdc.ripple.MDCRipple(els[i]) // eslint-disable-line no-new
+      setTimeout(() => {
+        for (const id in listeners) document.getElementById(id).addEventListener('click', listeners[id])
+      }, 100)
+    }
+
+    /**
+     * Updates menu items.
+     * @param {(string|object)[]} items items to be displayed.
+     */
+    updateItems (items) {
+      if (!Array.isArray(items)) throw new TypeError('Items not an array')
+      const oldItems = this.items
+      this.items = items
+      try {
+        this._handleItems()
+      } catch (e) {
+        this.items = oldItems
+        this._handleItems()
+        throw e
+      }
+    }
+  }
+
+  // initialize styles
+  const styleEl = document.createElement('style')
+  styleEl.innerHTML = `
+  .idframe--appbar {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+  }
+  .idframe--not-logged-in {
+    margin-top: 2px;
+    margin-right: 2px;
+  }
+  .idframe--appbar__nickname {
+    font-size: 16px;
+    margin: 0 4px 0 8px;
+    color: var(--mdc-theme-primary, black);
+  }
+  @media(max-width: 599px) {
+    .idframe--appbar__nickname {
+      display: none;
+    }
+  }
+  .idframe--appbar__avatar {
+    width: 40px;
+    height: 40px;
+    background-size: contain;
+    display: inline-block;
+    border-radius: 4px;
+  }
+  .idframe--appbar .mdc-menu-surface--anchor {
+    align-self: start;
+  }
+  .idframe--appbar .idframe-list-item--disabled .mdc-list-item__text {
+    opacity: .5;
+  }
+  .idframe--appbar__dropdown-icon, .idframe--appbar__dropdown-icon svg {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    opacity: .8;
+    fill: var(--mdc-theme-primary, black);
+  }`
+  document.head.appendChild(styleEl)
+
+  // initialize MDC
+  const used = {
+    'mdc.button.': [ 'https://cdn.jsdelivr.net/npm/@material/button@4.0.0/dist/mdc.button.min.css' ],
+    'mdc.ripple.': [ 'https://cdn.jsdelivr.net/npm/@material/ripple@4.0.0/dist/mdc.ripple.min.css', 'https://cdn.jsdelivr.net/npm/@material/ripple@4.0.0/dist/mdc.ripple.min.js' ],
+    'mdc.list.': [ 'https://cdn.jsdelivr.net/npm/@material/list@4.0.0/dist/mdc.list.min.css' ],
+    'mdc.menu-surface.': [ 'https://cdn.jsdelivr.net/npm/@material/menu-surface@4.0.0/dist/mdc.menu-surface.min.css' ],
+    'mdc.menu.': [ 'https://cdn.jsdelivr.net/npm/@material/menu@4.0.0/dist/mdc.menu.min.css', 'https://cdn.jsdelivr.net/npm/@material/menu@4.0.0/dist/mdc.menu.min.js' ],
+  }
+  for (const i in used) {
+    let has = !used[i][0]
+    if (!('mdc' in window.idFrame) || !window.idFrame.mdc.style) {
+      for (let j = 0; j < document.styleSheets.length; j++) {
+        if ((document.styleSheets[j].href || '').includes(i)) has = true
+      }
+      if (!has) {
+        const el = document.createElement('link')
+        el.rel = 'stylesheet'
+        el.href = used[i][0]
+        document.head.appendChild(el)
+      }
+    }
+    if (!('mdc' in window.idFrame) || !window.idFrame.mdc.script) {
+      has = !used[i][1]
+      for (let j = 0; j < document.scripts.length; j++) {
+        if ((document.scripts[j].src || '').includes(i)) has = true
+      }
+      if (!has) {
+        const el = document.createElement('script')
+        el.src = used[i][1]
+        document.head.appendChild(el)
+      }
+    }
+  }
+}
diff --git a/idframe/serve.js b/idframe/serve.js
@@ -0,0 +1,11 @@
+const { readFileSync } = require('fs')
+const path = require('path')
+const script = readFileSync(path.resolve(__dirname, 'appbar.js')).toString()
+
+exports.applyIdframeRoutes = router => router.get('/api/idframe', ctx => {
+  const info = ctx.getUserInformation()
+  const data = info ? { ...info, loggedIn: true } : { loggedIn: false }
+  const str = JSON.stringify(data).replace(/\//g, '\\u002F')
+  ctx.set('Content-Type', 'application/javascript')
+  ctx.body = script.replace('__data__', str)
+})
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,23 +1,23 @@
 <template>
-  <v-app>
-    <!-- <v-app-bar v-if="hasAppBar" fixed app>
-      <v-toolbar-title v-text="title" />
-    </v-app-bar> -->
-    <v-content>
-      <nuxt />
-      <v-snackbar v-model="snackbarModel" :timeout="3200">
-        {{ snackbarText }}
-      </v-snackbar>
-    </v-content>
-  </v-app>
+  <div>
+    <v-app>
+      <v-content>
+        <nuxt />
+        <v-snackbar v-model="snackbarModel" :timeout="3200">
+          {{ snackbarText }}
+        </v-snackbar>
+      </v-content>
+    </v-app>
+    <span v-show="showIdframe" id="idframe" ref="idframe" />
+  </div>
 </template>
 
 <script>
 export default {
   data () {
     return {
       title: 'KEEER Account Service',
-      // hasAppBar: false,
+      showIdframe: false,
       snackbarModel: false,
       snackbarText: '',
       snackbarQueue: [],
@@ -31,6 +31,8 @@ export default {
         this.snackbarText = text
         this.snackbarModel = true
       },
+      setIdframe: val => this.showIdframe = val,
+      reloadIdframe: () => this.reloadIdframe(),
     }
   },
   watch: {
@@ -43,6 +45,28 @@ export default {
       }
     },
   },
+  mounted () { this.reloadIdframe() },
+  methods: {
+    reloadIdframe () {
+      this.$refs.idframe.innerHTML = ''
+      const scriptEl = document.createElement('script')
+      scriptEl.onload = () => {
+        // eslint-disable-next-line no-new
+        new window.idFrame.AppBarFrame({ container: this.$refs.idframe })
+      }
+      scriptEl.src = '/api/idframe'
+      document.head.appendChild(scriptEl)
+    },
+  },
   head () { return { title: 'KAS' } },
 }
 </script>
+
+<style scoped>
+#idframe {
+  top: 12px;
+  right: 12px;
+  position: fixed;
+  --mdc-theme-primary: #f5fafd;
+}
+</style>
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -40,7 +40,7 @@ module.exports = {
           'default-src': [ '\'self\'', cdnOrigin, '\'report-sample\'' ],
           'img-src': [ '\'self\'', 'data:', jsdelivr, `https://*.${ALI_OSS_REGION}.aliyuncs.com`, 'https://keeer.net', 'https://*.keeer.net', 'https://www.google-analytics.com', 'https://payjs.cn' ],
           'script-src': [
-            '\'self\'', cdnOrigin, jsdelivr, 'https://idframe.keeer.net', 'https://www.google-analytics.com', 'https://ssl.google-analytics.com', '\'report-sample\'',
+            '\'self\'', cdnOrigin, jsdelivr, 'https://www.google-analytics.com', 'https://ssl.google-analytics.com', '\'report-sample\'',
             ...(process.env.NODE_ENV === 'development' ? [ '\'unsafe-eval\'' ] : []),
           ],
           'style-src': [ '\'self\'', jsdelivr, cdnOrigin, '\'unsafe-inline\'', '\'report-sample\'' ],
diff --git a/pages/login.vue b/pages/login.vue
@@ -83,7 +83,7 @@
 import SmsVerify from '~/components/sms-verify'
 
 export default {
-  inject: [ 'snackbar' ],
+  inject: [ 'snackbar', 'reloadIdframe' ],
   components: { SmsVerify },
   async asyncData ({ req }) {
     if (process.server) {
@@ -156,6 +156,7 @@ export default {
   },
   methods: {
     proceed () {
+      this.reloadIdframe()
       if (this.useCustom && this.useCustom.redirectUrl) {
         const url = this.useCustom.redirectUrl
         if (/^https?:\/\//.test(url)) location = url
diff --git a/pages/sessions.vue b/pages/sessions.vue
@@ -41,10 +41,12 @@ export default {
       return { notLoggedIn: res.code === 'EUNAUTHORIZED', sessions: res.result || [] }
     }
   },
-  inject: [ 'snackbar' ],
+  inject: [ 'snackbar', 'setIdframe' ],
   created () {
     if (this.notLoggedIn) this.$router.push('/login')
   },
+  mounted () { this.setIdframe(true) },
+  beforeDestroy () { this.setIdframe(false) },
   methods: {
     timeString: time => new Date(time).toLocaleString(),
     async logout (session) {
diff --git a/pages/set-keeer-id.vue b/pages/set-keeer-id.vue
@@ -1,6 +1,6 @@
 <template>
   <set-property
-    title="设置您的KEEER ID"
+    title="设置您的 KEEER ID"
     subtitle="请慎重，您仅有 1 次设置机会"
     put-path="/api/keeer-id"
     track="keeer-id"
diff --git a/server/index.js b/server/index.js
