May.27

AngularJS ve Firebase – Ders 2: Kullanıcı Oluşturma (createUserWithEmailAndPassword)

Bir önceki makalede login işlemi yapmıştık. Bu makalede de projemiz için nasıl kullanıcı oluşturacağımızı göreceğiz. Firebase’de proje nasıl oluşturulur ve proje kimliği uygulamamızda nasıl tanımlanır bilmiyorsanız, bir önceki makaleyi incelemenizi öneririm.

Bu makalede AngularFire ve Firebase’in yeni sürümlerini kullanacağız. Önceki makalede eklemiş olduğumuz eski sürümlerde, yeni API’ler çalışmamaktadır. Projemize eski örnek üzerinden devam ediyoruz, sadece sürümleri güncelliyoruz.

<!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 >

        <form>
          <div class="form-group">
            <label >Kullanıcı Email</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="kullaniciOlustur()">Kayıt Ol</button>
                 
                </td>
            </tr>       
          </table>
        </form>

    </div>  
</body>
</html>

app.js kodmuzu da şöyle olacak.

var app = angular.module("app", ["firebase"]);
app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    return $firebaseAuth();
  }
]);
app.controller("app_CTRL", ["$scope", "Auth", function($scope, Auth) {
	$scope.kullaniciOlustur = function (){
		Auth.$createUserWithEmailAndPassword($scope.kullaniciAdi, $scope.parola)
        .then(function(firebaseUser) {
                console.log("Kullanıcı oluşturuldu: " + firebaseUser.uid);
        }).catch(function(error) {
                console.log("Hata : " + error);
        });
	}
}
]);

Bu sefer işin içine bir de factory kattık. Bu factory (Auth isminde) bize firebaseAuth objesini döndürüyor. Biz de Auth referans ismi ile daha pratik bir şekilde kodlarımızı yazabiliyoruz.

Formda bir email ve parola giriş kayıt ettirdiğinizde eğer zaten o email ile bir hesap yoksa aşağıdaki gibi bir response dönüşü alacaksınız.

{
 "kind": "identitytoolkit#GetAccountInfoResponse",
 "users": [
  {
   "localId": "WEAJPYgBHcMz2RlEIw3kLsJFKWI2",
   "email": "u10@ugur.scom",
   "emailVerified": false,
   "providerUserInfo": [
    {
     "providerId": "password",
     "federatedId": "u10@ugur.scom",
     "email": "u10@ugur.scom",
     "rawId": "u10@ugur.scom"
    }
   ],
   "passwordHash": "UkVEQUNURUQ=",
   "passwordUpdatedAt": 1.499072419E12,
   "validSince": "1499072419",
   "lastLoginAt": "1499072419000",
   "createdAt": "1499072419000"
  }
 ]
}

Console’da da şu yazacaktır.

Kullanıcı oluşturuldu: WEAJPYgBHcMz2RlEIw3kLsJFKWI2

Eğer bir hata alırsanız:

Hata : Error: The email address is already in use by another account.

Firebae konsoluna gidip Authentication’a bakarsanız, eklemiş olduğunuz kullanıcı hesaplarını görebilirsiniz.

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