## TL;DR
`{APP_SCHEME}:///`で開きます。

- Slack `slack:///`
- Asana `asanadesktop:///`

![Slack App Open](//images.contentful.com/0jyj5pjwic68/2jWKbpU1tBhqnfMABhJ2Yt/5fe45f9ecc41db8ef18be4b2631ce86d/____________________________2021-08-05_11.26.47.png)
※デスクトップアプリがないと開きません。

ちなみにChromeアプリは、`chrome://apps`で管理できます。

[アプリのインストールと管理-Chromeウェブストアのヘルプ](https://support.google.com/chrome_webstore/answer/1053346?hl=en#zippy=%2Ccreate-shortcuts-for-apps-installed-from-the-chrome-web-store%2Cuninstall-an-app)

## 環境
- Electron
- Vue.js

## 調査内容
SlackやNotionなどのデスクトップアプリは、ログインする際に、ブラウザに移動しログインさせた後にデスクトップアプリに戻ります。

これらの動きについて調査します。

上記を調査するにあたって3つにスコープを分けました。

- 1.Electronからブラウザ遷移させる
- 2.ブラウザからデスクトップアプリ(Electron)を開く指示を出す
- 3.ELectronを開いた時に値を受け取れるかを調べる

それぞれ解決策が見えたので共有します。

## デスクトップアプリのログインフロー

基本的な処理の流れは、以下のようになります。

- 1.ログイン画面を表示(デスクトップアプリ)
- 2.デスクトップアプリからブラウザに移動(デスクトップアプリ)
- 3.ブラウザで認証する(ブラウザ)
- 4.ブラウザからデスクトップアプリを開く(ブラウザ)

## Electronからブラウザ遷移させる

[How do I open a url from <a> on default OS browser?](https://github.com/electron/electron/issues/1344)

下記を任意のAPIで呼び出します。

```js
const shell = require('electron').shell
shell.openExternal('http:localhost:4000/login') // ログインページ
```

この際に、queryを入れることによって、デスクトップアプリからのログインかを判別します。

```js
const shell = require('electron').shell
shell.openExternal('http://localhost:8080/login?desktop_login') // desktop_loginで判別する
```

## ブラウザからデスクトップアプリ(Electron)を開く指示を出す

```js
window.location.href = 'slack:///'
```

認証時のアクセストークンなどを扱う場合は、
`asanadesktop:///desktop_start_session?external_auth_token=xxxx&email=xxxx@xxxx.xxx` のようなリンクになるかと思います。これはAsanaの例です。
(試していないので注視してください！)

## デスクトップアプリのSchemeを定義する

[nklayman/vue-cli-plugin-electron-builder: Easily Build Your Vue.js App For Desktop With Electron](https://github.com/nklayman/vue-cli-plugin-electron-builder)を使用しています。

通常のelectron-builderであれば、[Common Configuration - electron-builder](https://www.electron.build/configuration/configuration.html)を参照してください。

```vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        protocols: {
          name: 'App',
          schemes: [
            'appdesktop' // ここがschemeになる
          ]
        },
        // ついでにアイコン設定
        mac: {
          icon: 'src/assets/app.icns'
        },
        win: {
          icon: 'src/assets/app.ico'
        }
      }
    }
  },
}
```

`nom run electron:build`を実行すると、`dist_electron/builder-effective-config.yaml`が生成されるので、こちらで正しく設定されるか確認してください。

正しく設定できている場合、`dmg`を解凍して、Chromeで`appdesktop:///`を叩くと、起動できるはずです。

## electron:serveの場合のScheme定義

```json
"electron:serve": "vue-cli-service electron:serve --mode development",
```

`electron:serve`の場合は、`vue.config.js`で設定したProtocol Schemeがうまく働かないので、下記のように設定してみてください。

```js
app.setAsDefaultProtocolClient('appdesktop')
```

## ELectronを開いた時に値を受け取れるかを調べる

下記でScheme起動したURLを受け取ることができます。ここでTokenなどを受け取りましょう。
遷移などは、`ipcRenderer.on()`を使用し発火させます。

```js
 app.on('open-url', async (event, url) => {
  console.log('event:', event)
  console.log('url:', url)

  // Focus
  if (win) {
    if (win.isMinimized()) win.restore()
    win.focus()
  }
}) 
```

- [Launching Electron Apps From the Browser | Ship Shape](https://shipshape.io/blog/launch-electron-app-from-browser-custom-protocol/)
- [Electron を Custom URL Scheme で起動する - Qiita](https://qiita.com/umamichi/items/e47e17fca0bc8fe2bcdd)