mirror of https://github.com/watcha-fr/synapse
Implement a username picker for synapse (#8942)
The final part (for now) of my work to implement a username picker in synapse itself. The idea is that we allow `UsernameMappingProvider`s to return `localpart=None`, in which case, rather than redirecting the browser back to the client, we redirect to a username-picker resource, which allows the user to enter a username. We *then* complete the SSO flow (including doing the client permission checks). The static resources for the username picker itself (in https://github.com/matrix-org/synapse/tree/rav/username_picker/synapse/res/username_picker) are essentially lifted wholesale from https://github.com/matrix-org/matrix-synapse-saml-mozilla/tree/master/matrix_synapse_saml_mozilla/res. As the comment says, we might want to think about making them customisable, but that can be a follow-up. Fixes #8876.code_spécifique_watcha
Richard van der Hoff
4 years ago
committed by
GitHub
parent
5d4c330ed9
commit
28877fade9
@ -0,0 +1 @@ |
||||
Add support for allowing users to pick their own user ID during a single-sign-on login. |
||||
@ -0,0 +1,19 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title>Synapse Login</title> |
||||
<link rel="stylesheet" href="style.css" type="text/css" /> |
||||
</head> |
||||
<body> |
||||
<div class="card"> |
||||
<form method="post" class="form__input" id="form" action="submit"> |
||||
<label for="field-username">Please pick your username:</label> |
||||
<input type="text" name="username" id="field-username" autofocus=""> |
||||
<input type="submit" class="button button--full-width" id="button-submit" value="Submit"> |
||||
</form> |
||||
<!-- this is used for feedback --> |
||||
<div role=alert class="tooltip hidden" id="message"></div> |
||||
<script src="script.js"></script> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,95 @@ |
||||
let inputField = document.getElementById("field-username"); |
||||
let inputForm = document.getElementById("form"); |
||||
let submitButton = document.getElementById("button-submit"); |
||||
let message = document.getElementById("message"); |
||||
|
||||
// Submit username and receive response
|
||||
function showMessage(messageText) { |
||||
// Unhide the message text
|
||||
message.classList.remove("hidden"); |
||||
|
||||
message.textContent = messageText; |
||||
}; |
||||
|
||||
function doSubmit() { |
||||
showMessage("Success. Please wait a moment for your browser to redirect."); |
||||
|
||||
// remove the event handler before re-submitting the form.
|
||||
delete inputForm.onsubmit; |
||||
inputForm.submit(); |
||||
} |
||||
|
||||
function onResponse(response) { |
||||
// Display message
|
||||
showMessage(response); |
||||
|
||||
// Enable submit button and input field
|
||||
submitButton.classList.remove('button--disabled'); |
||||
submitButton.value = "Submit"; |
||||
}; |
||||
|
||||
let allowedUsernameCharacters = RegExp("[^a-z0-9\\.\\_\\=\\-\\/]"); |
||||
function usernameIsValid(username) { |
||||
return !allowedUsernameCharacters.test(username); |
||||
} |
||||
let allowedCharactersString = "lowercase letters, digits, ., _, -, /, ="; |
||||
|
||||
function buildQueryString(params) { |
||||
return Object.keys(params) |
||||
.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])) |
||||
.join('&'); |
||||
} |
||||
|
||||
function submitUsername(username) { |
||||
if(username.length == 0) { |
||||
onResponse("Please enter a username."); |
||||
return; |
||||
} |
||||
if(!usernameIsValid(username)) { |
||||
onResponse("Invalid username. Only the following characters are allowed: " + allowedCharactersString); |
||||
return; |
||||
} |
||||
|
||||
// if this browser doesn't support fetch, skip the availability check.
|
||||
if(!window.fetch) { |
||||
doSubmit(); |
||||
return; |
||||
} |
||||
|
||||
let check_uri = 'check?' + buildQueryString({"username": username}); |
||||
fetch(check_uri, { |
||||
// include the cookie
|
||||
"credentials": "same-origin", |
||||
}).then((response) => { |
||||
if(!response.ok) { |
||||
// for non-200 responses, raise the body of the response as an exception
|
||||
return response.text().then((text) => { throw text; }); |
||||
} else { |
||||
return response.json(); |
||||
} |
||||
}).then((json) => { |
||||
if(json.error) { |
||||
throw json.error; |
||||
} else if(json.available) { |
||||
doSubmit(); |
||||
} else { |
||||
onResponse("This username is not available, please choose another."); |
||||
} |
||||
}).catch((err) => { |
||||
onResponse("Error checking username availability: " + err); |
||||
}); |
||||
} |
||||
|
||||
function clickSubmit() { |
||||
event.preventDefault(); |
||||
if(submitButton.classList.contains('button--disabled')) { return; } |
||||
|
||||
// Disable submit button and input field
|
||||
submitButton.classList.add('button--disabled'); |
||||
|
||||
// Submit username
|
||||
submitButton.value = "Checking..."; |
||||
submitUsername(inputField.value); |
||||
}; |
||||
|
||||
inputForm.onsubmit = clickSubmit; |
||||
@ -0,0 +1,27 @@ |
||||
input[type="text"] { |
||||
font-size: 100%; |
||||
background-color: #ededf0; |
||||
border: 1px solid #fff; |
||||
border-radius: .2em; |
||||
padding: .5em .9em; |
||||
display: block; |
||||
width: 26em; |
||||
} |
||||
|
||||
.button--disabled { |
||||
border-color: #fff; |
||||
background-color: transparent; |
||||
color: #000; |
||||
text-transform: none; |
||||
} |
||||
|
||||
.hidden { |
||||
display: none; |
||||
} |
||||
|
||||
.tooltip { |
||||
background-color: #f9f9fa; |
||||
padding: 1em; |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
@ -0,0 +1,88 @@ |
||||
# -*- coding: utf-8 -*- |
||||
# Copyright 2020 The Matrix.org Foundation C.I.C. |
||||
# |
||||
# Licensed under the Apache License, Version 2.0 (the "License"); |
||||
# you may not use this file except in compliance with the License. |
||||
# You may obtain a copy of the License at |
||||
# |
||||
# http://www.apache.org/licenses/LICENSE-2.0 |
||||
# |
||||
# Unless required by applicable law or agreed to in writing, software |
||||
# distributed under the License is distributed on an "AS IS" BASIS, |
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
# See the License for the specific language governing permissions and |
||||
# limitations under the License. |
||||
from typing import TYPE_CHECKING |
||||
|
||||
import pkg_resources |
||||
|
||||
from twisted.web.http import Request |
||||
from twisted.web.resource import Resource |
||||
from twisted.web.static import File |
||||
|
||||
from synapse.api.errors import SynapseError |
||||
from synapse.handlers.sso import USERNAME_MAPPING_SESSION_COOKIE_NAME |
||||
from synapse.http.server import DirectServeHtmlResource, DirectServeJsonResource |
||||
from synapse.http.servlet import parse_string |
||||
from synapse.http.site import SynapseRequest |
||||
|
||||
if TYPE_CHECKING: |
||||
from synapse.server import HomeServer |
||||
|
||||
|
||||
def pick_username_resource(hs: "HomeServer") -> Resource: |
||||
"""Factory method to generate the username picker resource. |
||||
|
||||
This resource gets mounted under /_synapse/client/pick_username. The top-level |
||||
resource is just a File resource which serves up the static files in the resources |
||||
"res" directory, but it has a couple of children: |
||||
|
||||
* "submit", which does the mechanics of registering the new user, and redirects the |
||||
browser back to the client URL |
||||
|
||||
* "check": checks if a userid is free. |
||||
""" |
||||
|
||||
# XXX should we make this path customisable so that admins can restyle it? |
||||
base_path = pkg_resources.resource_filename("synapse", "res/username_picker") |
||||
|
||||
res = File(base_path) |
||||
res.putChild(b"submit", SubmitResource(hs)) |
||||
res.putChild(b"check", AvailabilityCheckResource(hs)) |
||||
|
||||
return res |
||||
|
||||
|
||||
class AvailabilityCheckResource(DirectServeJsonResource): |
||||
def __init__(self, hs: "HomeServer"): |
||||
super().__init__() |
||||
self._sso_handler = hs.get_sso_handler() |
||||
|
||||
async def _async_render_GET(self, request: Request): |
||||
localpart = parse_string(request, "username", required=True) |
||||
|
||||
session_id = request.getCookie(USERNAME_MAPPING_SESSION_COOKIE_NAME) |
||||
if not session_id: |
||||
raise SynapseError(code=400, msg="missing session_id") |
||||
|
||||
is_available = await self._sso_handler.check_username_availability( |
||||
localpart, session_id.decode("ascii", errors="replace") |
||||
) |
||||
return 200, {"available": is_available} |
||||
|
||||
|
||||
class SubmitResource(DirectServeHtmlResource): |
||||
def __init__(self, hs: "HomeServer"): |
||||
super().__init__() |
||||
self._sso_handler = hs.get_sso_handler() |
||||
|
||||
async def _async_render_POST(self, request: SynapseRequest): |
||||
localpart = parse_string(request, "username", required=True) |
||||
|
||||
session_id = request.getCookie(USERNAME_MAPPING_SESSION_COOKIE_NAME) |
||||
if not session_id: |
||||
raise SynapseError(code=400, msg="missing session_id") |
||||
|
||||
await self._sso_handler.handle_submit_username_request( |
||||
request, localpart, session_id.decode("ascii", errors="replace") |
||||
) |
||||
Loading…
Reference in new issue