> ## 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.

> Facebookを使ってネイティブアプリにログイン機能を追加する方法を説明します。

# ネイティブアプリにFacebook Loginを追加する

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>;
};

ネイティブアプリケーションにこの機能を追加すると、ユーザーはアプリケーション内で Facebook を使ってネイティブ認証できるようになります。これにはウェブブラウザー経由のリダイレクトは不要で、モバイルアプリケーションを [Facebook Developer Policy](https://developers.facebook.com/policy/) に準拠させることができます。このポリシーでは、モバイルアプリケーションが認証に [Android](https://developers.facebook.com/docs/android) または [iOS](https://developers.facebook.com/docs/ios) 向けの Facebook SDK を使用することを求めています。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Facebook SDK と連携する場合、アプリケーションは Facebook とデータを共有することになります。共有されるデータの内容を十分に理解したうえで、その内容をアプリケーションのプライバシーポリシーに適切に反映してください。SDK を介して Facebook と共有されるデータについて、Auth0 は制御できません。

  Facebook SDK と Facebook Login によって収集されるデータの詳細については、[Facebook GDPR](https://www.facebook.com/business/m/one-sheeters/gdpr-developer-faqs) のページを確認してください。
</Callout>

<div id="how-it-works">
  ## 仕組み
</div>

ネイティブ Facebook ログイン フローの動作は次のとおりです。

* **Step 1**: アプリケーションは Facebook SDK を介してユーザーを認証し、<Tooltip tip="アクセストークン: API へのアクセスに使用される、opaque な文字列または JWT の形式の Authorization 資格情報です。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Access+Token">アクセストークン</Tooltip>を取得します。
* **Step 2**: アプリケーションはそのアクセストークンを使用して、特別な [Facebook Session Info Access Token](https://developers.facebook.com/docs/facebook-login/access-tokens/session-info-access-token) をリクエストします。
* **Step 3**: Facebook SDK を使用して、ユーザープロファイルを取得します。
* **Step 4**: その後、アプリケーションは Facebook Session Info token を使用して Auth0 に認証できます。

<div id="prerequisites">
  ## 前提条件
</div>

Auth0 経由でネイティブアプリの ネイティブ Facebook ログイン を設定する前に、次の準備が必要です。

1. [Facebook を Auth0 の接続として設定する](https://marketplace.auth0.com/integrations/facebook-social-connection)
2. [アプリケーションで適切な Facebook SDK を使用する](https://developers.facebook.com/docs/apis-and-sdks/)
3. [Auth0 Dashboard > アプリケーション > アプリケーション](https://manage.auth0.com/#/applications) に移動し、まだ作成していない場合は Auth0 でアプリケーションを作成します。
4. 設定ページの下部で **Show Advanced Settings** を選択し、次に **Device Settings** ビューを選択します。**ネイティブソーシャルログイン** で、**Enable Sign In with Facebook** トグルを有効にします。

   <Frame>
     <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/5p2RaaeAtZyJzcoCfkF4tW/7326854f031e9c0a70f6b19de9cf9030/Native_Social_Login_-_English.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=04ac5de7d54286604b5961cc24fda2dd" alt="ネイティブソーシャルログインの設定" width="1102" height="494" data-path="docs/images/cdy7uua7fh8z/5p2RaaeAtZyJzcoCfkF4tW/7326854f031e9c0a70f6b19de9cf9030/Native_Social_Login_-_English.png" />
   </Frame>

<div id="implementation">
  ## 実装
</div>

アプリケーション側から見ると、ネイティブ Facebook ログインを使用してユーザープロファイルを認証するプロセスは、4つのステップに分かれます：

<div id="step-1">
  ### ステップ 1
</div>

アプリケーションは Facebook SDK を使用してユーザーを認証します。その後、Facebook からアクセストークンを取得します。

<div id="step-2">
  ## ステップ 2
</div>

アプリケーションは、アクセストークンを使って [Facebook Session Info Access Token](https://developers.facebook.com/docs/facebook-login/access-tokens/session-info-access-token) をリクエストします。

このリクエストは、次のようになります。

```json wrap lines theme={null}
GET https://graph.facebook.com/v5.0/oauth/access_token?grant_type=fb_attenuate_token&client_id=457704041391802&fb_exchange_token=<facebook_access_token>
```

およびレスポンス:

```json lines theme={null}
{
    "access_token": "XAAGgR4b...1lHWNCpqrAhcpoAZDZD",
    "token_type": "bearer",
    "expires_in": 5183924
}
```

<div id="step-3">
  ### ステップ 3
</div>

アプリケーションは Facebook SDK を使用して Facebook からユーザープロファイルを取得する必要があり、その結果、次のようなリクエストが送信されます。

```json wrap lines theme={null}
GET https://graph.facebook.com/v5.0/<facebook user id>?access_token=<facebook access token>&fields=email,name
```

<div id="step-4">
  ### ステップ 4
</div>

その後、アプリケーションは、`facebook-session-access-token` トークンタイプを使用する Token Exchange フローで Auth0 の `/oauth/token` エンドポイントを呼び出し、セッション情報のアクセストークンと Facebook のユーザープロファイルを使って Auth0 で認証できます。問題なく処理されれば、Auth0 は通常の token exchange のレスポンスに加えて、ユーザープロファイルも返します。ユーザープロファイルは、文字列としてエンコードされた JSON オブジェクトである必要があります。

export const codeExample = `POST https://{yourDomain}/oauth/token

grant_type: 'urn:ietf:params:oauth:grant-type:token-exchange'
subject_token_type: 'http://auth0.com/oauth/token-type/facebook-info-session-access-token'
audience: 'your-api'
scope: 'read:appointments openid profile email email_verified'
subject_token: 'XAAGgR4b...1lHWNCpqrUHZAEtUuZAhcpoAZDZD'
client_id: '{yourClientId}'
user_profile: '{"email":"john@example.com", "name":"John Doe"}'`;

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

Auth0 からのレスポンス:

```json lines theme={null}
{
    "access_token": "eyJ0eXA..yXQaPLVXg",
    "id_token": "eyJ0.tFE5HPipdOsA",
    "scope": "openid profile email read:appointments",
    "expires_in": 86400,
    "token_type": "Bearer"
}
```

<div id="user-profile-and-email-validation">
  ## ユーザープロファイルとメールアドレスの検証
</div>

前の例では、Facebook からユーザープロファイルを取得し、それを `/oauth/token` の呼び出しに含める必要がありました。これは、Facebook のセッションアクセストークンではプロファイルを直接取得できず、また [Apple's AppStore Review Guidelines](https://developer.apple.com/app-store/review/guidelines) により、Facebook のアクセストークンをサーバーに直接送信することもできないためです。したがって、この方法ではクライアントで取得して Auth0 に送信する必要があります。

Auth0 は、そのユーザープロファイルが Facebook から返されたものと同一であることを保証できないため、`email_verified` フィールドは `false` に設定されます。

<div id="logout">
  ## ログアウト
</div>

ネイティブのログイン実装では標準的なブラウザベースのフローを利用しないため、アプリケーションの所有者はログアウト処理も適切に行う必要があります。アプリケーションでログアウトを行う必要がある場合は、[Auth0 リフレッシュトークンを取り消す](https://auth0.com/docs/api/authentication#revoke-refresh-token)ことも行う必要があります。

<div id="keep-reading">
  ## さらに読む
</div>

* [iOS Swift でのネイティブ Facebook ログイン](/docs/ja-jp/quickstart/native/ios-swift-facebook-login)
* [Android でのネイティブ Facebook ログイン](/docs/ja-jp/quickstart/native/android-facebook-login)
* [ネイティブソーシャルログインのレート制限](/docs/ja-jp/troubleshoot/customer-support/operational-policies/rate-limit-policy)