tistory oauth2 ExternalOAuth2로 전환

Author: joostory

docs/callback.html

@@ -81,10 +81,13 @@ <h1 class="title-text">Editor</h1>
     </div>
 
     <div class="loading">로딩중</div>
-
-    <div>
-      <a href="tistory-editor://tistory-editor/callback?state=app">열기</a>
-    </div>
   </div>
+
+  <script>
+    if (navigator.userAgent.indexOf("TistoryEditor") < 0) {
+      const url = new URL(location.href)
+      location.href = "tistory-editor://tistory-editor/callback" + url.search
+    }
+  </script>
 </body>
 </html>

src/main/apis/tistory-api.js

@@ -1,4 +1,3 @@
-const oauth2 = require('../oauth/ElectronOauth2');
 const fs = require('fs')
 const fetch = require('isomorphic-fetch')
 const querystring = require('querystring')
@@ -7,6 +6,7 @@ const {session} = require('electron')
 const stream = require('stream')
 const Oauth2infoReader = require('../oauth/OauthInfoReader')
 const appInfo = require('../appInfo')
+const ExternalOAuth2 = require('../oauth/ExternalOAuth2');
 
 const errorHandler = (res) => {
   if (!res.ok) {
@@ -20,19 +20,17 @@ const errorHandler = (res) => {
 
 const BASE_URL = 'https://www.tistory.com/apis'
 
-const getAccessToken = () => {
+const requestAuth = () => {
   const oauth2infoReader = new Oauth2infoReader()
-  const tistoryOAuth = oauth2(oauth2infoReader.getTistory(), {
-    alwaysOnTop: true,
-    autoHideMenuBar: true,
-    webPreferences: {
-      nodeIntegration: false,
-      contextIsolation: true,
-			session: session.fromPartition("tistory:oauth2:" + new Date())
-    }
-  }, 'GET')
+  const tistoryOAuth = new ExternalOAuth2(oauth2infoReader.getTistory())
+  tistoryOAuth.requestAuth({})
+  return tistoryOAuth.getState()
+}
 
-  return tistoryOAuth.getAccessToken({})
+const requestToken = (code) => {
+  const oauth2infoReader = new Oauth2infoReader()
+  const tistoryOAuth = new ExternalOAuth2(oauth2infoReader.getTistory())
+  return tistoryOAuth.requestToken(code, 'GET')
 }
 
 const fetchBlogInfo = (auth) => {
@@ -253,7 +251,8 @@ const fetchAccount = async (auth) => {
 
 
 module.exports = {
-  getAccessToken: getAccessToken,
+  requestAuth: requestAuth,
+  requestToken: requestToken,
   fetchBlogInfo: fetchBlogInfo,
   fetchUser: fetchUser,
   fetchPosts: fetchPosts,

src/main/events/auth.js

@@ -2,6 +2,7 @@ const uuid = require('uuid').v4
 const { ipcMain } = require('electron')
 const AuthenticationManager = require('../lib/AuthenticationManager')
 const ProviderApiManager = require('../lib/ProviderApiManager')
+const OAuthRequestManager = require('../oauth/OAuthRequestManager');
 
 async function fetchAccount(auth) {
   const api = ProviderApiManager.getApi(auth.provider)
@@ -16,6 +17,7 @@ function fetchAccounts(authList) {
 
 function saveAuth(auth) {
   AuthenticationManager.add(auth)
+  console.log("savedAuth", auth)
   return auth
 }
 
@@ -35,19 +37,33 @@ module.exports = () => {
   ipcMain.on("request-auth", (evt, provider) => {
     console.log('Main.receive: request-auth', provider)
     let providerApi = ProviderApiManager.getApi(provider)
-    providerApi.getAccessToken()
-      .then(authInfo => ({
-        uuid: uuid(),
-        provider: provider,
-        authInfo: authInfo
-      }))
-      .then(auth => saveAuth(auth))
-      .then(auth => {
-        fetchAccount(auth)
-          .then(account => {
-            evt.sender.send('receive-account', account)
-          })
-      })
+    let state = providerApi.requestAuth()
+    OAuthRequestManager.saveRequestInfo(state, (code) => {
+      const providerApi = ProviderApiManager.getApi(provider)
+      providerApi.requestToken(code)
+        .then(data => {
+          if (data.error) {
+            throw new Error(`${data.error}: ${data.error_description}`)
+          }
+
+          return {
+            uuid: uuid(),
+            provider: provider,
+            authInfo: data
+          }
+        })
+        .then(saveAuth)
+        .then(auth => {
+          providerApi.fetchAccount(auth)
+            .then(account => {
+              evt.sender.send('receive-account', account)
+            })
+        })
+        .catch(e => {
+          console.error(e)
+          evt.sender.send('receive-message', `오류가 발생했습니다. (${e.message})`)
+        })
+    })
   })
 
   ipcMain.on("disconnect-auth", (evt, uuid) => {

src/main/lib/AuthUtils.js

@@ -0,0 +1,15 @@
+
+class AuthUtils {
+  static generateRandomString(length) {
+    var text = '';
+    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  
+    for (var i = 0; i < length; i++) {
+      text += possible.charAt(Math.floor(Math.random() * possible.length));
+    }
+  
+    return text;
+  }
+}
+
+module.exports = AuthUtils

src/main/main.js

@@ -1,8 +1,9 @@
 const { app, protocol } = require('electron')
-const url = require('url')
 const ipc = require('./ipc-event')
 const settings = require('electron-settings')
 const { initWindow } = require('./window')
+const OAuthRequestManager = require('./oauth/OAuthRequestManager')
+const ProviderApiManager = require('./lib/ProviderApiManager')
 
 const PROTOCOL = "tistory-editor"
 
@@ -24,10 +25,13 @@ app.on('window-all-closed', () => {
   app.quit()
 })
 
-app.on("open-url", (e, data) => {
-  e.preventDefault()
-  // tistory-editor://tistory-editor/callback?state=app
-  console.log("open url", url.parse(data))
+app.on("open-url", (e, urlString) => {
+  const url = new URL(urlString)
+  console.log("OPEN_URL", urlString, url, url.pathname, url.searchParams.get('code'), url.searchParams.get('state'))
+  const requestHandler = OAuthRequestManager.loadRequestInfo(url.searchParams.get('state'))
+  if (requestHandler) {
+    requestHandler(url.searchParams.get('code'))
+  }
 })
 
 app.setAsDefaultProtocolClient(PROTOCOL)

src/main/oauth/ElectronOauth2.js

@@ -7,6 +7,7 @@ const objectAssign = require('object-assign');
 const nodeUrl = require('url');
 const electron = require('electron');
 const BrowserWindow = electron.BrowserWindow || electron.remote.BrowserWindow;
+const AuthUtils = require('../lib/AuthUtils')
 
 var generateRandomString = function (length) {
   var text = '';
@@ -31,7 +32,7 @@ module.exports = function (oauthInfo, windowParams, tokenMethod = 'POST') {
       response_type: 'code',
       redirect_uri: oauthInfo.redirectUri,
       client_id: oauthInfo.clientId,
-      state: generateRandomString(16)
+      state: AuthUtils.generateRandomString(16)
     };
 
     if (opts.scope) {

src/main/oauth/ExternalOAuth2.js

@@ -0,0 +1,69 @@
+const Promise = require('pinkie-promise');
+const queryString = require('querystring');
+const fetch = require('node-fetch');
+const electron = require('electron');
+const AuthUtils = require('../lib/AuthUtils')
+
+class ExternalOAuth2 {
+  #oauthInfo
+  #state
+
+  constructor(oauthInfo) {
+    this.#oauthInfo = oauthInfo
+    this.#state = AuthUtils.generateRandomString(16)
+  }
+
+  getState() {
+    return this.#state
+  }
+
+  requestAuth(opts) {
+    opts = opts || {};
+
+    var urlParams = {
+      response_type: opts.scope || 'code',
+      redirect_uri: this.#oauthInfo.redirectUri,
+      client_id: this.#oauthInfo.clientId,
+      state: this.#state
+    };
+
+    if (opts.accessType) {
+      urlParams.access_type = opts.accessType;
+    }
+
+    var url = this.#oauthInfo.authorizationUrl + '?' + queryString.stringify(urlParams);
+    electron.shell.openExternal(url)
+  }
+
+  requestToken(authorizationCode, tokenMethod = 'POST') {
+    var tokenRequestData = {
+      code: authorizationCode,
+      grant_type: 'authorization_code',
+      redirect_uri: this.#oauthInfo.redirectUri,
+      client_id: this.#oauthInfo.clientId,
+      client_secret: this.#oauthInfo.clientSecret
+    };
+
+    let url = this.#oauthInfo.tokenUrl;
+    let fetchOptions = {
+      method: tokenMethod,
+      headers: {
+        'Accept': 'application/json'
+      }
+    };
+
+    if (tokenMethod == 'GET') {
+      url = `${this.#oauthInfo.tokenUrl}?${queryString.stringify(tokenRequestData)}`
+    } else {
+      fetchOptions['headers']['Content-Type'] = 'application/x-www-form-urlencoded';
+      fetchOptions['body'] = queryString.stringify(tokenRequestData);
+    }
+
+    console.log("requestToken", tokenMethod, url, fetchOptions)
+
+    return fetch(url, fetchOptions)
+      .then(res => res.json())
+  }
+}
+
+module.exports = ExternalOAuth2

src/main/oauth/OAuthRequestManager.js

@@ -0,0 +1,14 @@
+
+const requestInfo = []
+
+class OAuthRequestManager {
+  static saveRequestInfo(state, info) {
+    requestInfo[state] = info
+  }
+
+  static loadRequestInfo(state) {
+    return requestInfo[state]
+  }
+}
+
+module.exports = OAuthRequestManager