OpenIddictExternalAuthentication.Example/wwwroot/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OAuth</title>
</head>
<body>
<div>
    <div>
        <h1>Sign-in via OAuth</h1>
        <button onclick="signInVia('')">Internal</button>
        <button onclick="signInVia('Google')">Google</button>
        <button onclick="signInVia('Facebook')">Facebook</button>
        <button onclick="signInVia('Microsoft')">Microsoft</button>
        <button onclick="signInVia('OpenIdConnect')">AzureAD</button>
        <button onclick="signInVia('GitHub')">GitHub</button>
        <button onclick="signInVia('Twitter')">Twitter</button>
    </div>

    <div>
        <h1>Values</h1>
        <button onclick="getValues()">Get Values</button>
        <button onclick="getDocuments()">Get Documents</button>
        <button onclick="getUsers()">Get Users</button>
    </div>
    
    <div>
        <h1>Other</h1>
        <button onclick="refreshToken(true)">Refresh token from IdentityServer</button>    
        <button onclick="refreshToken(false)">Refresh token</button>    
        <button onclick="logOut()">Log Out</button>    
    </div>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client-ts/2.0.1/browser/oidc-client-ts.min.js"
        integrity="sha512-ymGcBIbfvSF053DTI0N2/9xMVbZtBSb3E5eR38SG+Ei8ITM/1XFQILwtRDD8QgUhSgjr2cA05BiQbQN76Nc6/w=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="module">
    let _accessToken = '';
    let _refreshToken = '';
    const authCallbackPath = '/index.html?auth-callback=1';
    const logoutCallbackPath = '/index.html?logout-callback=1';
    const scopes = 'offline_access';
    const backendUri = `${window.location.protocol}//${window.location.hostname}${window.location.port ? ':' : ''}${window.location.port}`;
    const redirectUri = `${backendUri}${authCallbackPath}`;
    const logoutRedirectUri = `${backendUri}${logoutCallbackPath}`;
    const clientId = 'web_client';

    const clientSettings = {
        authority: backendUri,
        client_id: clientId,
        redirect_uri: redirectUri,
        post_logout_redirect_uri: logoutRedirectUri,
        response_type: 'code',
        filterProtocolClaims: true,
        loadUserInfo: false,
        scope: scopes,
    };

    const userManager = new oidc.UserManager(clientSettings);


    if (window.location.href.includes('auth-callback')) {
        userManager.signinPopupCallback();
    } else if (window.location.href.includes('logout-callback')) {
        userManager.signoutPopupCallback();
    }

    async function logOut() {
        try {
            await userManager.signoutPopup();
            alert('LogOut succeeded');
            _accessToken = null;
            _refreshToken = null;
        } catch (e) {
            console.error('Error during authentication', e);
        }
    }

    async function refreshToken(isFromIdentityServer) {
        const refreshToken = isFromIdentityServer ? "123" : _refreshToken;
        if (!refreshToken) {
            alert('Not logged in');
            return;
        }
        
        try {
            const client = userManager._client;
            
            await client._tokenClient.exchangeRefreshToken({refresh_token: refreshToken});
            alert('Refresh token succeeded');
        } catch (e) {
            alert('Refresh token failed');
            console.error('Error during refresh token', e);
        }
    }
    
    async function signInVia(provider) {
        try {
            const user = await openExternalLoginPopup(provider);
            alert('Authentication succeeded');
            console.log('User', user);
            _accessToken = user.access_token;
            _refreshToken = user.refresh_token;
        } catch (e) {
            console.error('Error during authentication', e);
        }
    }

    async function openExternalLoginPopup(provider) {
        try {
            const user = await userManager.signinPopup({
                extraQueryParams: {provider: provider},
                prompt: 'login'
            });

            return user;
        } catch (e) {
            console.error('Error during external authentication', e);
            throw e;
        }
    }

    async function getData(url) {
        try {
            const data = await fetch(url,
                {
                    headers: {
                        'Authorization': `Bearer ${_accessToken}`,
                        'Content-Type': 'application/json;'
                    }
                })
            if (!data.ok) {
                alert('Error (Unauthorized)');
                return null;
            }
            const dt = await data.json();
            if (dt != null) {
                console.log(dt);
                alert(dt);
            }
        } catch (e) {
            alert(e);
        }
    }

    function getValues() {
        getData('/api/values');
    }

    function getUsers() {
        getData('/api/permissions/users');
    }

    function getDocuments() {
        getData('/api/permissions/documents');
    }

    window.signInVia = signInVia;
    window.getValues = getValues;
    window.getDocuments = getDocuments;
    window.getUsers = getUsers;
    window.logOut = logOut;
    window.refreshToken = refreshToken;
</script>
</body>
</html>