Electron 시작하기 (2) - OAuth

Electron 시작하기 두번째에서 이야기할 것은 BrowserWindow를 사용한 OAuth 인증, main/renderer 프로세스 서로 간의 통신, 설정값 저장이다. 이 과정을 지나면 앱은 OAuth 인증이 된 상태로 유지될 것이다.

OAuth 2.0

먼저 이 예제는 다음블로그의 API를 사용할 것이기 때문에 OAuth 2.0으로 인증을 해야한다. dna 사이트에서 잘 설명하고 있지만 다시 OAuth 2.0과정을 살펴보자면 다음과 같다.

1. 사용자가 앱에서 인증을 시도한다.
2. 앱은 발급받은 CLIENT ID를 비롯한 필요한 정보와 함께 사용자 인증 URL을 브라우저에서 연다.
3. 사용자가 앱 사용 승인을 한다. 이때 authorization_code이 앱에 전달된다.
4. 앱은 authorization_code로 토큰 URL을 호출하여 access_token을 얻는다.

이 과정을 해야할 일로 바꿔보면 다음과 같을 것이다.

1. 사용자가 인증버튼을 클릭하면 renderer프로세스는 main프로세스에게 인증을 시작하라는 이벤트를 보낸다.
2. main프로세스는 새로운 BrowserWindow에 인증 URL을 로드한다.
3. 생성된 브라우저에서 redirect_url로의 이동이 감지되면 authorization_code를 가져온다.
4. 토큰 URL을 호출해서 access_token을 가져온다.

이 일들을 해내려면 프로세스들간의 통신방법을 알아야 하고 BrowserWindow의 url변경을 감지할 수 있어야 한다. 먼저 프로세스들간의 통신방법을 알아본다.

IPC

Electron에서 main/renderer 프로세스는 IPC와 remote를 통해서 통신할 수 있다. 여기서 IPC에 대해서 알아볼 것이다. IPC 모듈은 ipcMain, ipcRenderer두가지가 있다. 각각 main, renderer 프로세스에서 사용한다.

// renderer에서 main으로 이벤트를 호출한다.
ipcRenderer.send("request-auth")

// main에서 renderer가 보낸 이벤트를 수신한다.
ipcMain.on("request-auth", (e) => handleRequestAuth)

이벤트를 send하면 수신하는 함수는 첫번째 인자로 이벤트, 그 뒤는 send하면서 보낸 인자로 받는다. 그리고 e.sender.send()로 sender에게 이벤트를 send 할 수 있다. 이 부분까지만 이해하면 나머지는 쉽다. 이런 방식으로 모든 데이터를 주고 받으면서 앱을 만들면 된다.

electron-oauth2

IPC를 통해서 사용자의 액션을 수용할 수 있게 되었으니 이제 OAuth 2.0과정을 따라가본다. 따라가보려다 보니 이런 건 누군가 이미 만들어 뒀을 거라는 생각이 든다. 역시 electron-oauth2라는 잘 만들어진 라이브러리가 있다. 이 라이브러리는 clint_id, client_secret, redirect_uri만 알려주면 2,3,4 과정을 모두 해준다.

const electronOAuth2 = require('electron-oauth2')

electronOAuth2(OAuth2_INFO, BrowserWindow_OPTIONS)
    .getAccessToken()
    .then(token => { ... })

이것으로 access_token까지 얻는 과정이 끝났다. 남은 것은 이 access_token을 저장하는 것이다.

electron-json-storage

Electron의 main 프로세스는 nodejs이기 때문에 자유롭게 nodejs로 할 수 있는 모든 방법을 사용해서 값을 저장할 수 있다. 그러나 플랫폼마다 다른 파일 시스템을 고려해서 값을 저장하기 위해서 이번에도 라이브러리를 사용하는 것이 좋겠다. electron-json-storage라는 라이브러리가 적절해보여 사용하기로 했다.

storage.set(NAME, VALUE)
storage.get(NAME, (error, VALUE) => { ... })

---

이제 인증, 이벤트 처리, 간단한 값 저장을 할 수 있게 되었으니 앱을 만들기 위한 가장 중요한 것은 다 할 수 있게 되었다. 다음 글은 Electron이라는 주제에서는 약간 벗어나는 듯 하지만 어쨌든 몹시 중요한 UI를 만드는 것에 대한 글이 될 것 같다. React에 대한 글이란 말이다.