Reactjs Login with Google

// import React, { Component } from 'react';

// class App extends Component {

//     componentDidMount() {
//         this.googleSDK();
//         console.log('sfsfd');
//     }

//     prepareLoginButton = () => {

//     console.log(this.refs.googleLoginBtn);

//     this.auth2.attachClickHandler(this.refs.googleLoginBtn, {},
//         (googleUser) => {

//         let profile = googleUser.getBasicProfile();
//         console.log('Token || ' + googleUser.getAuthResponse().id_token);
//         console.log('ID: ' + profile.getId());
//         console.log('Name: ' + profile.getName());
//         console.log('Image URL: ' + profile.getImageUrl());
//         console.log('Email: ' + profile.getEmail());
//         //YOUR CODE HERE


//         }, (error) => {
//             alert(JSON.stringify(error, undefined, 2));
//         });

//     }

//     googleSDK = () => {

//         window['googleSDKLoaded'] = () => {
//           window['gapi'].load('auth2', () => {
//             this.auth2 = window['gapi'].auth2.init({
//               client_id: '110458281334-jqf86cudqvt8525timla61q2qmjg48rf.apps.googleusercontent.com',
//               cookiepolicy: 'single_host_origin',
//               scope: 'profile email'
//             });
//             this.prepareLoginButton();
//           });
//         }

//         (function(d, s, id){
//           var js, fjs = d.getElementsByTagName(s)[0];
//           if (d.getElementById(id)) {return;}
//           js = d.createElement(s); js.id = id;
//           js.src = "https://apis.google.com/js/platform.js?onload=googleSDKLoaded";
//           fjs.parentNode.insertBefore(js, fjs);
//         }(document, 'script', 'google-jssdk'));

//     }

    render() {

        return (
            <div className="row mt-5">
                <div className="col-md-12">
                    <h2 className="text-left">Google Login Demo</h2>
                    <div className="card mt-3">
                        <div className="card-body">

                            <div className="row mt-5 mb-5">
                                <div className="col-md-4 mt-2 m-auto ">
                                    <button className="loginBtn loginBtn--google" ref="googleLoginBtn">
                                        Login with Google
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;






// import React, { Component } from 'react';
// // import './App.css';

// // import FacebookLogin from 'react-facebook-login';

// import GoogleLogin from 'react-google-login';

// class App extends Component {

//   render() {

//     const responseFacebook = (response) => {
//       console.log(response);
//     }

//     const responseGoogle = (response) => {
//       console.log(response);
//     }

//     return (
//       <div className="App">
//         <h1>LOGIN WITH FACEBOOK AND GOOGLE</h1>

//       {/* <FacebookLogin
//         appId="" //APP ID NOT CREATED YET
//         fields="name,email,picture"
//         callback={responseFacebook}
//       /> */}
//       <br />
//       <br />


//       <GoogleLogin
//         clientId="110458281334-jqf86cudqvt8525timla61q2qmjg48rf.apps.googleusercontent.com" //CLIENTID NOT CREATED YET
//         buttonText="LOGIN WITH GOOGLE"
//         onSuccess={responseGoogle}
//         onFailure={responseGoogle}
//       />

//       </div>
//     );
//   }
// }

// export default App;

Comments

Post a Comment

Popular posts from this blog

ERR: error parsing query: found influx, expected SELECT, DELETE, SHOW, CREATE, DROP, EXPLAIN, GRANT, REVOKE, ALTER, SET, KILL at line

I execute the influxdb query like this in CMD SELECT LAST(node) as node, last(node_name) as node_name, last(location) as location," \ " last(shuntVoltage) as shutVoltage, last(loadVoltage) as loadVoltage, " \ "last(current) as current, last(busVoltage) as busVoltage from powers where time>=now()-15m and time<=now()-15m  and node=" getting error: ERR: error parsing query: found influx, expected SELECT, DELETE, SHOW, CREATE, DROP, EXPLAIN, GRANT, REVOKE, ALTER, SET, KILL at line 277 Resolved? SELECT LAST(node) as node, last(node_name) as node_name, last(location) as location," \ " last(shuntVoltage) as shutVoltage, last(loadVoltage) as loadVoltage, " \ "last(current) as current, last(busVoltage) as busVoltage from powers where time>=now()- '15m' and time<=now()-'15m' and node="
Read more

How To Convert Html File/URL/String Into Image Using Python

   I worked on converting HTML formate to PNG Image using python, its take 1 week to complete, First, I tried with  Imgkit  Package then I tried with  Html2image  Package, Later I tried with  Pypperteer  Package, When I used Imgkit package, I faced on one issue what it means, in HTML file we have any embedded code or more loading javascript code, its take more than 5 sec so when I used imgkit it is not taking those things on the image. when I used Html2image Package, I faced the same issue Finally, I solved that loading issue using Pypperteer Package ( https://github.com/pyppeteer/pyppeteer ), In Pypperteer Package we have one option, by using that option we can stop converting into the image until load the complete HTML file, And here we have one more great option to pass HTML string to get Document Elements like OffsetHight, etc. import asyncio from pyppeteer import launch def converting_html_image(input_url) -&gt; str:     file_na...
Read more

How to get Full URL or get absolute url In Django

this is use full to get full url for images or files. getting: [     {          "id" :  1 ,          "photo_url" :  "/media/media/11_sUhP0CC.png"     } ] Need: (after apply below process we get full url) [     {          "id" :  1 ,          "photo_url" :  "http://localhost:8000/media/media/11_sUhP0CC.png"     } ] Existing code: models.py class Car ( models . Model ): name = models . CharField ( max_length = 255 ) price = models . DecimalField ( max_digits = 5 , decimal_places = 2 ) photo = models . ImageField ( upload_to = 'cars' ) serializers.py class CarSerializer ( serializers . ModelSerializer ): class Meta : model = Car fields = ( 'id' ...
Read more