Merge pull request #300 from thecodingmachine/authorisationMap

rewrote the authorisation flow
This commit is contained in:
Kharhamel 2020-10-13 16:54:19 +02:00 committed by GitHub
commit 0580c692d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 695 additions and 509 deletions

View File

@ -1,8 +1,7 @@
import {URL_ROOM_STARTED} from "../Enum/EnvironmentVariable"; //TODO fix import by "_Enum/..."
import { v4 } from 'uuid'; import { v4 } from 'uuid';
import {HttpRequest, HttpResponse, TemplatedApp} from "uWebSockets.js"; import {HttpRequest, HttpResponse, TemplatedApp} from "uWebSockets.js";
import {BaseController} from "./BaseController"; import {BaseController} from "./BaseController";
import {adminApi, AdminApiData} from "../Services/AdminApi"; import {adminApi} from "../Services/AdminApi";
import {jwtTokenManager} from "../Services/JWTTokenManager"; import {jwtTokenManager} from "../Services/JWTTokenManager";
export interface TokenInterface { export interface TokenInterface {
@ -13,18 +12,19 @@ export class AuthenticateController extends BaseController {
constructor(private App : TemplatedApp) { constructor(private App : TemplatedApp) {
super(); super();
this.login(); this.register();
this.anonymLogin();
} }
//permit to login on application. Return token to connect on Websocket IO. //Try to login with an admin token
login(){ register(){
this.App.options("/login", (res: HttpResponse, req: HttpRequest) => { this.App.options("/register", (res: HttpResponse, req: HttpRequest) => {
this.addCorsHeaders(res); this.addCorsHeaders(res);
res.end(); res.end();
}); });
this.App.post("/login", (res: HttpResponse, req: HttpRequest) => { this.App.post("/register", (res: HttpResponse, req: HttpRequest) => {
(async () => { (async () => {
this.addCorsHeaders(res); this.addCorsHeaders(res);
@ -36,35 +36,25 @@ export class AuthenticateController extends BaseController {
//todo: what to do if the organizationMemberToken is already used? //todo: what to do if the organizationMemberToken is already used?
const organizationMemberToken:string|null = param.organizationMemberToken; const organizationMemberToken:string|null = param.organizationMemberToken;
const mapSlug:string|null = param.mapSlug;
try { try {
let userUuid; if (typeof organizationMemberToken != 'string') throw new Error('No organization token');
let mapUrlStart; const data = await adminApi.fetchMemberDataByToken(organizationMemberToken);
let newUrl: string|null = null;
if (organizationMemberToken) { const userUuid = data.userUuid;
const data = await adminApi.fetchMemberDataByToken(organizationMemberToken); const organizationSlug = data.organizationSlug;
const worldSlug = data.worldSlug;
userUuid = data.userUuid; const roomSlug = data.roomSlug;
mapUrlStart = data.mapUrlStart; const mapUrlStart = data.mapUrlStart;
newUrl = this.getNewUrlOnAdminAuth(data)
} else if (mapSlug !== null) {
userUuid = v4();
mapUrlStart = mapSlug;
newUrl = null;
} else {
userUuid = v4();
mapUrlStart = host.replace('api.', 'maps.') + URL_ROOM_STARTED;
newUrl = '_/global/'+mapUrlStart;
}
const authToken = jwtTokenManager.createJWTToken(userUuid); const authToken = jwtTokenManager.createJWTToken(userUuid);
res.writeStatus("200 OK").end(JSON.stringify({ res.writeStatus("200 OK").end(JSON.stringify({
authToken, authToken,
userUuid, userUuid,
organizationSlug,
worldSlug,
roomSlug,
mapUrlStart, mapUrlStart,
newUrl,
})); }));
} catch (e) { } catch (e) {
@ -75,12 +65,30 @@ export class AuthenticateController extends BaseController {
})(); })();
}); });
} }
private getNewUrlOnAdminAuth(data:AdminApiData): string { //permit to login on application. Return token to connect on Websocket IO.
const organizationSlug = data.organizationSlug; anonymLogin(){
const worldSlug = data.worldSlug; this.App.options("/anonymLogin", (res: HttpResponse, req: HttpRequest) => {
const roomSlug = data.roomSlug; this.addCorsHeaders(res);
return '/@/'+organizationSlug+'/'+worldSlug+'/'+roomSlug;
res.end();
});
this.App.post("/anonymLogin", (res: HttpResponse, req: HttpRequest) => {
this.addCorsHeaders(res);
res.onAborted(() => {
console.warn('Login request was aborted');
})
const userUuid = v4();
const authToken = jwtTokenManager.createJWTToken(userUuid);
res.writeStatus("200 OK").end(JSON.stringify({
authToken,
userUuid,
}));
});
} }
} }

View File

@ -42,6 +42,7 @@ import {cpuTracker} from "../Services/CpuTracker";
import {ViewportInterface} from "../Model/Websocket/ViewportMessage"; import {ViewportInterface} from "../Model/Websocket/ViewportMessage";
import {jwtTokenManager} from "../Services/JWTTokenManager"; import {jwtTokenManager} from "../Services/JWTTokenManager";
import {adminApi} from "../Services/AdminApi"; import {adminApi} from "../Services/AdminApi";
import {RoomIdentifier} from "../Model/RoomIdentifier";
function emitInBatch(socket: ExSocketInterface, payload: SubMessage): void { function emitInBatch(socket: ExSocketInterface, payload: SubMessage): void {
socket.batchedMessages.addPayload(payload); socket.batchedMessages.addPayload(payload);
@ -88,7 +89,7 @@ export class IoSocketController {
ioConnection() { ioConnection() {
this.app.ws('/room/*', { this.app.ws('/room', {
/* Options */ /* Options */
//compression: uWS.SHARED_COMPRESSOR, //compression: uWS.SHARED_COMPRESSOR,
maxPayloadLength: 16 * 1024 * 1024, maxPayloadLength: 16 * 1024 * 1024,
@ -112,7 +113,12 @@ export class IoSocketController {
const websocketProtocol = req.getHeader('sec-websocket-protocol'); const websocketProtocol = req.getHeader('sec-websocket-protocol');
const websocketExtensions = req.getHeader('sec-websocket-extensions'); const websocketExtensions = req.getHeader('sec-websocket-extensions');
const roomId = req.getUrl().substr(6); const roomId = query.roomId;
//todo: better validation: /\/_\/.*\/.*/ or /\/@\/.*\/.*\/.*/
if (typeof roomId !== 'string') {
throw new Error('Undefined room ID: ');
}
const roomIdentifier = new RoomIdentifier(roomId);
const token = query.token; const token = query.token;
const x = Number(query.x); const x = Number(query.x);
@ -140,12 +146,14 @@ export class IoSocketController {
const userUuid = await jwtTokenManager.getUserUuidFromToken(token); const userUuid = await jwtTokenManager.getUserUuidFromToken(token);
console.log('uuid', userUuid); console.log('uuid', userUuid);
const isGranted = await adminApi.memberIsGrantedAccessToRoom(userUuid, roomId); if (roomIdentifier.anonymous === false) {
if (!isGranted) { const isGranted = await adminApi.memberIsGrantedAccessToRoom(userUuid, roomIdentifier);
console.log('access not granted for user '+userUuid+' and room '+roomId); if (!isGranted) {
throw new Error('Client cannot acces this ressource.') console.log('access not granted for user '+userUuid+' and room '+roomId);
} else { throw new Error('Client cannot acces this ressource.')
console.log('access granted for user '+userUuid+' and room '+roomId); } else {
console.log('access granted for user '+userUuid+' and room '+roomId);
}
} }
if (upgradeAborted.aborted) { if (upgradeAborted.aborted) {

View File

@ -2,6 +2,8 @@ import {OK} from "http-status-codes";
import {URL_ROOM_STARTED} from "../Enum/EnvironmentVariable"; import {URL_ROOM_STARTED} from "../Enum/EnvironmentVariable";
import {HttpRequest, HttpResponse, TemplatedApp} from "uWebSockets.js"; import {HttpRequest, HttpResponse, TemplatedApp} from "uWebSockets.js";
import {BaseController} from "./BaseController"; import {BaseController} from "./BaseController";
import {parse} from "query-string";
import {adminApi} from "../Services/AdminApi";
//todo: delete this //todo: delete this
export class MapController extends BaseController{ export class MapController extends BaseController{
@ -9,26 +11,51 @@ export class MapController extends BaseController{
constructor(private App : TemplatedApp) { constructor(private App : TemplatedApp) {
super(); super();
this.App = App; this.App = App;
this.getStartMap(); this.getMapUrl();
} }
// Returns a map mapping map name to file name of the map // Returns a map mapping map name to file name of the map
getStartMap() { getMapUrl() {
this.App.options("/start-map", (res: HttpResponse, req: HttpRequest) => { this.App.options("/map", (res: HttpResponse, req: HttpRequest) => {
this.addCorsHeaders(res); this.addCorsHeaders(res);
res.end(); res.end();
}); });
this.App.get("/start-map", (res: HttpResponse, req: HttpRequest) => { this.App.get("/map", (res: HttpResponse, req: HttpRequest) => {
this.addCorsHeaders(res); this.addCorsHeaders(res);
const url = req.getHeader('host').replace('api.', 'maps.') + URL_ROOM_STARTED; res.onAborted(() => {
res.writeStatus("200 OK").end(JSON.stringify({ console.warn('/map request was aborted');
mapUrlStart: url, })
startInstance: "global"
})); const query = parse(req.getQuery());
if (typeof query.organizationSlug !== 'string') {
console.error('Expected organizationSlug parameter');
res.writeStatus("400 Bad request").end("Expected organizationSlug parameter");
}
if (typeof query.worldSlug !== 'string') {
console.error('Expected worldSlug parameter');
res.writeStatus("400 Bad request").end("Expected worldSlug parameter");
}
if (typeof query.roomSlug !== 'string' && query.roomSlug !== undefined) {
console.error('Expected only one roomSlug parameter');
res.writeStatus("400 Bad request").end("Expected only one roomSlug parameter");
}
(async () => {
try {
const mapDetails = await adminApi.fetchMapDetails(query.organizationSlug as string, query.worldSlug as string, query.roomSlug as string|undefined);
res.writeStatus("200 OK").end(JSON.stringify(mapDetails));
} catch (e) {
console.error(e);
res.writeStatus("500 Internal Server Error").end("An error occurred");
}
})();
}); });
} }
} }

View File

@ -0,0 +1,14 @@
export class RoomIdentifier {
public anonymous: boolean;
public id:string
constructor(roomID: string) {
if (roomID.startsWith('_/')) {
this.anonymous = true;
} else if(roomID.startsWith('@/')) {
this.anonymous = false;
} else {
throw new Error('Incorrect room ID: '+roomID);
}
this.id = roomID; //todo: extract more data from the id (like room slug, organization name, etc);
}
}

View File

@ -1,5 +1,6 @@
import {ADMIN_API_TOKEN, ADMIN_API_URL} from "../Enum/EnvironmentVariable"; import {ADMIN_API_TOKEN, ADMIN_API_URL} from "../Enum/EnvironmentVariable";
import Axios, {AxiosError} from "axios"; import Axios from "axios";
import {RoomIdentifier} from "../Model/RoomIdentifier";
export interface AdminApiData { export interface AdminApiData {
organizationSlug: string organizationSlug: string
@ -10,7 +11,30 @@ export interface AdminApiData {
} }
class AdminApi { class AdminApi {
async fetchMapDetails(organizationSlug: string, worldSlug: string, roomSlug: string|undefined): Promise<AdminApiData> {
if (!ADMIN_API_URL) {
return Promise.reject('No admin backoffice set!');
}
const params: { organizationSlug: string, worldSlug: string, roomSlug?: string } = {
organizationSlug,
worldSlug
};
if (roomSlug) {
params.roomSlug = roomSlug;
}
const res = await Axios.get(ADMIN_API_URL+'/api/map',
{
headers: {"Authorization" : `${ADMIN_API_TOKEN}`},
params
}
)
return res.data;
}
async fetchMemberDataByToken(organizationMemberToken: string): Promise<AdminApiData> { async fetchMemberDataByToken(organizationMemberToken: string): Promise<AdminApiData> {
if (!ADMIN_API_URL) { if (!ADMIN_API_URL) {
return Promise.reject('No admin backoffice set!'); return Promise.reject('No admin backoffice set!');
@ -22,13 +46,14 @@ class AdminApi {
return res.data; return res.data;
} }
async memberIsGrantedAccessToRoom(memberId: string, roomId: string): Promise<boolean> { async memberIsGrantedAccessToRoom(memberId: string, roomIdentifier: RoomIdentifier): Promise<boolean> {
if (!ADMIN_API_URL) { if (!ADMIN_API_URL) {
return Promise.reject('No admin backoffice set!'); return Promise.reject('No admin backoffice set!');
} }
try { try {
//todo: send more specialized data instead of the whole id
const res = await Axios.get(ADMIN_API_URL+'/api/member/is-granted-access', const res = await Axios.get(ADMIN_API_URL+'/api/member/is-granted-access',
{ headers: {"Authorization" : `${ADMIN_API_TOKEN}`}, params: {memberId, roomIdentifier: roomId} } { headers: {"Authorization" : `${ADMIN_API_TOKEN}`}, params: {memberId, roomIdentifier: roomIdentifier.id} }
) )
return !!res.data; return !!res.data;
} catch (e) { } catch (e) {
@ -38,4 +63,4 @@ class AdminApi {
} }
} }
export const adminApi = new AdminApi(); export const adminApi = new AdminApi();

View File

@ -6,12 +6,6 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script>
<script> <script>

View File

@ -6,6 +6,7 @@
"devDependencies": { "devDependencies": {
"@types/google-protobuf": "^3.7.3", "@types/google-protobuf": "^3.7.3",
"@types/jasmine": "^3.5.10", "@types/jasmine": "^3.5.10",
"@types/quill": "^1.3.7",
"@typescript-eslint/eslint-plugin": "^2.26.0", "@typescript-eslint/eslint-plugin": "^2.26.0",
"@typescript-eslint/parser": "^2.26.0", "@typescript-eslint/parser": "^2.26.0",
"eslint": "^6.8.0", "eslint": "^6.8.0",
@ -20,9 +21,9 @@
"webpack-merge": "^4.2.2" "webpack-merge": "^4.2.2"
}, },
"dependencies": { "dependencies": {
"@types/axios": "^0.14.0",
"@types/simple-peer": "^9.6.0", "@types/simple-peer": "^9.6.0",
"@types/socket.io-client": "^1.4.32", "@types/socket.io-client": "^1.4.32",
"axios": "^0.20.0",
"generic-type-guard": "^3.2.0", "generic-type-guard": "^3.2.0",
"google-protobuf": "^3.13.0", "google-protobuf": "^3.13.0",
"phaser": "^3.22.0", "phaser": "^3.22.0",

View File

@ -1,7 +1,3 @@
import {GameScene} from "../Phaser/Game/GameScene";
const Quill = require("quill");
import {HtmlUtils} from "../WebRtc/HtmlUtils"; import {HtmlUtils} from "../WebRtc/HtmlUtils";
import {UserInputManager} from "../Phaser/UserInput/UserInputManager"; import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
import {RoomConnection} from "../Connexion/RoomConnection"; import {RoomConnection} from "../Connexion/RoomConnection";
@ -10,7 +6,6 @@ import {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels";
export const CLASS_CONSOLE_MESSAGE = 'main-console'; export const CLASS_CONSOLE_MESSAGE = 'main-console';
export const INPUT_CONSOLE_MESSAGE = 'input-send-text'; export const INPUT_CONSOLE_MESSAGE = 'input-send-text';
export const UPLOAD_CONSOLE_MESSAGE = 'input-upload-music'; export const UPLOAD_CONSOLE_MESSAGE = 'input-upload-music';
export const BUTTON_CONSOLE_SEND = 'button-send';
export const INPUT_TYPE_CONSOLE = 'input-type'; export const INPUT_TYPE_CONSOLE = 'input-type';
export const AUDIO_TYPE = 'audio'; export const AUDIO_TYPE = 'audio';
@ -26,6 +21,7 @@ export class ConsoleGlobalMessageManager {
private buttonMainConsole: HTMLDivElement; private buttonMainConsole: HTMLDivElement;
private activeConsole: boolean = false; private activeConsole: boolean = false;
private userInputManager!: UserInputManager; private userInputManager!: UserInputManager;
private static cssLoaded: boolean = false;
constructor(private Connection: RoomConnection, userInputManager : UserInputManager) { constructor(private Connection: RoomConnection, userInputManager : UserInputManager) {
this.buttonMainConsole = document.createElement('div'); this.buttonMainConsole = document.createElement('div');
@ -123,24 +119,30 @@ export class ConsoleGlobalMessageManager {
section.appendChild(buttonDiv); section.appendChild(buttonDiv);
this.divMainConsole.appendChild(section); this.divMainConsole.appendChild(section);
//TODO refactor (async () => {
setTimeout(() => { // Start loading CSS
const cssPromise = ConsoleGlobalMessageManager.loadCss();
// Import quill
const Quill:any = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
// Wait for CSS to be loaded
await cssPromise;
const toolbarOptions = [ const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons ['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'], ['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values [{'header': 1}, {'header': 2}], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }], [{'list': 'ordered'}, {'list': 'bullet'}],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript [{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent [{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{ 'direction': 'rtl' }], // text direction [{'direction': 'rtl'}], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{'header': [1, 2, 3, 4, 5, 6, false]}],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme [{'color': []}, {'background': []}], // dropdown with defaults from theme
[{ 'font': [] }], [{'font': []}],
[{ 'align': [] }], [{'align': []}],
['clean'], ['clean'],
@ -154,8 +156,28 @@ export class ConsoleGlobalMessageManager {
toolbar: toolbarOptions toolbar: toolbarOptions
}, },
}); });
})();
}
}, 1000); private static loadCss(): Promise<void> {
return new Promise<void>((resolve, reject) => {
if (ConsoleGlobalMessageManager.cssLoaded) {
resolve();
return;
}
const fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", "https://cdn.quilljs.com/1.3.7/quill.snow.css");
document.getElementsByTagName("head")[0].appendChild(fileref);
ConsoleGlobalMessageManager.cssLoaded = true;
fileref.onload = () => {
resolve();
}
fileref.onerror = () => {
reject();
}
});
} }
createUploadAudioPart(){ createUploadAudioPart(){

View File

@ -2,54 +2,73 @@ import Axios from "axios";
import {API_URL} from "../Enum/EnvironmentVariable"; import {API_URL} from "../Enum/EnvironmentVariable";
import {RoomConnection} from "./RoomConnection"; import {RoomConnection} from "./RoomConnection";
import {PositionInterface, ViewportInterface} from "./ConnexionModels"; import {PositionInterface, ViewportInterface} from "./ConnexionModels";
import {GameConnexionTypes, urlManager} from "../Url/UrlManager";
import {localUserStore} from "./LocalUserStore";
import {LocalUser} from "./LocalUser";
import {Room} from "./Room";
interface LoginApiData { const URL_ROOM_STARTED = '/Floor0/floor0.json';
authToken: string
userUuid: string
mapUrlStart: string
newUrl: string
}
class ConnectionManager { class ConnectionManager {
private initPromise!: Promise<LoginApiData>; private localUser!:LocalUser;
private mapUrlStart: string|null = null;
private authToken:string|null = null; /**
private userUuid: string|null = null; * Tries to login to the node server and return the starting map url to be loaded
*/
public async initGameConnexion(): Promise<Room> {
//todo: get map infos from url in anonym case const connexionType = urlManager.getGameConnexionType();
public async init(): Promise<void> { if(connexionType === GameConnexionTypes.register) {
let organizationMemberToken = null; const organizationMemberToken = urlManager.getOrganizationToken();
let teamSlug = null; const data = await Axios.post(`${API_URL}/register`, {organizationMemberToken}).then(res => res.data);
let mapSlug = null; this.localUser = new LocalUser(data.userUuid, data.authToken);
const match = /\/register\/(.+)/.exec(window.location.toString()); localUserStore.saveUser(this.localUser);
if (match) {
organizationMemberToken = match[1]; const organizationSlug = data.organizationSlug;
} else { const worldSlug = data.worldSlug;
const match = /\/_\/(.+)\/(.+)/.exec(window.location.toString()); const roomSlug = data.roomSlug;
teamSlug = match ? match[1] : null; urlManager.editUrlForRoom(roomSlug, organizationSlug, worldSlug);
mapSlug = match ? match[2] : null;
} const room = new Room(window.location.pathname, data.mapUrlStart)
this.initPromise = Axios.post(`${API_URL}/login`, {organizationMemberToken, teamSlug, mapSlug}).then(res => res.data); return Promise.resolve(room);
const data = await this.initPromise } else if (connexionType === GameConnexionTypes.anonymous) {
this.authToken = data.authToken; const localUser = localUserStore.getLocalUser();
this.userUuid = data.userUuid;
this.mapUrlStart = data.mapUrlStart; if (localUser) {
const newUrl = data.newUrl; this.localUser = localUser
console.log('u', this.userUuid) } else {
const data = await Axios.post(`${API_URL}/anonymLogin`).then(res => res.data);
if (newUrl) { this.localUser = new LocalUser(data.userUuid, data.authToken);
history.pushState({}, '', newUrl); localUserStore.saveUser(this.localUser);
}
const room = new Room(window.location.pathname, urlManager.getAnonymousMapUrlStart())
return Promise.resolve(room);
} else if (connexionType == GameConnexionTypes.organization) {
const localUser = localUserStore.getLocalUser();
if (localUser) {
this.localUser = localUser
//todo: ask the node api for the correct starting map Url from its slug
return Promise.reject('Case not handled: need to get the map\'s url from its slug');
} else {
//todo: find some kind of fallback?
return Promise.reject('Could not find a user in localstorage');
}
} }
//todo: cleaner way to handle the default case
const defaultMapUrl = window.location.host.replace('api.', 'maps.') + URL_ROOM_STARTED;
const defaultRoomId = urlManager.editUrlForRoom(URL_ROOM_STARTED, null, null);
return Promise.resolve(new Room(defaultRoomId, defaultMapUrl));
} }
public initBenchmark(): void { public initBenchmark(): void {
this.authToken = 'test'; this.localUser = new LocalUser('', 'test');
} }
public connectToRoomSocket(roomId: string, name: string, characterLayers: string[], position: PositionInterface, viewport: ViewportInterface): Promise<RoomConnection> { public connectToRoomSocket(roomId: string, name: string, characterLayers: string[], position: PositionInterface, viewport: ViewportInterface): Promise<RoomConnection> {
return new Promise<RoomConnection>((resolve, reject) => { return new Promise<RoomConnection>((resolve, reject) => {
const connection = new RoomConnection(this.authToken, roomId, name, characterLayers, position, viewport); const connection = new RoomConnection(this.localUser.jwtToken, roomId, name, characterLayers, position, viewport);
connection.onConnectError((error: object) => { connection.onConnectError((error: object) => {
console.log('An error occurred while connecting to socket server. Retrying'); console.log('An error occurred while connecting to socket server. Retrying');
reject(error); reject(error);
@ -67,15 +86,6 @@ class ConnectionManager {
}); });
}); });
} }
public getMapUrlStart(): Promise<string> {
return this.initPromise.then(() => {
if (!this.mapUrlStart) {
throw new Error('No map url set!');
}
return this.mapUrlStart;
})
}
} }
export const connectionManager = new ConnectionManager(); export const connectionManager = new ConnectionManager();

View File

@ -0,0 +1,9 @@
export class LocalUser {
public uuid: string;
public jwtToken: string;
constructor(uuid:string, jwtToken: string) {
this.uuid = uuid;
this.jwtToken = jwtToken;
}
}

View File

@ -0,0 +1,16 @@
import {LocalUser} from "./LocalUser";
class LocalUserStore {
saveUser(localUser: LocalUser) {
localStorage.setItem('localUser', JSON.stringify(localUser));
}
getLocalUser(): LocalUser|null {
const data = localStorage.getItem('localUser');
return data ? JSON.parse(data) : null;
}
}
export const localUserStore = new LocalUserStore();

View File

@ -0,0 +1,10 @@
export class Room {
public ID: string;
public url: string
constructor(ID: string, url: string) {
this.ID = ID;
this.url = url;
}
}

View File

@ -56,7 +56,8 @@ export class RoomConnection implements RoomConnection {
*/ */
public constructor(token: string|null, roomId: string, name: string, characterLayers: string[], position: PositionInterface, viewport: ViewportInterface) { public constructor(token: string|null, roomId: string, name: string, characterLayers: string[], position: PositionInterface, viewport: ViewportInterface) {
let url = API_URL.replace('http://', 'ws://').replace('https://', 'wss://'); let url = API_URL.replace('http://', 'ws://').replace('https://', 'wss://');
url += '/room/'+roomId url += '/room';
url += '?roomId='+(roomId ?encodeURIComponent(roomId):'');
url += '?token='+(token ?encodeURIComponent(token):''); url += '?token='+(token ?encodeURIComponent(token):'');
url += '&name='+encodeURIComponent(name); url += '&name='+encodeURIComponent(name);
for (const layer of characterLayers) { for (const layer of characterLayers) {

View File

@ -1,10 +1,7 @@
import {GameScene, GameSceneInitInterface} from "./GameScene"; import {GameScene} from "./GameScene";
import {
StartMapInterface
} from "../../Connexion/ConnexionModels";
import Axios from "axios";
import {API_URL} from "../../Enum/EnvironmentVariable";
import {connectionManager} from "../../Connexion/ConnectionManager"; import {connectionManager} from "../../Connexion/ConnectionManager";
import {Room} from "../../Connexion/Room";
import {FourOFourSceneName} from "../Reconnecting/FourOFourScene";
export interface HasMovedEvent { export interface HasMovedEvent {
direction: string; direction: string;
@ -13,14 +10,15 @@ export interface HasMovedEvent {
y: number; y: number;
} }
export interface loadMapResponseInterface {
key: string,
startLayerName: string;
}
export class GameManager { export class GameManager {
private playerName!: string; private playerName!: string;
private characterLayers!: string[]; private characterLayers!: string[];
private startRoom!:Room;
public async init(scenePlugin: Phaser.Scenes.ScenePlugin) {
this.startRoom = await connectionManager.initGameConnexion();
this.loadMap(this.startRoom.url, this.startRoom.ID, scenePlugin);
}
public setPlayerName(name: string): void { public setPlayerName(name: string): void {
this.playerName = name; this.playerName = name;
@ -42,54 +40,15 @@ export class GameManager {
return this.characterLayers; return this.characterLayers;
} }
/**
* Returns the map URL and the instance from the current URL
*/
private findMapUrl(): [string, string]|null {
const path = window.location.pathname;
if (!path.startsWith('/_/')) {
return null;
}
const instanceAndMap = path.substr(3);
const firstSlash = instanceAndMap.indexOf('/');
if (firstSlash === -1) {
return null;
}
const instance = instanceAndMap.substr(0, firstSlash);
return [window.location.protocol+'//'+instanceAndMap.substr(firstSlash+1), instance];
}
public loadStartingMap(scene: Phaser.Scenes.ScenePlugin): Promise<loadMapResponseInterface> {
// Do we have a start URL in the address bar? If so, let's redirect to this address
const instanceAndMapUrl = this.findMapUrl();
if (instanceAndMapUrl !== null) {
const [mapUrl, instance] = instanceAndMapUrl;
const key = gameManager.loadMap(mapUrl, scene, instance);
const startLayerName = window.location.hash ? window.location.hash.substr(1) : '';
return Promise.resolve({key, startLayerName});
} else {
// If we do not have a map address in the URL, let's ask the server for a start map.
return connectionManager.getMapUrlStart().then((mapUrlStart: string) => {
const key = gameManager.loadMap(window.location.protocol + "//" + mapUrlStart, scene, 'global');
return {key, startLayerName: ''}
}).catch((err) => {
console.error(err);
throw err;
});
}
}
public loadMap(mapUrl: string, scene: Phaser.Scenes.ScenePlugin, instance: string): string { public loadMap(mapUrl: string, roomID: string, scenePlugin: Phaser.Scenes.ScenePlugin): void {
const sceneKey = this.getMapKeyByUrl(mapUrl); console.log('Loading map '+roomID+' at url '+mapUrl);
const gameIndex = scenePlugin.getIndex(mapUrl);
const gameIndex = scene.getIndex(sceneKey);
if(gameIndex === -1){ if(gameIndex === -1){
const game : Phaser.Scene = GameScene.createFromUrl(mapUrl, instance); const game : Phaser.Scene = GameScene.createFromUrl(mapUrl, roomID);
scene.add(sceneKey, game, false); console.log('Adding scene '+mapUrl);
scenePlugin.add(mapUrl, game, false);
} }
return sceneKey;
} }
public getMapKeyByUrl(mapUrlStart: string) : string { public getMapKeyByUrl(mapUrlStart: string) : string {
@ -98,6 +57,11 @@ export class GameManager {
const endPos = mapUrlStart.indexOf(".json"); const endPos = mapUrlStart.indexOf(".json");
return mapUrlStart.substring(startPos, endPos); return mapUrlStart.substring(startPos, endPos);
} }
public goToStartingMap(scenePlugin: Phaser.Scenes.ScenePlugin) {
console.log('Starting scene '+this.startRoom.url);
scenePlugin.start(this.startRoom.url, {startLayerName: 'global'});
}
} }
export const gameManager = new GameManager(); export const gameManager = new GameManager();

View File

@ -139,11 +139,11 @@ export class GameScene extends ResizableScene implements CenterListener {
private userInputManager!: UserInputManager; private userInputManager!: UserInputManager;
static createFromUrl(mapUrlFile: string, instance: string, gameSceneKey: string|null = null): GameScene { static createFromUrl(mapUrlFile: string, instance: string, gameSceneKey: string|null = null): GameScene {
const mapKey = gameManager.getMapKeyByUrl(mapUrlFile); // We use the map URL as a key
if (gameSceneKey === null) { if (gameSceneKey === null) {
gameSceneKey = mapKey; gameSceneKey = mapUrlFile;
} }
return new GameScene(mapKey, mapUrlFile, instance, gameSceneKey); return new GameScene(mapUrlFile, mapUrlFile, instance, gameSceneKey);
} }
constructor(MapKey : string, MapUrlFile: string, instance: string, gameSceneKey: string) { constructor(MapKey : string, MapUrlFile: string, instance: string, gameSceneKey: string) {
@ -419,14 +419,6 @@ export class GameScene extends ResizableScene implements CenterListener {
context.stroke(); context.stroke();
this.circleTexture.refresh(); this.circleTexture.refresh();
// Let's alter browser history
const url = new URL(this.MapUrlFile);
let path = '/_/'+this.instance+'/'+url.host+url.pathname;
if (this.startLayerName) {
path += '#'+this.startLayerName;
}
window.history.pushState({}, 'WorkAdventure', path);
// Let's pause the scene if the connection is not established yet // Let's pause the scene if the connection is not established yet
if (this.connection === undefined) { if (this.connection === undefined) {
// Let's wait 0.5 seconds before printing the "connecting" screen to avoid blinking // Let's wait 0.5 seconds before printing the "connecting" screen to avoid blinking
@ -686,6 +678,7 @@ export class GameScene extends ResizableScene implements CenterListener {
* @param tileWidth * @param tileWidth
* @param tileHeight * @param tileHeight
*/ */
//todo: push that into the gameManager
private loadNextGame(layer: ITiledMapLayer, mapWidth: number, tileWidth: number, tileHeight: number){ private loadNextGame(layer: ITiledMapLayer, mapWidth: number, tileWidth: number, tileHeight: number){
const exitSceneUrl = this.getExitSceneUrl(layer); const exitSceneUrl = this.getExitSceneUrl(layer);
if (exitSceneUrl === undefined) { if (exitSceneUrl === undefined) {
@ -698,7 +691,8 @@ export class GameScene extends ResizableScene implements CenterListener {
// TODO: eventually compute a relative URL // TODO: eventually compute a relative URL
const absoluteExitSceneUrl = new URL(exitSceneUrl, this.MapUrlFile).href; const absoluteExitSceneUrl = new URL(exitSceneUrl, this.MapUrlFile).href;
const exitSceneKey = gameManager.loadMap(absoluteExitSceneUrl, this.scene, instance); gameManager.loadMap(absoluteExitSceneUrl, instance, this.scene);
const exitSceneKey = instance;
const tiles : number[] = layer.data as number[]; const tiles : number[] = layer.data as number[];
for (let key=0; key < tiles.length; key++) { for (let key=0; key < tiles.length; key++) {
@ -785,14 +779,6 @@ export class GameScene extends ResizableScene implements CenterListener {
}); });
} }
createCollisionObject(){
/*this.Objects.forEach((Object : Phaser.Physics.Arcade.Sprite) => {
this.physics.add.collider(this.CurrentPlayer, Object, (object1, object2) => {
this.CurrentPlayer.say("Collision with object : " + (object2 as Phaser.Physics.Arcade.Sprite).texture.key)
});
})*/
}
createCurrentPlayer(){ createCurrentPlayer(){
//initialise player //initialise player
//TODO create animation moving between exit and start //TODO create animation moving between exit and start
@ -809,7 +795,6 @@ export class GameScene extends ResizableScene implements CenterListener {
//create collision //create collision
this.createCollisionWithPlayer(); this.createCollisionWithPlayer();
this.createCollisionObject();
} }
pushPlayerPosition(event: HasMovedEvent) { pushPlayerPosition(event: HasMovedEvent) {

View File

@ -258,7 +258,7 @@ export class EnableCameraScene extends Phaser.Scene {
this.soundMeterSprite.setVolume(this.soundMeter.getVolume()); this.soundMeterSprite.setVolume(this.soundMeter.getVolume());
} }
private async login(): Promise<void> { private login(): void {
this.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none'; this.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
this.soundMeter.stop(); this.soundMeter.stop();
window.removeEventListener('resize', this.repositionCallback); window.removeEventListener('resize', this.repositionCallback);
@ -266,8 +266,7 @@ export class EnableCameraScene extends Phaser.Scene {
mediaManager.stopCamera(); mediaManager.stopCamera();
mediaManager.stopMicrophone(); mediaManager.stopMicrophone();
const {key, startLayerName} = await gameManager.loadStartingMap(this.scene); gameManager.goToStartingMap(this.scene);
this.scene.start(key, {startLayerName});
} }
private async getDevices() { private async getDevices() {

View File

@ -0,0 +1,40 @@
import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField";
import {TextInput} from "../Components/TextInput";
import {ClickButton} from "../Components/ClickButton";
import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle;
import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
import {cypressAsserter} from "../../Cypress/CypressAsserter";
import {SelectCharacterSceneName} from "./SelectCharacterScene";
import {ResizableScene} from "./ResizableScene";
import {Scene} from "phaser";
import {LoginSceneName} from "./LoginScene";
import {FourOFourSceneName} from "../Reconnecting/FourOFourScene";
export const EntrySceneName = "EntryScene";
/**
* The EntryScene is not a real scene. It is the first scene loaded and is only used to initialize the gameManager
* and to route to the next correct scene.
*/
export class EntryScene extends Scene {
constructor() {
super({
key: EntrySceneName
});
}
preload() {
}
create() {
gameManager.init(this.scene).then(() => {
this.scene.start(LoginSceneName);
}).catch(() => {
this.scene.start(FourOFourSceneName, {
url: window.location.pathname.toString()
});
});
}
}

View File

@ -15,7 +15,8 @@ export class FourOFourScene extends Phaser.Scene {
private fileNameField!: Text; private fileNameField!: Text;
private logo!: Image; private logo!: Image;
private cat!: Sprite; private cat!: Sprite;
private file!: string; private file: string|undefined;
private url: string|undefined;
constructor() { constructor() {
super({ super({
@ -23,8 +24,9 @@ export class FourOFourScene extends Phaser.Scene {
}); });
} }
init({ file }: { file: string }) { init({ file, url }: { file?: string, url?: string }) {
this.file = file; this.file = file;
this.url = url;
} }
preload() { preload() {
@ -45,11 +47,22 @@ export class FourOFourScene extends Phaser.Scene {
this.mapNotFoundField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "404 - File not found"); this.mapNotFoundField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "404 - File not found");
this.mapNotFoundField.setOrigin(0.5, 0.5).setCenterAlign(); this.mapNotFoundField.setOrigin(0.5, 0.5).setCenterAlign();
this.couldNotFindField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, "Could not load file"); let text: string = '';
if (this.file !== undefined) {
text = "Could not load map"
}
if (this.url !== undefined) {
text = "Invalid URL"
}
this.couldNotFindField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, text);
this.couldNotFindField.setOrigin(0.5, 0.5).setCenterAlign(); this.couldNotFindField.setOrigin(0.5, 0.5).setCenterAlign();
this.fileNameField = this.add.text(this.game.renderer.width / 2, this.game.renderer.height / 2 + 38, this.file, { fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif', fontSize: '10px' }); const url = this.file ? this.file : this.url;
this.fileNameField.setOrigin(0.5, 0.5); if (url !== undefined) {
this.fileNameField = this.add.text(this.game.renderer.width / 2, this.game.renderer.height / 2 + 38, url, { fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif', fontSize: '10px' });
this.fileNameField.setOrigin(0.5, 0.5);
}
this.cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat', 6); this.cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat', 6);
this.cat.flipY=true; this.cat.flipY=true;

View File

@ -0,0 +1,54 @@
export enum GameConnexionTypes {
anonymous=1,
organization,
register,
unknown,
}
//this class is responsible with analysing and editing the game's url
class UrlManager {
//todo: use that to detect if we can find a token in localstorage
public getGameConnexionType(): GameConnexionTypes {
const url = window.location.pathname.toString();
if (url.includes('_/')) {
return GameConnexionTypes.anonymous;
} else if (url.includes('@/')) {
return GameConnexionTypes.organization;
} else if(url.includes('register/')) {
return GameConnexionTypes.register
} else {
return GameConnexionTypes.unknown
}
}
public getAnonymousMapUrlStart():string {
const match = /\/_\/global\/(.+)/.exec(window.location.pathname.toString())
if (!match) throw new Error('Could not extract startmap url from'+window.location.pathname);
return window.location.protocol+'//'+match[1];
}
public getOrganizationToken(): string|null {
const match = /\/register\/(.+)/.exec(window.location.pathname.toString());
return match ? match [1] : null;
}
//todo: simply use the roomId
//todo: test this with cypress
public editUrlForRoom(roomSlug: string, organizationSlug: string|null, worldSlug: string |null): string {
let newUrl:string;
if (organizationSlug) {
newUrl = '/@/'+organizationSlug+'/'+worldSlug+'/'+roomSlug;
} else {
newUrl = '/_/global/'+roomSlug;
}
history.pushState({}, 'WorkAdventure', newUrl);
return newUrl;
}
}
export const urlManager = new UrlManager();

View File

@ -11,11 +11,11 @@ import WebGLRenderer = Phaser.Renderer.WebGL.WebGLRenderer;
import {OutlinePipeline} from "./Phaser/Shaders/OutlinePipeline"; import {OutlinePipeline} from "./Phaser/Shaders/OutlinePipeline";
import {CustomizeScene} from "./Phaser/Login/CustomizeScene"; import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager"; import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager";
import {connectionManager} from "./Connexion/ConnectionManager"; import {gameManager} from "./Phaser/Game/GameManager";
import {ResizableScene} from "./Phaser/Login/ResizableScene"; import {ResizableScene} from "./Phaser/Login/ResizableScene";
import {EntryScene} from "./Phaser/Login/EntryScene";
//CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com'); //CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com');
connectionManager.init();
// Load Jitsi if the environment variable is set. // Load Jitsi if the environment variable is set.
if (JITSI_URL) { if (JITSI_URL) {
@ -31,7 +31,7 @@ const config: GameConfig = {
width: width / RESOLUTION, width: width / RESOLUTION,
height: height / RESOLUTION, height: height / RESOLUTION,
parent: "game", parent: "game",
scene: [LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, FourOFourScene, CustomizeScene], scene: [EntryScene, LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, FourOFourScene, CustomizeScene],
zoom: RESOLUTION, zoom: RESOLUTION,
physics: { physics: {
default: "arcade", default: "arcade",

File diff suppressed because it is too large Load Diff