ソーシャルログイン
アプリケーションでは、ソーシャルネットワークのアカウントを使用したユーザー認証を実装することができます。ユーザーの最初のログインがソーシャルネットワーク経由の場合、新しいアカウントが自動的に作成されます。ユーザーは、ユーザー名やメールアドレスなどのデータを入力する必要がありません。
ソーシャルネットワークを利用した認証の実装には、2つの方法があります:
- Webベース認証。この場合、アプリケーションはブラウザでフォームを開き、選択したソーシャルネットワークを介して認証を完了させます。このオプションは、モバイルとデスクトップの両方のアプリケーションに適しています。
- ネイティブ認証。この場合、認証はユーザーのデバイス上のソーシャルネットワークアプリケーションを介して実行されます。このオプションは、モバイルアプリケーションにのみ適しています。
ソーシャルログインは、アプリケーションの主要な認証方法として、または代替の認証方法として使用することができます。
代替の認証方法としてソーシャルログインを使用する場合、以下の条件を満たすと、ソーシャルネットワークのアカウントは自動的に既存のユーザーアカウントに紐付けられます:
- ユーザー名/メールアドレスとパスワードでサインアップしたユーザーが、ソーシャルネットワークアカウントを介してアプリケーションにログインしました。
- ソーシャルネットワークでは、メールアドレスを返します。
- ソーシャルネットワーク上のユーザーのメールアドレスと、アプリケーションでサインアップに使用したメールアドレスが一致します。
ソーシャルネットワークアカウントの手動リンクを実装することもできます。
ハウツー
SDKは、ソーシャルログインのために以下のプロバイダーをサポートしています:
- Amazon
- Apple
- Baidu
- Battle.net
- Discord
- GitHub
- Kakao
- MSN
- Mail.ru
- Microsoft
- Naver
- Odnoklassniki
- PayPal
- Steam
- Twitch.tv
- VK
- Vimeo
- Xbox Live
- Yahoo
- Yandex
- YouTube
ウェブサービスによる認証を設定するには:
- アプリケーションのインターフェースに、ソーシャルネットワーク経由の認証のボタンを追加します。
- アドミンページでログインプロジェクトにソーシャルコネクションをセットアップします。
- アプリケーション側で認証ロジックを実装します。
エクソーラアドミンページでログインプロジェクトのソーシャルコネクションを設定します
- アドミンページでプロジェクトを開きます。
- サイドメニューで「ログイン」をクリックします。
- ログインプロジェクトのパネルで「構成する」をクリックします。
- 「認証」ブロックに移動し、「ソーシャルログイン」セクションを選択します。
- ユーザーがアプリケーションへのサインアップやログインに使用できるソーシャルネットワークを接続します:
- ソーシャルネットワークに接続するには、⚙ アイコンをクリックし、接続するを選択します。
- 複数のソーシャルネットワークを一度に接続するには、必要なペインを選択します(枠線が緑色になる)。それで、管理ドロップダウンメニューから、接続するを選択します。
- 利用可能なすべてのソーシャルネットワークを接続するには、すべて選択をクリックします。それで、管理ドロップダウンメニューから、接続するを選択します。
アプリケーション側で統合する
ソーシャルログインボタンをクリックした際に、以下のロジックを実装します:
AuthenticateViaSocialNetwork
SDKメソッドを使用して新規登録/ログインページを開きます。SuccessCallback
、ErrorCallback
、CancelCallback
イベントにサブスクライブします。LoginData
パラメータから、またはGetLoginData
メソッドを呼び出してトークンを取得し、エクソーラサーバーへのリクエストで使用します。
SuccessCallback
関数はLoginData
パラメータで認証トークンを返します。トークンはGetLoginData
メソッドでローカルにキャッシュされます。このロジックの実装例は、デモプロジェクトのBP_LoginController
ブループリントにあります。
ネイティブ認証では、ソーシャルネットワークのアカウントを使用するインストール済みのアプリケーションを介して、プレイヤーがアプリケーションにログインすることができます。現在、SDKでは、以下のソーシャルネットワークを経由したネイティブ認証が実装されています:
ネイティブ認証を構成するには:
- アプリケーション インターフェースに、ソーシャル ネットワーク経由の認証用ボタンを追加します。
- Android用のUnreal Engineプロジェクトのビルドを作成します。
- ソーシャルネットワークの開発者アカウントでアプリケーションの設定を行います:
- Facebookによる認証の場合:
- 登録して、新しいアプリケーションを作成します。
- Facebook開発者アカウントで、アプリケーションページを設定します。
- Googleによる認証の場合:Google API Consoleでプロジェクトを設定します。
- WeChatによる認証の場合:
- 登録して、新しいアプリケーションを作成します。
- 審査のためにアプリケーションを提出してください。
- QQによる認証の場合:
- 登録して、新しいアプリケーションを作成します。
- 審査のためにアプリケーションを提出してください。
- Facebookによる認証の場合:
- エクソーラ側でソーシャルネットワークによる認証を設定します:
- FacebookとGoogleの場合は、アドミンページでソーシャルコネクションを設定します。
- WeChatとQQの場合は、カスタマーサクセスマネージャーまでお問い合わせるか、csm@xsolla.comに電子メールを送信してください。
- Unreal EngineプロジェクトのSDKを設定します。
- アプリケーション側で認証ロジックを実装します。
Facebook開発者アカウントでアプリケーションページをセットアップする
- Facebook開発者アカウントのプロジェクト設定に移動します。
- 設定>基本に移動します。
- プラットフォームを追加するをクリックし、Androidを選択します。
- 、Google Playパッケージ名フィールドでのAndroidアプリケーションのパッケージ名を指定します。
- クラス名フィールド(デフォルト値は
com.epicgames.ue4.GameActivity
)でのアクティビティの完全修飾クラス名を指定します。 - キーハッシュフィールドでハッシュキーを生成して指定します。
- 変更を保存するをクリックします。
さらにネイティブ認証を構成するには、以下のものが必要です:
- 「設定 > 基本」セクションのプロジェクト設定にある「アプリID」と「アプリシークレット」が必要です。
- 「設定 > 高級 > セキュリティ」セクションでのプロジェクト設定にある「クライアントトークン」。
Google API Consoleでプロジェクトをセットアップする
- Google API Consoleに移動します。
- 新しいプロジェクトをクリックします。
- プロジェクト名と場所を指定して保存するをクリックします。
- 作成したプロジェクトに移動してサイドメニューでのOAuth同意画面をクリックします。
- 外部オプションを選択して作成するをクリックします。
- 必要なパラメータを指定して、保存をクリックします。サイドメニューで
- 資格情報をクリックします。
- Androidアプリ用のOAuth 2.0クライアントを作成します:
- 資格情報を作成するをクリックして、OAuthクライアントIDを選択します。
- アプリケーションタイプフィールドでAndroidを指定します。
- 名称を指定します。
- パッケージ名フィールドであなたのAndroidアプリケーションのパッケージ名を指定します。
- SHA-keyを取得します。
- SHA-1証明書のフィンガープリントフィールドで前の手順で生成されたSHAキーを指定します。
- 作成するをクリックします。
- OKをクリックします。
- Webアプリケーション用のOAuth 2.0クライアントを作成します:
- 資格情報を作成するをクリックして、OAuthクライアントIDを選択します。
- アプリケーションタイプフィールドでウェブアプリケーションを指定します。
- 名称を指定します。
- 許可されたリダイレクトURIセクションでURIを追加するをクリックして、
https://login.xsolla.com/api/social/oauth2/callback
URIを指定します。 - 作成するクリックします。
- OKクリックします。
さらにネイティブ認証の設定を行うには、ウェブアプリケーションのクライアントIDの設定にあるクライアントIDとクライアントシークレットが必要です。
エクソーラアドミンページでログインプロジェクトのソーシャルコネクションを設定します
- アドミンページでプロジェクトを開きます。
- サイドメニューで「ログイン」をクリックします。
- ログインプロジェクトのパネルで「構成する」をクリックします。
- 「認証」ブロックに移動し、「ソーシャルログイン」セクションを選択します。
- ソーシャルネットワークを設定するには、ソーシャルネットワークカードで、タイトルの右にある⚙アイコンをクリックし、接続を選択します。
Unreal EngineプロジェクトのSDKをセットアップする
- Unreal Engineプロジェクトに移動します。
Settings > Project Settings > Plugins > Xsolla Settings > Android に移動します。- アプリケーションIDを指定します:
Facebook App Id フィルドでFacebook開発者アカウントからの「アプリID」を指定します。Facebook Client Token フィールドで、Facebook開発者アカウントからの「クライアントトークン」を指定します。Google App Id フィールドに、Google API Consoleからウェブアプリケーションの「クライアントID」を指定します。We Chat App Id フィールドにWeChatアプリケーションの設定からAppIDを指定します。QQ App Id フィールドに、QQアプリケーションの設定からAppIDを指定します。
アプリケーション側で統合する
ソーシャルログインボタンをクリックすると、LaunchNativeSocialAuthentication
メソッド呼び出しを実装します。実装例は、デモプロジェクトのBP_LoginController
コントローラーのAuthenticateViaSocialNetwork
メソッドで提供されています。
お役立ちリンク
最終更新日: 2024年1月22日誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。