認証

認証機能を実装します。以下のドキュメントに仕様が記されています。

learn.microsoft.com

これもローカル環境でもエミュレーション可能です。

learn.microsoft.com

単純に/.auth/login/ + 承認プロバイダーへのリンクをおけば良いだけです。こんな感じの実装をしました。

const NavBar = ({user}) => {
  return (
    <>
      { !user ?
        <span><a href="/.auth/login/github">GitHub Login</a></span> :
        <div><p><span>{user.userDetails}</span><span> <a href="/.auth/logout">Logout</a></span></p></div>
      }
    </>
  );
};

ログインしたユーザーの情報にアクセスする方法については以下のドキュメントに記されています。

learn.microsoft.com

こんな感じの実装をしました。

function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    getUserInfo();
  }, []);

  async function getUserInfo() {
    try {
      const response = await fetch('/.auth/me');
      const payload = await response.json();
      const {clientPrincipal} = payload;

      if (clientPrincipal) {
        setUser(clientPrincipal);
        console.log(`clientPrincipal = ${JSON.stringify(clientPrincipal)}`);
      }
    } catch (error) {
      console.error('No profile could be found ' + error?.message?.toString());
    }
  }

  return (
    <div className="App">
      <header className="App-header">
        <NavBar user={user} />
      </header>
      <main>
        <h1>これはAzure Static Web Appsのサンプルです。</h1>
      </main>
    </div>
  );
}

API関数からもログインしたユーザーの情報にアクセスできます。

module.exports = async function (context, req) {
    // ログインしたユーザー情報を取得する
    const header = req.headers['x-ms-client-principal'];
    let userinfo = undefined;
    if (header !== undefined) {
        const encoded = Buffer.from(header, 'base64');
        // JSON形式の文字列として取得する
        userinfo = encoded.toString('ascii');
    }

    context.res = {
        body: { text: `This is a api return value. user info = [${userinfo}]` },
    };
};

デプロイする

GitHubにソースコードを置いているのであれば、Azure Static Web Appsにデプロイすることも容易にできます。ドキュメントは以下の通り。

learn.microsoft.com

Azure Portal上で作成する際、フレームワーク関連の設定をします。

これでAzure Static Web Appsを作成すると、以下のようなGitHub Actionsワークフローが生成されます。

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_BEACH_0D47CE900 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/src" # App source code path
          api_location: "/api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_BEACH_0D47CE900 }}
          action: "close"