GitHub OAuth2 for testing environment.

Mentions: #5

package.json

@@ -15,7 +15,8 @@
     "mercator-projection": "0.0.2",
     "pug": "",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/components/GitHubLogin.vue

@@ -0,0 +1,104 @@
+<template lang="pug">
+div(id="github-login")
+  p(v-show="!done") 身分驗證中，請稍候 ...
+  p(v-show="done && successful") 登入完成
+  p(v-show="done && !successful")
+    | 登入失敗，
+    a(:href="URL_AUTHORIZE") 再試一次
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data () {
+    return {
+      client_id: 'a564c04f554415036378',
+      client_secret: '1973a4a16b88767ffcff49db34d9f3057471c584',
+      done: false,
+      successful: false
+    }
+  },
+  computed: {
+    URL_AUTHORIZE () {
+      return 'https://github.com/login/oauth/authorize?client_id=' + this.client_id
+    },
+    URL_TOKEN () {
+      // CORS Proxies:
+      const proxies = [
+        'https://thingproxy.freeboard.io/fetch/',
+        'https://cors-anywhere.herokuapp.com/',
+        'https://crossorigin.me/'
+      ]
+      return proxies[0] + 'https://github.com/login/oauth/access_token'
+    },
+    URL_USER () {
+      return 'https://api.github.com/user'
+    }
+  },
+  methods: {
+    pairsToObject (pairs) {
+      const params = {}
+      pairs.split('&').forEach((stmt) => {
+        const eqp = stmt.indexOf('=')
+        if (eqp > 0) {
+          const k = stmt.substr(0, eqp)
+          const v = decodeURIComponent(stmt.substr(eqp + 1)).replace(/\+/g, ' ')
+          params[k] = v
+        } else {
+          if (eqp === -1) {
+            params[stmt] = ''
+          }
+        }
+      })
+      return params
+    }
+  },
+  created () {
+    const pairs = window.location.search.substr(1)
+    const params = this.pairsToObject(pairs)
+    if (params['code'] !== undefined) {
+      this.code = params['code']
+      axios.post(this.URL_TOKEN, {
+        client_id: this.client_id,
+        client_secret: this.client_secret,
+        code: params['code']
+      }).then((resp) => {
+        if (resp.status === 200) {
+          console.log('Get GitHub access token.')
+          const result = this.pairsToObject(resp.data)
+          if (result['access_token'] !== undefined) {
+            return axios.get(this.URL_USER, {
+              headers: {
+                'Authorization': 'token ' + result.access_token
+              }
+            })
+          } else {
+            throw result.error_description
+          }
+        } else {
+          throw resp.statusText
+        }
+      }).then((resp) => {
+        if (resp.status === 200) {
+          console.log('Get GitHub user info.')
+          const userInfo = {
+            login: resp.data.login,
+            name: resp.data.name,
+            auth: resp.config.headers.Authorization
+          }
+          this.done = true
+          this.successful = true
+          this.$store.commit('login', userInfo)
+          setTimeout(() => this.$router.push('mapviewer'), 1500)
+          return
+        }
+        throw resp.statusText
+      }).catch((ex) => {
+        console.error(ex)
+        this.done = true
+      })
+    }
+  }
+}
+</script>

src/components/MapViewer.vue

@@ -8,11 +8,11 @@ div
     @dblclick="onMouseDoubleClick",
     @wheel="onMouseWheel"
   )
-    TileLayer(:mapState="mapState")
-    GridLayer(:mapState="mapState", v-show="showLayers.grid")
+    // TileLayer(:mapState="mapState")
+    // GridLayer(:mapState="mapState", v-show="showLayers.grid")
     StatusLayer(:mapState="mapState", v-show="showLayers.status")
-    OverlayLayer(:mapState="mapState")
-    // ToolLayer
+    EditingToolLayer(:mapState="mapState")
+    // OverlayLayer(:mapState="mapState")
     LogoLayer
     CopyrightLayer
     MouseLocationLayer(:operationState="operationState", v-show="showLayers.mouseLocation")
@@ -24,13 +24,13 @@ import TileLayer from '@/components/layers/TileLayer'
 import GridLayer from '@/components/layers/GridLayer'
 import LogoLayer from '@/components/layers/LogoLayer'
 import OverlayLayer from '@/components/layers/OverlayLayer'
-// import ToolLayer from '@/components/layers/ToolLayer'
+import EditingToolLayer from '@/components/layers/EditingToolLayer'
 import StatusLayer from '@/components/layers/StatusLayer'
 import CopyrightLayer from '@/components/layers/CopyrightLayer'
 import MouseLocationLayer from '@/components/layers/MouseLocationLayer'
 
 export default {
-  components: { TileLayer, GridLayer, OverlayLayer, StatusLayer, LogoLayer, CopyrightLayer, MouseLocationLayer },
+  components: { TileLayer, GridLayer, OverlayLayer, EditingToolLayer, StatusLayer, LogoLayer, CopyrightLayer, MouseLocationLayer },
 
   data () {
     // TODO: path validation
@@ -57,9 +57,9 @@ export default {
       },
       // 圖層開關狀態
       showLayers: {
-        status: false,
-        grid: false,
-        mouseLocation: false
+        status: true,
+        grid: true,
+        mouseLocation: true
       }
     }
   },

src/components/layers/EditingToolLayer.vue

@@ -0,0 +1,45 @@
+<template lang="pug">
+div(id="editing-tool-layer")
+  span OOO&nbsp;
+  span(v-show="!authorized")
+    a(href="https://github.com/login/oauth/authorize?client_id=a564c04f554415036378") 登入
+  span(v-show="authorized")
+    | {{ username }}&nbsp;
+    a(@click="logout") 登出
+</template>
+
+<script>
+export default {
+  props: [ 'mapState' ],
+
+  computed: {
+    authorized () {
+      return this.$store.getters.userInfo.auth !== false
+    },
+    username () {
+      console.log(this.$store.getters.userInfo)
+      return this.$store.getters.userInfo.name
+    }
+  },
+
+  methods: {
+    logout () {
+      this.$store.commit('logout')
+    }
+  }
+}
+</script>
+
+<style scoped>
+#editing-tool-layer {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  border: 1px solid black;
+  border-radius: 5px;
+  padding: 5px 10px;
+  font-size: 10pt;
+  font-weight: normal;
+  user-select: none;
+}
+</style>

src/components/layers/StatusLayer.vue

@@ -21,7 +21,7 @@ export default {
 <style scoped>
 #status-layer {
   position: absolute;
-  right: 5px;
+  left: 5px;
   top: 5px;
   min-width: 230px;
   padding: 5px 10px;

src/main.js

@@ -3,13 +3,59 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import Vuex from 'vuex'
 
+Vue.use(Vuex)
 Vue.config.productionTip = false
 
+const store = new Vuex.Store({
+  state: {
+    userInfo: {
+      name: '',
+      login: '',
+      auth: false,
+      timestamp: 0
+    }
+  },
+  getters: {
+    userInfo (state) {
+      if (state.userInfo.auth === false) {
+        if (window.sessionStorage.userInfo !== undefined) {
+          const ssu = JSON.parse(window.sessionStorage.userInfo)
+          const now = (new Date()).getTime() / 1000
+          if (now - ssu.timestamp < 30) {
+            store.commit('login', ssu)
+            return ssu
+          }
+        }
+      }
+      return state.userInfo
+    }
+  },
+  mutations: {
+    login (state, userInfo) {
+      userInfo.timestamp = (new Date()).getTime() / 1000
+      window.sessionStorage.userInfo = JSON.stringify(userInfo)
+      state.userInfo = userInfo
+    },
+    logout (state) {
+      const userInfo = {
+        name: '',
+        login: '',
+        auth: false,
+        timestamp: 0
+      }
+      window.sessionStorage.userInfo = JSON.stringify(userInfo)
+      state.userInfo = userInfo
+    }
+  }
+})
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>'
 })

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import MapViewer from '@/components/MapViewer'
+import GitHubLogin from '@/components/GitHubLogin'
 import Privacy from '@/components/Privacy'
 
 Vue.use(Router)
@@ -20,10 +21,18 @@ export default new Router({
       redirect: '/mapviewer/16/25.05328/121.52734'
     },
     // 重新定向到預設位置
+    /*
     {
       path: '/',
       redirect: '/mapviewer'
     },
+    */
+    // GitHub 登入
+    {
+      name: 'github-login',
+      path: '/github-login',
+      component: GitHubLogin
+    },
     // 隱私權聲明
     {
       name: 'privacy',