Azure Static Web Apps의 사용자 정보 액세스
Azure 정적 Web Apps는 직접 액세스 엔드포인트 및 API 함수를 통해 인증 관련 사용자 정보를 제공합니다.
많은 사용자 인터페이스가 사용자 인증 데이터에 크게 의존합니다. 직접 액세스 엔드포인트는 사용자 지정 함수를 구현하지 않고도 사용자 정보를 노출하는 유틸리티 API입니다. 편의성 외에도 직접 액세스 엔드포인트는 서버리스 아키텍처와 관련된 콜드 시작 지연의 영향을 받지 않습니다.
클라이언트 보안 주체 데이터
클라이언트 보안 주체 데이터 개체는 사용자가 식별할 수 있는 정보를 앱에 노출합니다. 클라이언트 보안 주체 개체에는 다음과 같은 속성이 있습니다.
| 속성 | 설명 |
|---|---|
identityProvider |
ID 공급자의 이름입니다. |
userId |
사용자에 대한 Azure Static Web Apps 관련 고유 식별자입니다.
|
userDetails |
사용자의 사용자 이름 또는 이메일 주소입니다. 일부 공급자는 사용자의 이메일 주소를 반환하는 반면 다른 공급자는 사용자 핸들을 보냅니다. |
userRoles |
사용자의 할당된 역할의 배열입니다. |
claims |
사용자 지정 인증 공급자에서 반환한 클레임 배열입니다. 직접 액세스 엔드포인트에서만 액세스할 수 있습니다. |
다음 예제는 샘플 클라이언트 보안 주체 개체입니다.
{
"identityProvider": "github",
"userId": "d75b260a64504067bfc5b2905e3b8182",
"userDetails": "username",
"userRoles": ["anonymous", "authenticated"],
"claims": [{
"typ": "name",
"val": "Azure Static Web Apps"
}]
}
직접 액세스 엔드포인트
GET 요청을 /.auth/me 경로로 보내고 클라이언트 보안 주체 데이터에 직접 액세스할 수 있습니다. 보기 상태가 권한 부여 데이터를 사용하는 경우 최상의 성능을 위해 이 방법을 사용합니다.
로그인한 사용자의 경우 응답에는 클라이언트 보안 주체 JSON 개체가 포함되어 있습니다. 인증되지 않은 사용자의 요청은 null을 반환합니다.
fetch1 API를 통해 다음 구문을 사용하여 클라이언트 보안 주체 데이터에 액세스할 수 있습니다.
async function getUserInfo() {
const response = await fetch('/.auth/me');
const payload = await response.json();
const { clientPrincipal } = payload;
return clientPrincipal;
}
(async () => {
console.log(await getUserInfo());
})();
API 함수
Azure Functions 백 엔드를 통해 Static Web Apps에서 사용 가능한 API 함수는 claims 배열을 제외하고 클라이언트 애플리케이션과 동일한 사용자 정보에 액세스할 수 있습니다. API는 사용자 식별 가능한 정보를 수신하는 반면 사용자가 인증되는지 또는 요구되는 역할과 일치하는지 자체적인 확인을 수행하지는 않습니다. 액세스 제어 규칙은 staticwebapp.config.json 파일에 정의되어 있습니다.
클라이언트 보안 주체 데이터는 x-ms-client-principal 요청 헤더의 API 함수에 전달됩니다. 클라이언트 보안 주체 데이터는 직렬화된 JSON 개체를 포함하는 Base64 인코딩 문자열로 전송됩니다.
다음 예제 함수는 사용자 정보를 읽고 반환하는 방법을 보여줍니다.
module.exports = async function (context, req) {
const header = req.headers.get('x-ms-client-principal');
const encoded = Buffer.from(header, 'base64');
const decoded = encoded.toString('ascii');
context.res = {
body: {
clientPrincipal: JSON.parse(decoded),
},
};
};
위의 함수 이름이 user라고 가정할 경우 fetch1 브라우저 API를 통해 다음 구문을 사용하여 API의 응답에 액세스할 수 있습니다.
async function getUser() {
const response = await fetch('/api/user');
const payload = await response.json();
const { clientPrincipal } = payload;
return clientPrincipal;
}
console.log(await getUser());
사용자가 로그인하면 Static Web Apps 에지 노드를 통해 사용자 정보 요청에 x-ms-client-principal 헤더가 추가됩니다.
참고 항목
API 함수에서 액세스할 수 있는 x-ms-client-principal 헤더에는 claims 배열이 포함되어 있지 않습니다.
1 Internet Explorer에서는 fetch API 및 await 연산자가 지원되지 않습니다.