search

Google, Facebook and Github Sign In/Up (à faire)

circle-info

Traduction de la documentation arrow-up-rightet projet arrow-up-rightde @jaythemanchsarrow-up-right, un grand merci à lui !

hashtag
How To Add Third Party Sign In To Your App

hashtag
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

hashtag
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&amp;family=Roboto&amp;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>
circle-exclamation

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:

circle-exclamation

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:

hashtag
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

triangle-exclamation

This does not contain the code for the sign-in process itself! Please refer to the next step for the code.

hashtag
Step 4

In your Thunkable App, add the following code.

hashtag
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.

PreviousNon-Officiel (à faire)Next4 Keys To Designing A Great Mobile App

Last updated