[UE4] BPだけで簡単なログイン･ユーザ認証機能を作りたい [Auth0]

はじめに

今回UE4で簡単なユーザのログイン機能を実装する必要があり、それについてダイレクトにまとめられた情報がなかったため記事を書いてみました
私個人はWeb系の知識は乏しく、「AWSとWordpressでサイトを手軽に作る」くらいしかやったことがありません
間違っていることやセキュリティ的によろしくないこともあるかもしれませんが、その際は是非ご指摘いただきたいです
また下記に実装までの手順を記載しておりますが、そちらも実践してみる際は自己責任でお願いいたします

今回はBlueprintだけで実装したいというテーマもあり、そのためプラグインを追加で用いています

環境

• MacBook Air (M1, 2020)
  • macOS Monterey v12.0.1
• UE4.27
• VaRest V1.1.33

Auth0

今回認証にはAuth0を用いてみました
なぜAuth0かというと、私の在籍する企業のサービスで使われており社内で名前を聞いたことがあったからです（雑）
調べてみると、簡単に使えそう（なことが書かれていた）であったり、Qiitaなどで日本語情報もいろいろみつかったり、自分でも扱いやすいかなと思い使ってみることになりました

下記記事に概要が定例に書かれておりました
認証プラットフォーム Auth0 とは？ - Qiita

登録、設定

初めてのAuth0ハンズオン - Qiita
↑こちらの記事を参考に、Applicationの登録〜認証機能の統合の章まで最低限進めましょう

項目と手順は、

1. Auth0登録、アカウント初期設定
2. アプリケーションの作成、設定
3. テストアカウント作成(作成したアプリケーション内のユーザとして)

また最終的に必要になる情報としては下記になります

• クライアントID (アプリケーションのID)
• ドメイン
• ユーザのアカウント情報(IDとパスワード)

HTTP REST通信

上記で設定したところまでで一度テストしておきましょう
Auth0公式のドキュメントにパラメータの解説やサンプルのコマンドがあります
Call Your API Using the Authorization Code Flow

上記サイトの｢Example POST to token URL｣のサンプルをそのまま使っちゃいます

curl --request POST \
  --url 'https://アプリケーションのドメイン/oauth/token' \
  --header 'content-type: application/x-www-form-urlencoded' \
  --data grant_type=password \
  --data 'client_id=アプリケーションのID' \
  --data 'username=ユーザネーム' \
  --data 'password=パスワード' \

正しいユーザ情報を入れて送ってみたところ、ちゃんと認証されていますね

"access_token":"トークン",
"id_token":"トークンID",
"scope":"openid profile email address phone",
"expires_in":86400,
"token_type":"Bearer"

試しにわざと間違えたユーザ情報を送ってみたらちゃんと弾かれました

"error": "invalid_grant",
"error_description": "Wrong email or password."

UE4

いよいよUE4で実装します
といってもやりたいことは先程の通信でできてしまっておりますので、それをUE4から実行できればよいだけです
UE4上での実装に必要な機能は、下記2点だけです

• ユーザにID･パスワードを入力させる
• 認証

VaRestのインストール

UE4のBPでは標準でHTTP REST通信を行えません
こちらのヒストリアさんの記事ではC++でHttp通信を実装する方法が書かれています
[UE4] HTTP通信 その１ ～基本編～｜株式会社ヒストリア

しかし今回はBPだけで実装したいので、プラグインを使いましょう
こちらの｢VaRest｣というプラグインを用います
このプラグインはBPだけでHttp通信を実装できるもので、無料で提供されています
VaRest：コードプラグイン - UE マーケットプレイス
インストール後は任意のプロジェクトでVaRestプラグインを有効化しましょう(有効化には再起動が必要です)

実装

プラグイン公式でドキュメントがあります
VaRest UE4 Plugin

基本的に今回やりたいことはユーザ情報が合っているか間違っているか確認したいだけですので、
Call URLノードを使って指定URLにJsonでデータを渡してあげます
UI上で情報を入力させて送ります

UI部分はUMGで最小限につくりました
(灰色上部にロゴでも入れようと思ってたけど忘れてた)

テスト

無事実装できました
あとはレスポンスによってそれぞれ処理を作ればよいですね

おわりに

今回はBPだけで最低限度の実装でユーザの認証を試してみました
Auth0って便利だなぁと思いました