SSO Düğmesi Nasıl Oluşturulur – Flask Giriş Eğitimi

Uygulamalar, kullanıcıların verileri kaydedebilmeleri, kendi profillerini oluşturabilmeleri veya belki de yalnızca hassas kaynaklara erişimi kısıtlamak için genellikle oturum açma işlevine ihtiyaç duyar. Modern bir uygulamada kullanıcılar, e-posta doğrulama, parola sıfırlama veya çok faktörlü kimlik doğrulama gibi standart oturum açmayla ilgili özelliklere sahip olmayı bekler. Bu özellikler, gerekli olmakla birlikte, doğru şekilde elde edilmesi kolay değildir ve genellikle uygulamanın ana işi değildir.

Kullanıcı tarafında, başka bir e-posta ve şifre çifti oluşturmaları ve hatırlamaları gerektiğinden, uzun kayıt sürecinden geçmek istemeyebilirler. Uygun bir şifre yöneticisi olmadan, kullanıcılar güvenlik açısından korkunç olan aynı şifreyi tekrar kullanma eğilimindedir.

Kullanıcılar tarafından daha çok sosyal medya butonları ile giriş yapmak olarak bilinen tekli oturum açma (SSO) bu soruna bir çözüm olarak icat edilmiştir. Kullanıcılar için başka bir zahmetli kayıt sürecinden geçmemek kolaydı. İşletmeler için, kullanıcılar için sürtünmeyi ortadan kaldırmak her zaman büyük bir kazançtır ve geliştiriciler için, oturum açmayla ilgili tüm özellikler artık kimlik sağlayıcıya (Facebook, Google, Twitter, vb.) devredilmiştir , bu da daha az kod anlamına gelir! Uygulamanız, kimlik sağlayıcının kullanıcı kimliğini doğrulama işini yapmasına güvenir .

SSO, genellikle OpenId Connect (OIDC) veya SAML protokolü tarafından desteklenir. SAML çoğunlukla kurumsal uygulamalarda kullanılır. OIDC, OAuth2'nin üzerine kuruludur ve Facebook, Google vb. gibi sosyal kimlik sağlayıcıları tarafından kullanılır. Bu yazıda, OIDC/OAuth2 protokolüne odaklanacağız.

Bu Flask oturum açma eğitiminde, kimlik sağlayıcı olarak SimpleLogin ve Facebook ile bir Flask uygulamasına bir SSO oturum açma düğmesi eklemek için adım adım bir kılavuz yazacağız. Bu, herhangi bir harici kitaplık kullanmadan yapılabilir, ancak OAuth'un inceliklerini basitleştirmek için, OAuth sağlayıcılarını entegre etmek için bir kitaplık olan Requests-OAuthlib'i kullanacağız. SSO'yu sıfırdan uygulamakla ilgileniyorsanız, lütfen SSO Girişini Uygulamaya bakın - ham yol .

Bu makalenin sonunda, aşağıdaki sayfalara sahip bir Flask uygulamanız olmalıdır:

• Giriş düğmelerini içeren ana sayfa
• Başarılı bir oturum açtıktan sonra kullanıcının ad, e-posta ve avatar gibi bilgileri görebileceği kullanıcı bilgileri sayfası

Bu eğitimin tüm kodu flask-social-login-example deposunda bulunabilir.

Burada bir demo da mevcuttur. Glitch'teki kodu yeniden karıştırmaktan çekinmeyin.

Adım 1: Bootstrap Flask Uygulaması

flask ve Requests-OAuthlib . Ortamı izole etmek için virtualenv veya pipenv de kullanabilirsiniz.

pip yükleme şişesi request_oauthlib

app.py ve ana sayfada bir oturum açma düğmesi görüntüleyen rotayı oluşturun:

 import flask app = flask.Flask(__name__) @app.route("/") def index(): return """ <a href="/login">Login</a> """ if __name__ == '__main__': app.run(debug=True)

Bu uygulamayı çalıştıralım ve her şeyin iyi çalıştığını doğrulayalım:

 python app.py

http://localhost:5000'i açarken bu sayfayı görmelisiniz. Tam kod step1.py'dedir.

2. Adım: Kimlik Sağlayıcı Kimlik Bilgileri

Şu anda en popülerleri Facebook, Google, GitHub ve Instagram olan yüzlerce (binlerce değilse) kimlik sağlayıcı var. Bu gönderi için, geliştirici dostu olması nedeniyle SimpleLogin seçilmiştir. Yine de aynı kod herhangi bir OAuth2 kimlik sağlayıcısıyla çalışacaktır. (Feragatname: SimpleLogin'in kurucu ortağıyım ve bu da - ahem - onu kullanma kararımda bir faktör olabilir.)

Lütfen SimpleLogin'e gidin ve henüz bir hesabınız yoksa bir hesap oluşturun, ardından Geliştirici sekmesinde yeni bir uygulama oluşturun.

Uygulama ayrıntı sayfasında, lütfen AppID ve AppSecret'inizi kopyalayın ve bunları değişken ortama kaydedin. OAuth terminolojisinde istemci, aslında bir üçüncü taraf uygulaması, yani uygulamanız anlamına gelir. Bu değerleri doğrudan kodun içine koyabiliriz, ancak kimlik bilgilerini ortam değişkenlerine kaydetmek iyi bir uygulamadır. Bu aynı zamanda On İki Faktör'deki üçüncü faktördür.

 export CLIENT_ID={your AppID} export CLIENT_SECRET={your AppSecret}

app.py , client id ve client secret almak için lütfen bu satırları dosyanın üstüne ekleyin.

 import os CLIENT_ID = os.environ.get("CLIENT_ID") CLIENT_SECRET = os.environ.get("CLIENT_SECRET")

Lütfen bir sonraki adımda kullanılacak olan bu OAuth URL'lerini app.py üstüne ekleyin. OAuth uç noktaları sayfasında da kopyalanabilirler.

 AUTHORIZATION_BASE_URL = "https://app.simplelogin.io/oauth2/authorize" TOKEN_URL = "https://app.simplelogin.io/oauth2/token" USERINFO_URL = "https://app.simplelogin.io/oauth2/userinfo"

Şimdi SSL kurma konusunda endişelenmek istemediğimizden, Requests-OAuthlib düz HTTP kullanmanın uygun olduğunu söyleyelim:

 # This allows us to use a plain HTTP callback os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"

Her zamanki gibi, bu adımın kodu step2.py'dedir.

3. Adım: Oturum Açma Yönlendirmesi

Bir kullanıcı oturum açma düğmesine tıkladığında:

1. Kullanıcı, bilgilerini uygulamanızla paylaşmak isteyip istemediğini soran kimlik oturum açma sağlayıcı yetkilendirme sayfasına yönlendirilecektir.
2. Kullanıcı onayının ardından, daha sonra, uygulamanızın daha sonra servis sağlayıcıdan kullanıcı bilgilerini almanıza olanak tanıyan bir access token ile değiş tokuş etmek için kullanacağı URL'deki bir code birlikte uygulamanızdaki bir sayfaya yönlendirilirler.

Bu nedenle iki yola ihtiyacımız var: kullanıcıyı kimlik sağlayıcısına yeniden yönlendiren bir login yolu ve code alan ve access token ile değiş tokuş eden bir callback yolu. Geri arama yolu, kullanıcı bilgilerini görüntülemekten de sorumludur.

 @app.route("/login") def login(): simplelogin = requests_oauthlib.OAuth2Session( CLIENT_ID, redirect_uri="http://localhost:5000/callback" ) authorization_url, _ = simplelogin.authorization_url(AUTHORIZATION_BASE_URL) return flask.redirect(authorization_url) @app.route("/callback") def callback(): simplelogin = requests_oauthlib.OAuth2Session(CLIENT_ID) simplelogin.fetch_token( TOKEN_URL, client_secret=CLIENT_SECRET, authorization_response=flask.request.url ) user_info = simplelogin.get(USERINFO_URL).json() return f""" User information: <br> Name: {user_info["name"]} <br> Email: {user_info["email"]} <br> Avatar <img src="{user_info.get('avatar_url')}"> <br> <a href="/">Home</a> """

Giriş düğmesine tıklamak sizi aşağıdaki akışa getirmelidir. Kodun tamamı GitHub'da step3.py adresinde bulunabilir.

Facebook ile giriş

Facebook, Google ve Twitter oturum açma kurulumu biraz karmaşıktır ve SSL kurmak veya doğru kapsamları seçmek gibi ek adımlar gerektirir. Bunlar bu makalenin kapsamı dışındadır.

Gelişmiş bir kullanıcı arayüzünün yanı sıra, Facebook SDK'nın yeni sürümü yerel düz HTTP'ye izin vermediğinden, Facebook'u entegre etmenin en zor yanı, web uygulamanızı HTTPS'de yerel olarak sunmanın bir yolunu bulmak olabilir. Hızlı bir HTTPS URL'sine sahip olmak için ücretsiz bir araç olan Ngrok'u kullanmanızı öneririm.

1. Adım: Bir Facebook Uygulaması Oluşturun

Lütfen https://developers.facebook.com ve yeni bir uygulama oluşturun:

Ardından bir sonraki ekranda “Facebook Girişini Entegre Et”i seçin:

2. Adım: Facebook OAuth Kimlik Bilgileri

Soldaki “Ayarlar/Temel”e tıklayın ve Uygulama Kimliği ile Uygulama Sırrını kopyalayın. Bunlar aslında OAuth client-id ve client-secret .

client-id ve client-secret güncelleyin.

 export FB_CLIENT_ID={your facebook AppId} export FB_CLIENT_SECRET={your facebook AppSecret}

AUTHORIZATION_BASE_URL ve TOKEN_URL'yi güncelleyin:

 FB_AUTHORIZATION_BASE_URL = "https://www.facebook.com/dialog/oauth" FB_TOKEN_URL = "https://graph.facebook.com/oauth/access_token"

ana sayfa:

 @app.route("/") def index(): return """ <a href="/fb-login">Login with Facebook</a> """

3. Adım: Oturum Açma ve Geri Arama Uç Noktaları

Uygulama ngrok'un arkasında ngrok ngrok http 5000 komutu kullanılarak sunuluyorsa, mevcut URL'yi ngrok URL'sine ayarlamamız gerekir.

 # Your ngrok url, obtained after running "ngrok http 5000" URL = "https://abcdefgh.ngrok.io"

Lütfen url'yi Facebook Giriş/Ayarlar, Geçerli OAuth Yönlendirme URI'leri ayarınıza eklediğinizden emin olun:

Bir kullanıcı e-postasına erişebilmek için, scope içine email eklemeniz gerekir:

 FB_SCOPE = ["email"] @app.route("/fb-login") def login(): facebook = requests_oauthlib.OAuth2Session( FB_CLIENT_ID, redirect_uri=URL + "/fb-callback", scope=FB_SCOPE ) authorization_url, _ = facebook.authorization_url(FB_AUTHORIZATION_BASE_URL) return flask.redirect(authorization_url)

Facebook bir uyumluluk düzeltmesi gerektirdiğinden callback yolu biraz daha karmaşıktır:

 from requests_oauthlib.compliance_fixes import facebook_compliance_fix @app.route("/fb-callback") def callback(): facebook = requests_oauthlib.OAuth2Session( FB_CLIENT_ID, scope=FB_SCOPE, redirect_uri=URL + "/fb-callback" ) # we need to apply a fix for Facebook here facebook = facebook_compliance_fix(facebook) facebook.fetch_token( FB_TOKEN_URL, client_secret=FB_CLIENT_SECRET, authorization_response=flask.request.url, ) # Fetch a protected resource, ie user profile, via Graph API facebook_user_data = facebook.get( "https://graph.facebook.com/me?fields=id,name,email,picture{url}" ).json() email = facebook_user_data["email"] name = facebook_user_data["name"] picture_url = facebook_user_data.get("picture", {}).get("data", {}).get("url") return f""" User information: <br> Name: {name} <br> Email: {email} <br> Avatar <img src="{picture_url}"> <br> <a href="/">Home</a> """

Şimdi Facebook ile Giriş Yap'a tıkladığınızda, tüm akıştan geçebilmelisiniz.

Kodun tamamı facebook.py'de.

Çözüm

Tebrikler—SSO girişini bir Flask uygulamasına başarıyla entegre ettiniz!

Basitlik adına, bu öğretici, siteler arası istek sahteciliği saldırılarına karşı savunmak için önemli olan kapsam ve durum gibi diğer OAuth kavramlarından bahsetmez. Ayrıca muhtemelen kullanıcı bilgilerini bu makalede ele alınmayan bir veritabanında saklamanız gerekecektir.

Uygulamanın aynı zamanda, Let's Encrypt ile bugün oldukça kolay bir şekilde yapılabilen üretimde https üzerinden sunulması gerekiyor.

Mutlu OAuthing!