> ## Documentation Index
> Fetch the complete documentation index at: https://sequence-0fb8d9e6-codex-update-discord-invite.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Google & Appleでサインイン

> Social Sign Inの使い方や、Browser PluginとSequenceのUnreal SDKを使ってIdトークンを取得する方法をご紹介します。

<Steps>
  <Step title="GoogleまたはAppleのIdトークンを取得">
    まずは`Get Google Token Id`関数を呼び出します。iOSやAndroidの場合は、ネイティブプラグインを利用してidトークンを管理し、処理完了後に`IdTokenReceived`イベントが呼ばれます。MacやWindowsで開発・ビルドする場合は、Browser PluginでSign In Urlを処理する必要があります。

    <Frame>
      <img src="https://mintcdn.com/sequence-0fb8d9e6-codex-update-discord-invite/FTpX4UAFpHQ_Qb4p/images/unreal/guides/social_signin/get_token.png?fit=max&auto=format&n=FTpX4UAFpHQ_Qb4p&q=85&s=ae355cbe807c3dd114da78eb24ab6905" width="1628" height="826" data-path="images/unreal/guides/social_signin/get_token.png" />
    </Frame>
  </Step>

  <Step title="Browser pluginでURLを読み込む">
    Browserオブジェクトを作成し、`Sign In Url`を読み込みます。

    <Frame>
      <img src="https://mintcdn.com/sequence-0fb8d9e6-codex-update-discord-invite/FTpX4UAFpHQ_Qb4p/images/unreal/guides/social_signin/load_url.png?fit=max&auto=format&n=FTpX4UAFpHQ_Qb4p&q=85&s=e6f8eedfc55632d449facc5d5d91befe" width="1998" height="956" data-path="images/unreal/guides/social_signin/load_url.png" />
    </Frame>
  </Step>

  <Step title="URLの変化を監視する">
    AppleやGoogleからIdトークンを取得するには、Url文字列の変化を監視する必要があります。
    サインイン処理中にidトークンがUrl内に含まれるため、これを抽出するための追加関数が必要です。

    <Frame>
      <img src="https://mintcdn.com/sequence-0fb8d9e6-codex-update-discord-invite/FTpX4UAFpHQ_Qb4p/images/unreal/guides/social_signin/listen_to_url_changes.png?fit=max&auto=format&n=FTpX4UAFpHQ_Qb4p&q=85&s=cb93e6f44b6fc143836cc30e9b597cb8" width="1972" height="920" data-path="images/unreal/guides/social_signin/listen_to_url_changes.png" />
    </Frame>
  </Step>

  <Step title="URLからidトークンを抽出">
    Urlからidトークンを抽出するためのヘルパー関数をいくつか統合しましょう。

    **Url to Map:** Urlのクエリパラメータを文字列-to-文字列のマップに変換します。

    <Frame>
      <img src="https://mintcdn.com/sequence-0fb8d9e6-codex-update-discord-invite/FTpX4UAFpHQ_Qb4p/images/unreal/guides/social_signin/url_to_map.png?fit=max&auto=format&n=FTpX4UAFpHQ_Qb4p&q=85&s=ebd8639e29e408055bc060f7e90500eb" width="3148" height="878" data-path="images/unreal/guides/social_signin/url_to_map.png" />
    </Frame>

    **Token from Url:** マップを使って`id_token`値が存在するか確認し、あれば返します。

    <Frame>
      <img src="https://mintcdn.com/sequence-0fb8d9e6-codex-update-discord-invite/FTpX4UAFpHQ_Qb4p/images/unreal/guides/social_signin/token_from_url.png?fit=max&auto=format&n=FTpX4UAFpHQ_Qb4p&q=85&s=ce14a82caab93b4499d973f70b335988" width="3152" height="1098" data-path="images/unreal/guides/social_signin/token_from_url.png" />
    </Frame>
  </Step>

  <Step title="セッションの作成">
    最後に、idトークンが取得できたか確認し、その値を使って`Start Oidc Session`でセッションを作成します。

    <Frame>
      <img src="https://mintcdn.com/sequence-0fb8d9e6-codex-update-discord-invite/FTpX4UAFpHQ_Qb4p/images/unreal/guides/social_signin/start_session.png?fit=max&auto=format&n=FTpX4UAFpHQ_Qb4p&q=85&s=b5fe98a831f79fe392aefdcf8d5cfae8" width="2842" height="1096" data-path="images/unreal/guides/social_signin/start_session.png" />
    </Frame>
  </Step>
</Steps>