Welcome Folks I am back with another post. In this post we will be implementing Firebase Authentication in Twitter using Javascript. Just Follow the steps given below to make this application
Before you Begin
Sign in to Firebase
Create a Firebase Project
Before you add Firebase to your application you need to create a firebase project in the firebase console
Click Add App button and select web appplication
Give a suitable name to your app as shown below
After that add Firebase SDK to the app by copy paste the following code. This code is auto generated and is different for each project.
After you have created Firebase Project you need to make a Twitter Project by going to their developers website
Create Twitter Project
You can go to Twitter Developer Website to signup and create project as shown below
You need to copy paste the same api key and api secret key in the firebase console of your project also something like this as shown below
Also copy paste the same callback url which is shown in the firebase console into twitter project callback url just follow the step shown below and open twitter project and paste same callback url like this shown below
After doing all these steps you are set to go for actually coding this application. So just your favourite ide and create a html file and copy paste the following code into it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>Twitter Auth</title> </head> <body> </body> <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/5.11.1/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/5.11.1/firebase-auth.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#config-web-app --> <script> // Your web app's Firebase configuration var firebaseConfig = { apiKey: "AIzaSyBaaR3NfTRH8Nn_lBU2g9FD586YPDfzqdg", authDomain: "convertimagetopdf-94d3a.firebaseapp.com", databaseURL: "https://convertimagetopdf-94d3a.firebaseio.com", projectId: "convertimagetopdf-94d3a", storageBucket: "convertimagetopdf-94d3a.appspot.com", messagingSenderId: "688742065326", appId: "1:688742065326:web:f9b11a9568b7c095" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- button for invoking redirect auth--> <button onclick="signin()" id="sign-in"> Sign in with Twitter </button> <!-- the place for holding Twitter profile pic--> <div id="user-image"> </div> <!-- the place for holding Twitter email address--> <h1 id="user-email"> </h1> |
In these lines of code we are just setting div sections for holding twitter profile pic and display name for the user respectively
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<script> function signin() { var provider = new firebase.auth.TwitterAuthProvider(); firebase.auth().useDeviceLanguage(); firebase.auth().signInWithPopup(provider).then(function(result) { // This gives you a the Twitter OAuth 1.0 Access Token and Secret. // You can use these server side with your app's credentials to access the Twitter API. var token = result.credential.accessToken; console.log(token); var secret = result.credential.secret; console.log(secret); // The signed-in user info. document.querySelector("#sign-out").style.display="block"; var user = result.user; console.log(user.email); var userImage = document.querySelector("#user-image"); // appending the user profile image var userPic = document.createElement("img"); userPic.src=user.photoURL; userImage.append(userPic); // appending the user email address var userEmail = document.querySelector("#user-email"); userEmail.innerHTML = user.displayName; console.log(user); // ... }).catch(function(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> |
This is the business logic of the application. This script contains only function that is sign in which will be executed whenever the user presses the sign in button in the web page so in this function first of all whenever user presses button a twitter popup window will appear asking the user to grant access to the application something as shown below. The user needs to grant access to the application so that we can fetch user display name and profile pic of user twitter account
Sign out a User in Firebase Twitter
|
1 2 3 4 5 |
firebase.auth().signOut().then(function() { // Sign-out successful. }).catch(function(error) { // An error happened. }); |
