facebook & google login button
logged in, got access token
to log out, clear website data
add google+ api -> add authorized origins
facebook developer -> add domain
package.json
{
"name": "react-facebook-login",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-facebook-login": "^4.1.0",
"react-google-login": "^3.2.1",
"react-scripts": "1.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
-----------------------------------------------
app.js
import React, { Component } from 'react';import './App.css';
import Facebook from './components/facebook';
import Google from './components/google';
class App extends Component {
render() {
return (
<div>
<Facebook/><br/>
<Google/><br/>
To log out, clear webbroweser saved website data
</div>
);
}
}
export default App;
---------------------------------------------
google.js
import React, {Component} from 'react'
import { GoogleLogin} from 'react-google-login';
export default class Google extends Component{
state={
isLoggedIn: false,
userID:'',
name:'',
email:'',
picture:'',
accessToken:''
}
handle_loginSuccess = (res) =>{
this.setState({
isLoggedIn:true,
userID: res.profileObj.googleId,
name: res.profileObj.name,
email:res.profileObj.email,
picture:res.profileObj.imageUrl,
accessToken: res.accessToken
})
}
handle_loginFail=(res)=>{
console.log(res);
}
render(){
let googleContent;
if(!this.state.isLoggedIn){
googleContent=(<GoogleLogin
clientId="777285939272-s9bsmvkvve3jidsho0qspb928r6avdq5.apps.googleusercontent.com"
buttonText="Login with Google"
onSuccess={this.handle_loginSuccess}
onFailure={this.handle_loginFail}
/>)}else{
googleContent=(<div>
<div style={{
width:'400px',
margin:'auto',
background:'#f4f4f4',
overflow: 'scroll'
}}>
<img src={this.state.picture} alt={this.state.name}/>
<h2>Welcome {this.state.name}</h2>
<p>Email: {this.state.email}</p>
Access Token: {this.state.accessToken}
</div>
</div>);
}
return(
<div>{googleContent}</div>
)
}
}
---------------------------------------
facebook.js
import React, {Component} from 'react'
import FacebookLogin from 'react-facebook-login';
export default class Facebook extends Component{
state={
isLoggedIn: false,
userID:'',
name:'',
email:'',
picture:'',
accessToken:''
}
componentClicked=()=>console.log('clicked');
responseFacebook=res=>{
this.setState({
isLoggedIn:true,
userID: res.userID,
name: res.name,
email:res.email,
picture:res.picture.data.url,
accessToken:res.accessToken
})
}
render(){
let fbContent;
if(this.state.isLoggedIn){
fbContent= (
<div style={{
width:'400px',
margin:'auto',
background:'#f4f4f4',
overflow: 'scroll'
}}>
<img src={this.state.picture} alt={this.state.name}/>
<h2>Welcome {this.state.name}</h2>
<p>Email: {this.state.email}</p>
Access Token: {this.state.accessToken}
</div>
);
}else{
fbContent=(<FacebookLogin
appId="290235811581073"
autoLoad={false}
fields="name,email,picture"
onClick={this.componentClicked}
callback={this.responseFacebook} />)
}
return(
<div>
{fbContent}
</div>
)
}
}
----------------------------------------------
.env
HTTPS=true
------------------------------------------------
reference:
No comments:
Post a Comment