반응 및 Firebase로 Google 팝업 로그인
3675 단어 reactfirebasejavascript
Firebase 구성 설정:
var firebaseConfig = {
apiKey: "super secret keys.....asgvegxgevergfvr",
authDomain: "tallans-imageupload-tutorial.firebaseapp.com",
databaseURL: "https://tallans-imageupload-tutorial.firebaseio.com",
projectId: "tallans-imageupload-tutorial",
storageBucket: "tallans-imageupload-tutorial.appspot.com",
messagingSenderId: "super secret keys.....asgvegxgevergfvr",
appId: "super secret app id....adsfa;lsdkjf",
measurementId: "super secret as;dlkfjal;dskjf"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
그 다음에 ::
make npx-create-react-app client
and ::
npm i or yarn add firebase
and react-router-dom
지금::
cd client
cd src
mkdir componets/login.js
앱.js::
===========
import React from 'react'
import './App.css'
import Login from './components/Login'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Logout from './components/Logout'
import Welcome from './components/Welcome'
const App = () => {
return (
<div>
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/home" component={Logout} />
<Route exact path="/welcome" component={Welcome} />
</Switch>
</Router>
</div>
)
}
export default App
로그인.js::
import React from 'react'
import firebase from '../services/firebase'
import {useHistory} from 'react-router-dom'
import './Login.css'
const Login = () => {
const history = useHistory();
const signInWithGoogle = () => {
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
.then((success) => {
let user = success.user;
const obj = {
username : user.displayName,
email:user.email,
uid:user.uid,
img:user.photoURL
}
console.log(obj)
localStorage.setItem('codecaamp',JSON.stringify(obj))
history.push('/welcome')
})
.catch(err => err.message)
}
return (
<div className="login-buttons">
<div className="ikmg"><img width="200px" src="https://res.cloudinary.com/codecaamp/image/upload/v1610815107/Purple_Modern_Technology_Gaming_Logo_gqpbv2.png" alt="codecaamp"/></div>
<h2 style={{fontFamily:"monospace",fontSize:"40px"}}>Welcome to Codecaamp</h2>
<h3>Continue With</h3>
<button className="login-provider-button" onClick={signInWithGoogle}>
<img src="https://img.icons8.com/ios-filled/50/000000/google-logo.png" alt="google icon" />
<span> Continue with Google</span>
</button>
</div>
)
}
export default Login
Reference
이 문제에 관하여(반응 및 Firebase로 Google 팝업 로그인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/mrmorsalin1/google-popup-sign-in-with-react-and-firebase-2oh1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
var firebaseConfig = {
apiKey: "super secret keys.....asgvegxgevergfvr",
authDomain: "tallans-imageupload-tutorial.firebaseapp.com",
databaseURL: "https://tallans-imageupload-tutorial.firebaseio.com",
projectId: "tallans-imageupload-tutorial",
storageBucket: "tallans-imageupload-tutorial.appspot.com",
messagingSenderId: "super secret keys.....asgvegxgevergfvr",
appId: "super secret app id....adsfa;lsdkjf",
measurementId: "super secret as;dlkfjal;dskjf"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
make npx-create-react-app client
and ::
npm i or yarn add firebase
and react-router-dom
지금::
cd client
cd src
mkdir componets/login.js
앱.js::
===========
import React from 'react'
import './App.css'
import Login from './components/Login'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Logout from './components/Logout'
import Welcome from './components/Welcome'
const App = () => {
return (
<div>
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/home" component={Logout} />
<Route exact path="/welcome" component={Welcome} />
</Switch>
</Router>
</div>
)
}
export default App
로그인.js::
import React from 'react'
import firebase from '../services/firebase'
import {useHistory} from 'react-router-dom'
import './Login.css'
const Login = () => {
const history = useHistory();
const signInWithGoogle = () => {
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
.then((success) => {
let user = success.user;
const obj = {
username : user.displayName,
email:user.email,
uid:user.uid,
img:user.photoURL
}
console.log(obj)
localStorage.setItem('codecaamp',JSON.stringify(obj))
history.push('/welcome')
})
.catch(err => err.message)
}
return (
<div className="login-buttons">
<div className="ikmg"><img width="200px" src="https://res.cloudinary.com/codecaamp/image/upload/v1610815107/Purple_Modern_Technology_Gaming_Logo_gqpbv2.png" alt="codecaamp"/></div>
<h2 style={{fontFamily:"monospace",fontSize:"40px"}}>Welcome to Codecaamp</h2>
<h3>Continue With</h3>
<button className="login-provider-button" onClick={signInWithGoogle}>
<img src="https://img.icons8.com/ios-filled/50/000000/google-logo.png" alt="google icon" />
<span> Continue with Google</span>
</button>
</div>
)
}
export default Login
Reference
이 문제에 관하여(반응 및 Firebase로 Google 팝업 로그인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/mrmorsalin1/google-popup-sign-in-with-react-and-firebase-2oh1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import React from 'react'
import './App.css'
import Login from './components/Login'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Logout from './components/Logout'
import Welcome from './components/Welcome'
const App = () => {
return (
<div>
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/home" component={Logout} />
<Route exact path="/welcome" component={Welcome} />
</Switch>
</Router>
</div>
)
}
export default App
import React from 'react'
import firebase from '../services/firebase'
import {useHistory} from 'react-router-dom'
import './Login.css'
const Login = () => {
const history = useHistory();
const signInWithGoogle = () => {
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
.then((success) => {
let user = success.user;
const obj = {
username : user.displayName,
email:user.email,
uid:user.uid,
img:user.photoURL
}
console.log(obj)
localStorage.setItem('codecaamp',JSON.stringify(obj))
history.push('/welcome')
})
.catch(err => err.message)
}
return (
<div className="login-buttons">
<div className="ikmg"><img width="200px" src="https://res.cloudinary.com/codecaamp/image/upload/v1610815107/Purple_Modern_Technology_Gaming_Logo_gqpbv2.png" alt="codecaamp"/></div>
<h2 style={{fontFamily:"monospace",fontSize:"40px"}}>Welcome to Codecaamp</h2>
<h3>Continue With</h3>
<button className="login-provider-button" onClick={signInWithGoogle}>
<img src="https://img.icons8.com/ios-filled/50/000000/google-logo.png" alt="google icon" />
<span> Continue with Google</span>
</button>
</div>
)
}
export default Login
Reference
이 문제에 관하여(반응 및 Firebase로 Google 팝업 로그인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mrmorsalin1/google-popup-sign-in-with-react-and-firebase-2oh1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)