AngularJS ke Angular 7 dan lainnya… perjalanan pribadi saya ❤️☕️

Selamat Datang Kembali 👋

Ini adalah kelanjutan dari banyak cerita yang semuanya dimulai dari postingan Medium pertama ini.

Mempelajari Angular 7 dan lainnya… perjalanan pribadi saya ❤️☕

Gambaran

Saya ingin menulis tentang Firebase Authentication tetapi saya menyadari bahwa ada banyak bagian untuk membahas hal ini. Jadi saya perlu memecah ini menjadi cerita yang lebih kecil. Kita akan belajar bagaimana mengatur dan membangun komponen proses otentikasi. Kami akan menggunakan Firebase Authentication (Login, Register, Forgot Password, dan Reset Confirm). Juga, pelajari cara menulis ke Firestore dan mengunci data itu menggunakan aturan keamanan.

Mengapa kau melakukan ini?

Bukankah ada tulisan di internet tentang konsep ini?

Iya. Saya dapat menemukan banyak artikel yang menjelaskan cara menggunakan signInWithPopup. Namun tidak dapat menemukan tutorial mendetail tentang cara menggunakan signInWithRedirect . Inilah salah satu alasan saya memilih untuk menulis ini. Belum lagi bagian dari perjalanan saya yang ingin saya dokumentasikan.

Kami akan mengambil langkah kecil dan mulai menyiapkan Firebase / AngularFire 😃

Prasyarat

Saya memulai cerita ini dengan asumsi Anda telah membuat proyek Angular Anda. Jika Anda membutuhkan penyegar, Anda selalu dapat membaca cerita saya, " Memulai ".

Saya akan membangun proyek yang saya bahas dalam cerita, " Halaman Selamat Datang ".

Apakah kalian sudah siap? Oke, mari kita mulai…

Penyiapan Firebase / AngularFire

Hal pertama yang perlu kita lakukan adalah menginstal paket kita. Buka konsol dan jalankan perintah berikut:

npm install @angular/fire@^5.1.3 firebase@^5.8.6 --save

Mengapa AngularFire … saya tidak dapat melakukan ini dengan Firebase ? Tentu Anda bisa, tapi saya menikmati menggunakan AngularFire. Ini mengintegrasikan observasi RxJS dan pola reaktif lainnya dengan Firebase. Hal-hal ini tidak tersedia secara default di vanilla Firebase.

Siapkan Proyek Firebase

Buka Firebase Console dan klik proyek Anda atau "Tambahkan Proyek".

Tambahkan Proyek Baru

Ikuti wizard penyiapan dan setelah selesai Anda akan mendapatkan prompt untuk menambahkan Firebase ke aplikasi Anda.

Kami akan melalui proses dua langkah:

Proyek yang Ada

Jika Anda sudah memiliki sebuah proyek yang dibuat, Anda harus pergi ke tab "Umum" di bawah "Pengaturan Proyek"… bagaimana saya sampai di sana?

Jika Anda sudah memiliki pengaturan aplikasi, Anda akan melihat layar seperti gambar di bawah ini. Salin informasi firebaseConfig:

Jika tidak, Anda akan melihat layar seperti gambar di bawah ini. Ikuti langkah-langkah yang dijelaskan di atas dalam "Tambahkan Proyek Baru"

Tambahkan Kredensial Lingkungan Firebase ke proyek Anda

Kami telah menyalin informasi firebaseConfig ke papan klip. Di mana kami meletakkan ini dalam proyek kami?

Di dalam folder src/environmentskami memiliki dua file:

• environment.ts
• environment.prod.ts

export const environment = {
    production: false,
    firebase: {
        apiKey: '<your-key>',
        authDomain: '<your-project-authdomain>',
        databaseURL: '<your-database-URL>',
        projectId: '<your-project-id>',
        storageBucket: '<your-storage-bucket>',
        messagingSenderId: '<your-messaging-sender-id>',
        appId: '<your-app-id>'
   }
}

Sekarang impor modul Firebase yang kita butuhkan dan referensi lingkungan ke app.module.ts kita

// Firebase
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
// Environments
import { environment } from '../environments/environment';

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  AngularFireModule.initializeApp(environment.firebase),
  AngularFirestoreModule,
  AngularFireAuthModule,
  SharedModule,
  AppRoutingModule
]

Cabang Repositori

Kesimpulan

Terima kasih telah meluangkan waktu untuk membaca cerita saya dan jika Anda seorang pengikut saya berterima kasih ❤️.

Jika Anda menikmati artikel ini, mohon pertimbangkan untuk bertepuk tangan 👏!

Cerita selanjutnya akan membahas bagaimana menghasilkan HTML / CSS untuk berbagai halaman otentikasi kita. Perhatikan tautannya.