Authから始めるFirebaseの第一歩

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. 'JSFCBTF
   4%,
   "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 ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠