AngularJS Uygulamasında Facebook Girişini Satellizer ile Entegre Etme

AngularJS gibi zengin özelliklere sahip ön uç çerçevelerinin gelişiyle, ön uçta veri işleme/doğrulama, kimlik doğrulama ve daha fazlası gibi daha fazla mantık uygulanmaktadır. AngularJS için kullanımı kolay bir belirteç tabanlı kimlik doğrulama modülü olan Satellizer, AngularJS'de kimlik doğrulama mekanizması uygulama sürecini basitleştirir. Kitaplık, Google, Facebook, LinkedIn, Twitter, Instagram, GitHub, Bitbucket, Yahoo, Twitch için yerleşik destekle birlikte gelir , ve Microsoft (Windows Live) hesapları.

Bu yazıda, giriş yapmanızı ve mevcut kullanıcı bilgilerini görmenizi sağlayan buradakine benzer çok basit bir web uygulaması oluşturacağız.

Kimlik Doğrulama ve Yetkilendirme

Bunlar, uygulamanız bir kullanıcı sistemini entegre etmeye başladığında sıklıkla karşılaştığınız 2 korkutucu kelimedir. Wikipedia'ya göre:

Kimlik doğrulama , bir varlık tarafından doğru olduğu iddia edilen tek bir veri parçasının (veri) bir özniteliğinin doğruluğunu doğrulama eylemidir.

Yetkilendirme , genel olarak bilgi güvenliği ve bilgisayar güvenliği ile ilgili kaynaklara ve özel olarak erişim kontrolüne erişim haklarını belirleme işlevidir.

Meslekten olmayan terimlerle, üzerinde çalışan bazı kişilerin olduğu bir blog web sitesi örneğini ele alalım. Blogcular makaleler yazar ve yönetici içeriği doğrular. Her kişi sistemde kimlik doğrulaması yapabilir (oturum açabilir) ancak hakları (yetkilendirme) farklıdır, bu nedenle blogcu içeriği doğrulayamazken yönetici yapabilir.

Neden Uydu

Bu çok detaylı öğreticiler gibi bazı öğreticileri izleyerek AngularJS'de kendi kimlik doğrulama sisteminizi oluşturabilirsiniz: JSON Web Token Eğitimi: Laravel ve AngularJS'de Bir Örnek. JWT'yi (JSON Web Token) çok iyi açıkladığı ve doğrudan yerel depolama ve HTTP önleyicilerini kullanarak AngularJS'de kimlik doğrulaması uygulamanın basit bir yolunu gösterdiği için bu makaleyi okumanızı öneririm.

Peki neden Uydu? Bunun başlıca nedeni, Facebook, Twitter vb. gibi bir avuç sosyal ağ girişini desteklemesidir. Günümüzde, özellikle mobil cihazlarda kullanılan web siteleri için, kullanıcı adı ve şifre yazmak oldukça zahmetlidir ve kullanıcılar web sitenizi çok az engel ile kullanabilmeyi beklemektedir. sosyal girişleri kullanarak. Her sosyal ağın SDK'sını entegre etmek ve belgelerini takip etmek oldukça tekrarlayıcı olduğundan, bu sosyal oturumları minimum çabayla desteklemek güzel olurdu.

Ayrıca Satellizer Github üzerinde aktif bir projedir. Bu SDK'lar oldukça sık değiştiğinden ve her seferinde belgelerini okumak istemediğinizden aktif burada anahtardır (Facebook SDK ile çalışan herkes bunun ne kadar sinir bozucu olduğunu bilir)

Facebook Girişli AngularJS Uygulaması

İşlerin ilginçleşmeye başladığı yer burasıdır.

Düzenli giriş/kayıt (yani kullanıcı adı, şifre kullanarak) mekanizmasına sahip ve sosyal girişleri de destekleyen bir web uygulaması oluşturacağız. Bu web uygulaması, yalnızca 3 sayfası olduğu için çok basittir:

• Ana sayfa: herkes görebilir
• Giriş sayfası: kullanıcı adı/şifre girmek için
• Gizli sayfa: yalnızca oturum açmış kullanıcıların görebileceği

Arka uç için Python ve Flask kullanacağız. Python ve Flask çerçevesi oldukça etkileyici, bu yüzden kodu diğer dillere/çerçevelere taşımak çok zor olmayacak. Elbette ön uç için AngularJS kullanacağız. Ve sosyal oturumlar için, şu anda en popüler sosyal ağ olduğu için Facebook ile entegre olacağız.

Hadi başlayalım!

Adım 1: Önyükleme Projesi

Kodumuzu şu şekilde yapılandıracağız:

 - app.py - static/ - index.html - app.js - bower.json - partials/ - login.tpl.html - home.tpl.html - secret.tpl.html

Tüm arka uç kodu app.py içindedir . Ön uç kodu static/ klasörüne konur. Varsayılan olarak Flask, statik/klasör içeriğini otomatik olarak sunacaktır. Tüm kısmi görünümler statik/kısmi/ biçimindedir ve ui.router modülü tarafından işlenir.

Arka ucu kodlamaya başlamak için Python 2.7.*'ye ihtiyacımız olacak ve pip kullanarak gerekli kitaplıkları kuracağız. Elbette bir Python ortamını izole etmek için virtualenv kullanabilirsiniz. Gereksinimler.txt dosyasına koymak için gerekli Python modüllerinin listesi aşağıdadır:

 Flask==0.10.1 PyJWT==1.4.0 Flask-SQLAlchemy==1.0 requests==2.7.0

Tüm bu bağımlılıkları yüklemek için:

 pip install -r requirements.txt

app.py'de Flask'ı önyüklemek için bazı ilk kodlarımız var (kısa olması için içe aktarma ifadeleri atlanmıştır):

 app = Flask(__name__) @app.route('/') def index(): return flask.redirect('/static/index.html') if __name__ == '__main__': app.run(debug=True)

Ardından bower'ı başlatır ve AngularJS ile ui.router'ı kurarız:

 bower init # here you will need to answer some question. when in doubt, just hit enter :) bower install angular angular-ui-router --save # install and save these dependencies into bower.json

Bu kütüphaneler kurulduktan sonra, index.html içerisine AngularJS ve ui-router'ı dahil etmemiz ve 3 sayfa için yönlendirmeler oluşturmamız gerekiyor: home, login ve secret.

 <body ng-app="DemoApp"> <a ui-sref="home">Home</a> <a ui-sref="login">Login</a> <a ui-sref="secret">Secret</a> <div ui-view></div> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> <script src="main.js"></script> </body>

Yönlendirmeyi yapılandırmak için main.js'de ihtiyacımız olan kod aşağıdadır:

 var app = angular.module('DemoApp', ['ui.router']); app.config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url: '/home', templateUrl: 'partials/home.tpl.html' }) .state('secret', { url: '/secret', templateUrl: 'partials/secret.tpl.html', }) .state('login', { url: '/login', templateUrl: 'partials/login.tpl.html' }); $urlRouterProvider.otherwise('/home'); });

Bu noktada python app.py sunucusunu çalıştırırsanız, http://localhost:5000 adresinde bu temel arayüze sahip olmalısınız.

Home, Login ve Secret bağlantıları bu noktada çalışmalı ve ilgili şablonların içeriğini göstermelidir.

Tebrikler, iskeleti kurmayı bitirdiniz! Herhangi bir hatayla karşılaşırsanız, lütfen GitHub'daki kodu kontrol edin.

Adım #2: Giriş Yapın ve Kaydolun

Bu adımın sonunda, e-posta ve şifre kullanarak kaydolabileceğiniz/giriş yapabileceğiniz bir web uygulamanız olacak.

İlk adım, arka ucu yapılandırmaktır. Bir Kullanıcı modeline ve belirli bir kullanıcı için JWT belirtecini oluşturmanın bir yoluna ihtiyacımız var. Aşağıda gösterilen Kullanıcı modeli gerçekten basitleştirilmiştir ve alan e-postasının “@” içerip içermediği veya alan şifresinin en az 6 karakter içerip içermediği gibi temel kontrolleri bile gerçekleştirmez.

 class User(db.Model): id = db.Column(db.Integer, primary_key=True) email = db.Column(db.String(100), nullable=False) password = db.Column(db.String(100)) def token(self): payload = { 'sub': self.id, 'iat': datetime.utcnow(), 'exp': datetime.utcnow() + timedelta(days=14) } token = jwt.encode(payload, app.config['TOKEN_SECRET']) return token.decode('unicode_escape')

JWT'de payload kısmını oluşturmak için python'da jwt modülünü kullanıyoruz. iat ve exp kısmı, belirtecin oluşturulduğu ve süresinin dolduğu zaman damgasına karşılık gelir. Bu kodda, jetonun süresi 2 hafta içinde dolacak.

User modeli oluşturulduktan sonra “login” ve “register” uç noktalarını ekleyebiliriz. Her ikisinin de kodu oldukça benzer, bu yüzden burada sadece “kayıt” bölümünü göstereceğim. Lütfen varsayılan olarak Satellizer'ın “login” ve “register” için /auth/login ve /auth/ signup uç noktalarını çağıracağını unutmayın.

 @app.route('/auth/signup', methods=['POST']) def signup(): data = request.json email = data["email"] password = data["password"] user = User(email=email, password=password) db.session.add(user) db.session.commit() return jsonify(token=user.token())

Önce curl kullanarak uç noktayı kontrol edelim:

 curl localhost:5000/auth/signup -H "Content-Type: application/json" -X POST -d '{"email":"[email protected]","password":"xyz"}'

Sonuç şöyle görünmelidir:

 { "token": "very long string…." }

Artık arka uç kısmı hazır olduğuna göre, ön uca saldıralım! İlk olarak, satellizer'ı kurmamız ve bunu main.js'ye bir bağımlılık olarak eklememiz gerekiyor:

 bower install satellizer --save

Satellizer'ı bağımlılık olarak ekleyin:

 var app = angular.module('DemoApp', ['ui.router', 'satellizer']);

Satellizer'da oturum açmak ve kaydolmak, şimdiye kadarki tüm kurulumlara kıyasla aslında oldukça basittir:

 $scope.signUp = function () { $auth .signup({email: $scope.email, password: $scope.password}) .then(function (response) { // set the token received from server $auth.setToken(response); // go to secret page $state.go('secret'); }) .catch(function (response) { console.log("error response", response); }) };

Kodu kurmakta zorluk çekiyorsanız GitHub'daki kodu inceleyebilirsiniz.

Adım 3: Ama Gizli Görüş Gerçekten Gizli Değildir, Çünkü Herkes Görebilir!

Evet doğru! Şimdiye kadar, herkes giriş yapmadan gizli sayfaya gidebilir.

Birisi gizli sayfaya giderse ve bu kullanıcı oturum açmadıysa, oturum açma sayfasına yönlendirileceğinden emin olmak için AngularJS'ye bir engelleyici eklemenin zamanı geldi.

İlk olarak, gizli sayfayı diğerlerinden ayırt etmek için gerekli bir oturum açma bayrağı eklemeliyiz.

 .state('secret', { url: '/secret', templateUrl: 'partials/secret.tpl.html', controller: 'SecretCtrl', data: {requiredLogin: true} })

"Veri" kısmı, yönlendirme her değiştiğinde tetiklenen $stateChangeStart olayında kullanılacaktır:

 app.run(function ($rootScope, $state, $auth) { $rootScope.$on('$stateChangeStart', function (event, toState) { var requiredLogin = false; // check if this state need login if (toState.data && toState.data.requiredLogin) requiredLogin = true; // if yes and if this user is not logged in, redirect him to login page if (requiredLogin && !$auth.isAuthenticated()) { event.preventDefault(); $state.go('login'); } }); });

Artık kullanıcı, oturum açmadan doğrudan gizli sayfaya gidemez. Yaşasın!

Her zamanki gibi, bu adımın kodu burada bulunabilir.

Adım 4: Gerçekten Gizli Bir Şey Alma Zamanı!

Şu anda, gizli sayfada gerçekten gizli bir şey yok. Oraya kişisel bir şey koyalım.

Bu adım, arka uçta yalnızca kimliği doğrulanmış bir kullanıcı tarafından erişilebilen, geçerli bir belirteç gibi bir uç nokta oluşturarak başlar. Aşağıdaki uç nokta /kullanıcı , belirteçle ilgili kullanıcının user_id ve e-postasını döndürür.

 @app.route('/user') def user_info(): # the token is put in the Authorization header if not request.headers.get('Authorization'): return jsonify(error='Authorization header missing'), 401 # this header looks like this: “Authorization: Bearer {token}” token = request.headers.get('Authorization').split()[1] try: payload = jwt.decode(token, app.config['TOKEN_SECRET']) except DecodeError: return jsonify(error='Invalid token'), 401 except ExpiredSignature: return jsonify(error='Expired token'), 401 else: user_id = payload['sub'] user = User.query.filter_by(id=user_id).first() if user is None: return jsonify(error='Should not happen ...'), 500 return jsonify(id=user.id, email=user.email), 200 return jsonify(error="never reach here..."), 500

Yine, 'Yetkilendirme' başlığında bulunan JWT belirtecinin kodunu çözmek ve belirtecin süresi dolduğunda veya geçerli olmadığında durumu ele almak için jwt modülünü kullanırız.

Bu bitiş noktasını curl kullanarak test edelim. İlk olarak, geçerli bir jeton almamız gerekiyor:

 curl localhost:5000/auth/signup -H "Content-Type: application/json" -X POST -d '{"email":"[email protected]","password":"xyz"}'

Sonra bu belirteçle:

 curl localhost:5000/user -H "Authorization: Bearer {put the token here}"

Bu sonucu veren:

 { "email": "[email protected]", "id": 1 }

Şimdi bu bitiş noktasını Secret Controller'a dahil etmemiz gerekiyor. Bu oldukça basittir çünkü normal $http modülünü kullanarak uç noktayı çağırmamız yeterlidir. Belirteç, Satellizer tarafından başlığa otomatik olarak eklenir, bu nedenle belirteci kaydetmenin ve ardından doğru başlığa koymanın tüm ayrıntılarıyla uğraşmamıza gerek kalmaz.

 getUserInfo(); function getUserInfo() { $http.get('/user') .then(function (response) { $scope.user = response.data; }) .catch(function (response) { console.log("getUserInfo error", response); }) }

Son olarak, gizli sayfada gerçekten kişisel bir şeyimiz var!

Bu adımın kodu GitHub'da.

Adım #5: Satellizer ile Facebook Girişi

Satellizer ile ilgili güzel bir şey, başlangıçta belirtildiği gibi, sosyal oturum açmayı entegre etmeyi çok daha kolay hale getirmesidir. Bu adımın sonunda kullanıcılar Facebook hesaplarını kullanarak giriş yapabilirler!

Yapılması gereken ilk şey, application_id ve gizli bir koda sahip olmak için Facebook geliştiricileri sayfasında bir uygulama oluşturmaktır. Henüz yoksa bir Facebook geliştirici hesabı oluşturmak ve bir web sitesi uygulaması oluşturmak için lütfen developer.facebook.com/docs/apps/register adresini takip edin. Bundan sonra, aşağıdaki ekran görüntüsündeki gibi uygulama kimliğine ve uygulama sırrına sahip olacaksınız.

Kullanıcı Facebook ile bağlantı kurmayı seçtiğinde, Satellizer /auth/facebook bitiş noktasına bir yetkilendirme kodu gönderir. Bu yetkilendirme koduyla, arka uç, Facebook /oauth uç noktasından, Facebook Graph API'sine yapılan çağrının konum, user_friends, kullanıcı e-postası vb. gibi kullanıcı bilgilerini almasına izin veren bir erişim belirteci alabilir.

Ayrıca, bir kullanıcı hesabının Facebook ile mi yoksa normal kayıt yoluyla mı oluşturulduğunu takip etmemiz gerekiyor. Bunun için Kullanıcı modelimize facebook_id ekliyoruz.

 facebook_id = db.Column(db.String(100))

Facebook sırrı, app.config dosyasına eklediğimiz FACEBOOK_SECRET env değişkenleri aracılığıyla yapılandırılır.

 app.config['FACEBOOK_SECRET'] = os.environ.get('FACEBOOK_SECRET')

Bu nedenle, app.py'yi başlatmak için bu env değişkenini ayarlamanız gerekir:

 FACEBOOK_SECRET={your secret} python app.py

İşte Facebook girişlerini işleyen yöntem. Varsayılan olarak Satellizer, /auth/facebook bitiş noktasını arayacaktır.

 @app.route('/auth/facebook', methods=['POST']) def auth_facebook(): access_token_url = 'https://graph.facebook.com/v2.3/oauth/access_token' graph_api_url = 'https://graph.facebook.com/v2.5/me?fields=id,email' params = { 'client_id': request.json['clientId'], 'redirect_uri': request.json['redirectUri'], 'client_secret': app.config['FACEBOOK_SECRET'], 'code': request.json['code'] } # Exchange authorization code for access token. r = requests.get(access_token_url, params=params) # use json.loads instead of urlparse.parse_qsl access_token = json.loads(r.text) # Step 2. Retrieve information about the current user. r = requests.get(graph_api_url, params=access_token) profile = json.loads(r.text) # Step 3. Create a new account or return an existing one. user = User.query.filter_by(facebook_id=profile['id']).first() if user: return jsonify(token=user.token()) u = User(facebook_id=profile['id'], email=profile['email']) db.session.add(u) db.session.commit() return jsonify(token=u.token())

Facebook sunucusuna istek göndermek için kullanışlı modül istekleri kullanıyoruz. Şimdi arka uçtaki zor kısım tamamlandı. Ön uçta, Facebook girişi eklemek oldukça basittir. Öncelikle, bu kodu app.config işlevine ekleyerek Satellizer'a facebook_id'imizi söylemeliyiz:

 $authProvider.facebook({ clientId: {your facebook app id}, // by default, the redirect URI is http://localhost:5000 redirectUri: 'http://localhost:5000/static/index.html' });

Facebook kullanarak giriş yapmak için aramamız yeterli:

 $auth.authenticate(“facebook”)

Her zamanki gibi GitHub'daki kodu kontrol edebilirsiniz.

Şu anda, web uygulaması işlevsellik açısından tamamlanmıştır. Kullanıcı normal e-posta ve şifre kullanarak veya Facebook kullanarak giriş yapabilir/kaydolabilir. Kullanıcı oturum açtıktan sonra gizli sayfasını görebilir.

Güzel Bir Arayüz Yapın

Arayüz bu noktada pek hoş değil, bu yüzden, oturum açma başarısız olduğunda olduğu gibi bir hata mesajını güzel bir şekilde işlemek için yerleşim düzeni ve açısal ekmek kızartma makinesi modülü için biraz Bootstrap ekleyelim.

Bu güzelleştirici bölümün kodu burada bulunabilir.

Çözüm

Bu makale, Satellizer'ın (basit) bir AngularJS web uygulamasına adım adım entegrasyonunu gösterir. Satellizer ile Twitter, Linkedin ve daha fazlası gibi diğer sosyal girişleri kolayca ekleyebiliriz. Ön uçtaki kod, makaledeki ile oldukça aynıdır. Ancak, sosyal ağ SDK'ları farklı protokollere sahip farklı uç noktalara sahip olduğundan arka uç değişir. Facebook, Github, Google, Linkedin, Twiter ve Bitbucket için örnekler içeren https://github.com/sahat/satellizer/blob/master/examples/server/python/app.py adresinden inceleyebilirsiniz. Şüpheye düştüğünüzde https://github.com/sahat/satellizer adresindeki belgelere göz atmalısınız.