Google, Facebook and Github Sign In/Up (à faire)
Traduction de la documentation et projet de @jaythemanchs, un grand merci à lui !
How To Add Third Party Sign In To Your App
Step 1:
Use a hosting service like Neocities or Firebase Hosting to allow the use of static HTML files
For this example, I will show you how to do it on Neocities, as it is easy to set up.
Create an account at Neocities.org
Create a website with three HTML files called google-login.html, facebook-login.html and github-login.html
Make Sure you have enabled all 3rd party services that you want to use
Step 2:
Set up the static HTML files to allow 3rd Party Login.
Start by adding the HTML as listed underneath.
Open your google-login.html file
Add this code at the top of the page (Note: remove any other code from the file before adding the code.)
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Roboto&display=swap">
<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Noto Sans', Arial, serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.618em;
background: #464646 url('https://isabelcastillo.com/wp-content/uploads/lake.jpg') center center no-repeat fixed;
background-size: cover;
display: none;
}
h2 {
font-family: 'Noto Sans', Arial, serif;
font-weight: 700;
font-size: 40px;
line-height: 1.618em;
}
section {
max-width: 800px;
margin: 8% auto 1em auto;
background-color: #222;
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
color: #fff;
padding: 1em 5%;
}
a {
color: #00CC66;
}
a:focus {
outline:none;
outline-offset:inherit;
}
@media (max-device-width: 1027px) {
body {
text-align:center;
font-size:larger;
}
section {
max-width: 90%;
}
}
@media (max-device-width: 640px) {
section {
max-width: 97%;
}
}
</style>
</head>
<body id="body">
<section>
<h2>Successfully Logged In!</h2>
<h3>You have successfully logged in.</h3>
<h3>You can now safely close this tab</h3>
<p>If you have waited more than a few seconds and you are still waiting, please reload the page. Thank you!</p>
</section>
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebase/8.4.3/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/8.4.3/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebase/8.4.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebase/8.4.3/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebase/8.4.3/firebase-database.js"></script>
<script>
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
const idHash = location.hash.substring(1);
var googleProvider = new firebase.auth.GoogleAuthProvider();
var database = firebase.database();
function checkUser() {
var user = firebase.auth().currentUser;
if (user != null) {
var uid = user.uid;
console.log("Logged In");
console.log(JSON.parse(JSON.stringify(user)));
ThunkableWebviewerExtension.postMessage(JSON.stringify(user));
firebase.database().ref('users/' + idHash).set({
object: JSON.parse(JSON.stringify(user)),
});
document.getElementById("body").style.display = "block";
} else {
console.log("Not Logged In");
firebase.auth().signInWithRedirect(googleProvider);
}
};
googleProvider.setCustomParameters({
'prompt': 'select_account'
});
firebase.auth()
.getRedirectResult()
.then((result) => {
if (result.credential) {
/** @type {firebase.auth.OAuthCredential} */
var credential = result.credential;
// This gives you a Google Access Token. You can use it to access the Google API.
var token = credential.accessToken;
// ...
}
// The signed-in user info.
checkUser();
}).catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
</script>
</body>
</html>Note: Remember to fill out firebaseConfig.
Open your facebook-login.html file
Add this code at the top of the page (Note: remove any other code from the file before adding the code.)
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Roboto&display=swap">
<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Noto Sans', Arial, serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.618em;
background: #464646 url('https://isabelcastillo.com/wp-content/uploads/lake.jpg') center center no-repeat fixed;
background-size: cover;
display: none;
}
h2 {
font-family: 'Noto Sans', Arial, serif;
font-weight: 700;
font-size: 40px;
line-height: 1.618em;
}
section {
max-width: 800px;
margin: 8% auto 1em auto;
background-color: #222;
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
color: #fff;
padding: 1em 5%;
}
a {
color: #00CC66;
}
a:focus {
outline:none;
outline-offset:inherit;
}
@media (max-device-width: 1027px) {
body {
text-align:center;
font-size:larger;
}
section {
max-width: 90%;
}
}
@media (max-device-width: 640px) {
section {
max-width: 97%;
}
}
</style>
</head>
<body id="body">
<section>
<h2>Successfully Logged In!</h2>
<h3>You have successfully logged in.</h3>
<h3>You can now safely close this tab</h3>
<p>If you have waited more than a few seconds and you are still waiting, please reload the page. Thank you!</p>
</section>
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebase/8.4.3/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/8.4.3/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebase/8.4.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebase/8.4.3/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebase/8.4.3/firebase-database.js"></script>
<script>
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
const idHash = location.hash.substring(1);
var facebookProvider = new firebase.auth.FacebookAuthProvider();
var database = firebase.database();
function checkUser() {
var user = firebase.auth().currentUser;
if (user != null) {
var uid = user.uid;
console.log("Logged In");
console.log(JSON.parse(JSON.stringify(user)));
ThunkableWebviewerExtension.postMessage(JSON.stringify(user));
firebase.database().ref('users/' + idHash).set({
object: JSON.parse(JSON.stringify(user)),
});
document.getElementById("body").style.display = "block";
} else {
console.log("Not Logged In");
firebase.auth().signInWithRedirect(facebookProvider);
}
};
googleProvider.setCustomParameters({
'prompt': 'select_account'
});
firebase.auth()
.getRedirectResult()
.then((result) => {
if (result.credential) {
/** @type {firebase.auth.OAuthCredential} */
var credential = result.credential;
// This gives you a Google Access Token. You can use it to access the Google API.
var token = credential.accessToken;
// ...
}
// The signed-in user info.
checkUser();
}).catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
</script>
</body>
</html>Note: Remember to fill out firebaseConfig.
Open your github-login.html file
Add this code at the top of the page (Note: remove any other code from the file before adding the code.)
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Roboto&display=swap">
<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Noto Sans', Arial, serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.618em;
background: #464646 url('https://isabelcastillo.com/wp-content/uploads/lake.jpg') center center no-repeat fixed;
background-size: cover;
display: none;
}
h2 {
font-family: 'Noto Sans', Arial, serif;
font-weight: 700;
font-size: 40px;
line-height: 1.618em;
}
section {
max-width: 800px;
margin: 8% auto 1em auto;
background-color: #222;
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
color: #fff;
padding: 1em 5%;
}
a {
color: #00CC66;
}
a:focus {
outline:none;
outline-offset:inherit;
}
@media (max-device-width: 1027px) {
body {
text-align:center;
font-size:larger;
}
section {
max-width: 90%;
}
}
@media (max-device-width: 640px) {
section {
max-width: 97%;
}
}
</style>
</head>
<body id="body">
<section>
<h2>Successfully Logged In!</h2>
<h3>You have successfully logged in.</h3>
<h3>You can now safely close this tab</h3>
<p>If you have waited more than a few seconds and you are still waiting, please reload the page. Thank you!</p>
</section>
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebase/8.4.3/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/8.4.3/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebase/8.4.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebase/8.4.3/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebase/8.4.3/firebase-database.js"></script>
<script>
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
const idHash = location.hash.substring(1);
var githubProvider = new firebase.auth.GithubAuthProvider();
var database = firebase.database();
function checkUser() {
var user = firebase.auth().currentUser;
if (user != null) {
var uid = user.uid;
console.log("Logged In");
console.log(JSON.parse(JSON.stringify(user)));
ThunkableWebviewerExtension.postMessage(JSON.stringify(user));
firebase.database().ref('users/' + idHash).set({
object: JSON.parse(JSON.stringify(user)),
});
document.getElementById("body").style.display = "block";
} else {
console.log("Not Logged In");
firebase.auth().signInWithRedirect(githubProvider);
}
};
googleProvider.setCustomParameters({
'prompt': 'select_account'
});
firebase.auth()
.getRedirectResult()
.then((result) => {
if (result.credential) {
/** @type {firebase.auth.OAuthCredential} */
var credential = result.credential;
// This gives you a Google Access Token. You can use it to access the Google API.
var token = credential.accessToken;
// ...
}
// The signed-in user info.
checkUser();
}).catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
</script>
</body>
</html>Step 3:
Optional: Add stylish 3rd Party Sign In Buttons to your app. Use the link below to copy the screen into your own apps
This does not contain the code for the sign-in process itself! Please refer to the next step for the code.
Step 4
In your Thunkable App, add the following code.
Epilogue
And there you have it! You have just created a way that users can conveniently sign in to your app without the hassle of making an account.
Last updated