Eki.20

AngularJS ve Firebase – Ders 1: Oturum Açma (Authentication)

Öncelikle bilmeyenler için Firebase nedir, bir tanımlayalım.

Firebase; Google tarafından desteklenen ve geliştirilen, hemen hemen her türlü ihtiyacınıza yönelik ücretsiz hizmetler sunan bir Cloud platformudur. Mesela gerçek zamanlı veritabanı yönetimi, pushnotification mesajları, uygulama yönetimi, oturum yönetimi gibi şeyler. Merak edenlerini https://firebase.google.com/ adresinden detaylıca inceleyebilir. Biz bu makalede, AngularJS ile Firebase kullanarak oturum göreceğiz.

Firebase web sayfasına girin ve üyeliğinizi açın. Üyelik işleminden sonra Console ekranına gidin. https://console.firebase.google.com

Konsol’da, Proje Ekle butonuna tıklayarak bir proje başlatın. Projenize bir isim verin.

Daha sonra projenize tıklayın ve projenin ekranına gidin.

https://console.firebase.google.com/u/0/project/PROJE-ADI/overview

Firebase’i web uygulamanıza ekleyin butonuna tıklayın. Bu işlem sonunda bir popup çıkacak ve içinde JavaScript kodları oluşturulacak. Bu kodları kopyalayın ve aşağıdaki gibi bir HTML5 sayfası oluşturup, bu kodları da içine gömün.

Öncelikle AngularJS, HTML5 ve Bootstrap bildiğinizi düşünerek konuya giriş yapıyorum.

Aşağıdaki gibi 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>
	<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
	<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.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">
	<form>
          <div class="form-group">
            <label >Kullanıcı Adı (e-mail)</label>
            <input type="text" ng-model="kullaniciAdi" class="form-control" placeholder="kullanıcı adı">
          </div>
          <div class="form-group">
            <label >Parola</label>
            <input type="password" ng-model="parola" class="form-control" placeholder="parola">
          </div>
          <table class="nav" align="center">
            <tr>
                <td>
                    <p><button type="submit" class="btn btn-primary" ng-click="giris()">Giriş</button>
                </td>
            </tr>       
          </table>
        </form>
</body>
</html>

Kodları incelerseniz basit bir HTML5 syntax’ı kullandık. İçine AngularJS, Bootstrap ve JQuery import ettik. Ek olarak Firebase kullanabilmek için AngularFire ve Firebase JavaScript’lerini de ekledik. Geri kalan kısımlar da standart AngularJS yapısı. Bir app Module oluşturduk ve body için de bir Controller tanımladık.

Body içinde de basit bir form var. Kullanıcı adı ve şifre alıyoruz. Bu input’ların ng-model isimlerine göre değerleri okuyup Firebase’teki uygulamamıza (örnekteki uygulamam ugurgelisken-69252) login olacağız.

Aşağıda, Controller’imizi da tanımlıyoruz. Bu Controller, index.html içinde app.js içinden okunacak.

var app = angular.module("app", ["firebase"]);
app.controller("app_CTRL",function($scope) {
	$scope.giris = function (){
		var username = $scope.kullaniciAdi;
		var password = $scope.parola;

	 	firebase.auth().signInWithEmailAndPassword(username, password).catch(function(error) {
			if(error){
				console.log("giriş başarısız");
				console.log(error.code, error.message);
			}else{
				console.log("giriş başarılı");
				console.log(user);
			}
		});
	}
});

Kodları incelediğimizde firebase ismi ile bir inject işlemi görüşüyor. Böylelikle firebase.auth() fonksiyonunu kullanabileceğiz. Bu nesne de index.html içinde yüklediğimiz AngularFire’dan geliyor.

Formumuza e-mail ve şifre yazıp Giriş butonuna tıkladığımızda if’in error bloğuna düşeceğiz. Neden derseniz, şu an bu uygulama için bir kullanıcı tanımlanmamış.

Tekrar Firebase Consele’a gidiyoruz. Sol menüdeki Authentication butonuna tıklıyoruz. KULLANICILAR sekmesindeyken KULLANICI EKLE butonuna tıklıyoruz ve yeni bir hesap tanımlıyoruz. Burada iki bilgi istenecek, birisi e-mail, diğeri de paraola. Bu bilgileri girin ve işlemi onaylayın. Tekrar formumuza gelin ve tanımladığınız hesap ile giriş yapmayı deneyin. Bu sefer if bloğu else’e girecek ve size API’den dönen user isimli Object’i ekrana basacak. Bu obje aşağıdaki gibi olacaktır.

{
  "access_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjU4MDAwNjVjNjhkYTk2M2EyNjdlMGI5YzUwMzEwNzY2YzkxYjg0ZjUifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vdWd1cmdlbGlza2VuLTY5MjUyIiwiYXVkIjoidWd1cmdlbGlza2VuLTY5MjUyIiwiYXV0aF90aW1lIjoxNDk4ODI0ODkxLCJ1c2VyX2lkIjoidmhOazAzakFUWFRPV3NKYmU5N0FTQjM1bmYyMiIsInN1YiI6InZoTmswM2pBVFhUT1dzSmJlOTdBU0IzNW5mMjIiLCJpYXQiOjE0OTg4Mjk4NjMsImV4cCI6MTQ5ODgzMzQ2MywiZW1haWwiOiJ1MTBAdWd1ci5jb20iLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsImZpcmViYXNlIjp7ImlkZW50aXRpZXMiOnsiZW1haWwiOlsidTEwQHVndXIuY29tIl19LCJzaWduX2luX3Byb3ZpZGVyIjoicGFzc3dvcmQifX0.IWHdf98OdAg5MmcpOViCtegnJNf2wpogsWlQsHaeCujRvzRVXxhbduDsgUI_yY-s5euRA4r_lNZ2qbUugA3qfD164f17nFPNQFZkLcJiXpihox6Gt1XM84hy93LFgtqjiF3fmC_3MhZ3UIow71MeuihXkdcr55bn9ey_hB-f7iJo7ebqvlIxRUxRXhx8oOr28_uumnfyyssJraltZ9ecnmUrFLgVnNzWGLLH0zcr_tR_9jcOM9AneKTzBBCdT3eOtnAl3KJMUPOQcE6U7jtUHSofXnSJG-kif1Xz1YtIR2UNiTWFfipvuIRVlFzrqVAivYw6bZGUfA6LUl1_7R5CaQ",
  "expires_in": "3600",
  "token_type": "Bearer",
  "refresh_token": "ACXxpGFE43y-RUn-OL4TX99yAcbi6lz63691R365kRkOIvmmo2dVr4wUJxPjAwSC3goQxix1MAEqCAtnOFol-WvuBGrT96cifQfMAkEKm3GTRg5ewbMnj6mzHYN6C8OHIHNvBWQMY8HtX1ijuSS0f3QlUdgKWNnZTk9w6ge9yrpQCSRXjrtjHdWmcaEJ6SMYPA6ZdFPHNhYtcKPCnurS6LeOL-TESpF-0w",
  "id_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjU4MDAwNjVjNjhkYTk2M2EyNjdlMGI5YzUwMzEwNzY2YzkxYjg0ZjUifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vdWd1cmdlbGlza2VuLTY5MjUyIiwiYXVkIjoidWd1cmdlbGlza2VuLTY5MjUyIiwiYXV0aF90aW1lIjoxNDk4ODI0ODkxLCJ1c2VyX2lkIjoidmhOazAzakFUWFRPV3NKYmU5N0FTQjM1bmYyMiIsInN1YiI6InZoTmswM2pBVFhUT1dzSmJlOTdBU0IzNW5mMjIiLCJpYXQiOjE0OTg4Mjk4NjMsImV4cCI6MTQ5ODgzMzQ2MywiZW1haWwiOiJ1MTBAdWd1ci5jb20iLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsImZpcmViYXNlIjp7ImlkZW50aXRpZXMiOnsiZW1haWwiOlsidTEwQHVndXIuY29tIl19LCJzaWduX2luX3Byb3ZpZGVyIjoicGFzc3dvcmQifX0.IWHdf98OdAg5MmcpOViCtegnJNf2wpogsWlQsHaeCujRvzRVXxhbduDsgUI_yY-s5euRA4r_lNZ2qbUugA3qfD164f17nFPNQFZkLcJiXpihox6Gt1XM84hy93LFgtqjiF3fmC_3MhZ3UIow71MeuihXkdcr55bn9ey_hB-f7iJo7ebqvlIxRUxRXhx8oOr28_uumnfyyssJraltZ9ecnmUrFLgVnNzWGLLH0zcr_tR_9jcOM9AneKTzBBCdT3eOtnAl3KJMUPOQcE6U7jtUHSofXnSJG-kif1Xz1YtIR2UNiTWFfipvuIRVlFzrqVAivYw6bZGUfA6LUl1_7R5CaQ",
  "user_id": "vhNk03jATXTOWsJbe97ASB35nf22",
  "project_id": "439860870061"
}

Görüldüğü üzere bilgiler içerisinde en önemlisi access_token. Bu bilgi ile daha sonraki makalelerimizde göreceğiniz veritabanına bağlanma gibi bir takım işleri gerçekleştireceğiz.

Diğer bir response. Bu da login işlemi ile geliyor. Bunda da kullanıcı hesap detayları görülmektedir.

{
 "kind": "identitytoolkit#GetAccountInfoResponse",
 "users": [
  {
   "localId": "vhNk03jATXTOWsJbe97ASB35nf22",
   "email": "u10@ugur.com",
   "emailVerified": false,
   "providerUserInfo": [
    {
     "providerId": "password",
     "federatedId": "u10@ugur.com",
     "email": "u10@ugur.com",
     "rawId": "u10@ugur.com"
    }
   ],
   "passwordHash": "UkVEQUNURUQ=",
   "passwordUpdatedAt": 1.498824029E12,
   "validSince": "1498824029",
   "disabled": false,
   "lastLoginAt": "1498829950000",
   "createdAt": "1498824029000"
  }
 ]
}

Eğer herşeyi doğru yaptıysanız ve yine de çalışmıyorsa, Chrome Developer Tools’tan Network sekmesini açın ve Request attığınız API’nin size ne return olduğuna bakın. Büyük bir ihtimal Security ile ilgili bir uyarı alıyorsunuzdur. Bunun da nedeni, projenin izin verilen bir URL’de çalışmıyor olması. Firebase’de bir proje oluştururken varsayılan olarak localhost tanımlıdır. Siz de projenizi localhost üzerinde çalıştırarak test ederseniz, normal bir şekilde çalışacaktır. Production ortamında da bir URL’de veya bir IP’de çalıştırmanız gerekeceği için Firebase konsolunda Authenticationa tıklayıp, OTURUM AÇMA YÖNETİMİ sekmesine girin. Alt kısımda Yetkilendirilen alanları göreceksiniz. Burada localhost tanımlıdır. Buraya projenizi çalıştıracağınız URL’i ALAN ADI EKLE butonuna tıklayarak gerçekleştirin.

İçeriği paylaş:
  • facebook
  • twitter