Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Authから始めるFirebaseの第一歩

44749d6ac5ca44e5325622593877c420?s=47 massyuu
February 21, 2019

 Authから始めるFirebaseの第一歩

44749d6ac5ca44e5325622593877c420?s=128

massyuu

February 21, 2019
Tweet

Transcript

  1. "VUI͔Β࢝ΊΔ'JSFCBTFͷୈҰา  'VLVPLB'JSFCBTF !NBTTZVV

  2. ࣗݾ঺հ ӹాɹ༞ีˏNBTTZVV 4FOUSFTFBV*OD αʔόʔαΠυ͔Β͋͛Τϯδχϟʔ UXJUUFS!NBTTZVV  

  3. ࠓ೔ͷ͓࿩͸ ΈΜͳେ޷͖Ϣʔβʔೝূʹ͍ͭͯ  

  4. 'JSFCBTF"VUIFOUJDBUJPO • 'JSFCBTF͕ఏڙ͍ͯ͠ΔϢʔβʔೝূػೳ • ΞϓϦέʔγϣϯͷϢʔβʔΛ؆୯ʹೝূɾࣝผͯ͘͠ΕΔ • 4%,Λར༻͢Δ͔ɺ6*ϥΠϒϥϦʹΑΓ؆୯ʹ࣮૷͢Δ͜ͱ͕Մೳ • ༷ʑͳํ๏ͰͷೝূΛఏڙՄೳ •

    ϝʔϧΞυϨεʢˍύεϫʔυʣ • ి࿩൪߸ • 4/4ೝূʢ5XJUUFSɺ'BDFCPPLɺ(PPHMFɺ(JU)VCͳͲʣ • ύεϫʔυͳͲࣗલͷ%#ʹอଘ͠ͳ͍Ͱ͍͍ͷ͕ྑ͖ • ݸਓతʹҰ൪޷͖͔΋͠Εͳ͍αʔϏε  
  5. 'JSFCBTF4%,"VUIFOUJDBUJPO • 4%,ͱͯ͠ఏڙ͞ΕΔೝূػೳΛඞཁʹԠͯࣗ͡લͰ૊ΈࠐΜͰ͍͘ελΠϧ • 6*ؚΊͯࣗલͰ࡞ΔͷͰɺطଘγεςϜʹ௥Ճ͢Δͱ͔ͳΒͬͪ͜ͷํ͕΍Γ΍͍͢ʁ • "OESPJEɺJ04ɺ8&#ʢ+4ʣͷଞɺ$ ΍6OJUZͰ΋ར༻Մೳ • ి࿩൪߸ೝূ͸$

    ΍6OJUZΛআ͘ • 8&#ͰΑ͘ݟ͔͚Δ'JSFCBTF"VUIFOUJDBUJPO  
  6. 'JSFCBTF6*"VUI • ެ͓ࣜ͢͢Ί • 6*ΛؚΊͨೝূػೳΛఏڙ • 6*΋ఏڙͯ͘͠ΕΔͷͰϩάΠϯपΓͷॲཧΛ·Δͬͱ'JSFCBTFʹ೚ͤΔ͜ͱ͕Ͱ͖Δ • (JU)VCʢ8FC༻ϦϙδτϦɾσϞϖʔδʣ •

    IUUQTHJUIVCDPNGJSFCBTFGJSFCBTFVJXFC • IUUQTGJSVJEFNPBDGJSFCBTFBQQDPN • ެࣜʹ͸"OESPJEɺJ04ɺ8&#ʢ+4ʣͰར༻Մೳͱ͍ͯ͠Δ • 3FBDU΍"OHVMBS༻ʹϥοϓ͞ΕͨϦϙδτϦ΋͋ͬͨΓ  
  7. 8&#ͷ"VUIΛࢼͯ͠ΈΔ  

  8. ͳʹΛ͢Δ͔ • 7VFKTͰϩάΠϯ͢Δ͚ͩͷը໘Λͭ͘Δ • &NBJM • 5XJUUFSΞΧ΢ϯτ • (PPHMFΞΧ΢ϯτ •

    ϩάΠϯϢʔβʔͷ৘ใ͸4/4ͷొ࿥৘ใ͕͋Ε͹ͦͪΒΛར༻͢Δ  
  9. 'JSFCBTFͷઃఆ • ϓϩδΣΫτΛ࡞Δ • ίϯιʔϧ͔Β৽͍͠ϓϩδΣΫτΛ௥Ճ • ΞϓϦʹεχϖοτΛίϐϖͯ͠'JSFCBTFΛ௥Ճ • ϩάΠϯํ๏Λઃఆ •

    ࠓճ͸&NBJMɺ5XJUUFSɺ(PPHMFΛ༗ޮԽ • ࣄલʹ5XJUUFS"QQΛ࡞੒͓ͯ͘͠  
  10. 5XJUUFSઃఆͷิ଍   5XJUUFS"QQͷΩʔ ৘ใΛ͜͜ʹొ࿥ ͜ͷίʔϧόοΫ 63-͸5XJUUFS"QQ ଆʹొ࿥͢Δ

  11. 4%,Ͱͷ࣮૷  

  12. GJSFCBTFͷϞδϡʔϧΛ࡞Δ   'JSFCBTFͷઃఆ΍ૢ࡞ΛϞδϡʔϧʹ·ͱΊ͓ͯ͘ // Initialize Firebase const config =

    { apiKey: ‘apiKey wo Kokoni input', authDomain: 'vue-fb-auth.firebaseapp.com', databaseURL: 'https://vue-fb-auth.firebaseio.com', projectId: 'vue-fb-auth', storageBucket: ‘', messagingSenderId: '813627810276' } export default { // FirebaseॳظԽ init() { firebase.initializeApp(config) firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION) }, // GoogleϩάΠϯॲཧ googleLogin() { // GoogleϩάΠϯͷॲཧ಺༰Λ͜͜ʹ }, ͱ͔ ͳͲͳͲ
  13. ϩάΠϯɾϩάΞ΢τͷهड़   ྫ͑͹5XJUUFSϩάΠϯΛ࣮૷͢Δ৔߹ͷهड़͸͜Ε͚ͩ ϩάΞ΢τͷ࣮૷͸ ͰऴΘΔͷͰΊͬͪΌ؆୯ ͋ͱ͸͜ΕΛίϯϙʔωϯτଆͰར༻͢Δ͚ͩ // ϩάΞ΢τॲཧ logout()

    { firebase.auth().signOut() }, // TwitterϩάΠϯॲཧ twitterLogin() { const Provider = new firebase.auth.TwitterAuthProvider() firebase.auth().signInWithPopup(Provider) },
  14. 0, 4%,Ͱ؆୯ʹ࡞ΕΔͷ͸Θ͔ͬͨ  

  15. 6*"VUIͰͷ࣮૷  

  16. GJSFCBTF6*ͷϞδϡʔϧΛ࡞Δ   'JSFCBTFͱ'JSFCBTF6*ͷઃఆ΍ૢ࡞ΛϞδϡʔϧʹ·ͱΊ͓ͯ͘ 'JSFCBTFͷઃఆ͸4%,Λ࢖͏࣌ͱಉ༷ // Initialize Firebase const config

    = { apiKey: ‘apiKey wo Kokoni input', authDomain: 'vue-fb-auth.firebaseapp.com', databaseURL: 'https://vue-fb-auth.firebaseio.com', projectId: 'vue-fb-auth', storageBucket: ‘', messagingSenderId: '813627810276' }
  17. GJSFCBTF6*ͷϞδϡʔϧΛ࡞Δ   'JSFCBTF6*ͷઃఆ͸͜Μͳײ͡ const uiConfig = { // ϙοϓΞοϓදࣔ

    signInFlow: 'popup', // ϩάΠϯ੒ޭ࣌ͷ໭ΓURL signInSuccessUrl: '/auth', // ϩάΠϯͷํ๏ signInOptions: [ firebase.auth.GoogleAuthProvider.PROVIDER_ID, firebase.auth.TwitterAuthProvider.PROVIDER_ID, firebase.auth.EmailAuthProvider.PROVIDER_ID ], // ϦμΠϨΫτͷઃఆ callbacks: { signInSuccessWithAuthResult: () => { return true } } } ͦͷଞʹ΋͍͔ͭ͘Φϓγϣϯͷઃఆ͕͋Γ·͢
  18. GJSFCBTF6*ͷϏϡʔ   'JSFCBTF6*ͷϩάΦϯը໘Λݺͼग़͢ίʔυ͸͜Ε͚ͩ <div id="firebaseui-auth-container"></div> ɹɹˢ ɹ͜Ε͕ ɹɹ͜͏ͳΔɹˠ

  19. ͪΐͬͱσϞ  

  20. ·ͱΊͱॴײ   • 4%,ɺ6*ͷ͍ͣΕ΋࣮૷ࣗମ͸௒؆୯ • ͬ͘͞ͱϩάΠϯॲཧΛ࡞Γ͍ͨͳΒ6*࢖͏ͷ΋͋Γ • ϨϯμϦϯάʹएׯͷϥά͕͋ΔͷͰɺݟͤํ͔ͬ͠Γͱ •

    ೔ຊޠͷ৘ใ͸4%,ͷํ͕ଟΊΈ͍ͨ • αʔϏεͷσβΠϯʹدͤΔͳΒ4%,࢖͏ํ͕ແ೉ͳͷ͔ͳ • ͋ͱɺ3VMFTͷઃఆ͸େࣄ
  21. ऴ ŠŠŠŠŠŠŠ ੍࡞ɾஶ࡞ NBTTZVV ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠