Kas.15

AngularJS ve Firebase – Ders 6: Authentication (signInWithPopup)

Daha önceki makalelerde ya yeni bir kullanıcı oluşturmayı ya da anonim giriş yapmayı görmüştük. Ancak çoğu servislerde genellikle sosyal medya hesapları ile de giriş yapılması önemli bir etkendir. Ve genellikle de kullanıcılar var olan bir sosyal medya hesabını kullanmayı tercih eder.

Biz de bu makalede Google, Facebook, Twitter ve Github hesapları ile bir Firebase projesine nasıl giriş yapacağımızı göreceğiz. Neden sadece bu 4 sosyal medya var derseniz, Firebase’in sadece bunlara izin verdiğini bilmenizi isterim. Belki zamanla diğer sosyal medya hesaplarını da dahil ederler.

Firebase projesine sosyal medya hesabı ile giriş yapabilmenizi için projenize permissions vermeniz lazım. Firebase konsoluna gidin. Authentication sayfasına gidin ve OTURUM AÇMA YÖNETİMİ sekmesine gelin. Oturum açma sağlayıcılarından ilgili sosyal medya hesaplarını aktif edin. Nasıl yapacağınızı daha önceki makalelerde görmüştük.

Yalnız burada şöyle bir durum var. Facebook, Github ve Twitter için mutlaka birer Application oluşturmanız gerekiyor, Sosyal medya hesaplarınızın olduğu sayfanın Developer kısmına girip birer uygulama oluşturabilirsiniz. O uygulamaya ait APP ID ve Secret Key gibi değerlerini de Firebase konsolundaki etkinleştirme arayüzünde girin. Sadece Google için bir Application istenmiyor.

Diyelim ki Facebook için bir APP açtınız. Bunun ayarları aşağıdaki gibi olmalıdır.

Örneğimiz için Facebook ve Google için açıyoruz.

Şunu da unutmayın, Facebook için bir APP açtığınızda localhost’taki testleriniz çalışmaz. Mutlaka bir domain’e atmalı ve bu domain’i de Facebook APP’inde tanımlamalısınız.

Şöyle bir arayüz hazırlayalım.

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="utf-8">
	<meta http-equiv="content-type" content="text/plain; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title ></title>

	<link rel="stylesheet" href="bootstrap.min.css" >
<script charset="utf-8" src="jquery.min.js"></script>
	<script charset="utf-8" src="bootstrap.min.js"></script>

	<script charset="utf-8" src="angular.min.js"></script>
	<script charset="utf-8"src="app.js"></script>

<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>

<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyDhgHleyj6d5Pjzn3heUi-bVMK6jN5KVJ8",
    authDomain: "ugurgelisken-69252.firebaseapp.com",
    databaseURL: "https://ugurgelisken-69252.firebaseio.com",
    projectId: "ugurgelisken-69252",
    storageBucket: "ugurgelisken-69252.appspot.com",
    messagingSenderId: "439860870061"
  };
  firebase.initializeApp(config);
</script>
	<style>
		body{
			margin:100px;
		}
	</style>
</head>
<body ng-controller="app_CTRL">
  <div ng-show="firebaseUser">
    <p>Merhaba, {{ firebaseUser.displayName }}</p>
    <button ng-click="auth.$signOut()">Çıkış Yap</button>
  </div>
  <div ng-hide="firebaseUser">
    <button ng-click="auth.$signInWithPopup('google')">Google ile Giriş Yap</button>
    <button ng-click="auth.$signInWithPopup('facebook')">Facebook ile Giriş Yap</button>
  </div>
</body>
</html>

Dikkat ederseniz ng-click’te direkt olarak auth üzerinden işlem yapıyoruz. Parametre olarak da string cinsinden sosyal medya hesabının ismini giriyoruz.

app.js

var app = angular.module("app", ["firebase"]);

app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    return $firebaseAuth();
  }
]);


app.controller("app_CTRL", ["$scope", "Auth",
  function($scope, Auth) {
    
    $scope.auth = Auth;

    $scope.auth.$onAuthStateChanged(function(kullanici) {
      console.log(kullanici);
    });

  }
]);

Sayfa ilk açıldığında:

Google ile giriş yapıldığında:

Buradan Google ile giriş yap butonuna tıkladığınızda Google API arayüzü çıkacak ve hesabınıza giriş yapmanız istenecek. Giriş işleminden sonra sayfa kapanacak ve kullanıcı bilginiz response olarak dönecek, arayüzde email’iniz yazacak.

Response olarak da şöyle bir değer dönecektir:

{
 "kind": "identitytoolkit#GetAccountInfoResponse",
 "users": [
  {
   "localId": "v7jrxUOzGBatmLBwkTKNPvkV5ep2",
   "email": "ugurgelisken@gmail.com",
   "emailVerified": true,
   "providerUserInfo": [
    {
     "providerId": "google.com",
     "displayName": "ugur gelisken",
     "photoUrl": "https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg",
     "federatedId": "102315398949313580883",
     "email": "ugurgelisken@gmail.com",
     "rawId": "102315398949313580883"
    }
   ],
   "passwordUpdatedAt": 1.498823725E12,
   "validSince": "1498823725",
   "disabled": false,
   "lastLoginAt": "1499084554000",
   "createdAt": "1498823725000"
  }
 ]
}
İçeriği paylaş:
  • facebook
  • twitter