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

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

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

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を使用して認証できるようにすることができます。これにより、Webブラウザ経由のリダイレクトは必要なくなり、モバイルアプリケーションは[Facebook開発者ポリシー](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とデータを共有します。どのデータが共有されるかを理解して、それを必ずアプリケーションのプライバシーポリシーに反映させるようにしてください。Auth0では、SDKを介してFacebookと共有されるデータの種類を制御できません。

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

## 仕組み

ネイティブ Facebook ログインフローは次のように機能します：

* **ステップ 1** ：アプリケーションはFacebook SDKを介してユーザーを認証し、アクセストークンを取得します。
* **ステップ 2** ：アプリケーションはそのアクセストークンを使用して、特別な[Facebookセッション情報アクセストークン](https://developers.facebook.com/docs/facebook-login/access-tokens/session-info-access-token)を要求します。
* **ステップ 3** ：Facebook SDKを使用してユーザーのプロファイルを取得します。
* **ステップ 4** ：その後、アプリケーションはFacebookセッション情報トークンを使用して Auth0で認証できます。

## 前提条件

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>Applications>Applications](https://manage.auth0.com/#/applications)へ移動し、Auth0を使用してアプリケーションを作成します（まだ作成していない場合）。
4. 設定ページの下部で、 **［Show Advanced Settings（詳細設定を表示）］** を選択し、 **［Device Settings（デバイス設定）］** ビューを選択します。 **［Native Social Login（ネイティブ ソーシャル ログイン）］** の下で、 **［Enable Sign In with Facebook（Facebookサインインを有効にする）］** トグルを有効にします。

   <Frame>
     <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/ja-jp/cdy7uua7fh8z/5p2RaaeAtZyJzcoCfkF4tW/b418aeca09ddbc9ea87f3eceef853b7c/Native_Social_Login_-_Japanese.png" alt="ネイティブソーシャルログイン設定" />
   </Frame>

## 実装

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

### ステップ1

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

## ステップ2

アプリケーションはアクセストークンを使用して[FacebookFacebookセッション情報アクセストークン](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
}
```

### ステップ3

アプリケーションは、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
```

### ステップ4

その後、アプリケーションは、`facebook-session-access-token`トークンタイプでトークン交換フローを使用して Auth0の`/oauth/token`エンドポイントを呼び出すことにより、セッション情報アクセストークンと Facebookユーザープロファイルを使用してAuth0で認証できます。すべてがうまくいけば、Auth0はユーザープロファイルを追加した通常の応答を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"
}
```

## ユーザープロフィールとメールの検証

先ほどの例では、Facebookからユーザープロファイルを取得し、それを`/oauth/token` Apple のAppStoreレビューガイドラインにより、Facebookアクセス トークンをサーバーに直接送信することもできないためです。したがって、クライアントで取得し、この方法でAuth0に送信する必要があります。

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

## ログアウト

ネイティブログイン実装では標準のブラウザベースのフローが使用されないため、アプリケーション所有者はログアウトを適切に実行するように注意する必要があります。アプリケーションがログアウトを実行する必要がある場合は、[Auth0リフレッシュトークンも取り消す](/docs/ja-jp/api/authentication#revoke-refresh-token)必要があります。

## 続きもお読みください

* [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)