アプリの UX を合理化する以外にも、SSO には他の利点があります。複数のアプリケーションに 1 つのパスワードまたはアカウントを使用すると、システムの脆弱なポイントの数が制限され、セキュリティが強化されるだけでなく、登録ユーザーが資格情報を覚えやすくなります。パスワード管理が下手な人は、複数のアカウントに同じパスワードを再利用することがほとんどであることは実証済みの事実です (これは非常に悪い考えです)。

そこでこのブログでは、Google SSOによるログインをあらゆるデバイスに追加する方法を紹介します。 Mendix アプリを数分で OIDC マーケットプレイス モジュール(Open ID Connect シングルサインオン)

何が必要ですか?

始める前に、必要なものがすべて揃っているかどうかを確認してください。Google Cloud Platform アカウントを作成したことを確認してください。

また、マーケットプレイスモジュールもいくつか必要になります。 Mendix アプリケーション：

• コミュニティコモンズ
• Encryption
• ナノフローコモンズ
• OIDC モジュール

始める

ソフトウェア設定ページで、下図のように Google クラウド コンソール次のようなプロジェクトの概要に移動します。

クリックして作成 新しいプロジェクト名前を付けて（何でもいいです）、クリックします 創造する

プロジェクトを開き、ダッシュボードのページ上部にある検索バーで「OAUTH Consent Screen」を検索します。

ユーザー タイプには [外部] を選択します (これにより、Google アカウントを持つすべてのユーザーがアカウントを作成してアプリにアクセスできるようになります)。[作成] をクリックして続行します。次のページで、以下に示すように、必要なすべての詳細を自分の情報で入力します。

次の画面「スコープ」では、何も入力する必要はありません。画面の下部にある「保存して続行」をクリックするだけです。

「テストユーザー」というタイトルの最後の画面では、テスト中にアプリへのアクセスを許可されるユーザーのリストを指定できます。アプリがまだ開発中の場合、100人以上のテストユーザーが必要な場合を除いて、通常は必要ありません（これが制限です）。ユーザーを指定する必要があるかどうかを決定し、 保存して続行続行するには、画面の下部にある [e] をクリックしてください。

次に、資格情報ページ（左側のメニュー）に移動し、「資格情報の作成」をクリックし、表示されるドロップダウンからOAuth ClientIDを選択します。

次のページでアプリケーションの種類を選択します。私の場合はWebアプリケーションを選択しました。

クライアントに名前を付け、2つの「承認済みリダイレクトURI」を追加します。最初に追加するものはアプリのクラウドURL（無料アプリのURLまたは任意のクラウドURL）で、2つ目はローカルホストです。ローカルホストオプションを追加して、これをローカルでテストできるようにします。アプリのリダイレクトURLの末尾に「/oauth/vXNUMX/callback」を追加することを忘れないでください。 創造する あなたが終わったら。

完了です。後で参照できるように、クライアント ID とクライアント シークレットを安全な場所に保存してください。

Studio Proの場合

今すぐ Mendix このビルドのセクションをご覧ください。匿名ユーザーが必要なページにアクセスできるようにするには、アプリのセキュリティがオンになっていることと、匿名ユーザーのアクセスが許可されていることを確認する必要があります。このためには、匿名ユーザーとして選択できるゲスト ユーザー ロールが必要です。

また、ゲスト ユーザー ロールが匿名モジュール ロールとして OIDC モジュールに割り当てられていること、および管理者に同じ OIDC モジュールの管理者ユーザー ロールが割り当てられていることを確認してください。

セキュリティとユーザー ロールの設定が完了したので、ユーザーがサインイン ページにアクセスできるようにする必要があります。プロジェクトのナビゲーションに移動し、ゲスト用のロール ベースのホームページを追加します。これには、OIDC モジュールによって提供されるページ「OIDC.Login_Web_Button」を選択できます。また、ユーザー用のロール ベースのホームページも提供します。

最後に、管理者が SSO クライアント資格情報にアクセスして設定できるようにする必要があります。ここでも、ODIC モジュールには「OIDC_Client_Overview」というページがすでに用意されています。これをナビゲーションに追加し、アプリの管理者がアクセスできることを確認します。

アプリをローカルで実行し、管理者としてログインします。ここではデモ スイッチャー ウィジェットを使用して簡単にログインできます。次に、OIDC クライアントの概要ページに移動します。[新規] をクリックして新しい構成を作成します。

エイリアスには任意の名前を入力してください。私は単に Google と呼びました。

クライアントIDを入力し、ステータスをアクティブに設定します。最も重要なのは、Googleの自動設定URLを追加する必要があることです（https://accounts.google.com/.well-known/openid-configuration）を開き、「設定のインポート」をクリックします。これにより、残りの必須フィールドが自動的に入力されます。この URL は Google 固有のものであり、他のプロバイダーには独自のバージョンがあるため、使用しているプロバイダーの正しいインポート URL があることを確認してください。

最後のステップは、スコープを選択することです。スコープとは、クライアントによってユーザーについて提供されるプロパティです。OpenID、電子メール、プロファイルを選択してください (プロファイルには、ユーザーのほとんどの情報が保存されます)。

ログインのテスト

ゲストユーザーがサイトにアクセスすると、次のページが表示されます。ユーザーは「SSO経由でログイン」をクリックする必要があります。

次に、ログインに使用する Google アカウントを選択するようユーザーに求める画面が表示されます。

構成が成功すると、ユーザーは認証されたユーザーとしてホームページにアクセスできます。この設定が機能していることを確認するために、ログインしたユーザーのアカウントを返すデータ ビューをホームページに追加し、ラベルを使用して $Account/FullName 属性を表示しました。

最後に

このブログでは、SSO クライアントとして Google を使用することに焦点を当てましたが、このモジュールは Salesforce や Microsoft などの他のプラットフォームもサポートできることを覚えておくことが重要です。ただし、この設定は OIDC 準拠のクライアントであればどれでも機能するはずです。最後に、このモジュールはネイティブ モバイルでも機能するので、ぜひ実験して新しい実装を試してください。

特別な感謝へ エリック・ティエニバーこのマーケットプレイス モジュールの作成者であり、この記事の執筆に協力してくれた に感謝します。