Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Serverless Authentication</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@aspnet/signalr@1.1.4/dist/browser/signalr.js"></script>
</head>
<body>
<p>&nbsp;</p>
<div id="app" class="container">
<h3>Serverless Authentication</h3>
<div v-if="authenticated">
You are logged in [<a href="#" v-on:click.prevent="logout">Logout</a>]
<div>
<button v-on:click="click">click me</button>
</div>
</div>
<div v-if="!authenticated">
<a href="#" v-on:click.prevent="login">Login</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
const apiBaseUrl = 'https://<Your-Function-AppName>.azurewebsites.net';
const authProvider = 'facebook'; // aad, twitter, microsoftaccount, google, facebook
</script>
<script>
const app = new Vue({
el: '#app',
data: function () {
return {
authenticated: false,
username: '',
token: '',
loginUrl: `${apiBaseUrl}/.auth/login/${authProvider}?post_login_redirect_url=${window.location.href}`,
logoutUrl: `${apiBaseUrl}/.auth/logout?post_logout_redirect_uri=${window.location.href}`
};
},
mounted: function () {
return this.getAuthInfo().catch(console.error).then(function () {
console.log("Logged");
}.bind(this));
},
methods: {
login: function () {
window.location.href = this.loginUrl;
},
logout: function () {
window.location.href = this.logoutUrl;
},
getAuthInfo: function () {
return fetch(`${apiBaseUrl}/.auth/me`, {
method: 'POST',
credentials: 'include',
mode: 'cors',
body: null
})
.then((response) => response.json())
.then((data) => {
this.token = data[0].access_token;
this.username = data[0].user_id;
this.authenticated = true
}, () => null);
},
click: function (event) {
fetch(`${apiBaseUrl}/api/GetCookies`, {
method: 'GET',
credentials: 'include',
mode: 'cors'
}).then(response => {
console.log(JSON.stringify(response));
})
.catch(console.error);
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.