matty
/
peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding some standard OpenID Connect providers (Google, Facebook) (WIP): 

* frontend
This commit is contained in:
John Livingston 2024-04-22 14:28:55 +02:00
parent 024186ba2c
commit 0a492d1921
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
8 changed files with 148 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
conversejs/builtin.ts
View File

@ -109,7 +109,7 @@ async function initConverse (
let isRemoteWithNicknameSet: boolean = false
// OIDC (OpenID Connect):
const tryOIDC = !!initConverseParams.externalAuthOIDC
const tryOIDC = (initConverseParams.externalAuthOIDC?.length ?? 0) > 0
const auth = await getLocalAuthentInfos(authenticationUrl, tryOIDC, peertubeAuthHeader)
@ -171,8 +171,7 @@ async function initConverse (
params.livechat_specific_external_authent = isAuthenticatedWithExternalAccount
if (tryOIDC && !isAuthenticated) {
params.livechat_external_auth_oidc_button_label = initConverseParams.externalAuthOIDC?.buttonLabel
params.livechat_external_auth_oidc_url = initConverseParams.externalAuthOIDC?.url
params.livechat_external_auth_oidc_buttons = initConverseParams.externalAuthOIDC
}
if (tryOIDC) { // also needed when authenticated (for the signout button)

9
conversejs/custom/shared/styles/livechat.scss
View File

@ -94,8 +94,13 @@ body[livechat-viewer-mode="on"] {
}
.livechat-external-login-modal {
.livechat-external-login-modal-external-auth-oidc {
text-align: center;
.livechat-external-login-modal-external-auth-oidc-block {
justify-content: center;
align-items: center;
display: flex;
flex-flow: row wrap;
gap: 20px;
margin-bottom: 20px;
width: 100%;
}

189
conversejs/custom/templates/livechat-external-login-modal.js
View File

@ -2,88 +2,133 @@ import { _converse, api } from '@converse/headless/core'
import { __ } from 'i18n'
import { html } from 'lit'
function externalLoginClickHandler (ev, el, externalAuthOIDCUrl) {
ev.preventDefault()
el.clearAlert()
const popup = window.open(
externalAuthOIDCUrl,
'livechat-external-auth',
'popup'
)
window.externalAuthGetResult = (data) => {
window.externalAuthGetResult = undefined
if (!data) {
// special case: when this modal is closed, used to close the popup
if (popup) { popup.close() }
return
}
console.log('Received an external authentication result...', data)
if (!data.ok) {
// eslint-disable-next-line no-undef
el.external_auth_oidc_alert_message = __(LOC_login_external_auth_alert_message) +
(data.message ? ` (${data.message})` : '')
return
}
console.info('Got external account information', data)
// Storing the token in sessionStorage.
window.sessionStorage.setItem('peertube-plugin-livechat-external-auth-oidc-token', data.token)
const reconnectMode = api.settings.get('livechat_external_auth_reconnect_mode')
if (reconnectMode === 'button-close-open') {
// Here, we click on the close button, then on the open button.
// FIXME: there is maybe a better way to do this.
try {
// But first, close the modal.
document.getElementsByClassName('livechat-external-login-modal')[0]
.closest('.modal-dialog')
.querySelector('button.close')
.click()
// As soon as disconnected, re-open:
_converse.api.listen.once('disconnected', () => {
document.getElementsByClassName('peertube-plugin-livechat-button-open')[0].click()
})
// And we close!
document.getElementsByClassName('peertube-plugin-livechat-button-close')[0].click()
} catch (err) {
// fallback... reloading window :/
console.error(err)
window.location.reload()
}
} else { // reload and other use cases...
window.location.reload()
}
}
return false
}
export const tplExternalLoginModal = (el, o) => {
// eslint-disable-next-line no-undef
const i18nRemotePeertube = __(LOC_login_remote_peertube)
// eslint-disable-next-line no-undef
const i18nRemotePeertubeUrl = __(LOC_login_remote_peertube_url)
const i18nRemotePeertubeOpen = __('OK')
const externalAuthOIDCButtonLabel = api.settings.get('livechat_external_auth_oidc_button_label')
const externalAuthOIDCUrl = api.settings.get('livechat_external_auth_oidc_url')
const buttonsDefinitions = api.settings.get('livechat_external_auth_oidc_buttons')
const externalButtonsBlocks = []
if (Array.isArray(buttonsDefinitions) && buttonsDefinitions.length) {
// type=custom first, if present
// and sorting on label alphabetically
const customButtonsDefinitions = buttonsDefinitions.filter(b => b.type === 'custom')
.sort((a, b) => a.buttonLabel > b.buttonLabel ? 1 : (a.buttonLabel < b.buttonLabel ? -1 : 0))
const otherButtonsDefinition = buttonsDefinitions.filter(b => b.type !== 'custom')
.sort((a, b) => a.buttonLabel > b.buttonLabel ? 1 : (a.buttonLabel < b.buttonLabel ? -1 : 0))
for (const block of [customButtonsDefinitions, otherButtonsDefinition]) {
if (!block.length) { continue }
const externalButtons = []
for (const buttonDef of block) {
if (typeof buttonDef !== 'object') { continue }
const type = buttonDef.type
const label = buttonDef.buttonLabel
const url = buttonDef.url
if (!type || !type || !url) {
continue
}
externalButtons.push({
label,
url,
class: 'livechat-external-login-modal-external-auth-oidc-type-' + type
})
}
externalButtonsBlocks.push(externalButtons)
}
}
return html`<div class="modal-body livechat-external-login-modal">
${!externalAuthOIDCButtonLabel || !externalAuthOIDCUrl || !window.sessionStorage
${!externalButtonsBlocks.length || !window.sessionStorage
? ''
: html`
<div class="livechat-external-login-modal-external-auth-oidc">
<button
class="btn btn-primary"
@click=${
(ev) => {
ev.preventDefault()
el.clearAlert()
const popup = window.open(
externalAuthOIDCUrl,
'livechat-external-auth',
'popup'
)
window.externalAuthGetResult = (data) => {
window.externalAuthGetResult = undefined
if (!data) {
// special case: when this modal is closed, used to close the popup
if (popup) { popup.close() }
return
}
console.log('Received an external authentication result...', data)
if (!data.ok) {
// eslint-disable-next-line no-undef
el.external_auth_oidc_alert_message = __(LOC_login_external_auth_alert_message) +
(data.message ? ` (${data.message})` : '')
return
}
console.info('Got external account information', data)
// Storing the token in sessionStorage.
window.sessionStorage.setItem('peertube-plugin-livechat-external-auth-oidc-token', data.token)
const reconnectMode = api.settings.get('livechat_external_auth_reconnect_mode')
if (reconnectMode === 'button-close-open') {
// Here, we click on the close button, then on the open button.
// FIXME: there is maybe a better way to do this.
try {
// But first, close the modal.
document.getElementsByClassName('livechat-external-login-modal')[0]
.closest('.modal-dialog')
.querySelector('button.close')
.click()
// As soon as disconnected, re-open:
_converse.api.listen.once('disconnected', () => {
document.getElementsByClassName('peertube-plugin-livechat-button-open')[0].click()
})
// And we close!
document.getElementsByClassName('peertube-plugin-livechat-button-close')[0].click()
} catch (err) {
// fallback... reloading window :/
console.error(err)
window.location.reload()
}
} else { // reload and other use cases...
window.location.reload()
}
: html`<div class="livechat-external-login-modal-external-auth-oidc">
${
externalButtonsBlocks.map(externalButtons => html`
<div class="livechat-external-login-modal-external-auth-oidc-block">
${
externalButtons.map(button => html`
<button
class="btn btn-primary ${button.class}"
@click=${
(ev) => {
externalLoginClickHandler(ev, el, button.url)
}
}
>
${button.label}
</button>
`)
}
</div>
`)
}
return false
}
}
>
${externalAuthOIDCButtonLabel}
</button>
${!o.external_auth_oidc_alert_message
? ''
: html`<div class="invalid-feedback d-block">${o.external_auth_oidc_alert_message}</div>`

2
conversejs/lib/plugins/livechat-specific.ts
View File

@ -82,7 +82,7 @@ export const livechatSpecificsPlugin = {
for (const k of [
'hide_muc_participants',
'livechat_enable_viewer_mode',
'livechat_external_auth_oidc_button_label', 'livechat_external_auth_oidc_url',
'livechat_external_auth_oidc_buttons',
'livechat_external_auth_reconnect_mode',
'livechat_mini_muc_head',
'livechat_specific_external_authent'

3
conversejs/lib/plugins/livechat-viewer-mode.ts
View File

@ -9,8 +9,7 @@ export const livechatViewerModePlugin = {
livechat_enable_viewer_mode: false,
livechat_peertube_video_original_url: undefined,
livechat_peertube_video_uuid: undefined,
livechat_external_auth_oidc_button_label: undefined,
livechat_external_auth_oidc_url: undefined,
livechat_external_auth_oidc_buttons: undefined,
livechat_external_auth_reconnect_mode: undefined
})

20
server/lib/conversejs/params.ts
View File

@ -85,14 +85,18 @@ async function getConverseJSParams (
)
} else {
try {
const customOidc = ExternalAuthOIDC.singleton('custom')
if (await customOidc.isOk()) {
const authUrl = customOidc.getConnectUrl()
const buttonLabel = customOidc.getButtonLabel()
if (authUrl && buttonLabel) {
externalAuthOIDC = {
buttonLabel: buttonLabel,
url: authUrl
const oidcs = ExternalAuthOIDC.allSingletons()
for (const oidc of oidcs) {
if (await oidc.isOk()) {
const authUrl = oidc.getConnectUrl()
const buttonLabel = oidc.getButtonLabel()
if (authUrl && buttonLabel) {
externalAuthOIDC ??= []
externalAuthOIDC.push({
type: oidc.type,
buttonLabel: buttonLabel,
url: authUrl
})
}
}
}

3
server/lib/external-auth/oidc.ts
View File

@ -1,6 +1,7 @@
import type { RegisterServerOptions } from '@peertube/peertube-types'
import type { Request, Response, CookieOptions } from 'express'
import type { ExternalAccountInfos, AcceptableAvatarMimeType } from './types'
import type { ExternalAuthOIDCType } from '../../../shared/lib/types'
import { ExternalAuthenticationError } from './error'
import { getBaseRouterRoute } from '../helpers'
import { canonicalizePluginUri } from '../uri/canonicalize'
@ -68,8 +69,6 @@ async function getRandomBytes (size: number): Promise<Buffer> {
})
}
type ExternalAuthOIDCType = 'custom' | 'google' | 'facebook'
/**
* This class handles the external OpenId Connect provider, if defined.
*/

10
shared/lib/types.ts
View File

@ -22,10 +22,11 @@ interface InitConverseJSParams {
transparent: boolean
forceDefaultHideMucParticipants?: boolean
autofocus?: boolean
externalAuthOIDC?: {
externalAuthOIDC?: Array<{
type: ExternalAuthOIDCType
buttonLabel: string
url: string
}
}>
}
interface InitConverseJSParamsError {
@ -119,6 +120,8 @@ interface ExternalAuthResultError {
type ExternalAuthResult = ExternalAuthResultError | ExternalAuthResultOk
type ExternalAuthOIDCType = 'custom' | 'google' | 'facebook'
export type {
ConverseJSTheme,
InitConverseJSParams,
@ -132,5 +135,6 @@ export type {
ChatPeertubeIncludeMode,
ExternalAuthResultError,
ExternalAuthResultOk,
ExternalAuthResult
ExternalAuthResult,
ExternalAuthOIDCType
}