Angular 7 & Firebase Login with Facebook

Merhaba,

Angular 7 Firebase Entegrasyonu yazımda bu konuya devam niteliğinde bir kaç yazı daha yazacağımdan bahsetmiştim.

Şimdi ise Firebase kullanarak Facebook ile oturum açma işlemini nasıl yaparız onu anlatmaya çalışacağım.

— Bu yazı bir devam yazısı olduğu için Firebase Entegrasyonu yapılmış kabul ederek Auth işlemine başlayacağım.

1. Adım ( Hazırlık )

Bu adımda her hangi bir işlem yapmak yerine sizden tarayıcınızda belirttiğim sayfaların sekmeler halinde açık olmasını isteyeceğim.

• Firebase Console > Authentication > Oturum Açma Yöntemleri sayfası
• Developers Facebook

(Firebase ve Facebook Developers sayfaları arasında uygulama bilgilerini karşılıklı olarak doldurmamız gerekecek.)

2. Adım

• Firebase Console > Authentication > Oturum Açma Yöntemleri arasında Facebook Yöntemini etkinleştiriyoruz ve OAuth yönlendirme URI’ si bize birazdan lazım olacak. (Uygulama Kimliği ve Uygulama Gizli Anahtarı bilgilerini de Facebook Developers üzerinden buraya kopyalayacağız.)
• Aynı zamanda Developers Facebook Sayfası üzerinden istediğimiz isimle bir uygulama oluşturuyoruz.
• OAuth yönlendirme URI’ sinin “……..firebaseapp.com” olan kısmını Developers Facebook üzerinde App Domains bilgisine kopyalıyoruz.
• Oluşturduğumuz uygulamanın AppId ve App Secret bilgilerini Firebase’ de AppId => Uygulama Kimliği alanına, App Secret => Uygulama Gizli Anahtarı alanına kopyalıyoruz.
• Facebook Developers Privacy Policy URL ve Terms of Service URL bilgilerini istemektedir ancak ilk etapta elimizdeki OAuth yönlendirme URI’sini yazsak da sorun olmayacaktır.
• Durumu (Status) kullanıma hazır hale getirdiğinizde Development durumundan Live durumuna almanız gerekmektedir.
• Yine Facebook Developers üzerinde +Add Platform Website seçerek url alanına OAuth Yönlendirme URI’sini yazıyoruz.
• Kodlamaya geçmeden önce son bir işlemimiz kaldı eğer bu adımı atalarsanız şu şekilde bir uyarı alırsınız.

URL Yüklenemedi: Bu bağlantının domaini uygulamanın domainlerinde yer almıyor. Bu bağlantıyı yükleyebilmek için, uygulama ayarlarından uygulamanın tüm domainlerini ve alt domainlerini Uygulama Domainleri alanına ekle.

• Facebook Developers üzerinden Sol tafata Facebook Login Menüsü altındaki Settings menüsüne tıklıyoruz ve Valid OAuth Redirect URIs değerine OAuth Yönlendirme URI’ sini kopyalıyoruz.

3. Adım

2. Adımdaki işlemleri eksiksiz yaptıysanız rahatlıkla kodlama işlemine başlayabiliriz demektir.

Uygulamamızın app.module.ts dosyasına gerekli kütüphaneyi dahil ediyoruz.

// app.module.ts
import { AngularFireAuthModule } from '@angular/fire/auth';
imports: [
   ...
   BrowserModule,
   AngularFireModule.initializeApp(environment.firebaseConfig),
   AngularFireAuthModule
   ...
]

login.component.html sayfamıza bir adet button ekliyoruz.

// login.component.html
<button type="button" class="btn btn-primary btn-block" (click)="loginWithFacebook()">Login with Facebook</button>

login.component.ts

// login.component.ts
loginWithFacebook(){
   this.fireAuthService.loginWithFacebook().then(p =>
      console.log(p);
   }).catch(err => {
      console.log(err);
   });
}

Bir de servis yazıyorum ben siz servis yazmadan direkt olarak login.component.ts üzerinde işlemlerinizi yapabilirsiniz.

// firebase-auth.service.ts
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase';
...
loginWithFacebook(){
   var facebookProvider = new firebase.auth.FacebookAuthProvider();
   facebookProvider.addScope('public_profile');
   return this.fireAuth.auth.signInWithPopup(facebookProvider);
}

İşlemimiz bu kadar Uygulamaya Facebook üzerinden giriş yaptığınızda bu giriş bilgilerini tarayıcınızın console ekranında görebilirsiniz. Aynı zamanda giriş türüne ve ilgili mail adresine Firebase Auth menüsünden kullanıcılar sekmesinden de ulaşabilirsiniz.