Skip to content

Azure AD B2C と Azure Static Web Apps の認証連携ハンズオン

License

Notifications You must be signed in to change notification settings

zengeeks/b2c-swa-handson

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

簡単に認証を実現 🔗 Azure AD B2C と Azure Static Web Apps の認証連携ハンズオン

💫 概要

静的コンテンツや Web アプリのホストに最適な Azure Static Web Apps と、コンシューマーユーザー向け認証基盤の Azure AD B2C を使い、

コードをほぼ書かずに認証連携を実現するハンズオン です。

投票キャンペーンの静的サイトの開発ハンズオンを通して、認証連携を学びます。
また、Azure と GitHub のテクノロジーを活用して最小限のコードで API を実装やデータアクセス、認証画面のカスタマイズや、GitHub Actions を使った Azure Static Web Apps の CI/CD も体験できます。

img

📄 ハンズオンの構成

全体構成は以下となります。

タイトル 概要
🧪 静的サイトと API を実装 投票キャンペーンのサイトとその API を実装します。
🧪 Azure Static Web Apps を構成する 投票キャンペーンサイトをホストする Azure Static Web Apps を構成します。
🧪 Azure AD B2C テナントを構成する 認証基盤として利用する Azure AD B2C を構成します。
🧪 静的サイトに認証を組み込む 投票キャンペーンサイトに認証を組み込みます。
🧪 Cosmos DB リソース作成・設定 データベースのリソースを作成します。
🧪 ログインユーザーに依存するデータを作成・取得する 投票キャンペーンサイトの API からデータベースにアクセスする実装をします。
💎 Appendix: Azure AD B2C のビルトイン画面のカスタマイズ Azure AD B2C の認証画面をカスタマイズします。
💎 Appendix: ログインユーザーに依存しないデータを取得する データ取得の応用パターンを実装します。

🛠️ 事前準備

このハンズオンは、開発の環境・ツールとして以下を利用します。

  • Visual Studio Code
  • Microsoft Azure
  • GitHub

ハンズオンをはじめるにあたっては、以下をご参照して環境を準備します。

🧑‍💻 Let's Get Started

🧪 静的サイトと API を実装 からハンズオンを開始しましょう。



⏭️ 「静的サイトと API を実装」へ進む

About

Azure AD B2C と Azure Static Web Apps の認証連携ハンズオン

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published