Epic Online Servicesのサンプルプロジェクトでユーザーログインをする方法【v1.6】

日本時間の2020年5月14日より、[Epic Online Services](https://dev.epicgames.com/ja/services?lang=ja)(以下EOSと記載)がついにEpic Games Store以外のプラットフォームに接続できるようになり、全デベロッパーに機能公開されました！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Epic Online Servicesを全てのデベロッパーに解放します<br>現在対応しているプラットフォームは、PlayStation / Xbox / Nintendo Switch / PC / Mac ですが、まもなく iOS / Android のサポートも追加されます<br><br>たった 1 つの SDK に全ての機能が含まれています。しかも無料です <a href="https://t.co/HmLFSYUGxS">https://t.co/HmLFSYUGxS</a></p>&mdash; アンリアルエンジン (@UnrealEngineJP) <a href="https://twitter.com/UnrealEngineJP/status/1260589697451114498?ref_src=twsrc%5Etfw">May 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

過去、少しだけEOSを触ってサーバーにログインできるか試したことがあるのですが、Epic Games StoreのDevelperページにある、以下の重要な項目を設定する部分が隠蔽されていたため、どう頑張ってもログインができませんでした。

・ClientCredentialsのId
・ClientCredentialsのSecret key

EOSに接続するにはClient Credentialsを設定する必要があり、Epic Games Storeのデベロッパーにならなければ、サンプルでEOSに接続するのが不可能でした。
それが本日解禁されたので、やっと全デベロッパーがサンプルを動かすことが可能になりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/6f1f5ab2-19c8-ad7e-f6ff-9ec148761b0f.png)

早速Epicアカウントを使い、EOSにログインするまでは成功しました。
その時にやった内容を記載します。

#EOSサンプルプロジェクトでログインするのに必要なもの

・Epic Gamesアカウント
・EOS SDK（C++ or C#）
・VisualStudio2017以降
・Windows 10（MacとLinuxは未検証のため、サンプルが動作するか不明）

#今回記載すること

・EOS SDKのダウンロード
・EOS DashboardのProduct登録
・EOSサンプルの設定
・DevToolの簡単な使い方

#記載しないこと

・Epic Gamesアカウントの登録

**Epic Gamesアカウントが必要**なため、アカウント登録が諸事情によりできない、という方はEOSを使うのは難しいです。
アカウントを持っていない方は[サインインページのサインアップ](https://www.epicgames.com/id/login?productName=epic-games&lang=ja&redirectUrl=https%3A%2F%2Fwww.epicgames.com%2Fsite%2Fja%2Fhome&client_id=5a6fcd3b82e04f8fa0065253835c5221&noHostRedirect=true)からアカウントを登録してください。

・Epic Online Servicesの登録～Dashboard表示まで

[Epic Online Services](https://dev.epicgames.com/ja/services?lang=ja)のトップページにある「今すぐ始める」を押して必要な情報を入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/e35a072e-d416-2d05-0958-e5768e3b5c24.png)

以下のようにDashboardページが表示されれば登録成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/b257c295-c92a-9ebc-4819-71b15d19a810.png)

・Mac or Linuxでのログイン

今回はWindows 10で検証しています。
Mac、Linuxでサンプルプロジェクトを使用してEOSにログインができるかは未検証です。

# EOSにログインする

Dashboardが表示されたら、早速サンプルを使ってEOSにログインしましょう

## EOS SDKをダウンロードする

Dashboardのトップページに「DOWNLOAD SDK」があるので押してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/f5553de5-feba-8b33-6f92-654a1aae3f57.png)

C++、もしくはC#のどちらか好きなSDKをダウンロードしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/43e472c5-23d0-e0bd-1a55-cdc2510d2456.png)

※今回使用したのは**C++**のSDKになります。

Zipファイルがダウンロードされるので、好きなディレクトリで解凍してください。

## EOS SDKのサンプルプロジェクトを起動

解凍終了後、Samplesフォルダにある「Samples.sln」をダブルクリックして起動してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/ee84178e-9311-6d58-7f4e-22de7ba7ecd2.png)

プロジェクトが起動したら、Dashboardに接続テスト用のProductを作成します。

## Product作成

Dashboardに戻り、Create Productを押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/27758a37-3cd9-615c-6503-1906abaabb33.png)

Productの名前は適当で問題ありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/90c7bcb6-9f0e-0110-a38f-98ecdb250edf.png)


今回はサンプルの接続テスト目的なので、Cover Imageの登録はスキップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/fbf44933-0a5a-7fe9-54b4-2e23c6c8ada2.png)

以下の画像のように、作成したProductが表示されていれば成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/d5428075-48b4-b105-0c71-71dd86d9f41e.png)

## Product Settings登録

Productが登録できたら、早速EOSへ接続するための設定を行います。

登録したProductをクリック後、「Product Settings」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/7f57e417-2786-1d7a-bdb3-cd867097bfb4.png)

ここから、「**5/13以前に登録したProduct**」と「**5/14以降に登録したProduct**」で微妙に設定内容が変わります。

### 5/13以前に登録したProduct Settings

5/13以前に登録したProductのSettingsになります。

#### 1.Sandboxes登録

5/13以前に登録したProductは**Epic Games Store専用サーバーだった**影響か、以下の３つの環境が用意されています。

・Live
・Dev
・Staging

今回のサンプルで使用するEpic Gamesアカウントは「**Live**」サーバーに登録されたアカウントなので、Live項目のDEPLOYMENTSボタンを押してください。

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/2ae4e9ad-85b9-9434-4545-dc53fd6a89c1.png)

Live Sandbox Deploymentsに何も登録されていない場合、NEW DEPLOYMENTボタンを押してください。

![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/0a49a800-a9e6-10c8-2258-1dccd6f2c0f8.png)
※画像はDeployments登録済の状態です。

名前は適当で問題ありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/2081092a-7b18-c1c6-f65a-6bc7d55f6e28.png)

名前入力後、SAVEボタンを押してDeploymentsが作成されているか確認してください。

#### 2.Client Credentials登録

Client CredentialsにあるNEW CLIENT（青いボタン）をクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/3e0775b0-f402-fdae-319c-6b0c427d27ab.png)

New clientのページが表示されるので、Client Nameに適当な名前を入力して、SAVEボタンを押してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/7c24a9e0-5dd7-a229-4e5e-44b660750e78.png)

登録した内容が表示されるのを確認してください。

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/aa3f178c-97b5-7e7d-410d-bbc9d6fc4391.png)


### 5/14以降に登録したProduct Settings

5/14以降に登録したProductは少しだけ変更が加えられています。

#### 1.Sandboxes確認

5/14以降に登録したProductは**Liveのみ**となります。

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/d22c3b1a-df99-b983-df1a-2e918f42b8c4.png)

Live Sandbox Deploymentsも初期値がすでに設定済みです。

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/a9a76268-b8c8-40bb-3e80-9278efdb976d.png)

**サンプルプロジェクトでEOS接続確認する**のであれば、Sandboxは値の確認だけで済むようになりました。

#### 2.Client Credentials登録

※5/13以前と同一内容になります。

Client CredentialsにあるNEW CLIENT（青いボタン）をクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/3e0775b0-f402-fdae-319c-6b0c427d27ab.png)

New clientのページが表示されるので、Client Nameに適当な名前を入力して、SAVEボタンを押してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/7c24a9e0-5dd7-a229-4e5e-44b660750e78.png)

登録した内容が表示されるのを確認してください。

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/aa3f178c-97b5-7e7d-410d-bbc9d6fc4391.png)

## Epic Account Services登録（任意）
Account Portalを使用したログインを使う場合、Epic Account Servicesにあるアプリケーション登録をする必要があります。

CONFIGUREボタンを押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/934d822a-f3db-1c36-16ea-7041d2c11359.png)

### BRAND SETTINGS

Appclication NameとPrivacy Policy URLを入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/0f6045c7-6e4f-f20d-1524-5d6c014bbb51.png)

今回はログインのテストで使用するだけなので、Privacy PolicyのURLは適当で問題ありません。

入力が終了したら下のSAVE DRAFTボタンを押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/8a3a2818-3b58-d8cd-0217-29f3a9f622a9.png)

入力内容に問題なければ、CONFIGUREDにステータスが変化します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/a4922fbf-a3bc-6ab0-6602-72749a1e8c83.png)

### PERMISSIONS

SAVEボタンを押すだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/976fafdb-a925-23e3-3d66-e339c6e6564c.png)

今回はテスト目的なので、すべて有効にしても問題ないです。

入力内容に問題なければ、CONFIGUREDにステータスが変化します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/9d6150f9-215e-0b01-e70b-a8c975314712.png)

### CLIENTS

Clientsを設定します。

Select Clientsのプルダウンを押して、作成したClientsを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/112d060c-f5ac-2802-6f59-76d0b9e58cd3.png)

SAVEボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/2b99e36e-aef3-c5ba-d0e3-da227494bfd9.png)

入力内容に問題なければ、CONFIGUREDにステータスが変化します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/8b272f72-5024-35a8-7daf-7b5ae3e601a8.png)

## サンプルプロジェクト設定

以前起動したサンプルプロジェクトに戻ります。
今回はデフォルトのスタートアッププロジェクトである、SimpleFrameworkを使います。

SimpleFramework内にあるSampleConstants.hを開きます。

![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/be885eba-6f47-8577-6295-fa8672ff08d7.png)

Product　Settingsを開き、以下のstatic constexprに該当の値を入力してください。

```c++:SampleConstants.h
#pragma once

struct SampleConstants
{
	// 作成したProductのID
	static constexpr char ProductId[] = "";

	// Sandboxで作成したLiveのSandbox ID（Live以外はNG）
	static constexpr char SandboxId[] = "";

	// Live Sandbox Deploymentsで作成したDeploymentsのID
	static constexpr char DeploymentId[] = "";

	// Client Credentialsで作成したClientのID
	static constexpr char ClientCredentialsId[] = "";

	// Client Credentials→Client detailsにあるSecret Key
	static constexpr char ClientCredentialsSecret[] = "";

	// 変更なし
	static constexpr char GameName[] = "Simple Framework";
};
```

※C#もほぼ同様です。
※他のプロジェクトをビルド～起動したい場合、それぞれのプロジェクト内にあるSampleConstants.hを編集してください。

## Sample Framework起動

SampleConstants.hの編集が終了したらビルド後、ローカル Windowsデバッガーで実行してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/e398eb8a-f036-dd6c-8226-ef668f06e44f.png)

ErrorがなければEOSの認証成功です。
Errorがある場合、SampleConstantsで設定した値が間違いであるか、未設定の可能性があるため、再度確認してください。

## ユーザーログイン(Dev Auth)

ツールを使ってAuthを利用したユーザーログインを試します。

まず、Sample Frameworkにある、Dev Authボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/8df9330d-e7cb-48b8-afc4-cd5ef4298d67.png)

続いてSDKのフォルダを開き、EOS_DevAuthTool-win32-x64-1.0.1.zipを解凍します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/fb1165e6-201d-e2ff-444c-9fbd5c588aae.png)

Zipは以下の場所に配置されています。
.\SDK\Tools\EOS_DevAuthTool-win32-x64-1.0.1.zip

解凍終了後、フォルダ内にある「EOS_DevAuthTool.exe」をダブルクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/1c3c47ba-6e10-9e31-377f-15c113de3721.png)

起動後、ポート番号を入力します。値は適当で問題ありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/caffefbd-4610-9ad8-48fe-3d535534842b.png)

※ローカルホスト経由でつなげるので、IPは「127.0.0.1」になります。

入力が終わったらSubmitボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/75b1b30c-1ff7-e816-449d-28962d7fd8a8.png)

無事、ポートが設定できた場合、Epic Gamesアカウントのログインのボタンが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/9fc4a16e-b7ea-2218-4cd1-4f590a39e499.png)

ボタンを押してEpic Gamesアカウントにログインしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/e05eedff-7c32-b8d6-6f37-6100ffd66757.png)

ログインに成功したら、Credential nameを入力後、Saveボタンを押します。名前は適当で問題ありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/236cc889-cda2-94a4-84cf-ca8c5853c0b2.png)

Credentials Listに先ほど入力したCredential nameが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/e44cf51a-d59a-81ba-a925-547f8bfdb2f3.png)

これで準備完了です。
使用するのは「**ローカルホストのIP＋入力したポート番号**」と「**Credential name**」の二つです。

Sample Frameworkに戻り、「ローカルホストのIP＋入力したポート番号」と「Credential name」を入力してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/1e7678f5-bccb-2c5b-1821-7d8c85a4f7ae.png)
※記事作成時は諸事情で、ポート番号を10000に変更しています。

入力が終了したら、LOGINボタンを押してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/174b9ef9-f922-dc74-d3b6-43167640870c.png)

正常にログインができればEOS接続成功です！！
ログアウトしたい場合は、LOG OUTボタンを押してください。

## ユーザーログイン(Account Portal)　※任意

Epic Account Servicesの登録が完了している場合は、Account Portalでログインができます。
SampleFrameworkのAccount Portalボタンを押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/e13db3d8-6edf-62cd-170a-948ffdc6c684.png)

あとはLOG INボタンを押すだけです。
ボタンを押すとブラウザが立ち上がり、アプリの認証画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/b8e19fcf-eb3f-4078-9afd-c80f25993dba.png)

現在はアプリ承認が「後日公開」となっているため、未承認アプリケーションの警告が表示されます。
今回はログインのテストなので、気にせずCONTINUE TO APPボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/c64ae6e1-9b60-0de3-3de1-b4cf7437278b.png)
ボタンを押すと、連携確認画面が表示されるので、ALLOWボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/02bf80df-6c7f-d981-8fcd-661a215d3bcf.png)
Epic Account Servicesの登録が成功していれば、ユーザーログインに成功します。

これはこれで便利ですね！

# まとめ

サンプルプロジェクトでEOSに無事接続、ログイン処理に成功しました。
これでやっとEOSの機能が一通り検証することが可能になったので、色々と機能を試していきたいと思います。

EOSの認証やログインに結構苦労したので、サンプルを確認したい、という人の助けになれば幸いです。