4D Netkit：OAuth 2.0接続インターフェースのカスタマイズ

デザインや技術的な理由から、OAuth 2.0接続の接続インターフェースの表示を管理する必要がある場合があります。4D 20 R6 からは、自動的に Webブラウザーが開いて接続インターフェースを表示するのではなく、authenticateURI を使って好きな場所に表示することができます。

このブログ記事では、Microsoft のログインインターフェースを Webエリア内で開く例を説明します。

HDI: 4D NetKit: OAuth2.0接続インターフェースのカスタマイズ

例

以下の例では、Microsoft ログインインターフェースを Webエリアで開く方法を説明します。そのためには、”WAConnection” という Webエリアを持つフォームを作成する必要があります。

まず、OAuth2GetToken メソッドを作成して、Webエリアでの接続インターフェースの表示を管理し、トークンの受信を待ちます。このメソッドはワーカーの中で呼び出されるので、現在の情報を表示するために CALL FORMコマンドを使ってカレントフォームに情報を表示します:

#DECLARE($credential : Object; $CurrentWindows : Integer)

var $OAuth2:=cs.NetKit.OAuth2Provider.new($credential)

// 接続ページを Webエリア "WAConnection" 内に表示する
CALL FORM($CurrentWindows; Formula(WA OPEN URL(*; "WAConnection"; $1)); $OAuth2.authenticateURI)

// トークンを待ち、それをForm.token 属性内に保存する
CALL FORM($CurrentWindows; Formula(Form.token:=$1); $OAuth2.getToken())

そしてこのメソッドを、browserAutoOpen 属性を false にした上でワーカー内で呼び出す必要があります:

var $credential:={}
$credential.name:="Microsoft"
$credential.permission:="signedIn"
$credential.clientId:="7008ebf5-xxx"
$credential.redirectURI:="http://127.0.0.1:50993/authorize/"
$credential.scope:="https://graph.microsoft.com/.default"
$credential.accessType:="offline"
$credential.prompt:="select_account"
	
// ブラウザーは自動的には開かれません。
// よって接続インターフェースの表示はデベロッパーによって管理されます。
$credential.browserAutoOpen:=False
	
// OAuth2GetToken メソッドの呼び出し
CALL WORKER("OAuth2Worker"; Formula(OAuth2GetToken($1; $2)); $credential; Current form window)

フォームを開いて上記のコードを実行すると、接続インターフェースが Webエリアに表示され、4D Webサーバーがトークンを待ち受けます:

まとめ

この機能を使うことで、開発者は Webブラウザーの自動オープンを回避し、接続インターフェースの表示をコントロールすることができます。この柔軟性により、アプリケーション固有のニーズに合わせた、より統合されたユーザーエクスペリエンスが可能になります。