PawelHaracz/Authenticate-example.html

## Authenticate-example.html
<!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>
	<!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> </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>