質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
OAuth 2.0

OAuth 2.0(Open Authorization 2.0)は、APIを通して保護されたリソース(サードパーティのアプリケーション)へアクセスする為のオープンプロトコルです。

OpenID Connect

OpenID Connectは、 様々なWebサイトや、 モバイルアプリなどを利用する際に一つのID情報のみで 認証を実現できるようにするID連携の仕組みです。

Azure

Azureは、マイクロソフトのクラウド プラットフォームで、旧称は Windows Azureです。PaaSとIaaSを組み合わせることで、 コンピューティング・ストレージ・データ・ネットワーキング・アプリケーションなど多くの機能を持ちます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

2112閲覧

SPAの認証方法について教えて下さい

runpapa

総合スコア1

OAuth 2.0

OAuth 2.0(Open Authorization 2.0)は、APIを通して保護されたリソース(サードパーティのアプリケーション)へアクセスする為のオープンプロトコルです。

OpenID Connect

OpenID Connectは、 様々なWebサイトや、 モバイルアプリなどを利用する際に一つのID情報のみで 認証を実現できるようにするID連携の仕組みです。

Azure

Azureは、マイクロソフトのクラウド プラットフォームで、旧称は Windows Azureです。PaaSとIaaSを組み合わせることで、 コンピューティング・ストレージ・データ・ネットワーキング・アプリケーションなど多くの機能を持ちます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1グッド

1クリップ

投稿2022/03/21 14:41

認証付きSPAを作ろうと考えている初心者です。
知識・技術が浅く、見当違いなことを言っているかもしれませんが教えて下さい。
今ReactでSPAを作成しています。
そして、このSPAに誰でもアクセスできるようにするのではなく、アカウントを持っているユーザだけがアクセスできるようにしたいと考えています。つまりログイン画面を設けたいと思っています。

ただ認証周りの知識が疎いため、Azure ADを用いて認証しようと考えています。
そして調べていたら、MicroSoftの公式ドキュメントにSPAとAzureADを用いたサンプルがありました。
ただ、このサンプルはGraph APIのアクセストークンを取得し、ADのユーザデータを取りに行く、といったものでした。
このアクセストークンを取る、というステップをSPAへのアクセストークンを取得する、にしたいのですが、その場合、SPAを保護するAPIを独自に選定する必要があるのでしょうか。AzureADへのアクセスはGraphAPIで保護されていると思うのですが、SPAはどうしたらいいのかわかりません。初歩的なことですが、教えて下さい。

Tak1wa👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/03/21 22:37

開発環境を書いてください。
runpapa

2022/03/22 01:47

画面系:azure adb2c[ログイン]     react,typescript[spa] 認証ライブラリ:msal spaのホスティング方法:blob storageのstatic web site 他に何が必要でしょうか
hoshi-takanori

2022/03/22 05:28

普通は SPA が叩く API がログイン必須であれば、実質的にログインしないと SPA も使えないので、それで十分だと思いますけど、ログインしないと SPA そのもの (つまり JS ファイル) にアクセスできないようにしたいということでしょうか? その場合、ログイン画面そのものは SPA とは切り離して作ることになるかと…。
runpapa

2022/03/22 06:13

浅はかな知識で申し訳ございません。 SPAといいつつも、ログイン画面とSPAは切り離しているものだと言う認識です。 用意されたログイン画面で認証されることでblob storageの静的なwebサイトのURLにアクセスできる、といった流れを考えています。 通常、blob storageの静的なwebサイトのURLはブラウザに打ち込めば誰でも見れるものかと思いますが、その前段階にログイン画面をおいて、認証したい、と考えています。
hoshi-takanori

2022/03/22 06:22

「blob storageの静的なwebサイト」って SPA ではないのでは…。 そして、「ブラウザに打ち込めば誰でも見れる」ものの「前段階にログイン画面を」置いても無意味では…。
退会済みユーザー

退会済みユーザー

2022/03/22 06:29

> 他に何が必要でしょうか OS, IDE は何を使っているかという話です。 Azure, Microsoft 云々と書いてあったので Visual Studio 2022 とかを使っているかもと思ったのですが違うんですか? もし Visual Studio を使っているならテンプレートでプロジェクトを作成する際「個別のアカウント」を選ぶと ASP.NET Core Identity ベースのユーザー認証が実装されるので試してみてください。
runpapa

2022/03/22 07:30

>「blob storageの静的なwebサイト」って SPA ではないのでは…。 ちがうのですか?静的なWebサイトでSPAの~といった情報をみかけたようなきがするのですが。 >そして、「ブラウザに打ち込めば誰でも見れる」ものの「前段階にログイン画面を」置いても無意味では…。 言われてみればそうですね。語弊がありました。 つまりログインできたユーザのみがSPAを閲覧できるようにしたいです。 AzureADB2Cでログイン画面を実装すれば、アクセストークンが取得できるかと思います。 このアクセストークンを持っているユーザのみがSPAを閲覧できる、というような流れを考えていたのですが。ご助言いただけたらと思います。
退会済みユーザー

退会済みユーザー

2022/03/23 12:01

質問者さん、無言ですが、回答が出ているのでそれらに対するフィードバックをタイムリーに返してください。役に立った/立たなかったぐらいはすぐ返せるのでは? 役に立たなかったならどこがダメだったかを書くと、より期待するものに近い回答が出てくるかも。とにかく無言は NG です。
runpapa

2022/03/24 14:29

申し訳ございません、忙しく確認できておりませんでした。 貴重なご意見ありがとうございます。 教えていただいたテンプレートでつくってみたりして一連の流れを把握し、私自身の中の間違いを訂正できたりしました。 今直面している課題をもう一方の回答にコメントしておりますので、もしよければ確認いただき、ご意見もいただけたらと思います。 せっかく返事いただいたのに、返信が遅くなり申し訳ございませんでした。
退会済みユーザー

退会済みユーザー

2022/03/25 01:13

> 今直面している課題をもう一方の回答にコメントしておりますので、もしよければ確認いただき、ご意見もいただけたらと思います。 Azure を使って対応するという方法は、Azure には触ったこともない自分には分かりません。お役に立てずすみませんが、Taki1wa さん他の方の回答をお待ちください。
runpapa

2022/03/25 12:21

いえ、勉強になることが多く、色々と学べたと思います。 このままだと質問の主旨からずれて他の質問もしてしまうと思いますので、一旦本質問はクローズして、 私の中で整理した後に、再度質問させていただきます。 貴重なご意見ありがとうございました。
guest

回答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
Tak1wa

総合スコア4791

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

runpapa

2022/03/24 14:27

忙しく返信が遅れました。 貴重なご意見ありがとうございます。 私自身の中でも知識が曖昧なところがあり、少し整理できたように思います。 勘違いしていたところも多く、整理し直したところ ログイン画面→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に保存するにはなにか方法あるでしょうか。 つらつらと色々書いてしまい申し訳ございませんが、状況等不明な点があれば答えさせていただきますので、ご教授ください。 よろしくお願いいたします。
Tak1wa

2022/03/24 20:12

色々とスキップしてしまっている気がするので、まず本来やりたかったことを整理するのが良いんじゃないかと思います。 そもそも、AzureADを使っていますがそれが本来やりたかったことですか? 「SPA」で認証を使いたいということですと、SurferOnWwwさんがご紹介されているように独自で認証部分をまずは使って認証・認可の流れを把握されたほうが良いです。外部IdPのSSO実装は次点にしたほうが良いかと。 ですので、Azure静的ホストなどを使う予定がなければSurferOnWwwさんのご回答へご返信を集約されたほうが、将来同じ疑問を持った方のためになるでしょう。そちらでお願いします。Azure静的ホストの認証機能を使いたいのであればこちらで返信を続けてください。 ということで、整理された上でそもそもどうしたいのかを改めて教えてください。 とりあえず以下をベースにすすめているということで、私とSurferOnWWWさんの回答に関連してないようも見えますので、質問のコメント欄でやり取りしてもらったほうが良いのかもしれないですね。 >頂いた意見を参考に、自身でも整理し、以下のサイトを参考に同じものを作りました。 >https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/configure-authentication-sample-spa-app
runpapa

2022/03/25 12:20

様々なご意見ありがとうございます。 今回はいろいろな学びもあったので、一旦本質問はクローズして、再度整理した上で質問を挙げさせていただこうとおもいます。 無知な自分にご丁寧に教えてくださり、ありがとうございました。
guest

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 では認証が通ってデータが返され表示されます。

イメージ説明

そのあたりの詳しい話は以下の記事を見てください。

SPA の認証と承認
https://docs.microsoft.com/ja-jp/aspnet/core/security/authentication/identity-api-authorization?view=aspnetcore-3.1

投稿2022/03/23 03:07

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問