Demo logon
This is just a demo site for federated login. No details are stored. [Ask a question][Register for an account]
Sign out |
User:
Email:
Photo:
UID:
Form
Coding
Here is the coding:
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase.js"></script> <script>var firebaseConfig = { apiKey: "AIzaSyC5NGQ9fha1V5HEUv4hvV0TwlxNcwd7css", authDomain: "asecuritysite.firebaseapp.com", databaseURL: "https://asecuritysite.firebaseio.com", projectId: "asecuritysite", storageBucket: "asecuritysite.appspot.com", messagingSenderId: "509758399917", appId: "1:509758399917:web:c46a6e1f78d6fa79486d24", measurementId: "G-KX6DK1KK2X" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); firebase.analytics();</script> <script>function twitterSignin() { var provider = new firebase.auth.TwitterAuthProvider(); firebase.auth().signInWithPopup(provider) .then(function (result) { var token = result.credential.accessToken; var user = result.user; resp = user.email; if (resp == null) resp = result.user.providerData[0].email; document.getElementById("t1").innerHTML = user.displayName; document.getElementById("t2").innerHTML = resp; document.getElementById('t3').src = user.photoURL document.getElementById("t4").innerHTML = user.uid }).catch(function (error) { console.log(error.code) console.log(error.message) }); } function twitterSignout() { document.getElementById("t1").innerHTML = "" document.getElementById("t2").innerHTML = ""; document.getElementById('t3').src = "" document.getElementById("t4").innerHTML = ""; auth.currentUser.signOut() .then(function () { console.log('Signout successful!') }, function (error) { console.log('Signout failed!') }); }</script> <script>function googleSignin() { var provider = new firebase.auth.GoogleAuthProvider(); provider.addScope('email'); firebase.auth().signInWithPopup(provider) .then(function (result) { var token = result.credential.accessToken; var user = result.user; resp = user.email; document.getElementById("t1").innerHTML = user.displayName; document.getElementById("t2").innerHTML = resp; document.getElementById('t3').src = user.photoURL document.getElementById("t4").innerHTML = user.uid }).catch(function (error) { console.log(error.code) console.log(error.message) }); } function googleSignout() { document.getElementById("t1").innerHTML = "" document.getElementById("t2").innerHTML = ""; document.getElementById('t3').src = "" document.getElementById("t4").innerHTML = ""; auth.currentUser.signOut() .then(function () { console.log('Signout successful!') }, function (error) { console.log('Signout failed!') }); }</script> <script>function microsoftSignin() { var provider = new firebase.auth.OAuthProvider('microsoft.com'); provider.setCustomParameters({ // Optional "tenant" parameter in case you are using an Azure AD tenant. // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com' // or "common" for tenant-independent tokens. // The default value is "common". tenant: 'common', prompt: 'select_account' }); firebase.auth().signInWithPopup(provider) .then(function (result) { var token = result.credential.accessToken; var user = result.user; resp = user.email; document.getElementById("t1").innerHTML = user.displayName; document.getElementById("t2").innerHTML = resp; // document.getElementById('t3').src = user.photoURL document.getElementById("t4").innerHTML = user.uid }).catch(function (error) { console.log(error.code) console.log(error.message) }); } function microsoftSignout() { document.getElementById("t1").innerHTML = "" document.getElementById("t2").innerHTML = ""; document.getElementById('t3').src = "" document.getElementById("t4").innerHTML = ""; auth.currentUser.signOut() .then(function () { console.log('Signout successful!') }, function (error) { console.log('Signout failed!') }); }</script> <script> function validate() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; firebase.auth().signInWithEmailAndPassword(username, password) .then(function (firebaseUser) { document.getElementById("t1").innerHTML = username; }) .catch(function (error) { document.getElementById("t1").innerHTML = "You are not registered. Contact [email protected] for an account"; }); } </script> <script>function facebookSignin() { var provider = new firebase.auth.FacebookAuthProvider(); provider.addScope('email'); provider.setCustomParameters({ 'display': 'popup' }); firebase.auth().signInWithPopup(provider) .then(function (result) { alert(result); var token = result.credential.accessToken; var user = result.user; resp = user.email; var xhr = new XMLHttpRequest(); xhr.open('POST', '/account/ll2', false); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('idtoken=' + resp); var fbr = xhr.responseText; document.getElementById("res").innerHTML = fbr; // document.getElementById("t1").innerHTML = user.displayName; document.getElementById("t2").innerHTML = resp; // document.getElementById("t4").innerHTML = user.uid }).catch(function (error) { console.log(error.code) console.log(error.message) }); } function facebookSignout() { document.getElementById("t1").innerHTML = "" document.getElementById("t2").innerHTML = ""; document.getElementById('t3').src = "" document.getElementById("t4").innerHTML = ""; auth.currentUser.signOut() .then(function () { console.log('Signout successful!') }, function (error) { console.log('Signout failed!') }); }</script> <h1 id="logo">Demo logon</h1> <p>This is just a demo site for federated login. No details are stored. [Ask a question][Register for an account]</p> <table> <tr> <td> <input id="micro" type="image" src="/public/gotwitter.png" alt="Submit" onclick="twitterSignin()" height="50px"> </td> <td> <input id="micro" type="image" src="/public/gogoogle.png" alt="Submit" onclick="googleSignin()" height="50px"> </td> </tr> <tr> <td> <input id="micro" type="image" src="/public/gogoogle.png" alt="Submit" onclick="googleSignin()" height="50px"> </td> <td> <input id="micro" type="image" src="/public/gofacebook.png" alt="Submit" onclick="facebookSignin()" height="50px"> </td> </tr> <tr><td colspan="3"><a href="#" onclick="twitterSignout();">Sign out</a></td></tr> </table>
Blog
A blog related to this is defined here