A few editorial comments on the first example (see <-- arrows).
<html>
<head>
<title>Welcome to my Website</title>
</head>
<body>
<button onclick="login()">Login with idp.example</button>
<script>
async function login() {
// This will prompt when !credential["registered"], but
// it won’t when credential["registered"].
// If the user selects an account updates the credential["registered"] <-- is this missing a subject for "updates the credential"?
// state and stores any needed account information.
// The object will be either registered or unregistered and store information
// on if the user should be prompted based on the mediation flag.
// TODO: the use of the mediation flag isn’t fully speced out yet.
return await navigator.credentials.get({ // <-- it's not clear to me why this is being `return`ed
mediated: “optional”, // “optional” is the default <-- this should be "mediation", not "mediated".
// also if you're not spec'ing it, I'd say it's better to leave it out
identity: {
providers: [{
configURL: "https://idp.example/manifest.json",
clientId: "123",
nonce: "456" // <-- maybe add something a little more realistic here?
// people build systems copy pasting examples and a hardcoded nonce looks dangerous.
}]
}
});
}
</script>
</body>
</html>
A few editorial comments on the first example (see <-- arrows).