Unreal Engine向けのSDK / ソーシャルログイン
  ドキュメントに戻る

Unreal Engine向けのSDK

ソーシャルログイン

アプリケーションでは、ソーシャルネットワークのアカウントを使用したユーザー認証を実装することができます。ユーザーの最初のログインがソーシャルネットワーク経由の場合、新しいアカウントが自動的に作成されます。ユーザーは、ユーザー名やメールアドレスなどのデータを入力する必要がありません。

ソーシャルネットワークを利用した認証の実装には、2つの方法があります:

  • Webベース認証。この場合、アプリケーションはブラウザでフォームを開き、選択したソーシャルネットワークを介して認証を完了させます。このオプションは、モバイルとデスクトップの両方のアプリケーションに適しています。
  • ネイティブ認証。この場合、認証はユーザーのデバイス上のソーシャルネットワークアプリケーションを介して実行されます。このオプションは、モバイルアプリケーションにのみ適しています。

お知らせ
iOSアプリケーションのユーザーをApple ID、Face ID、Touch IDで認証するには、ウェブベースの認証を実装します。この場合、SDKメソッドは、iOS用のネイティブライブラリを使用します。

ソーシャルログインは、アプリケーションの主要な認証方法として、または代替の認証方法として使用することができます。

代替の認証方法としてソーシャルログインを使用する場合、以下の条件を満たすと、ソーシャルネットワークのアカウントは自動的に既存のユーザーアカウントに紐付けられます:

  • ユーザー名/メールアドレスとパスワードでサインアップしたユーザーが、ソーシャルネットワークアカウントを介してアプリケーションにログインしました。
  • ソーシャルネットワークでは、メールアドレスを返します。
  • ソーシャルネットワーク上のユーザーのメールアドレスと、アプリケーションでサインアップに使用したメールアドレスが一致します。

ソーシャルネットワークアカウントの手動リンクを実装することもできます。

ハウツー

高度な設定については、ハウツーをご覧ください。

ソーシャルネットワーク経由でWebベース認証を設定する方法

SDKは、ソーシャルログインのために以下のプロバイダーをサポートしています:

  • Amazon
  • Apple
  • Baidu
  • Battle.net
  • Discord
  • Facebook
  • GitHub
  • Google
  • Kakao
  • LinkedIn
  • MSN
  • Mail.ru
  • Microsoft
  • Naver
  • Odnoklassniki
  • PayPal
  • QQ
  • Reddit
  • Steam
  • Twitch.tv
  • Twitter
  • VK
  • Vimeo
  • WeChat
  • Weibo
  • Xbox Live
  • Yahoo
  • Yandex
  • YouTube

ウェブサービスによる認証を設定するには:

  1. アプリケーションのインターフェースに、ソーシャルネットワーク経由の認証のボタンを追加します。
  2. アドミンページでログインプロジェクトにソーシャルコネクションをセットアップします
  3. アプリケーション側で認証ロジックを実装します

エクソーラアドミンページでログインプロジェクトのソーシャルコネクションを設定します

注意
アドミンページで、アプリケーションで使用するログインプロジェクトにクラシック ログインソーシャルログインのオプションが選択されていることを確認します。ログイン方法を変更するリンクをクリックすると、後でログイン方法を変更することができます。以前に保存した設定は失われません。
  1. アドミンページでプロジェクトを開きます。
  2. サイドメニューで「ログイン」をクリックします。
  3. ログインプロジェクトのパネルで「構成する」をクリックします。
  4. 認証」ブロックに移動し、「ソーシャルログイン」セクションを選択します。

  1. ユーザーがアプリケーションへのサインアップやログインに使用できるソーシャルネットワークを接続します:

    • ソーシャルネットワークに接続するには、⚙ アイコンをクリックし、接続するを選択します。
    • 複数のソーシャルネットワークを一度に接続するには、必要なペインを選択します(枠線が緑色になる)。それで、管理ドロップダウンメニューから、接続するを選択します。
    • 利用可能なすべてのソーシャルネットワークを接続するには、すべて選択をクリックします。それで、管理ドロップダウンメニューから、接続するを選択します。
お知らせ
エクソーラのアプリケーションIDとシークレットキーは、デフォルトで認証に使用されます。ソーシャルプロバイダの開発者アカウントを使用してアプリケーションを設定する場合は、独自のアプリケーションIDと秘密鍵を指定することができます。アプリケーションIDと秘密鍵の詳しい探し方は、アドミンページのソーシャルネットワークカードの設定に記載されています。

アプリケーション側で統合する

ソーシャルログインボタンをクリックした際に、以下のロジックを実装します:

  1. AuthenticateViaSocialNetwork SDKメソッドを使用して新規登録/ログインページを開きます。
  2. SuccessCallbackErrorCallbackCancelCallbackイベントにサブスクライブします。
  3. LoginDataパラメータから、またはGetLoginDataメソッドを呼び出してトークンを取得し、エクソーラサーバーへのリクエストで使用します。
お知らせ
認証が成功すると、SuccessCallback関数はLoginDataパラメータで認証トークンを返します。トークンはGetLoginDataメソッドでローカルにキャッシュされます。

このロジックの実装例は、デモプロジェクトBP_LoginControllerブループリントにあります。

この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
非表示

ソーシャルネットワーク経由でネイティブ認証を設定する方法

ネイティブ認証では、ソーシャルネットワークのアカウントを使用するインストール済みのアプリケーションを介して、プレイヤーがアプリケーションにログインすることができます。現在、SDKでは、以下のソーシャルネットワークを経由したネイティブ認証が実装されています:

  • Google
  • Facebook
  • WeChat
  • QQ

ネイティブ認証を構成するには:

  1. アプリケーション インターフェースに、ソーシャル ネットワーク経由の認証用ボタンを追加します。
  2. Android用のUnreal Engineプロジェクトのビルドを作成します

お知らせ
さらにネイティブ認証を設定するには、Android Package Name (‘com.YourCompany.Project’ [PROJECT] is replaced with project name)フィールドでのEdit > Project Settings > Platforms > AndroidセクションにあるAndroidアプリケーションのパッケージ名が必要です。
  1. ソーシャルネットワークの開発者アカウントでアプリケーションの設定を行います:
    1. Facebookによる認証の場合:
      1. 登録して、新しいアプリケーションを作成します。
      2. Facebook開発者アカウントで、アプリケーションページを設定します。
    2. Googleによる認証の場合:Google API Consoleでプロジェクトを設定します。
    3. WeChatによる認証の場合:
      1. 登録して、新しいアプリケーションを作成します。
      2. 審査のためにアプリケーションを提出してください。
    4. QQによる認証の場合:
      1. 登録して、新しいアプリケーションを作成します。
      2. 審査のためにアプリケーションを提出してください。
  1. エクソーラ側でソーシャルネットワークによる認証を設定します:
    1. FacebookとGoogleの場合は、アドミンページでソーシャルコネクションを設定します。
    2. WeChatとQQの場合は、カスタマーサクセスマネージャーまでお問い合わせるか、csm@xsolla.comに電子メールを送信してください。
  2. Unreal EngineプロジェクトのSDKを設定します。
  3. アプリケーション側で認証ロジックを実装します

Facebook開発者アカウントでアプリケーションページをセットアップする

  1. Facebook開発者アカウントのプロジェクト設定に移動します。
  2. 設定>基本に移動します。
  3. プラットフォームを追加するをクリックし、Androidを選択します。
  4. Google Playパッケージ名フィールドでのAndroidアプリケーションのパッケージ名を指定します。
  5. クラス名フィールド(デフォルト値はcom.epicgames.ue4.GameActivity)でのアクティビティの完全修飾クラス名を指定します。
  6. キーハッシュフィールドでハッシュキーを生成して指定します。
  7. 変更を保存するをクリックします。

さらにネイティブ認証を構成するには、以下のものが必要です:

  • 設定 > 基本」セクションのプロジェクト設定にある「アプリID」と「アプリシークレット」が必要です。
  • 設定 > 高級 > セキュリティ」セクションでのプロジェクト設定にある「クライアントトークン」。

Google API Consoleでプロジェクトをセットアップする

  1. Google API Consoleに移動します。
  2. 新しいプロジェクトをクリックします。
  3. プロジェクト名場所を指定して保存するをクリックします。
  4. 作成したプロジェクトに移動してサイドメニューでのOAuth同意画面をクリックします。
  5. 外部オプションを選択して作成するをクリックします。
  6. 必要なパラメータを指定して、保存をクリックします。サイドメニューで
  7. 資格情報をクリックします。
  8. Androidアプリ用のOAuth 2.0クライアントを作成します:

    1. 資格情報を作成するをクリックして、OAuthクライアントIDを選択します。
    2. アプリケーションタイプフィールドでAndroidを指定します。
    3. 名称を指定します。
    4. パッケージ名フィールドであなたのAndroidアプリケーションのパッケージ名を指定します。
    5. SHA-keyを取得します。
    6. SHA-1証明書のフィンガープリントフィールドで前の手順で生成されたSHAキーを指定します。
    7. 作成するをクリックします。
    8. OKをクリックします。

  1. Webアプリケーション用のOAuth 2.0クライアントを作成します:
    1. 資格情報を作成するをクリックして、OAuthクライアントIDを選択します。
    2. アプリケーションタイプフィールドでウェブアプリケーションを指定します。
    3. 名称を指定します。
    4. 許可されたリダイレクトURIセクションでURIを追加するをクリックして、https://login.xsolla.com/api/social/oauth2/callback URIを指定します。
    5. 作成するクリックします。
    6. OKクリックします。

さらにネイティブ認証の設定を行うには、ウェブアプリケーションのクライアントIDの設定にあるクライアントIDクライアントシークレットが必要です。

エクソーラアドミンページでログインプロジェクトのソーシャルコネクションを設定します

注意
アドミンページで、アプリケーションで使用するログインプロジェクトにクラシック ログインソーシャルログインのオプションが選択されていることを確認します。ログイン方法を変更するリンクをクリックすると、後でログイン方法を変更することができます。以前に保存した設定は失われません。
  1. アドミンページでプロジェクトを開きます。
  2. サイドメニューで「ログイン」をクリックします。
  3. ログインプロジェクトのパネルで「構成する」をクリックします。
  4. 認証」ブロックに移動し、「ソーシャルログイン」セクションを選択します。
  1. ソーシャルネットワークを設定するには、ソーシャルネットワークカードで、タイトルの右にある⚙アイコンをクリックし、接続を選択します。
お知らせ
ソーシャルネットワーク認証を使用するには、ソーシャルネットワークカードの設定で、プロジェクト内のアプリケーションのアプリケーションIDと秘密鍵を指定してください。アプリケーションIDと秘密鍵は、ソーシャルプロバイダーの開発者アカウントから入手できます。アプリケーションIDと秘密鍵の詳しい見つけ方は、アドミンページのソーシャルネットワークカード設定に記載されています。

Unreal EngineプロジェクトのSDKをセットアップする

  1. Unreal Engineプロジェクトに移動します。
  2. Settings > Project Settings > Plugins > Xsolla Settings > Androidに移動します。
  3. アプリケーションIDを指定します:
    1. Facebook App IdフィルドでFacebook開発者アカウントからの「アプリID」を指定します。
    2. Facebook Client Tokenフィールドで、Facebook開発者アカウントからの「クライアントトークン」を指定します。
    3. Google App Idフィールドに、Google API Consoleからウェブアプリケーションの「クライアントID」を指定します。
    4. We Chat App IdフィールドにWeChatアプリケーションの設定からAppIDを指定します。
    5. QQ App Idフィールドに、QQアプリケーションの設定からAppIDを指定します。

アプリケーション側で統合する

ソーシャルログインボタンをクリックすると、LaunchNativeSocialAuthenticationメソッド呼び出しを実装します。実装例は、デモプロジェクトBP_LoginControllerコントローラーのAuthenticateViaSocialNetworkメソッドで提供されています。

この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
非表示

お役立ちリンク

最終更新日: 2024年1月22日

誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!