구글 포토 인증 ExternalOAuth2로 전환

kakao-joo-yoon · joostory · commit a88632e69afb · 2021-06-11T02:25:51.000+09:00
diff --git a/src/main/apis/photos-api.js b/src/main/apis/photos-api.js
@@ -1,20 +1,24 @@
 const oauth2 = require('../oauth/ElectronOauth2');
+const ExternalOAuth2 = require('../oauth/ExternalOAuth2')
 const fetch = require('isomorphic-fetch')
 const {clipboard, session} = require('electron')
 const OauthInfoReader = require('../oauth/OauthInfoReader')
-const appInfo = require('../appInfo')
+const appInfo = require('../appInfo');
+const OAuthRequestManager = require('../oauth/OAuthRequestManager');
 
 class GoogleAuthApi {
+  #googleOAuth
+
 	constructor() {
-		this.googleOAuth = null
+    this.#googleOAuth = null
 	}
 
 	makeGoogleOAuth() {
-		if (!this.googleOAuth) {
+		if (!this.#googleOAuth) {
 			const oauthInfoReader = new OauthInfoReader()
 			const oauthInfo = oauthInfoReader.getGoogle()
 
-			this.googleOAuth = oauth2(oauthInfo, {
+			this.#googleOAuth = oauth2(oauthInfo, {
 				alwaysOnTop: true,
 				autoHideMenuBar: true,
 				webPreferences: {
@@ -25,9 +29,31 @@ class GoogleAuthApi {
 			})
 		}
 		
-		return this.googleOAuth
+		return this.#googleOAuth
 	}
 
+  requestAuth(successHandler, failureHandler) {
+    const oauthInfoReader = new OauthInfoReader()
+    const oauth2 = new ExternalOAuth2(oauthInfoReader.getGoogle())
+    OAuthRequestManager.saveRequestInfo("oauth", (searchParams) => {
+      const code = searchParams.get("code")
+      oauth2.requestToken(code)
+        .then(data => {
+          if (data.error) {
+            throw new Error(`${data.error}: ${data.error_description}`)
+          }
+
+          return data
+        })
+        .then(successHandler)
+        .catch(failureHandler)
+    })
+
+    oauth2.requestAuth({
+			scope: ['https://www.googleapis.com/auth/photoslibrary.readonly']
+		})
+  }
+
 	getAccessToken() {
 		return this.makeGoogleOAuth().getAccessToken({
 			scope: ['https://www.googleapis.com/auth/photoslibrary.readonly']
diff --git a/src/main/events/google-photos.js b/src/main/events/google-photos.js
@@ -6,7 +6,7 @@ module.exports = () => {
 	const authApi = new GoogleAuthApi()
 	const fetchImages = async (evt, nextPageToken) => {
 		console.log('fetchImage', nextPageToken)
-		const auth = settings.get('google-auth')
+		const auth = settings.getSync('google-auth')
 
 		try {
 			if (!auth || !auth.access_token) {
@@ -32,7 +32,7 @@ module.exports = () => {
       } else {
         evt.sender.send('receive-google-connected', false)
       }
-      evt.sender.send('receive-google-photos-images', [])
+      evt.sender.send('receive-google-photos-images', null)
 		}
 	}
 
@@ -43,11 +43,14 @@ module.exports = () => {
 
 	ipcMain.on("request-google-photos-auth", (evt, arg) => {
     console.log('Main.receive: request-google-photos-auth')
-		authApi.getAccessToken().then(auth => {
-			settings.setSync('google-auth', auth)
+    authApi.requestAuth((auth) => {
+      settings.setSync('google-auth', auth)
 			evt.sender.send('receive-google-connected', true)
-			fetchImages(evt, null)
-		})
+			fetchImages(evt, null)//
+    }, () => {
+      console.error(e)
+      evt.sender.send('receive-message', `오류가 발생했습니다. (${e.message})`)
+    })
 	})
 
 	ipcMain.on("disconnect-google-photos-auth", (evt, arg) => {
diff --git a/src/main/main.js b/src/main/main.js
@@ -25,6 +25,7 @@ app.on('window-all-closed', () => {
 })
 
 app.on("open-url", (e, urlString) => {
+  console.log("OPEN-URL", urlString)
   const url = new URL(urlString)
   let requestHandler = OAuthRequestManager.loadRequestInfo("oauth")
   if (requestHandler) {
diff --git a/src/main/oauth/ExternalOAuth2.js b/src/main/oauth/ExternalOAuth2.js
@@ -20,12 +20,16 @@ class ExternalOAuth2 {
     opts = opts || {};
 
     var urlParams = {
-      response_type: opts.scope || 'code',
+      response_type: 'code',
       redirect_uri: this.#oauthInfo.redirectUri,
       client_id: this.#oauthInfo.clientId,
       state: this.#state
     };
 
+    if (opts.scope) {
+      urlParams.scope = opts.scope;
+    }
+
     if (opts.accessType) {
       urlParams.access_type = opts.accessType;
     }
diff --git a/src/renderer/components/editor/Editor.js b/src/renderer/components/editor/Editor.js
@@ -198,7 +198,7 @@ export default function Editor({mode, onFinish}) {
 
       ipcRenderer.send("disable-exist-prompt")
     }
-  })
+  }, [])
 
   return (
     <Box className={classes.root}>
diff --git a/src/renderer/components/editor/plugins/google-photos/GooglePhotos.js b/src/renderer/components/editor/plugins/google-photos/GooglePhotos.js
@@ -1,136 +1,103 @@
-import React, { Component } from 'react'
+import React, { useEffect, useState } from 'react'
 import { ipcRenderer } from 'electron'
-import autobind from 'autobind-decorator'
 import update from 'immutability-helper'
 import { Button } from '@material-ui/core'
 import Loading from '../../../Loading'
 import PhotoList from './PhotoList'
 
-class GooglePhotos extends Component {
 
-	constructor(props, context) {
-		super(props, context)
-		this.state = {
-			initialized: false,
-      images: [],
-      nextPageToken: null,
-			fetching: false
-		}
-	}
-
-	componentWillMount() {
-		ipcRenderer.on("receive-google-photos-images", this.handleReceiveImages)
-		ipcRenderer.on("start-fetch-google-photos-images", this.handleStartFetch)
-		ipcRenderer.on("receive-google-connected", this.handleReceiveConnected)
-	}
-
-	componentWillUnmount() {
-		ipcRenderer.removeListener("receive-google-photos-images", this.handleReceiveImages)
-		ipcRenderer.removeListener("start-fetch-google-photos-images", this.handleStartFetch)
-		ipcRenderer.removeListener("receive-google-connected", this.handleReceiveConnected)
-	}
+export default function GooglePhotos({ connected, onConnect, onDisconnect, onSelectImage }) {
+  const [initialized, setInitialized] = useState(false)
+  const [images, setImages] = useState([])
+  const [fetching, setFetching] = useState(false)
+  const [nextPageToken, setNextPageToken] = useState(null)
 
-	componentDidMount() {
-		this.handleRequestFetch()
-	}
-
-	@autobind
-	handleReceiveImages(e, data) {
-    const { onConnect, onDisconnect } = this.props
-		const { images, fetching } = this.state
+  function handleReceiveImages(e, data) {
 		if (data === null) {
       onDisconnect()
 			return
 		}
 
-		this.setState({
-			initialized: true,
-			images: update(images, {
-				$push: data.images
-      }),
-      nextPageToken: data.nextPageToken,
-			fetching: false
-    })
+    console.log("connected", data)
+
+    setInitialized(true)
+    setImages(update(images, {
+      $push: data.images
+    }))
+    setNextPageToken(data.nextPageToken)
+    setFetching(false)
     onConnect(true)
 	}
 
-	@autobind
-	handleReceiveConnected(e, connected) {
-    const { onConnect, onDisconnect } = this.props
+  function handleStartFetch(e) {
+    setFetching(true)
+	}
+
+  function handleReceiveConnected(e, connected) {
+    setInitialized(true)
+
 		if (connected) {
-			this.setState({
-				initialized: true,
-      })
       onConnect()
 		} else {
-			this.setState({
-				initialized: true,
-        images: [],
-        nextPageToken: null,
-      })
+      setImages([])
+      setNextPageToken(null)
       onDisconnect()
     }
 	}
 
-	@autobind
-	handleStartFetch(e) {
-		this.setState({
-			fetching: true
-		})
-	}
-
-	@autobind
-	handleRequestFetch() {
-    const { nextPageToken } = this.state
+  function handleRequestFetch() {
 		ipcRenderer.send('fetch-google-photos-images', nextPageToken)
 	}
 
-	@autobind
-	handleRequestAuth() {
+  function handleRequestAuth() {
 		ipcRenderer.send("request-google-photos-auth")
 	}
 
-
-	@autobind
-	handleImageSelect(image) {
-		const { onSelectImage } = this.props
+  function handleImageSelect(image) {
 		if (confirm('이미지를 삽입하시겠습니까?')) {
 			onSelectImage(image.url, image.title)
 		}
 	}
 
-	render() {
-    const { connected } = this.props
-		const { initialized, images, fetching } = this.state
-
-		if (!initialized) {
-			return (
-				<div className="google-photos-wrap">
-					<div className="google-photos-cover">
-						<Loading position='absolute' />
-					</div>
-				</div>
-			)
-		}
-
-		if (!connected) {
-			return (
-				<div className="google-photos-wrap">
-					<div className="google-photos-cover">
-						<Button variant='contained' className='btn btn_tistory' onClick={this.handleRequestAuth}>
-              Google Photos 연결
-            </Button>
-					</div>
-				</div>	
-			)
-		}
+  useEffect(() => {
+    handleRequestFetch()
+    ipcRenderer.on("receive-google-photos-images", handleReceiveImages)
+		ipcRenderer.on("start-fetch-google-photos-images", handleStartFetch)
+		ipcRenderer.on("receive-google-connected", handleReceiveConnected)
 
-		return (
-			<PhotoList images={images} fetching={fetching}
-				onFetch={this.handleRequestFetch}
-				onClick={this.handleImageSelect} />
-		)
-	}
+    return () => {
+      ipcRenderer.removeListener("receive-google-photos-images", handleReceiveImages)
+      ipcRenderer.removeListener("start-fetch-google-photos-images", handleStartFetch)
+      ipcRenderer.removeListener("receive-google-connected", handleReceiveConnected)
+    }
+  }, [])
+
+
+  if (!initialized) {
+    return (
+      <div className="google-photos-wrap">
+        <div className="google-photos-cover">
+          <Loading position='absolute' />
+        </div>
+      </div>
+    )
+  }
+
+  if (!connected) {
+    return (
+      <div className="google-photos-wrap">
+        <div className="google-photos-cover">
+          <Button variant='contained' className='btn btn_tistory' onClick={handleRequestAuth}>
+            Google Photos 연결
+          </Button>
+        </div>
+      </div>	
+    )
+  }
+
+  return (
+    <PhotoList images={images} fetching={fetching}
+      onFetch={handleRequestFetch}
+      onClick={handleImageSelect} />
+  )
 }
-
-export default GooglePhotos

Original file line number	Diff line number	Diff line change
`@@ -198,7 +198,7 @@ export default function Editor({mode, onFinish}) {`
`198`	`198`
`199`	`199`	`ipcRenderer.send("disable-exist-prompt")`
`200`	`200`	`}`
`201`		`- })`
	`201`	`+ }, [])`
`202`	`202`
`203`	`203`	`return (`
`204`	`204`	`<Box className={classes.root}>`