Skip to content

S
SiB Chat
Commit 5e67e47e authored by Clément's avatar Clément
Browse files
Options

Merge branch 'solid-auth' into 'master' 

feature: use solid-auth

See merge request !8
parents d0aedf5e 55b5d727
Pipeline #4678 passed with stage
    in 28 seconds
    Hide whitespace changes
    Inline Side-by-side
    Showing with 176 additions and 94 deletions
    index.html
    View file @ 5e67e47e
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="module"
    src="https://unpkg.com/@startinblox/oidc@0.5"
    data-authority="https://test-paris.happy-dev.fr/openid/"
    data-client_id="833925"
    data-response_type="id_token token"
    data-scope="openid profile email"
    data-automaticSilentRenew="true"
    data-loadUserInfo="true"
    ></script>
    <meta charset="UTF-8" />
    <script type="module" src="https://unpkg.com/@startinblox/oidc@0.7" ></script>
    <script type="module" src="sib-chat.js"></script>
    <title>XMPP chat</title>
    ......@@ -23,31 +15,104 @@
    -->
    <style>
    body {
    background-color: lightgrey;
    padding: 1em 10%;
    }
    h1 {
    color: black;
    }
    .converse-container {
    border: 1px dashed blue;
    height: 75vh;
    }
    body {
    background-color: lightgrey;
    padding: 1em 10%;
    }
    h1 {
    color: black;
    }
    .converse-container {
    border: 1px dashed blue;
    height: 75vh;
    }
    </style>
    </head>
    <body>
    <h1>sib-oidc</h1>
    <button id="reset">clear storage and set new URL</button>
    <button id="reload">reload</button>
    <sib-test bind-user>
    <button id="login">Se connecter</button>
    <button id="logout">Se déconnecter</button>
    <button id="stat">Status (console)</button>
    <div id="result"></div>
    </sib-test>
    <sib-auth>
    <sib-auth-provider
    data-authority="https://api.test-paris.happy-dev.fr/"
    data-client_id="234528"
    data-id="paris"
    >
    </sib-auth-provider>
    <sib-auth-provider
    data-authority="https://api.test-paris.happy-dev.fr/"
    data-client_id="234528"
    data-id="paris2"
    >
    </sib-auth-provider>
    </sib-auth>
    <h1>Demo of an XMPP chatroom via a web component</h1>
    <div class="converse-container">
    <sib-chat
    data-src="https://test-paris.happy-dev.fr/members/1/"
    data-authentication="login"
    data-auto-login="true"
    data-bosh-service-url="https://jabber.happy-dev.fr/http-bind/"
    data-debug="true"
    data-locales-url="node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json">
    </sib-chat>
    <sib-chat
    data-src="https://test-paris.happy-dev.fr/members/1/"
    data-authentication="login"
    data-auto-login="true"
    data-bosh-service-url="https://jabber.happy-dev.fr/http-bind/"
    data-locales-url="node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json"
    >
    </sib-chat>
    </div>
    <script>
    reset.onclick = () => {
    window.sessionStorage.clear();
    window.localStorage.clear();
    history.pushState({}, '', '.?time=' + new Date().toLocaleTimeString());
    };
    reload.onclick = () => location.reload();
    </script>
    <script type="module">
    import { store } from 'https://unpkg.com/@startinblox/core@0.8';
    class TestComponent extends HTMLElement {
    async connectedCallback() {
    stat.onclick = () => console.log(this.getStatus());
    login.onclick = () => this.triggerLogin();
    logout.onclick = () => this.triggerLogout();
    this.update();
    }
    async triggerLogin() {
    await document.querySelector("sib-auth").login();
    }
    async triggerLogout() {
    await document.querySelector("sib-auth").logout();
    }
    async update() {
    let user = await document.querySelector("sib-auth").getUser();
    let idToken = await document.querySelector("sib-auth").getUserIdToken();
    if (!user) {
    result.innerHTML = `Vous n'êtes pas connecté !`;
    return;
    }
    user = await store.get(user);
    console.log(user);
    result.innerHTML = `Bonjour ${user.username} !<br>
    ID Token: <pre>${idToken}</pre>`;
    }
    empty() {}
    populate() {}
    }
    customElements.define('sib-test', TestComponent);
    </script>
    </body>
    </html>
    package-lock.json
    View file @ 5e67e47e
    ......@@ -14,7 +14,7 @@
    "resolved": "https://registry.npmjs.org/@startinblox/oidc/-/oidc-0.5.1.tgz",
    "integrity": "sha512-0laMDJ//g+BPBBJCydIVazqWDJpP8fAK6TdnLFCUpUBk3tywuXxgg5vhn0wizKrkQYW2nofmtoJOpia1qzrARg==",
    "requires": {
    "oidc-client": "^1.6.1"
    "oidc-client": "1.6.1"
    },
    "dependencies": {
    "oidc-client": {
    ......@@ -22,8 +22,8 @@
    "resolved": "https://registry.npmjs.org/oidc-client/-/oidc-client-1.6.1.tgz",
    "integrity": "sha512-buA9G0hlFjUwxoL/xuHunBtTgoICtJSojnZtATqMliUTKxPYAzHprOQ85Lj0hgF+Zv8lI/ViqaNFDG0Z5KCUKA==",
    "requires": {
    "babel-polyfill": ">=6.9.1",
    "jsrsasign": "^8.0.12"
    "babel-polyfill": "6.26.0",
    "jsrsasign": "8.0.12"
    }
    }
    }
    ......@@ -45,9 +45,9 @@
    "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
    "optional": true,
    "requires": {
    "babel-runtime": "^6.26.0",
    "core-js": "^2.5.0",
    "regenerator-runtime": "^0.10.5"
    "babel-runtime": "6.26.0",
    "core-js": "2.5.7",
    "regenerator-runtime": "0.10.5"
    }
    },
    "babel-runtime": {
    ......@@ -56,8 +56,8 @@
    "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
    "optional": true,
    "requires": {
    "core-js": "^2.4.0",
    "regenerator-runtime": "^0.11.0"
    "core-js": "2.5.7",
    "regenerator-runtime": "0.11.1"
    },
    "dependencies": {
    "regenerator-runtime": {
    ......@@ -79,7 +79,7 @@
    "resolved": "https://registry.npmjs.org/converse.js/-/converse.js-4.1.0.tgz",
    "integrity": "sha512-Efhp4cn6LjDqyG8y/BAyQxgIiQA9dx48DArsYc4cKqzj3yxD0VjFrXlxUeFqU/y5HGMNHYjkA7CPauNXG8WYsg==",
    "requires": {
    "fast-text-encoding": "^1.0.0"
    "fast-text-encoding": "1.0.0"
    }
    },
    "core-js": {
    ......@@ -108,10 +108,10 @@
    "integrity": "sha512-Goilx/2cfU9vvfQjgtNgc2VmJAD8CasQ6rZDqCd2u4Hsyd/qFET6nBf60jiHodevR3nl3IGzNKtrzPXWP88utQ==",
    "dev": true,
    "requires": {
    "he": "^1.1.1",
    "mime": "^1.4.1",
    "minimist": "^1.1.0",
    "url-join": "^2.0.2"
    "he": "1.1.1",
    "mime": "1.6.0",
    "minimist": "1.2.0",
    "url-join": "2.0.5"
    }
    },
    "eventemitter3": {
    ......@@ -131,7 +131,7 @@
    "integrity": "sha512-fdrt472/9qQ6Kgjvb935ig6vJCuofpBUD14f9Vb+SLlm7xIe4Qva5gey8EKtv8lp7ahE1wilg3xL1znpVGtZIA==",
    "dev": true,
    "requires": {
    "debug": "^3.1.0"
    "debug": "3.1.0"
    }
    },
    "he": {
    ......@@ -146,9 +146,9 @@
    "integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==",
    "dev": true,
    "requires": {
    "eventemitter3": "^3.0.0",
    "follow-redirects": "^1.0.0",
    "requires-port": "^1.0.0"
    "eventemitter3": "3.1.0",
    "follow-redirects": "1.5.0",
    "requires-port": "1.0.0"
    }
    },
    "http-server": {
    ......@@ -158,13 +158,13 @@
    "dev": true,
    "requires": {
    "colors": "1.0.3",
    "corser": "~2.0.0",
    "ecstatic": "^3.0.0",
    "http-proxy": "^1.8.1",
    "opener": "~1.4.0",
    "optimist": "0.6.x",
    "portfinder": "^1.0.13",
    "union": "~0.4.3"
    "corser": "2.0.1",
    "ecstatic": "3.2.0",
    "http-proxy": "1.17.0",
    "opener": "1.4.3",
    "optimist": "0.6.1",
    "portfinder": "1.0.13",
    "union": "0.4.6"
    }
    },
    "jsrsasign": {
    ......@@ -219,8 +219,8 @@
    "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
    "dev": true,
    "requires": {
    "minimist": "~0.0.1",
    "wordwrap": "~0.0.2"
    "minimist": "0.0.10",
    "wordwrap": "0.0.3"
    },
    "dependencies": {
    "minimist": {
    ......@@ -237,9 +237,9 @@
    "integrity": "sha1-uzLs2HwnEErm7kS1o8y/Drsa7ek=",
    "dev": true,
    "requires": {
    "async": "^1.5.2",
    "debug": "^2.2.0",
    "mkdirp": "0.5.x"
    "async": "1.5.2",
    "debug": "2.6.9",
    "mkdirp": "0.5.1"
    },
    "dependencies": {
    "debug": {
    ......@@ -277,7 +277,7 @@
    "integrity": "sha1-GY+9rrolTniLDvy2MLwR8kopWeA=",
    "dev": true,
    "requires": {
    "qs": "~2.3.3"
    "qs": "2.3.3"
    }
    },
    "url-join": {
    ......
    sib-chat.js
    View file @ 5e67e47e
    import 'https://unpkg.com/converse.js@4.2/dist/converse.js';
    import { Helpers, SIBBase, store } from 'https://unpkg.com/@startinblox/core@0.7';
    import {
    Helpers,
    store,
    } from 'https://unpkg.com/@startinblox/core@0.8';
    const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
    import { Sib } from 'https://unpkg.com/@startinblox/core@0.8/dist/libs/Sib.js';
    import { WidgetMixin } from 'https://unpkg.com/@startinblox/core@0.8/dist/mixins/widgetMixin.js';
    import { StoreMixin } from 'https://unpkg.com/@startinblox/core@0.8/dist/mixins/storeMixin.js';
    // const currentURL = import.meta.url;
    const currentURL = (new Error()).stack.toString().match(/[a-z]+:[^:]+/)[0];
    const baseURL = currentURL.replace(/\/[^\/]*$/, '');
    export class ConversePlugin {
    changeChat(jid, is_groupchat = false, root) {
    ......@@ -26,20 +37,19 @@ export class ConversePlugin {
    }
    }
    export class ChatWindow extends SIBBase {
    constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.append(
    export const ChatWindow = {
    name: 'sib-chat',
    use: [ WidgetMixin, StoreMixin ],
    created() {
    this.element.attachShadow({ mode: 'open' });
    this.element.shadowRoot.append(
    ...Helpers.importCSS(
    'https://unpkg.com/converse.js@4.2/css/converse.css',
    `${base_url}/converse-embed.css`,
    `${baseURL}/converse-embed.css`,
    ),
    );
    // Dirty fix. @see https://stackoverflow.com/questions/33696169/chrome-extension-font-awesome-wont-display-in-shadow-root
    Helpers.importCSS(
    'https://unpkg.com/converse.js@4.2/css/fonts.css'
    );
    Helpers.importCSS('https://unpkg.com/converse.js@4.2/css/fonts.css');
    if (typeof window.converse === 'undefined') {
    window.converseLoaded = new Promise((resolve, reject) =>
    window.addEventListener('converse-loaded', resolve),
    ......@@ -48,11 +58,11 @@ export class ChatWindow extends SIBBase {
    window.converseLoaded = Promise.resolve();
    }
    window.converseLoaded.then(() => this.initConverse());
    }
    },
    empty() {
    this.innerHTML = '';
    }
    this.element.innerHTML = '';
    },
    async populate() {
    await window.converseLoaded;
    ......@@ -60,13 +70,18 @@ export class ChatWindow extends SIBBase {
    this.initConverse();
    }
    await window.converseInitialized;
    const user = await document.querySelector('sib-auth').getUser();
    const resource = await store
    .get(user)
    const jabberID = resource.chatProfile['foaf:jabberID'];
    window.converse_sib.changeChat(
    (this.resource.jabberID || this.resource.chatProfile.jabberID),
    jabberID,
    this.resource.jabberRoom,
    this.shadowRoot,
    this.element.shadowRoot,
    );
    window.dispatchEvent(new CustomEvent('read', { detail: { resource: this.resource } }));
    }
    },
    async initConverse() {
    if (typeof window.converseInitialized !== 'undefined') {
    ......@@ -76,35 +91,39 @@ export class ChatWindow extends SIBBase {
    window.converse_sib = new ConversePlugin();
    converse.plugins.add('sib-chat', converse_sib);
    const user = await this.getUser()
    const user = await document.querySelector('sib-auth').getUser();
    const jabberID = await store
    .get(user.profile.website)
    .get(user)
    .then(resource => resource.chatProfile['foaf:jabberID']);
    const idToken = await document.querySelector('sib-auth').getUserIdToken();
    await converse.initialize({
    debug: (this.dataset.debug === "true"),
    root: this.shadowRoot,
    authentication: this.dataset.authentication,
    debug: this.element.dataset.debug === 'true',
    root: this.element.shadowRoot,
    authentication: this.element.dataset.authentication,
    auto_reconnect: true,
    allow_non_roster_messaging: true,
    auto_login: this.dataset.autoLogin === 'true',
    bosh_service_url: this.dataset.boshServiceUrl,
    auto_login: this.element.dataset.autoLogin === 'true',
    bosh_service_url: this.element.dataset.boshServiceUrl,
    jid: jabberID,
    i18n: 'en',
    password: user.access_token,
    nickname: user.profile.nickname,
    locales_url: this.dataset.localesUrl,
    password: idToken,
    nickname: user.username,
    locales_url: this.element.dataset.localesUrl,
    whitelisted_plugins: ['sib-chat'],
    view_mode: 'embedded',
    sounds_path: 'https://unpkg.com/converse.js@4.2/sounds/',
    });
    window.converseInitialized.resolve();
    }
    },
    get extra_context() {
    return { jabberID: 'http://xmlns.com/foaf/0.1/jabberID' };
    }
    }
    return {
    foaf: 'http://xmlns.com/foaf/0.1/',
    jabberID: 'foaf:jabberID',
    };
    },
    };
    export function customElementIsRegistered(name) {
    switch (document.createElement(this).constructor) {
    ......@@ -116,6 +135,4 @@ export function customElementIsRegistered(name) {
    return true;
    }
    if (!customElementIsRegistered('sib-chat')) {
    window.customElements.define('sib-chat', ChatWindow);
    }
    Sib.register(ChatWindow);
    \ No newline at end of file
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment