> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Lockの認証モードの詳細。

# Lockの認証モード

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) + "*****マスク済み*****";
          }
          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 <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

Lock は 2 つの異なるモードで動作します。デフォルトのモードは **リダイレクトモード** です。このモードでは、ユーザーはいったん認証のためにリダイレクトされ、認証後にアプリケーションに戻ります。2 つ目のモードである **ポップアップモード** では、ポップアップウィンドウを使用して、ユーザーはアプリケーションを離れることなく <Tooltip tip="IDプロバイダー（IdP）: デジタルアイデンティティを保存および管理するサービス。" cta="用語集を表示" href="/ja/docs/glossary?term=identity+provider">IDプロバイダー</Tooltip> で認証できます。

<div id="redirect-mode">
  ## リダイレクトモード
</div>

リダイレクトモードで IdP ボタン (たとえば Facebook) をクリックすると、一時的に Facebook にリダイレクトされます。リダイレクトモードは Lock のデフォルトであり、ほぼすべてのユースケースで推奨されるモードです。ログイン (この例では Facebook へのログイン) に成功すると、Facebook から (Auth0 を介して) アプリにリダイレクトされます。リファレンスドキュメント内の例やサンプルの大半では、リダイレクトモードを使用しています。

<div id="popup-mode">
  ## ポップアップモード
</div>

IdP ボタン (たとえば Facebook) をクリックしたあとにポップアップ (新しいタブまたはウィンドウ) が開く場合は、ポップアップモードを使用しています。そのポップアップには Facebook のページが表示されます。Facebook へのログインに成功すると、ポップアップは閉じられ、Web アプリはユーザーが認証されたことを認識します。Web アプリが**他のページにリダイレクトされることは一切ありません**。

ポップアップモードで Lock を実装する場合も、必要なのは `redirect` オプションを既定値から変更するだけです。

export const codeExample = `var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}',
  {
    auth: {
      redirect: false
    }
  }
);`;

<AuthCodeBlock children={codeExample} language="js" />

<Tooltip tip="多要素認証 (MFA): SMS で送信されるコードなど、username とパスワードに加えて別の要素を使用するユーザー認証プロセス。" cta="用語集を見る" href="/ja/docs/glossary?term=Multi-factor+authentication">多要素認証</Tooltip> (MFA) は、Lock をポップアップモードでアプリケーションに埋め込んで使用している場合はサポートされません。さらに、ポップアップモードは <Tooltip tip="Universal Login: ユーザーの本人確認のために、アプリケーションは Auth0 の認可サーバーでホストされる Universal Login にリダイレクトされます。" cta="用語集を見る" href="/ja/docs/glossary?term=Universal+Login">Universal Login</Tooltip> では動作しません。

複数のアプリケーション間での [シングルサインオン (SSO)](/ja/docs/authenticate/single-sign-on) など、一部の Auth0 機能は、`'{yourDomain}'` に cookie を設定するために、ユーザーを Auth0 にリダイレクトすることを前提としています。

ポップアップモードを使用すると、この cookie を設定するためにポップアップウィンドウが表示されます。プロンプトが不要な場合、このポップアップウィンドウは空白になり、影響を最小限に抑えるために非表示の iframe 内に表示されます。これは、アプリケーションから Auth0 に送信されるクロスオリジンリクエストでは cookie を設定できないためです。

ポップアップウィンドウを表示したくなく、複数のアプリケーション間での <Tooltip tip="シングルサインオン (SSO): ユーザーが 1 つのアプリケーションにログインすると、他のアプリケーションにも自動的にログインできるようにするサービス。" cta="用語集を見る" href="/ja/docs/glossary?term=SSO">SSO</Tooltip> も不要な場合は、Lock または auth0.js の使用時に `sso: false` を設定できます。

```js lines theme={null}
var options = {
  auth: {
    sso: false
  }
}
```