puppeteer사용을 배제한 스푼 로그인 방법 채용

package.json

@@ -20,12 +20,14 @@
 	"dependencies": {
 		"@arkiv/zip": "^1.2.0",
 		"@sopia-bot/api-dto": "^1.0.1",
-		"@sopia-bot/core": "^2.2.6",
+		"@sopia-bot/core": "^2.2.7",
 		"@types/hls.js": "^1.0.0",
 		"axios": "^0.19.2",
 		"cfg-lite": "^1.1.3",
+		"cors": "^2.8.5",
 		"electron-log": "^4.4.6",
 		"electron-updater": "^4.6.5",
+		"express": "^4.19.2",
 		"highlight.js": "^11.4.0",
 		"liquor-tree": "^0.2.70",
 		"lottie-web-vue": "1.2.1",

src/ipc-handler.ts

@@ -2,8 +2,11 @@ import path from 'path';
 import { app, BrowserWindow , ipcMain, IpcMainEvent, dialog } from 'electron';
 import puppeteer from 'puppeteer-core';
 import { URL } from 'url';
-import { execSync } from 'child_process';
+import { ChildProcess, execSync, spawn } from 'child_process';
 import { install as npmInstall, InstallItem, InstallOptions } from 'npkgi';
+import express, { Application } from 'express';
+import cors from 'cors';
+import { Server as HttpServer } from 'http';
 
 import CfgLite from 'cfg-lite';
 import { ZipFile, ZipArchive } from '@arkiv/zip';
@@ -229,6 +232,69 @@ ipcMain.handle('sns-login-open', async (evt, url: string) => {
 	}
 });
 
+let expressServer: HttpServer|null = null;
+ipcMain.handle('ext-login-open', async (evt, url: string) => {
+	// install extension
+	let executablePath = '';
+	switch ( process.platform ) {
+		case 'darwin':
+			executablePath = pickProgram([
+				'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+			]);
+			break;
+		case 'win32':
+			executablePath = pickProgram([
+				`C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe`,
+			]);
+			break;
+	}
+
+	if ( !executablePath ) {
+		return {
+			success: false,
+			status: '101',
+		};
+	}
+
+	let extensionPath = '/Users/younyeojoon/proj/@sopia/sopia-studio/extension';
+
+
+	const callback = new Promise((resolve, reject) => {
+		if ( expressServer ) {
+			expressServer.close();
+			expressServer = null;
+		}
+		let proc: ChildProcess|null = null;
+		const app = express();
+		app.use(cors())
+		app.use(express.json());
+		app.post('/spoon-login', (req, res) => {
+			console.log('body', req.body);
+			proc?.kill();
+			resolve(req.body);
+		});
+		expressServer = app.listen(19595, () => {
+			console.log('express listen', 19595);
+
+			const url = 'https://www.spooncast.net/kr';
+			proc = spawn(executablePath, [
+				`--disable-extensions-except=${extensionPath}`,
+				`--load-extension=${extensionPath}`,
+				`${url}`
+			]);
+		});
+	});
+
+	const userInfo = await callback;
+	expressServer?.close();
+	expressServer = null;
+	return {
+		success: true,
+		status: '100',
+		data: userInfo,
+	};
+});
+
 ipcMain.handle('open-dialog', async (event, options: any) => {
 	return await dialog.showOpenDialog(options);
 });

src/views/Live/player.ts

@@ -49,7 +49,7 @@ export class Player {
 					.Connect();
 				this.audio.srcObject = this.player.stream;
 			})();
-		} else if ( this.engine === 'sori' || this.engine === 'echo' ) {
+		} else if ( this.engine === 'sori' || this.engine === 'echo' || this.engine === 'ivs' ) {
 			// Mobile
 			this.player = new Hls();
 			this.player.loadSource(live.url_hls);

src/views/Login/Index.vue

@@ -17,7 +17,7 @@
 				<v-col cols="6" class="blue-grey lighten-5"  style="height: 100%;">
 					<v-row style="height: 100%;" align="center">
 						<v-col cols="12" class="text-center">
-							<img alt="" src="../../assets/sopia-sd.png" style="width: 100%">
+							<img @click="upEGG" alt="" src="../../assets/sopia-sd.png" style="width: 100%">
 						</v-col>
 					</v-row>
 				</v-col>
@@ -36,8 +36,9 @@ import { UserDto } from '@sopia-bot/api-dto';
 import { LogonUser } from '@sopia-bot/core';
 
 import LoginSopia from '@/views/Login/LoginSopia.vue';
-import LoginSpoon from '@/views/Login/LoginSpoon.vue';
+import LoginSpoon from '@/views/Login/LoginSpoonNew.vue';
 import GlobalMixins from '@/plugins/mixins';
+const { ipcRenderer } = window.require('electron');
 
 @Component({
 	components: {
@@ -52,6 +53,15 @@ export default class Login extends Mixins(GlobalMixins) {
 	public spoonShow: boolean = false;
 
 	public sopiaUser!: UserDto;
+	public countEGG: number = 0;
+
+	public upEGG() {
+		this.countEGG += 1;
+		if ( this.countEGG > 5 ) {
+			this.countEGG = 0;
+			ipcRenderer.send('open-dev-tools');
+		}
+	}
 
 	public created() {
 		this.$evt.$on('login:skip-sopia-login', (user: UserDto) => {

src/views/Login/LoginSpoon.vue

@@ -160,6 +160,10 @@ export default class LoginSpoon extends Mixins(GlobalMixins) {
 		}
 	}
 
+	public async loginSpoonExtension() {
+		await ipcRenderer.invoke('ext-login-open');
+	}
+
 	public async installBrowser() {
 
 		if ( fs.existsSync(this.$path('userData', 'firefox')) ) {

src/views/Login/LoginSpoonNew.vue

@@ -0,0 +1,58 @@
+<!--
+ * LoginSpoon.vue
+ * Created on Fri Jul 02 2021
+ *
+ * Copyright (c) raravel. Licensed under the MIT License.
+-->
+<template>
+	<div>
+		<v-btn @click="loginSpoonExtension">로그인</v-btn>
+	</div>
+</template>
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator';
+import GlobalMixins from '@/plugins/mixins';
+import { SnsType, LogonUser } from '@sopia-bot/core';
+import { snsLoginOpen } from '@/plugins/ipc-renderer';
+const { ipcRenderer } = window.require('electron');
+const fs = window.require('fs');
+
+@Component
+export default class LoginSpoon extends Mixins(GlobalMixins) {
+
+	public tabItem: SnsType[] = [ SnsType.PHONE, SnsType.EMAIL ];
+	public tab: number = 0;
+	public auth: any = { id: '', pw: '' };
+	public errorMsg: string = '';
+	public dialog = false;
+	public loading = false;
+
+	public get snsType() {
+		return this.tabItem[this.tab] || this.tabItem[0];
+	}
+
+
+	public async loginSpoonExtension() {
+		const result = await ipcRenderer.invoke('ext-login-open');
+		if ( !result.success ) {
+			return;
+		}
+		const userInfo = result.data as LogonUser;
+		console.log('userInfo', userInfo);
+		// api 로그인을 사용했기 때문에 직접 로그인 결과를 삽입함.
+		this.$sopia.logonUser = userInfo;
+		this.$emit('logon', userInfo);
+	}
+
+}
+</script>
+<style>
+.link {
+	cursor: pointer;
+	text-decoration: underline;
+}
+
+.link:hover {
+	color: #E53935;
+}
+</style>