前回はアクセス制御の設定まで行いました。

1. はじめに

2. ログインの追加

3. ログアウトの追加

4. アクセス制御の設定

前回、付与したロールについてユーザ情報にアクセスし、確認してみたいと思います。

Azure Static Web Apps でのユーザー情報へのアクセス

ユーザ情報の確認

「/.auth/me」にアクセスし、admin権限付与したユーザの情報を表示したいと思います。

「userRoles」に「admin」が表示されていることが分かります。

admin権限を付与していないユーザで「/.auth/me」にアクセスしてみると、「userRoles」に「admin」が表示されていませんでした。

このユーザにはadmin権限を付与していないため、adminページにはアクセスできず、403 Forbiddenが表示されました。

ログインしていない状態でアクセスすると、「clientPrincipal」が「null」で表示されました。

上記の通り、得られる情報はユーザ情報のみです。
アクセストークンや更新トークンはないため、補助程度の機能のみ提供されています。

アクセストークンが必要な場合、Azure App Serviceを利用する。
または、自身で実装する必要があるということでしょうか。

構成について

最後に、今回のログインとアクセス制御の変更を加えた構成を以下に記します。
★マークがついているファイルに対して変更しています。

 react-basic
    ├── README.md
    ├── azure-static-web-apps-salmon-sky-056318b00.yml
    ├── package-lock.json
    ├── package.json
    ├── playwright.config.ts
    ├── public
    │     ├── admin.html(★)
    │     ├── favicon.ico
    │     ├── index.html(★)
    │     ├── loginlink.html(★)
    │     ├── logo192.png
    │     ├── logo512.png
    │     ├── manifest.json
    │     └── robots.txt
    ├── src
    │     ├── App.js
    │     ├── index.css
    │     ├── index.js
    │     └── logo.svg
    ├── staticwebapp.config.json(★)
    └── tests
        ├── Readme.md
        └── playwright.spec.ts

制限はありますが、Free版の状態で、ログイン機能～ロール制御～ログアウトまで実現することができました！