> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-docs-event-stream-action-templates.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) + "*****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 <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

Lockは、2つの異なるモードで機能します。デフォルトモードは**リダイレクトモード** です。このモードでは、ユーザーは、認証のためにリダイレクトされ、その後アプリケーションに戻されます。2番目のモードの**ポップアップモード** では、ポップアップウィンドウにより、ユーザーはアプリケーションを離れることなく、IDプロバイダーで認証できます。

## リダイレクトモード

リダイレクトモードを使用した<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-2" href="/docs/ja-jp/glossary?term=idp" tip="IDプロバイダー（IdP）: デジタルIDを保存および管理するサービス。" cta="用語集の表示">IdP</Tooltip>ボタン（たとえば、Facebook）をクリックすると、すぐに Facebookにリダイレクトされます。リダイレクトモードは、Lockがデフォルトで、ほとんどのユースケースに推奨されるモードです。（たとえばこの例ではFacebookへの）ログインに成功したら、Facebookは（Auth0を通して）ユーザーを再びアプリにリダイレクトします。参考資料のほとんどの例またはサンプルは、リダイレクトモードを採用しています。

## ポップアップモード

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

ポップアップモードのLockの実装は、デフォルトから`リダイレクト`オプションを変更するだけです。

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

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

Lockがポップアップモードで、アプリケーションに埋め込まれているときは、多要素認証（<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=multifactor-authentication" tip="多要素認証（MFA）: ユーザー名とパスワードに加えて、SMS経由のコードなどの要素を使用するユーザー認証プロセス。" cta="用語集の表示">MFA</Tooltip>）がサポートされません。さらに、ポップアップモードは、ユニバーサルログインでは機能しません。

複数アプリケーション間の[シングルサインオン（SSO）](/docs/ja-jp/authenticate/single-sign-on)などのAuth0機能の中には、ユーザーが`'{yourDomain}'`でCookieを設定するために、Auth0にリダイレクトされることに依存しているものもあります。

ポップアップモードを使用する場合、このCookieを設定するためにポップアップウィンドウが表示されます。プロンプトが必要ない場合は、中断を最小限に抑えるために、このポップアップウィンドウは空白で、非表示のiframe（インラインフレーム）内で表示されます。この理由は、アプリケーションからAuth0に送信されたクロスオリジン要求はCookieを設定できないからです。

ポップアップウィンドウを表示したくなく、かつ複数アプリケーション間の<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=single-sign-on" tip="シングルサインオン（SSO）: ユーザーが1つのアプリケーションにログインした後、そのユーザーを他のアプリケーションに自動的にログインさせるサービス。" cta="用語集の表示">SSO</Tooltip>が必要ない場合は、Lockまたはauth0.js使用時に`sso: false`を設定できます。

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