Firebase Authenticationについて

Firebase: https://firebase.google.com/?hl=ja
はてなブログ(React + Firebase でGoogleアカウントでのログイン機能を実装する): https://takashinoda.hatenablog.com/entry/2020/02/08/120000

Transcript

1. ʙ̍ʙ
   "VUIFOUJDBUJPO
2. 'JSFCBTFͱ͸ w (PPHMF͕ఏڙ͍ͯ͠ΔN#BB4
   NPCJMF
   CBDLFOE
   BT
   B
   TFSWJDF
   w N#BB4͸αʔόαΠυ؀ڥΛΫϥ΢υ্Ͱ ߦ͑ΔαʔϏε
   w ։ൃऀ͕αʔόαΠυଆͷॲཧΛ४උ͢Δ ඞཁ͕ͳ͘ͳΓ·͢
   w ࣮ࡍʹاۀͷϓϩμΫτʹ΋ಋೖ͞Ε͍ͯ Δྫ΋͋Δ
   w ೔ຊޠυΩϡϝϯτ΋༻ҙ͞Ε͍ͯΔ https://firebase.google.com/?hl=ja
3. 'JSFCBTFͰͰ͖Δࣄ w $MPVE
   'JSFTUPSF
   w .-
   ,JU
   #&5"
   w $MPVE
   'VODUJPO
   w "VUIFOUJDBUJPO
   w )PTUJOH
   w $MPVE
   4UPSBHF
   w 3FBMUJNF
   %BUBCBTF w $SBTIMZUJDT
   w 1FSGPSNBODF
   .POJUPSJOH
   w 5FTU
   -BC
   w "QQ
   %JTUSJCVUJPO
   #&5" w *O"QQ
   .FTTBHJOH
   #&5"
   w (PPHMF
   "OBMZUJDT
   w 1SFEJDUJPOT
   w "#
   5FTUJOH
   #&5"
   w $MPVE
   .FTTBHJOH
   w 3FNPUF
   $POpH
   w %ZOBNJD
   -JOLT 'JSFCBTF
   &YUFOTJPOT͸શͯ#&5"ͳͷͰׂѪ
4. 'JSFCBTFͰͰ͖Δࣄ w $MPVE
   'JSFTUPSF
   w .-
   ,JU
   #&5"
   w $MPVE
   'VODUJPO
   w "VUIFOUJDBUJPO
   w )PTUJOH
   w $MPVE
   4UPSBHF
   w 3FBMUJNF
   %BUBCBTF w $SBTIMZUJDT
   w 1FSGPSNBODF
   .POJUPSJOH
   w 5FTU
   -BC
   w "QQ
   %JTUSJCVUJPO
   #&5" w *O"QQ
   .FTTBHJOH
   #&5"
   w (PPHMF
   "OBMZUJDT
   w 1SFEJDUJPOT
   w "#
   5FTUJOH
   #&5"
   w $MPVE
   .FTTBHJOH
   w 3FNPUF
   $POpH
   w %ZOBNJD
   -JOLT 'JSFCBTF
   &YUFOTJPOT͸શͯ#&5"ͳͷͰআ͘
5. ࠓճ͸"VUIFOUJDBUJPOͰ͢
6. 'JSFCBTF
   "VUIFOUJDBUJPOͱ͸ w 'JSFCBTF
   "VUIFOUJDBUJPOΛ༻͍ΔࣄͰΞϓϦέʔγϣϯ ʹೝূػೳΛ࣮૷͢Δࣄ͕Ͱ͖·͢
   w (PPHMFҎ֎ʹ΋5XJUUFS΍(JU)VCͳͲͷαʔυύʔςΟʔ ͷೝূ৘ใ΋࢖༻Ͱ͖·͢
7. 'JSFCBTF
   "VUIFOUJDBUJPOͱ͸ w ϩάΠϯͰ͖ΔϓϩόΠμ͸ҎԼͷ௨ΓͰ͢
8. ࣮ࡍʹσϞΞϓϦʹ"VUIFOUJDBUJPOΛ࣮૷͍͖ͯ͠·͢
9. લఏͱͯ͠
   ɾ'JSFCBTFͷϓϩδΣΫτΛ௥Ճͯ͠'JSFCBTF
   4%,
   TOJQQFUΛऔಘ
   ɾ3FBDUΛ࢖༻
   ɾ(PPHMFΞΧ΢ϯτͰϩάΠϯΛ໨ࢦ͢
   Ͱ͢ ৄ͘͠͸ϒϩά͔Β֬ೝͰ͖·͢
   https://takashinoda.hatenablog.com/entry/2020/02/08/120000
10. ϓϩδΣΫτϧʔτʹpSFCBTFKTΛ࡞੒ͯ͠BQJLFZͳͲΛೖྗ import firebase from 'firebase/app' import "firebase/auth" const firebaseConfig = { apiKey:, authDomain:, databaseURL:, projectId:, storageBucket:, messagingSenderId:, appId:, measurementId:, } firebase.initializeApp(firebaseConfig) export default firebase
11. ೝূػೳͷίϯϙʔωϯτͰ͋Δ4JHOJOKTYΛ࡞੒ import React from 'react' import firebase from ‘../../firebase’ export const Signin = () => { const signinWithGoogle = () => { const provider = new firebase.auth.GoogleAuthProvider() firebase .auth() .signInWithPopup(provider) .then(user => { alert("success : " + user.user.displayName + "͞ΜͰϩάΠϯ͠·ͨ͠") }) .catch(error => { alert(error.message) }) } return ( <> <div className="login"> <h1>ϩάΠϯ</h1> </div> <div className="signin_button"> <img src="../btn_google_signin.png" onClick={()=>signinWithGoogle()} alt="google signin"/> </div> </> ) }
12. ೝূػೳͷίϯϙʔωϯτͰ͋Δ4JHOJOKTYΛ࡞੒ import React from 'react' import firebase from ‘../../firebase’ export const Signin = () => { const signinWithGoogle = () => { const provider = new firebase.auth.GoogleAuthProvider() firebase .auth() .signInWithPopup(provider) .then(user => { alert("success : " + user.user.displayName + "͞ΜͰϩάΠϯ͠·ͨ͠"); }) .catch(error => { alert(error.message); }); } return ( <> <div className="login"> <h1>ϩάΠϯ</h1> </div> <div className="signin_button"> <img src="../btn_google_signin.png" onClick={()=>signinWithGoogle()} alt="google signin"/> </div> </> ); } ͜ͷ෦෼͕ೝূػೳͰ͢
13. 
    (PPHMFϓϩόΠμΦϒδΣΫτͷΠϯελϯεΛ࡞੒ const provider = new firebase.auth.GoogleAuthProvider() 
    (PPHMFϓϩόΠμΦϒδΣΫτΛ࢖༻ͯ͠'JSFCBTFͰͷೝূΛߦ͏ firebase.auth().signInWithPopup(provider).then( 
    TJHO*O8JUI1PQVQ
    ͸ϙοϓΞοϓ΢Οϯυ΢Λදࣔ͠·͢
14. ࣮ߦ݁Ռ
15. σϞϖʔδΛ։͍ͯϩάΠϯϘλϯΛԡ͠·͢
16. ϙοϓΞοϓ΢Οϯυ΢͕ग़͖ͯ·͢
17. (PPHMFΞΧ΢ϯτͷύεϫʔυΛೖྗ͠·͢
18. (PPHMFΞΧ΢ϯτͰϩάΠϯͰ͖·ͨ͠
19. ·ͱΊ
20. w 'JSFCBTF͸(PPHMF͕ఏڙ͍ͯ͠ΔN#BB4
    w 'JSFCBTFΛ༻͍ΔࣄͰαʔόαΠυଆͷॲཧΛ४උ͢Δඞཁ͕ͳ͘ͳΔ
    w 'JSFCBTF
    "VUIFOUJDBUJPO͸'JSFCBTFͷαʔϏεͷͭͰೝূػೳ͕࣮૷Ͱ͖Δ ·ͱΊ