Azure Static Web Appsにおける認証について(HTML+JavaScript版)
Azure Static Web Appsにおける認証機能についてHTML＋JavaScriptでできるだけ単純にログイン機能と現在の認証状況について表示するというところに絞ってサンプルを作ってみた。
まずは、参考にした公式ドキュメント。
で、大事なところはここ。
それぞれ、5つの承認プロバイダーがあるがリンクを張るだけでログイン機能が実装できるということ。
なので、例えば以下のようなHTMLを書くとログイン機能が作れる。
<a href="/.auth/login/aad">AAD Login</a><br /> <a href="/.auth/login/facebook">facebook Login</a><br /> <a href="/.auth/login/github">github Login</a><br /> <a href="/.auth/login/google">google Login</a><br /> <a href="/.auth/login/twitter">twitter Login</a><br /> <a href="/.auth/logout">Log out</a><br />
一番下の行はログアウト機能である。
認証しているかどうかによって実際に見ることができるかどうかという実装はルート規則によって実現できますがここでは触れません。
次に、ユーザがログインしているかどうかを調べるには「/.auth/me」にGETアクセスすればよいとなっています。
ドキュメントにJavaScriptでのファンクション例が書かれていますのでそれをそのまま使うこととします。
async function getUserInfo() {
const response = await fetch('/.auth/me');
const payload = await response.json();
const { clientPrincipal } = payload;
return clientPrincipal;
}
見ての通り、非同期処理になっていますので、さらに非同期関数で受けてclientPrincipalの内容を表示するようにしてみました。
<script>
async function getUserInfo() {
const response = await fetch('/.auth/me');
const payload = await response.json();
const { clientPrincipal } = payload;
return clientPrincipal;
}
async function get() {
var rejson = await getUserInfo();
console.log(rejson);
if (rejson == null) {
var new_ele = document.createElement("p");
new_ele.innerHTML = '認証されてません';
document.getElementById('add').appendChild(new_ele);
}
else
{
var new_ele = document.createElement('p');
new_ele.innerHTML = rejson.identityProvider;
var new_ele2 = document.createElement('p');
new_ele2.innerHTML = rejson.userId;
var new_ele3 = document.createElement('p');
new_ele3.innerHTML = rejson.userDetails;
var new_ele4 = document.createElement('p');
new_ele4.innerHTML = rejson.userRoles;
document.getElementById('add').appendChild(new_ele);
document.getElementById('add').appendChild(new_ele2);
document.getElementById('add').appendChild(new_ele3);
document.getElementById('add').appendChild(new_ele4);
}
}
</script>
で、HTMLに以下の要素をどこかに用意してあげればよいと思います。
<div id="add"></div>
それで、どこかでget()を実行してあげればよい。
全体のソースとしては以下を参照してください。
Azure Static Web Appsで動いているものは以下
brave-glacier-0efa2b900.azurestaticapps.net
実際のアプリケーションは/.auth/meから取られたJSONの情報をもとにユーザを識別してFunctionを動かしたりだとかという動きをするのだと思います。
Switchのプロコン買った
ジョイスティックの右スティックが勝手に動く問題。
それを受けて、安物のコントローラーを買ってみたけども半年くらいで無線が不調になるなど。。。操作性はまあまあよかったけどねえ。時折十字キーの誤入力が入ることが気になるくらいで。
バッテリーの持ちは5-6時間くらいでお察し。
でも、純正のプロコンよりだいぶ軽かったのはよかった。
そして、黒いのが今回買ったプロコン。
まだ、数時間くらいしか使ってないけどもちょっと重たいのが気になる。
さすがに、WiiUのタブコンほどじゃないけども、あれはものが大きいのでそんなに重さは気にならなかったけどもこれは大きさは通常のコントローラーのサイズなのにずしりとくる感じなのでちょっと重さが気になる。
きっと、バッテリーの重さなんだろうなと思う。
耐久性は。。。。これから使ってみてのお楽しみ。
Microsoft Teams Exploratory 試用版
2020/4/6に有効化して今日現在まだアクティブの模様。
実際、Microsoft 365 business StandardとMicrosoft Teams Exploratory試用版のライセンスを当てた状態でライブイベントの機能が使えている状態です。
Bisiness Standardのみの状態であればライブイベントの機能は無効化されるはずなのでやはりいまだE1相当のMicrosoft Teams Exploratoryのライセンスは有効であると考えています。
ここでいっている、12ヶ月の利用可能期間は2021/4/6で終わっていると考えています。
この、注意部分でいっている30日間の猶予期間の期間なのだろうか？
とすると、明日あたり何か変化が見られるのかもしれない。
追記 2021／05／06 08：00
2021/05/06 8:00(JST)現在確認したところまだ該当ライセンスはアクティブのままであることを確認できました。
追記 2021/05/08 09:00
2021/05/08 9:00(JST) 現在確認したところ該当ライセンスはアクティブのままであることを確認できました。
追記 2021/07/08 15:00
2021/07/08 15:00(JST) 現在確認したところ該当ライセンスはアクティブのままであることを確認できました。
追記 2022/05/14 01:00
2022/05/14 01:00(JST) 現在確認したところ該当ライセンスはアクティブのままであることを確認できました。
追記 2023/1/17 7:00
Microsoft Teams Exploratory 試用版が30日後に終了する旨のメールを受信しました。
Microsoft 365の機能強化について知る
Microsoft 365は日々機能強化されていて様々な機能が追加されていってる。
これからどんな機能が追加されていくのか？現在どのような機能が展開されているのか？というのはMicrosoft 365のロードマップをみればよい。
とくに、Microsoft Teamsにおいてここ1年くらい機能強化が著しいのでロードマップを確認して活用していきたい。
上記のサイトにアクセスして、左側のフィルタで例えば製品でMicrosoft TeamsでフィルターをかけるとMicrosoft Teamsに関連したアップデートのみに絞られる。
例えば、最近TeamsでアップデートされたところだとWindows版で今まで独自の通知を出していたのをWindowsネイティブの通知も出せるようになったというアップデートが記憶に新しいだろう。
Teamsの設定画面でTeamsの組み込みとWindowsと選択できるようになったものだ。
これにより、設定次第で不意の通知を抑制できるという効能があるとされている。
これについての記述は以下の通りになっている。
英語で書かれているのでブラウザの機能などで適宜日本語訳にしてあげると見やすいだろう。
Rolling outが示すとおり展開中とのことです。
表ヘッダのところの開発中というところにチェックを入れてあげると、開発中のものが表示されます。
今まさに、Microsoftが開発に取り組んでいる新機能をながめてこれはという便利な機能を見つけてはわくわくしてみるのはどうでしょうか？
