소개

GitHub 인증으로 액세스 제한을 걸어 보았습니다.

개발 환경

GitHub

Windows10

Azure

샘플 사이트

index.html

<h1>Hello World</h1>
<a href="/admin.html">Admin</a>

admin.html

<h1>Admin Page!!</h1>

방법

staticwebapp.config.json을 루트 폴더에 추가

staticwebbapp.config.json

{
    "routes": [
        {
            "route": "/login",
            "rewrite": "/.auth/login/github"
        },
        {
            "route": "/logout",
            "rewrite": "/.auth/logout"
        },
        {
            "route": "/admin.html",
            "allowedRoles": ["admin"]
        }
    ]
}

이제 admin 페이지에 액세스할 수 없습니다.

사용자를 역할에 추가

Azure의 StaticApp에 액세스하여 역할 관리 → 초대에서 링크 만들기


초대 링크를 방문하여 동의

로그인/로그아웃 링크 추가

index.html

<h1>Hello World</h1>
<a href="/admin.html">Admin</a>
<a href="/login">login</a>
<a href="/logout">logout</a>

역할을 부여한 계정으로 로그인하면 admin 페이지에 액세스할 수 있습니다.




역할이 부여되지 않은 계정으로 인증하면 액세스할 수 없습니다.

추가

staticwebapp.config.json

{
    "routes": [ 
    {
        "route": "/login",
        "rewrite": "/.auth/login/github"
    },
    {
        "route": "/logout",
        "rewrite": "/.auth/logout"
    },
    {
        "route": "/*",
        "allowedRoles": ["admin"]
    }
]
}

설정 파일을 위와 같이 하면 모든 페이지를 필터링할 수 있습니다.
이 경우 로그인 링크에 대한 액세스는 직접 url로 이루어집니다.