> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-feat-init-gt-translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Universal Login で接続を柔軟に切り替える方法を学びましょう
# 柔軟な接続切り替えを設定する
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) + "*****MASKED*****";
}
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}
;
};
柔軟な接続切り替えは、ユーザーがアプリケーションにログインする際に、認証方法を選択できるオプション機能です。これを実装すると、アプリケーションのログイン画面に、従来のデータベース資格情報またはパスワードレス接続のいずれかを使って認証する選択肢が表示されます。[パスワードレス接続](/docs/ja-jp/authenticate/passwordless)を選択したユーザーには、メールまたはSMSでワンタイムパスワード (OTP) が送信され、それを使ってアプリケーションにログインできます。
柔軟な接続切り替えでは、[カスタム Universal Login プロンプト](/docs/ja-jp/customize/login-pages/universal-login/customize-signup-and-login-prompts)を使用して、ユーザーがより主体的に認証方法を選べるようにします。
始める前に
柔軟な接続切り替えを実装する前に、次の要件を満たしていることを確認してください。
* [Universal Login](/docs/ja-jp/authenticate/login/auth0-universal-login) を使用していること。
* この機能は、カスタムログインページでは使用できません。
* [カスタムドメイン](/docs/ja-jp/customize/custom-domains) を設定していること。
* アプリケーションで次の機能を有効にしていること。
* [Identifier First 認証](/docs/ja-jp/authenticate/login/auth0-universal-login/identifier-first)
* [データベース接続](/docs/ja-jp/authenticate/database-connections)
* [Email または SMS のパスワードレス認証](/docs/ja-jp/authenticate/login/auth0-universal-login/passwordless-login/email-or-sms)
柔軟な接続切り替えを実装する
この機能を実装するには、[Auth0 Management API](https://auth0.com/docs/api/management/v2) を使用して、カスタムの signup プロンプトおよび login プロンプトの partials を設定します。Partials とは、ログイン画面などのプロンプト画面内の entry point に挿入されるカスタムコードを指します。詳細については、[Signup と Login のプロンプトをカスタマイズする](/docs/ja-jp/customize/login-pages/universal-login/customize-signup-and-login-prompts) をご覧ください。
柔軟な接続切り替えを実装するには、次のパラメータを使用してカスタムの prompt partials を設定します。
| パラメータ | 説明 | 例 |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `state` | 現在のページの state 値をレンダリングします。これは不透明な値で、セキュリティ目的で使用されます。
現在の画面情報の詳細については、[Universal Login のページテンプレートをカスタマイズする](/docs/ja-jp/customize/login-pages/universal-login/customize-templates#current-screen-information) をご覧ください。 | `` |
| `connection` | 接続の名前と種類。
パスワードレス接続の場合、値は `email` または `sms` のいずれかです。 | `` |
以下のコードサンプルでは、プレースホルダーを適切な値に置き換えてください。
* `{yourDomain}` を `yourdomain.auth0.com` に置き換えます。
* `{mgmtApiToken}` をお使いの access token に置き換えます。
`signup-password` プロンプトは、[プロンプトに partials を設定する](https://auth0.com/docs/api/management/v2/prompts/put-partials)エンドポイントを使用して設定できます。
Auth0 CLI を使用していますか？まだセットアップしていない場合は、このコマンドを実行する前に [CLI session をセットアップして認証してください](/docs/ja-jp/deploy-monitor/auth0-cli)。
```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
```
その結果、`signup-password`画面に\*\*「メールでセキュアコードを送信する」ボタン\*\*が追加されます。ユーザーがこのボタンを選択すると、ログイン時のstateパラメータと使用する接続の名前を含むフォームデータが送信されます。
最適な結果を得るには、パスワード接続とパスワードレス接続の両方でログインプロンプトを設定することをおすすめします。
`login-password` プロンプトは、[プロンプトに partials を設定する](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
```
その結果、`login-password` 画面に **メールでセキュアコードを送信するボタン** が追加されます。ユーザーがこのボタンを選択すると、ログイン用の state パラメータと使用する接続名を含むフォームデータが送信されます。
同様に、[プロンプトに partials を設定する](https://auth0.com/docs/api/management/v2/prompts/put-partials) エンドポイント を使用して `login-passwordless` プロンプトを設定できます:
```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
```