vanilla-js.cshtml

@page
@using  Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
@{
    ViewData["Title"] = "EasyAuth sample - with vanilla JS";
    var facebookAppId = Configuration["facebookAppId"];
    var googleClientId = Configuration["googleClientId"];
    var functionAppBaseUrl = Configuration["functionAppBaseUrl"];
    if (!functionAppBaseUrl.EndsWith("/"))
    {
        functionAppBaseUrl += "/";
    }
    var useFacebook = !string.IsNullOrEmpty(facebookAppId);
    var useGoogle = !string.IsNullOrEmpty(googleClientId);
}
@section Head {
    @if (useGoogle)
    {
        <meta name="google-signin-scope" content="profile email">
        <meta name="google-signin-client_id" content="@googleClientId">
    }
}
<h1>EasyAuth sample web client - with vanilla JS</h1>

<h2>Sign in with:</h2>
@if (useFacebook)
{
    <div class="login-provider">
        <h3>Facebook</h3>
        <div>
            <fb:login-button scope="public_profile,email"
                             auto-logout-link="true"
                             onlogin="onFacebookLogin();">
            </fb:login-button>
        </div>
    </div>
}
@if (useGoogle)
{
    <div class="login-provider">
        <h3>Google</h3>
        <div>
            @*<div class="g-signin2" data-onsuccess="onGoogleLogin"></div>*@
            <div id="my-signin2"></div>
            <a href="#" onclick="googleSignOut();">Sign out</a>
        </div>
    </div>
}

<h2>Call Azure Functions:</h2>
The following actions call into our deployed Azure Functions:
<div>
    <button id="testIsAuthenticated">Test Authenticated</button>
    <button id="getClaims">Get Claims</button>
    <button id="getAuthInfo">Get Auth Info</button>
    <button id="getEmail">Get Email</button>
</div>


<h2>Call EasyAuth:</h2>
The following actions call into the EasyAuth endpoints:
<div>
    <button id="callAuthMe">.auth/me</button>
    <button id="callAuthLogout">.auth/logout</button>
</div>

<div>
    <h2>Log:</h2>
    <button id="clearLog">Clear</button>
    <div id="log"></div>
</div>



<script>
    var easyAuthInfo = null;
    var functionAppBaseUrl = '@functionAppBaseUrl';
    function clearEasyAuth(provider) {
        if (easyAuthInfo === null) {
            return; // no info to clear
        }
        if (easyAuthInfo.provider === provider) {
            easyAuthInfo = null;
        }
        // else - not currently logged in with the specified provider
    }
    function getEasyAuthToken() {
        return easyAuthInfo === null ? null : easyAuthInfo.token;
    }

    @if (useFacebook){
        @* Pull in the facebook JavaScript SDK: https://developers.facebook.com/docs/javascript/
        Other facebook SDKs: https://developers.facebook.com/docs/
        *@
        <text>
        window.fbAsyncInit = function () {
            FB.init({
                appId: '@facebookAppId',
                cookie: true,
                xfbml: true,
                version: 'v2.12'
            });
            onFacebookLogin();
        };
        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
        function onFacebookLogin() {
            FB.getLoginStatus(function (response) {
                log(`In facebook callback: ${JSON.stringify(response)}`);
                if (response === undefined || response.status.toLowerCase() === 'connected') {
                    var accessToken = response.authResponse.accessToken;
                    translateAuthToken('facebook', { 'access_token': accessToken });
                } else {
                    clearEasyAuth('facebook');
                }
            });
        }
        </text>
    }
/**/
    @if (useGoogle)
    {
        @* docs: https://developers.google.com/identity/sign-in/web/build-button
            https://developers.google.com/identity/sign-in/web/reference
        *@
        <text>
        function renderButton()
        {
            gapi.signin2.render('my-signin2', {
                'scope': 'profile email',
                'width': 240,
                'height': 50,
                'longtitle': true,
                'theme': 'light',
                'onsuccess': onGoogleLogin,
                'onfailure': onGoogleLogin
            });
        }
        function onGoogleLogin(googleUser) {
            console.log(googleUser.getAuthResponse());
            var id_token = googleUser.getAuthResponse().id_token;
            translateAuthToken('google', { 'id_token': id_token });
        };
        function googleSignOut() {
            var auth2 = gapi.auth2.getAuthInstance();
            auth2.signOut().then(function () {
                console.log('User signed out.');
            });
            clearEasyAuth('google');
        }
        </text>
    }

    var logElement = document.getElementById('log');
    function clearLog() {
        logElement.innerText = '';
    }
    function log(message) {
        logElement.innerText += message + '\r\n';
    }

    function translateAuthToken(provider, body) {
        // Call function app to translate provider token to easyAuthInfo
        sendRequest(
            {
                method: 'POST',
                url: `${functionAppBaseUrl}.auth/login/${provider}`,
                headers: {
                    'accept': 'application/json',
                    'content-type': 'application/json',
                },
                body: body
            },
            function () {
                log(`EasyAuth response (${provider}): ${this.responseText}`);
                var easyAuthResponse = JSON.parse(this.responseText);
                easyAuthInfo =
                    {
                        provider: provider,
                        token: easyAuthResponse.authenticationToken,
                    };
            }
        );
    }

    function callIsAuthenticated() {
        sendRequest(
            {
                method: 'GET',
                url: `${functionAppBaseUrl}api/IsAuthenticated`,
                headers: {
                    'accept': 'application/json',
                    'content-type': 'application/json',
                    'X-ZUMO-AUTH': getEasyAuthToken()
                },
            },
            function () {
                log(`Response from IsAuthenticated: ${this.responseText}`);
            }
        );
    }
    function callGetClaims() {
        sendRequest(
            {
                method: 'GET',
                url: `${functionAppBaseUrl}api/GetClaims`,
                headers: {
                    'accept': 'application/json',
                    'content-type': 'application/json',
                    'X-ZUMO-AUTH': getEasyAuthToken()
                },
            },
            function () {
                log(`Response from GetClaims: ${this.responseText}`);
            }
        );
    }
    function callGetAuthInfo() {
        sendRequest(
            {
                method: 'GET',
                url: `${functionAppBaseUrl}api/GetAuthInfo`,
                headers: {
                    'accept': 'application/json',
                    'content-type': 'application/json',
                    'X-ZUMO-AUTH': getEasyAuthToken()
                },
            },
            function () {
                log(`Response from GetAuthInfo: ${this.responseText}`);
            }
        );
    }
    function callGetEmail() {
        sendRequest(
            {
                method: 'GET',
                url: `${functionAppBaseUrl}api/GetEmailClaim`,
                headers: {
                    'accept': 'application/json',
                    'content-type': 'application/json',
                    'X-ZUMO-AUTH': getEasyAuthToken()
                },
            },
            function () {
                log(`Response from GetEmail: ${this.responseText}`);
            }
        );
    }
    function callAuthMe() {
        sendRequest(
            {
                method: 'GET',
                url: `${functionAppBaseUrl}.auth/me`,
                headers: {
                    'accept': 'application/json',
                    'content-type': 'application/json',
                    'X-ZUMO-AUTH': getEasyAuthToken()
                },
            },
            function () {
                log(`Response from .auth/me: ${this.responseText}`);
            }
        );
    }
    function callAuthLogout() {
        sendRequest(
            {
                method: 'GET',
                url: `${functionAppBaseUrl}.auth/logout`,
                headers: {
                    'accept': 'application/json',
                    'content-type': 'application/json',
                    'X-ZUMO-AUTH': getEasyAuthToken()
                },
            },
            function () {
                log('called .auth/logout');
            }
        );
    }
    function sendRequest(options, handler) {
        var xhr = new XMLHttpRequest();
        xhr.open(options.method, options.url);
        for (header in options.headers) {
            xhr.setRequestHeader(header, options.headers[header]);
        }
        xhr.onload = handler
        var body = options.body;
        if (body !== undefined && body !== null && typeof (body) !== 'string') {
            body = JSON.stringify(body);
        }
        xhr.send(body);
    }

    document.getElementById('clearLog').addEventListener('click', clearLog);
    document.getElementById('testIsAuthenticated').addEventListener('click', callIsAuthenticated);
    document.getElementById('getClaims').addEventListener('click', callGetClaims);
    document.getElementById('getAuthInfo').addEventListener('click', callGetAuthInfo);
    document.getElementById('getEmail').addEventListener('click', callGetEmail);
    document.getElementById('callAuthMe').addEventListener('click', callAuthMe);
    document.getElementById('callAuthLogout').addEventListener('click', callAuthLogout);

</script>
@if (useGoogle)
{
    <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
}