Q&A
開発環境を書いてください。
認証付きSPAを作ろうと考えている初心者です。
知識・技術が浅く、見当違いなことを言っているかもしれませんが教えて下さい。
今ReactでSPAを作成しています。
そして、このSPAに誰でもアクセスできるようにするのではなく、アカウントを持っているユーザだけがアクセスできるようにしたいと考えています。つまりログイン画面を設けたいと思っています。
ただ認証周りの知識が疎いため、Azure ADを用いて認証しようと考えています。
そして調べていたら、MicroSoftの公式ドキュメントにSPAとAzureADを用いたサンプルがありました。
ただ、このサンプルはGraph APIのアクセストークンを取得し、ADのユーザデータを取りに行く、といったものでした。
このアクセストークンを取る、というステップをSPAへのアクセストークンを取得する、にしたいのですが、その場合、SPAを保護するAPIを独自に選定する必要があるのでしょうか。AzureADへのアクセスはGraphAPIで保護されていると思うのですが、SPAはどうしたらいいのかわかりません。初歩的なことですが、教えて下さい。
画面系：azure adb2c[ログイン]
react,typescript[spa]
認証ライブラリ：msal
spaのホスティング方法：blob storageのstatic web site
他に何が必要でしょうか
普通は SPA が叩く API がログイン必須であれば、実質的にログインしないと SPA も使えないので、それで十分だと思いますけど、ログインしないと SPA そのもの (つまり JS ファイル) にアクセスできないようにしたいということでしょうか？ その場合、ログイン画面そのものは SPA とは切り離して作ることになるかと…。
浅はかな知識で申し訳ございません。
SPAといいつつも、ログイン画面とSPAは切り離しているものだと言う認識です。
用意されたログイン画面で認証されることでblob storageの静的なwebサイトのURLにアクセスできる、といった流れを考えています。
通常、blob storageの静的なwebサイトのURLはブラウザに打ち込めば誰でも見れるものかと思いますが、その前段階にログイン画面をおいて、認証したい、と考えています。
「blob storageの静的なwebサイト」って SPA ではないのでは…。
そして、「ブラウザに打ち込めば誰でも見れる」ものの「前段階にログイン画面を」置いても無意味では…。
> 他に何が必要でしょうか
OS, IDE は何を使っているかという話です。
Azure, Microsoft 云々と書いてあったので Visual Studio 2022 とかを使っているかもと思ったのですが違うんですか？ もし Visual Studio を使っているならテンプレートでプロジェクトを作成する際「個別のアカウント」を選ぶと ASP.NET Core Identity ベースのユーザー認証が実装されるので試してみてください。
＞「blob storageの静的なwebサイト」って SPA ではないのでは…。
ちがうのですか？静的なWebサイトでSPAの～といった情報をみかけたようなきがするのですが。
＞そして、「ブラウザに打ち込めば誰でも見れる」ものの「前段階にログイン画面を」置いても無意味では…。
言われてみればそうですね。語弊がありました。
つまりログインできたユーザのみがSPAを閲覧できるようにしたいです。
AzureADB2Cでログイン画面を実装すれば、アクセストークンが取得できるかと思います。
このアクセストークンを持っているユーザのみがSPAを閲覧できる、というような流れを考えていたのですが。ご助言いただけたらと思います。
質問者さん、無言ですが、回答が出ているのでそれらに対するフィードバックをタイムリーに返してください。役に立った/立たなかったぐらいはすぐ返せるのでは？ 役に立たなかったならどこがダメだったかを書くと、より期待するものに近い回答が出てくるかも。とにかく無言は NG です。
申し訳ございません、忙しく確認できておりませんでした。
貴重なご意見ありがとうございます。
教えていただいたテンプレートでつくってみたりして一連の流れを把握し、私自身の中の間違いを訂正できたりしました。
今直面している課題をもう一方の回答にコメントしておりますので、もしよければ確認いただき、ご意見もいただけたらと思います。
せっかく返事いただいたのに、返信が遅くなり申し訳ございませんでした。
> 今直面している課題をもう一方の回答にコメントしておりますので、もしよければ確認いただき、ご意見もいただけたらと思います。
Azure を使って対応するという方法は、Azure には触ったこともない自分には分かりません。お役に立てずすみませんが、Taki1ｗa さん他の方の回答をお待ちください。
いえ、勉強になることが多く、色々と学べたと思います。
このままだと質問の主旨からずれて他の質問もしてしまうと思いますので、一旦本質問はクローズして、
私の中で整理した後に、再度質問させていただきます。
貴重なご意見ありがとうございました。
回答2件
0
ベストアンサー
こんにちは。
つまりログインできたユーザのみがSPAを閲覧できるようにしたいです。
AzureADB2Cでログイン画面を実装すれば、アクセストークンが取得できるかと思います。
このアクセストークンを持っているユーザのみがSPAを閲覧できる、というような流れを考えていたのですが。ご助言いただけたらと思います。
コメントでのやり取りを拝見させて頂き、SPA自体に認証機能を組み込むのではなくその前段に事前に(Azureなどで)用意された認証画面を配置してその認証トークンを透過的にアクセス許可に使用したいことだと解釈しました。
Azureストレージでは難しそう
まず、以下によるとAzureストレージの静的ホスティングは匿名アクセスのみを許可しているようなので認証機能の組み込みは難しいと思います。
いいえ。 静的 Web サイトでサポートされるのは、 $web コンテナー内のファイルに対する匿名パブリック読み取りアクセスのみです。
https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-blob-static-website#permissions
Azure Static Web Appsだと出来そう
AzureにはAzure Static Web Appsという静的サイトをホスティングする機能があります。
https://dev.classmethod.jp/articles/azure-static-web-app-blob-storage/
こちらでは以下のようにAzureADの組み込み認証機能が利用できるので、SPA/静的ウェブサイトの前段で認証出来ると思います。
https://docs.microsoft.com/ja-jp/azure/static-web-apps/authentication-authorization?tabs=invitations
Azure Static Web Appsを試してみてください。
PS: サイトポリシーに違反した質問内容とは思えないので、なぜこの質問に低評価がつくのか、謎です。
投稿2022/03/22 21:08
編集2022/03/22 21:21
総合スコア4791
静的サイトに対してAzureADの認証機能を試してみました。
良ければご覧ください。
https://dev.classmethod.jp/articles/azure-static-web-apps-auth-pre-configured-providers/
さらに、特定テナントのAADに制限したいという要件があった場合はカスタム認証機能を使うことで実現が出来ます。
忙しく返信が遅れました。
貴重なご意見ありがとうございます。
私自身の中でも知識が曖昧なところがあり、少し整理できたように思います。
勘違いしていたところも多く、整理し直したところ
ログイン画面→SPA→API+バックエンドアプリケーション
という流れでした。
更に疑問点が増え、可能であれば教えていただきたいことがあります。
頂いた意見を参考に、自身でも整理し、以下のサイトを参考に同じものを作りました。
https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/configure-authentication-sample-spa-app
このサイトでの成果物ではSPA内に存在するSignInボタンよりログイン画面がポップアップします。
そしてメールアドレスやパスワードを入力することで、認証され、SPAの画面が遷移します。
上記サイトでの成果物を開発者ツールで追っていくと、トークンがlocalstorageの保存されていることも確認しました。
ただ私がしたいのは単独で存在するログイン画面よりSPAにアクセスしたい、というものです。
スタート地点がSPAのURLにアクセスし、埋め込まれたログイン画面を表示するのではなく、
直接ログイン画面のURLにアクセスし、認証されたらSPAにアクセスできる、といったことを考えています。
ADB2Cでユーザーフローを作成し、リダイレクト先をSPAに指定したら、期待通りの流れにはなるのですが
URLパラメータ？としてURLの中にアクセストークンやIDトークンが埋め込まれており、localstorageには保管されていませんでした。
単独で存在するログイン画面よりSPAにアクセスし、トークンをlocalstorageに保存するにはなにか方法あるでしょうか。
つらつらと色々書いてしまい申し訳ございませんが、状況等不明な点があれば答えさせていただきますので、ご教授ください。
よろしくお願いいたします。
色々とスキップしてしまっている気がするので、まず本来やりたかったことを整理するのが良いんじゃないかと思います。
そもそも、AzureADを使っていますがそれが本来やりたかったことですか？
「SPA」で認証を使いたいということですと、SurferOnWwwさんがご紹介されているように独自で認証部分をまずは使って認証・認可の流れを把握されたほうが良いです。外部IdPのSSO実装は次点にしたほうが良いかと。
ですので、Azure静的ホストなどを使う予定がなければSurferOnWwwさんのご回答へご返信を集約されたほうが、将来同じ疑問を持った方のためになるでしょう。そちらでお願いします。Azure静的ホストの認証機能を使いたいのであればこちらで返信を続けてください。
ということで、整理された上でそもそもどうしたいのかを改めて教えてください。
とりあえず以下をベースにすすめているということで、私とSurferOnWWWさんの回答に関連してないようも見えますので、質問のコメント欄でやり取りしてもらったほうが良いのかもしれないですね。
>頂いた意見を参考に、自身でも整理し、以下のサイトを参考に同じものを作りました。
>https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/configure-authentication-sample-spa-app
様々なご意見ありがとうございます。
今回はいろいろな学びもあったので、一旦本質問はクローズして、再度整理した上で質問を挙げさせていただこうとおもいます。
無知な自分にご丁寧に教えてくださり、ありがとうございました。
0
Visual Studio のテンプレートを使って認証に「個別のアカウント」を選んで React プロジェクトを作成すると実装される認証がどのようになっているかを紹介しておきます。
React がアクセスする先の Web API にユーザー認証を実装するというやり方で、質問者さんのやりたいこととは違うかもしれませんが、参考にはなると思います。
Visual Studio から実行するとブラウザに以下の画像が表示されます。メニューバーの Fetch data はサーバーの Web API からデータを取得して表示するようになっています。
サーバーの Web API はトークンベースの認証を実装しています (認証トークンなしで直接アクセスすると HTTP 401 Unauthorized 応答が返ってきます)。認証を受けてない状態でメニューバーの Fetch data をクリックすると Login 画面にリダイレクトされます。
Login 画面で id と password を入力して認証を受けると認証トークンが発行され、Fetch data が Web API にアクセスしてデータを取りに行きますが、その際認証トークンが要求ヘッダに含まれるようになります。
Web API では認証が通ってデータが返され表示されます。
そのあたりの詳しい話は以下の記事を見てください。
投稿2022/03/23 03:07
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
