> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-update-anonymous-sessons-ea.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Découvrez comment mettre en œuvre le basculement flexible entre les connexions dans Universal Login
# Configurer le basculement flexible entre les connexions
export const AuthCodeGroup = ({children, dropdown}) => {
const [processedChildren, setProcessedChildren] = useState(children);
useEffect(() => {
let unsubscribe = null;
function init() {
unsubscribe = window.autorun(() => {
const processChildren = node => {
if (typeof node === "string") {
let processedNode = node;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
}
return processedNode;
} else if (Array.isArray(node)) {
return node.map(processChildren);
} else if (node && node.props && node.props.children) {
return {
...node,
props: {
...node.props,
children: processChildren(node.props.children)
}
};
}
return node;
};
setProcessedChildren(processChildren(children));
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
return {processedChildren};
};
export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
const [displayText, setDisplayText] = useState(children);
const [copyText, setCopyText] = useState(children);
const wrapperRef = React.useRef(null);
useEffect(() => {
let unsubscribe = null;
function init() {
if (!window.autorun || !window.rootStore) {
return;
}
unsubscribe = window.autorun(() => {
let processedChildrenForDisplay = children;
let processedChildrenForCopy = children;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
let displayValue = value;
if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
displayValue = value.substring(0, 3) + "*****MASQUÉ*****";
}
processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
}
setDisplayText(processedChildrenForDisplay);
setCopyText(processedChildrenForCopy);
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
useEffect(() => {
if (!wrapperRef.current) return;
const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
let isOverriding = false;
const handleClick = e => {
const button = e.target.closest('[data-testid="copy-code-button"]');
if (!button || !wrapperRef.current.contains(button)) return;
isOverriding = true;
navigator.clipboard.writeText = text => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
return originalWriteText(copyText);
}
return originalWriteText(text);
};
setTimeout(() => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
}
}, 100);
};
const wrapper = wrapperRef.current;
wrapper.addEventListener('click', handleClick, true);
return () => {
wrapper.removeEventListener('click', handleClick, true);
if (navigator.clipboard.writeText !== originalWriteText) {
navigator.clipboard.writeText = originalWriteText;
}
};
}, [copyText]);
return
{displayText}
;
};
La basculement flexible entre les connexions est une fonctionnalité facultative qui permet aux utilisateurs de choisir leur méthode d’authentification au moment de se connecter à une application. Une fois mise en œuvre, l’écran de connexion de votre application offre aux utilisateurs la possibilité de s’authentifier soit avec des identifiants de base de données traditionnels, soit avec une connexion sans mot de passe. Les utilisateurs qui sélectionnent une [connexion sans mot de passe](/docs/fr-ca/authenticate/passwordless) reçoivent un mot de passe à usage unique (OTP) par courriel ou par SMS, qu’ils peuvent utiliser pour se connecter à votre application.
La basculement flexible entre les connexions utilise des [prompts personnalisés d’Universal Login](/docs/fr-ca/customize/login-pages/universal-login/customize-signup-and-login-prompts) pour offrir aux utilisateurs une expérience d’authentification plus autonome.
Avant de commencer
Avant de pouvoir mettre en œuvre le basculement flexible entre les connexions, assurez-vous de respecter les exigences suivantes :
* Utilisez [Universal Login](/docs/fr-ca/authenticate/login/auth0-universal-login).
* Cette fonctionnalité n’est pas offerte pour les pages de connexion personnalisées.
* Configurez un [domaine personnalisé](/docs/fr-ca/customize/custom-domains).
* Activez les éléments suivants pour votre application :
* [authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first)
* [connexion de base de données](/docs/fr-ca/authenticate/database-connections)
* [authentification sans mot de passe par e-mail ou SMS](/docs/fr-ca/authenticate/login/auth0-universal-login/passwordless-login/email-or-sms)
Mettre en œuvre le basculement flexible entre les connexions
Pour mettre en œuvre cette fonctionnalité, utilisez l’[Auth0 Management API](https://auth0.com/docs/api/management/v2) pour configurer des partials personnalisés pour les prompts d’inscription et de connexion. Les partials correspondent à du code personnalisé inséré dans un point d’entrée d’un écran de prompt, comme l’écran de connexion. Pour en savoir plus, consultez [Personnaliser les prompts d'inscription et de connexion](/docs/fr-ca/customize/login-pages/universal-login/customize-signup-and-login-prompts).
Pour mettre en œuvre le basculement flexible entre les connexions, vous configurerez des partials de prompt personnalisés avec les paramètres suivants :
| Paramètre | Description | Exemple |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `state` | Affiche la valeur `state` de la page actuelle, qui est opaque et utilisée à des fins de sécurité.
Pour en savoir plus sur les informations relatives à l’écran actuel, consultez [Personnaliser les modèles de page Universal Login](/docs/fr-ca/customize/login-pages/universal-login/customize-templates#current-screen-information). | `` |
| `connection` | Nom et type de la connexion.
Pour les connexions sans mot de passe, la valeur est soit `email`, soit `sms`. | `` |
Dans les exemples de code ci-dessous, assurez-vous de remplacer les espaces réservés par les valeurs appropriées :
* Remplacez `{yourDomain}` par `yourdomain.auth0.com`.
* Remplacez `{mgmtApiToken}` par votre jeton d’accès.
Configurer l’écran d’inscription
Vous pouvez configurer le prompt `signup-password` à l’aide de l’endpoint [Set partials for a prompt](https://auth0.com/docs/api/management/v2/prompts/put-partials) :
Vous utilisez Auth0 CLI ? Si ce n’est pas déjà fait, [configurez et authentifiez votre session CLI](/docs/fr-ca/deploy-monitor/auth0-cli) avant d’exécuter cette commande.
```bash Auth0 CLI theme={null}
auth0 api put "prompts/signup-password/partials" \
--data '{"signup-password":{"form-footer-start":""}}'
```
```bash cURL theme={null}
curl --request PUT \
--url 'https://{yourDomain}/api/v2/prompts/signup-password/partials' \
--header 'authorization: Bearer {mgmtApiToken}' \
--header 'content-type: application/json' \
--data '{"signup-password":{"form-footer-start":""}}'
```
```csharp C# theme={null}
var client = new RestClient("https://{yourDomain}/api/v2/prompts/signup-password/partials");
var request = new RestRequest(Method.PUT);
request.AddHeader("authorization", "Bearer {mgmtApiToken}");
request.AddHeader("content-type", "application/json");
request.AddParameter("application/json", "{"signup-password":{"form-footer-start":""}}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```
```go Go theme={null}
package main
import (
"fmt"
"strings"
"net/http"
"io/ioutil"
)
func main() {
url := "https://{yourDomain}/api/v2/prompts/signup-password/partials"
payload := strings.NewReader("{"signup-password":{"form-footer-start":""}}")
req, _ := http.NewRequest("PUT", url, payload)
req.Header.Add("authorization", "Bearer {mgmtApiToken}")
req.Header.Add("content-type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := ioutil.ReadAll(res.Body)
fmt.Println(res)
fmt.Println(string(body))
}
```
```java Java theme={null}
HttpResponse response = Unirest.put("https://{yourDomain}/api/v2/prompts/signup-password/partials")
.header("authorization", "Bearer {mgmtApiToken}")
.header("content-type", "application/json")
.body("{"signup-password":{"form-footer-start":""}}")
.asString();
```
```javascript Node.JS theme={null}
var axios = require("axios").default;
var options = {
method: 'PUT',
url: 'https://{yourDomain}/api/v2/prompts/signup-password/partials',
headers: {authorization: 'Bearer {mgmtApiToken}', 'content-type': 'application/json'},
data: {
'signup-password': {
'form-footer-start': ''
}
}
};
axios.request(options).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.error(error);
});
```
```php PHP theme={null}
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://{yourDomain}/api/v2/prompts/signup-password/partials",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "PUT",
CURLOPT_POSTFIELDS => "{"signup-password":{"form-footer-start":""}}",
CURLOPT_HTTPHEADER => [
"authorization: Bearer {mgmtApiToken}",
"content-type: application/json"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
```
```python Python theme={null}
import http.client
conn = http.client.HTTPSConnection("")
payload = "{"signup-password":{"form-footer-start":""}}"
headers = {
'authorization': "Bearer {mgmtApiToken}",
'content-type': "application/json"
}
conn.request("PUT", "/{yourDomain}/api/v2/prompts/signup-password/partials", payload, headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))
```
```ruby Ruby theme={null}
require 'uri'
require 'net/http'
require 'openssl'
url = URI("https://{yourDomain}/api/v2/prompts/signup-password/partials")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_PEER
request = Net::HTTP::Put.new(url)
request["authorization"] = 'Bearer {mgmtApiToken}'
request["content-type"] = 'application/json'
request.body = "{"signup-password":{"form-footer-start":""}}"
response = http.request(request)
puts response.read_body
```
Par conséquent, un **bouton Envoyer un code sécurisé par courriel** est ajouté à l’écran `signup-password`. Lorsqu’un utilisateur clique sur ce bouton, les données du formulaire sont soumises; elles contiennent le paramètre d’état de connexion et le nom de la connexion souhaitée.
Configurer les prompts de connexion
Pour obtenir les meilleurs résultats, il est recommandé de configurer le prompt de connexion pour les connexions avec mot de passe et les connexions sans mot de passe.
Vous pouvez configurer le prompt `login-password` à l’aide de l’endpoint [Set partials for a prompt](https://auth0.com/docs/api/management/v2/prompts/put-partials) :
```bash Auth0 CLI theme={null}
auth0 api put "prompts/login-password/partials" \
--data '{"login-password":{"form-footer-start":""}}'
```
```bash cURL theme={null}
curl --request PUT \
--url 'https://{yourDomain}/api/v2/prompts/login-password/partials' \
--header 'authorization: Bearer {mgmtApiToken}' \
--header 'content-type: application/json' \
--data '{"login-password":{"form-footer-start":""}}'
```
```csharp C# theme={null}
var client = new RestClient("https://{yourDomain}/api/v2/prompts/login-password/partials");
var request = new RestRequest(Method.PUT);
request.AddHeader("authorization", "Bearer {mgmtApiToken}");
request.AddHeader("content-type", "application/json");
request.AddParameter("application/json", "{"login-password":{"form-footer-start":""}}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```
```go Go theme={null}
package main
import (
"fmt"
"strings"
"net/http"
"io/ioutil"
)
func main() {
url := "https://{yourDomain}/api/v2/prompts/login-password/partials"
payload := strings.NewReader("{"login-password":{"form-footer-start":""}}")
req, _ := http.NewRequest("PUT", url, payload)
req.Header.Add("authorization", "Bearer {mgmtApiToken}")
req.Header.Add("content-type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := ioutil.ReadAll(res.Body)
fmt.Println(res)
fmt.Println(string(body))
}n(string(body))
}
```
```java Java theme={null}
HttpResponse response = Unirest.put("https://{yourDomain}/api/v2/prompts/login-password/partials")
.header("authorization", "Bearer {mgmtApiToken}")
.header("content-type", "application/json")
.body("{"login-password":{"form-footer-start":""}}")
.asString();
```
```javascript Node.JS theme={null}
var axios = require("axios").default;
var options = {
method: 'PUT',
url: 'https://{yourDomain}/api/v2/prompts/login-password/partials',
headers: {authorization: 'Bearer {mgmtApiToken}', 'content-type': 'application/json'},
data: {
'login-password': {
'form-footer-start': ''
}
}
};
axios.request(options).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.error(error);
});
```
```php PHP theme={null}
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://{yourDomain}/api/v2/prompts/login-password/partials",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "PUT",
CURLOPT_POSTFIELDS => "{"login-password":{"form-footer-start":""}}",
CURLOPT_HTTPHEADER => [
"authorization: Bearer {mgmtApiToken}",
"content-type: application/json"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
```
```python Python theme={null}
import http.client
conn = http.client.HTTPSConnection("")
payload = "{"login-password":{"form-footer-start":""}}"
headers = {
'authorization': "Bearer {mgmtApiToken}",
'content-type': "application/json"
}
conn.request("PUT", "/{yourDomain}/api/v2/prompts/login-password/partials", payload, headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))
```
```ruby Ruby theme={null}
require 'uri'
require 'net/http'
require 'openssl'
url = URI("https://{yourDomain}/api/v2/prompts/login-password/partials")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_PEER
request = Net::HTTP::Put.new(url)
request["authorization"] = 'Bearer {mgmtApiToken}'
request["content-type"] = 'application/json'
request.body = "{"login-password":{"form-footer-start":""}}"
response = http.request(request)
puts response.read_body
```
Par conséquent, un **bouton Envoyer un code sécurisé par courriel** est ajouté à l’écran `login-password`. Lorsqu’un utilisateur sélectionne ce bouton, il soumet des données de formulaire contenant le paramètre `state` de connexion et le nom de la connexion souhaitée.
De la même manière, vous pouvez configurer le prompt `login-passwordless` à l’aide de l’endpoint [Set partials for a prompt](https://auth0.com/docs/api/management/v2/prompts/put-partials) :
```bash Auth0 CLI theme={null}
auth0 api put "prompts/login-passwordless/partials" \
--data '{"login-passwordless-email-code":{"form-footer-start":" Use Password Instead "}}'
```
```bash cURL theme={null}
curl --request PUT \
--url 'https://{yourDomain}/api/v2/prompts/login-passwordless/partials' \
--header 'authorization: Bearer {mgmtApiToken}' \
--header 'content-type: application/json' \
--data '{"login-passwordless-email-code":{"form-footer-start":" Use Password Instead "}}'
```
```csharp C# theme={null}
var client = new RestClient("https://{yourDomain}/api/v2/prompts/login-passwordless/partials");
var request = new RestRequest(Method.PUT);
request.AddHeader("authorization", "Bearer {mgmtApiToken}");
request.AddHeader("content-type", "application/json");
request.AddParameter("application/json", "{"login-passwordless-email-code":{"form-footer-start":" Use Password Instead "}}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```
```go Go theme={null}
package main
import (
"fmt"
"strings"
"net/http"
"io/ioutil"
)
func main() {
url := "https://{yourDomain}/api/v2/prompts/login-passwordless/partials"
payload := strings.NewReader("{"login-passwordless-email-code":{"form-footer-start":""}}")
req, _ := http.NewRequest("PUT", url, payload)
req.Header.Add("authorization", "Bearer {mgmtApiToken}")
req.Header.Add("content-type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := ioutil.ReadAll(res.Body)
fmt.Println(res)
fmt.Println(string(body))
}
```
```java Java theme={null}
HttpResponse response = Unirest.put("https://{yourDomain}/api/v2/prompts/login-passwordless/partials")
.header("authorization", "Bearer {mgmtApiToken}")
.header("content-type", "application/json")
.body("{"login-passwordless-email-code":{"form-footer-start":" Use Password Instead "}}")
.asString();
```
```javascript Node.JS theme={null}
var axios = require("axios").default;
var options = {
method: 'PUT',
url: 'https://{yourDomain}/api/v2/prompts/login-passwordless/partials',
headers: {authorization: 'Bearer {mgmtApiToken}', 'content-type': 'application/json'},
data: {
'login-passwordless-email-code': {
'form-footer-start': ''
}
}
};
axios.request(options).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.error(error);
});
```
```php PHP theme={null}
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://{yourDomain}/api/v2/prompts/login-passwordless/partials",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "PUT",
CURLOPT_POSTFIELDS => "{"login-passwordless-email-code":{"form-footer-start":""}}",
CURLOPT_HTTPHEADER => [
"authorization: Bearer {mgmtApiToken}",
"content-type: application/json"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
```
```python Python theme={null}
import http.client
conn = http.client.HTTPSConnection("")
payload = "{"login-passwordless-email-code":{"form-footer-start":""}}"
headers = {
'authorization': "Bearer {mgmtApiToken}",
'content-type': "application/json"
}
conn.request("PUT", "/{yourDomain}/api/v2/prompts/login-passwordless/partials", payload, headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))
```
```ruby Ruby theme={null}
require 'uri'
require 'net/http'
require 'openssl'
url = URI("https://{yourDomain}/api/v2/prompts/login-passwordless/partials")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_PEER
request = Net::HTTP::Put.new(url)
request["authorization"] = 'Bearer {mgmtApiToken}'
request["content-type"] = 'application/json'
request.body = "{"login-passwordless-email-code":{"form-footer-start":""}}"
response = http.request(request)
puts response.read_body
```