Azure Static Web AppsにおけるBlazorアプリでの認証について

Azure Static Web Appsは単体で認証の仕組みがある。

 

docs.microsoft.com

そこで、Blazorアプリにてどのようなものか確かめてみた。

まず、認証ページを作るのは簡単である。

Azure Static Web Appsは以下の認証プロバイダに対応している

 

すなわち、これらのログインを利用して認証をすることになる。それぞれ、

 

のリンクを作ってあげればよい。

 

認証したユーザ情報にアクセスする方法は/.auth/meにGETアクセスしてあげればよい。

 

                using (var client = new HttpClient())
                {
                    res = await client.GetStringAsync(@"https://hogehoge.azurestaticapps.net/.auth/me");
                }    

 

 などのようにGETアクセスして実際にはJSONで戻ってくるのでよしなにパースしてあげるとよい。

今回はサンプルとしてどんな文字列が帰ってくるのか見たかったのでそのままを表示してある。

f:id:tomo_k:20210426204851p:plain

よく見るBlazorのサンプル画面にログインリンクとログインした結果のユーザ情報を表示したところである。

TwitterでログインしてみたところuserDetailsのところにTwtterIDが入っているのがわかる。

userIdというのはアプリごとに生成されるIDのようです。ユニークとして扱えるみたいです。

 

github.com