Microsoft SaaS サブスクリプションの解決に使用する Oauth2 トークンを取得するために、MSAL を使用してシングル ページ アプリに SSO を追加しようとしています。このサンプル リポジトリ: https://github.com/Azure-Samples/ms-identity-javascript-v2 に基づいてコードを構成しました。これは、1.X バージョンではなく MSAL 2.0 を使用します。
/signup ページで実行された、関連するコード スニペットは次のとおりです。
var config = {
auth: {
clientId: <MY_CLIENT_ID>,
authority: "https://login.microsoftonline.com/common",
redirectUri: <APP_URL> + "/signup",
},
cache: {
cacheLocation: "sessionStorage",
storeAuthStateInCookie: false,
}
};
var msalInstance = new msal.PublicClientApplication(config);
msalInstance.loginPopup(["openid", "profile", "User.Read"]).then((response) => {
console.log(response)
}).catch(error => {
console.error(error);
});
アプリケーション内でこのコードを呼び出すと、ポップアップ ウィンドウを使用してログインに成功しましたが、次のエラーが発生します: ServerError: valid_client: 70002 - [2020-09-03 16:55:35Z]: AADSTS70002: The provided request should be 「client_secret」入力パラメータを含めます。
次のように、基になるネットワーク呼び出しが https://login.microsoftonline.com/common/oauth2/v2.0/token であることがわかります。フォーム データを取得しています:
client_id: <MY_CLIENT_ID>
redirect_uri: <APP_URL>/signup
scope: openid profile
code: <some value>
code_verifier: <some value>
grant_type: authorization_code
client_info: 1
client-request-id: <some value>
こちらのドキュメント https://learn.microsoft.com/en-us/advertising/guides/authentication-oauth-identity-platform?view=bingads-13#request-accesstoken に基づいて、この呼び出しには構成可能なclient_secret パラメータが原因でエラーが発生すると思います。
Azure Portal 上のアプリから必要なクライアント シークレットを入手しました。私の質問は、構成オブジェクトでクライアント シークレットを構成するにはどうすればよいですか?オンラインで例を見つけることができませんでした。また、設定内の認証の下で clientSecret をキーとして盲目的に追加しようとしましたが、これはそれを login.microsoftonline.com 呼び出しに渡しませんでした。
更新
もう少し詳しく調べた結果、私の設定の根本的な問題は、認可付与フローを使用してトークンを要求しますが、クライアント資格情報フローを使用する必要があります。トークンの取得をバックエンドに移動し (そしてそこでクライアント シークレットを使用し)、このフォローアップ スレッドでさらにヘルプを与えた後、SSO とトークンの取得が期待どおりに機能するようになりました。
------------------------
Web を作成する代わりに、単一ページのアプリケーションを作成すると、問題が解決します。以下の例を参照してください。
------------------------
デバッグしましたよサンプルをいただきましたが、問題なく使用できております。テストの結果、コードが「/authPopup.js」の Signin() メソッドを呼び出すことができないために問題が発生していると考えられます。このメソッドの呼び出しがindex.html で発生しても問題は発生しません。
1
ありがとうございます。問題を解決でき、詳細を記載して投稿を更新しました。
– アレックス K
2020 年 9 月 9 日 23:08
------------------------
MSAL を直接使用する代わりに、Teams 内の新しい SSO 機能の使用を検討してください。これにより、多くの機能がラップされ、使いやすくなります。ここに概要を示し、ここに動作サンプルを示します。
サンプルに関しては、ノード内にあり、私は同じドットネット バージョンに取り組んでいます。ノードを使用しているようですので、オリジナルを参照する必要がありますが、いくつかのバグを見つけたので、問題が発生した場合は私のバージョンのクライアント側スクリプトを参照してください。ここを参照してください。
1
ありがとう！実際、npmjs.com/package/@microsoft/teams-js を使用して、チーム内で SSO を期待どおりに機能させることができます。ここでの使用例は、具体的には MS を通じて公開された SaaS オファーにサブスクライブするための Web ランディング ページでした。問題を解決でき、アップデートを追加しました。
– アレックス K
2020 年 9 月 9 日 23:08
