在 Static Web Apps 中管理驗證
您的購物清單 Web 應用程式需要一種方式來個別辨識使用者，並為使用者提供可儲存產品的個人空間。
而您可以使用驗證，對嘗試存取資訊系統的使用者驗證其身分。 我們現在將會了解驗證，以及在 Azure Static Web Apps 中實作的方式。
身分識別提供者
Azure Static Web Apps 透過下列提供者來管理驗證，從而簡化驗證體驗：
- Microsoft Entra ID
- GitHub
- X
預設會啟用所有驗證提供者。 我們稍後再來看看如何使用自訂路由規則限制驗證提供者。
系統資料夾
/.auth 系統資料夾會提供所有驗證相關 API 的存取權。 您可以使用這些端點，在您的應用程式中實作完整的驗證工作流程，包括登入及登出，以及存取使用者資訊。
登入
下表列出您可以在應用程式中使用的提供者專屬登入路由。
| 識別提供者 | 登入路由 |
|---|---|
| Microsoft Entra ID | /.auth/login/aad |
| GitHub | /.auth/login/github |
| X | /.auth/login/x |
例如，若要使用 GitHub 登入，您可以使用下列程式碼片段，在 Web 應用程式中加入登入連結：
<a href="/.auth/login/github">Login</a>
若想要使用者在登入之後返回特定頁面，也可以在 post_login_redirect_uri 查詢字串參數中提供 URL。 例如：
<a href="/.auth/login/github?post_login_redirect_uri=/products">Login</a>
登出
/.auth/logout 路由會將使用者登出 Web 應用程式。 您可以新增網站導覽的連結來讓使用者登出，如下列範例所示。
<a href="/.auth/logout">Log out</a>
和登入一樣，您可以使用 post_logout_redirect_uri 查詢字串參數提供登出之後重新導向的 URL：
<a href="/.auth/logout?post_logout_redirect_uri=/home">Log out</a>
存取使用者資訊
您可以透過直接存取端點或 API 函式中的特殊標頭，存取驗證相關的使用者資訊。
若將 GET 要求傳送至 /.auth/me 路由，您將會收到 JSON 物件，其中包含目前已登入使用者的資料。 未經驗證的使用者所提出的要求會傳回 null。
下列範例是範例回應物件。
{
"identityProvider": "github",
"userId": "d75b260a64504067bfc5b2905e3b8182",
"userDetails": "github-user-example",
"userRoles": [ "anonymous", "authenticated" ]
}
API 函式
Azure Static Web Apps 中提供的所有 API 函式都可存取與用戶端應用程式相同的使用者資訊。 使用者資料會以 x-ms-client-principal HTTP 標頭傳遞至函式。 資料會序列化為 JSON 物件，並以 Base64 進行編碼。
下列範例函式顯示如何讀取和傳回使用者資訊。
module.exports = async function (context, req) {
const header = req.headers["x-ms-client-principal"];
const encoded = Buffer.from(header, "base64");
const decoded = encoded.toString("ascii");
context.res = {
body: {
userInfo: JSON.parse(decoded)
}
};
};
下一步
接下來，我們將在應用程式中實作完整的驗證工作流程。