Unity(PC、ウェブ)向けのSDK / ソーシャルログイン
  ドキュメントに戻る

Unity(PC、ウェブ)向けの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. デスクトップアプリケーションの場合:
    1. GetSocialNetworkAuthUrl SDKメソッドを使用して、新規登録/ログインページのURLを取得します。
    2. BrowserHelper.Instance.InAppBrowserメソッドを使用して、サインアップ/ログインページをブラウザで開きます。
    3. URL変更イベントにサブスクライブします。そのためには、BrowserHelper.Instance.InAppBrowser.AddUrlChangeHandler(OnUrlChanged)コールバックを追加します。
    4. ユーザー認証に成功した後のページURLの変化を追跡します。
    5. アクティブページのURLから認証コードを取得します。これを行うには、ParseUtils.TryGetValueFromUrl() SDKヘルパーメソッドを使用できます。
    6. ExchangeCodeToToken SDKメソッドを使用して認証コードをトークンに交換し、エクソーラサーバーへのリクエストで使用します。
お知らせ

このロジックの実装例は、デモプロジェクトAssets/Xsolla.Demo/Login/Scripts/Login/Auth/SocialAuth.csスクリプトにあります。

ソーシャルログインは、外部のブラウザでは利用できません。SDKには、デスクトップアプリケーション用にエクソーラによって開発された組み込みブラウザが含まれています。エクソーラの組み込みブラウザ、またはURLの変更を追跡できる別の組み込みブラウジングソリューションのいずれかを使用できます。

  1. Androidアプリケーションの場合:
    1. AndroidSDKSocialAuthHelperクラスのオブジェクトを作成します。
    2. PerformSocialAuthメソッドを呼び出し、次のパラメータをメソッドに渡します:
      • SocialProvider — ソーシャルネットワークの名前
      • onSuccess — s成功したユーザー認証のコールバック
      • onCancelled — ユーザーが認証コールバックをキャンセルする
      • onError — エラーコールバック
    3. onSuccessコールバックがtokenパラメータで返すトークンを取得し、それをエクソーラサーバーへのリクエストで使用します。
お知らせ
このロジックの実装例は、デモプロジェクトAssets/Xsolla.Demo/Login/Scripts/Login/Auth/AndroidSocialAuth.csスクリプトにあります。
  1. iOSアプリケーションの場合:
    1. IosSDKSocialAuthHelperクラスのオブジェクトを作成します。
    2. PerformSocialAuthメソッドを呼び出し、次のパラメータをメソッドに渡します:
      • SocialProvider — ソーシャルネットワークの名前
      • onSuccess — s成功したユーザー認証のコールバック
      • onCancelled — ユーザーが認証コールバックをキャンセルする
      • onError — エラーコールバック
    3. onSuccessコールバックがLoginOAuthJsonResponseオブジェクトのaccess_tokenフィールドに返すトークンを取得し、エクソーラサーバーへのリクエストで使用します。
お知らせ
このロジックの実装例は、デモプロジェクトAssets/Xsolla.Demo/Login/Scripts/Login/Auth/IosSocialAuth.csスクリプトにあります。
この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
非表示

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

ネイティブ認証は、ユーザーがモバイルデバイスに設定されたソーシャルネットワークアカウントを介してアプリケーションにログインすることを可能にします。

ユーザーが初めてログインすると、ソーシャルネットワーキングアプリケーションが起動し、ユーザー認証の許可を求めます。その後は、ユーザーが何もしなくても自動的に認証が行われます。

現在、SDKは以下のソーシャルネットワーク経由のネイティブ認証を実装しています:

  • Google
  • Facebook
  • WeChat
  • QQ

ネイティブ認証を設定するには:

  1. アプリケーションのインターフェースに、ソーシャルネットワークを介した認証のためのボタンを追加します。
  2. Android用のUnityプロジェクトビルドを作成します。
  3. ソーシャルネットワークの開発者アカウントでアプリケーションの設定を行います:
    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の場合は、あなたのアカウントマネージャーをお問い合わせてください。
  2. Unityプロジェクトのアセットを設定します。
  3. アプリケーション側で認証ロジックを実装します

Android用Unityプロジェクトビルドを作成する

  1. Unityプロジェクトに移動します。
  2. メインメニューでFile > Build settingsをクリックします。
  3. PlatformパネルでAndroidをクリックします。
  4. Buildをクリックします。

ネイティブ認証の設定に関する詳細については、以下のものが必要です:

  • File > Build settingsAndroidプラットフォームを選択後、Inspectorパネル内のPackage Nameフィールドで見つかったパッケージ名。
  • Androidクラス名 — アプリケーションの名前空間(例:com.domain.appname.activity)を含む、主活動のクラス名。クラス名はAndroidManifest.xmlで確認することができます。主活動のタグには、アクションandroid.intent.action.MAINとカテゴリーandroid.intent.category.LAUNCHERを持つintent-filterタグが必要です。
  • Androidハッシュキー。OpenSSLで取得することができます。

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

  1. Facebook開発者アカウントのプロジェクト設定に移動します。
  2. 設定 > 基本に移動します。
  3. プラットフォームを追加をクリックし、Androidを選択します。
  4. Google Playパッケージ名フィールドでUnityプロジェクトのパッケージ名を指定します。
  5. クラス名フィールドでUnityプロジェクトのAndroidクラス名を指定します。
  6. キーハッシュフィールドでUnityプロジェクトのハッシュキーを指定します。
  7. 変更内容を保存をクリックします。

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

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

  1. Google API Consoleに移動します。
  2. 新しいプロジェクトをクリックします。
  3. プロジェクト名場所を指定して保存するをクリックします。
  4. 作成したプロジェクトに移動してサイドメニューでのOAuth同意画面をクリックします。
  5. 外部オプションを選択して作成するをクリックします。
  6. 必要なパラメータを指定して、保存をクリックします。サイドメニューで
  7. 資格情報をクリックします。
  8. Unityアプリ用のOAuth 2.0クライアントを作成します:
    1. 資格情報を作成をクリックして、OAuthクライアントIDを選択します。
    2. アプリケーションタイプフィールドでAndroidを指定します。
    3. 名前を指定します。
    4. パッケージ名フィールドでUnityプロジェクトのパッケージ名を指定します。
    5. SHA-1証明書のフィンガープリントフィールドでUnityプロジェクトのAndroidハッシュキーを指定します。
    6. 作成をクリックします。
    7. 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と秘密鍵の詳しい見つけ方は、パブリッシャーアカウントのソーシャルネットワークカード設定に記載されています。

Unityプロジェクトのアセットをセットアップする

  1. Unityプロジェクトに移動します。
  2. メインメニューでWindow > Xsolla > Edit Settingsをクリックします。
  3. アプリケーションIDを指定します:
    1. Facebook App IDフィールドでのFacebook開発者アカウントからアプリIDを指定します。
    2. Google server IDフィールドでのGoogle API ConsoleからウェブアプリケーションのクライアントIDを指定します。
    3. WeChat App IDフィルドでAppIDをWeChatアプリケーションの設定から指定します。
    4. QQ App IDAppIDフィルドをQQアプリケーションの設定から指定します。

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

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

  • Androidアプリケーションの場合、AndroidSDKSocialAuthHelperのインスタンスを作成し、PerformSocialAuthメソッドを呼び出します。実装例は、デモプロジェクトAssets/Xsolla.Demo/Login/Scripts/Login/Auth/AndroidSocialAuth.csスクリプトで提供されています。
  • iOSアプリケーションの場合、IosSDKSocialAuthHelperのインスタンスを作成し、PerformSocialAuthメソッドを呼び出します。実装例は、デモプロジェクトAssets/Xsolla.Demo/Login/Scripts/Login/Auth/IosSocialAuth.csスクリプトで提供されています。
この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
非表示

お役立ちリンク

最終更新日: 2023年10月10日

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

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