Python Flask ve MySQL Kullanarak Sıfırdan Bir Web Uygulaması Oluşturmak: Bölüm 2

Turkish (Türkçe) translation by nselcuk (you can also view the original English article)

Bu dizinin önceki bölümünde, Python Flask ve MySQL ile nasıl başlanacağınızı gördük ve uygulamanızın kullanıcı kaydı bölümünü uyguladık Bu yazıda, uygulamanız için oturum açma ve oturumu kapatma işlevlerini uygulayarak bunu bir üst düzeye taşıyacağız.

Başlarken

Önceki eğitimin kaynak kodunun ilk kopyasını GitHub da bulabilirsiniz.

git clone https://github.com/jay3dec/PythonFlaskMySQLApp---Part-1.git

Kaynak kodunu kopyaladıktan sonra, PythonFlaskMySQLApp---Part-1 klasörüne gidin ve serverı başlatın

python app.py

Web browserınızdan http://localhost:5002 adresine gidin, uygulamayı çalışıyor olarak görmelisiniz.

Sign-In Arayüzü Oluşturmak

PythonFlaskMySQLApp---Part-1/templates 'e gidin ve signin.html isimli bir dosya oluşturun. signin.html i açın ve aşağıdaki kodu ekleyin.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Python Flask Bucket List App</title>

   
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
    <link href="../static/css/signup.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.2.js"></script>
   
  </head>

  <body>

    <div class="container">
      <div class="header">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation" ><a href="/">Home</a></li>
            <li role="presentation" class="active"><a href="#">Sign In</a></li>
            <li role="presentation" ><a href="/showSignUp">Sign Up</a></li>
          </ul>
        </nav>
        <h3 class="text-muted">Python Flask App</h3>
      </div>

      <div class="jumbotron">
        <h1>Bucket List App</h1>
        <form class="form-signin" action="/validateLogin" method="post">
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" name="inputEmail" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" name="inputPassword" id="inputPassword" class="form-control" placeholder="Password" required>
        
        <button id="btnSignIn" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>
      </div>

      

      <footer class="footer">
        <p>&copy; Company 2015</p>
      </footer>

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

app.py 'yi açın ve sign-in arayüzü için yeni bir route ekleyin.

@app.route('/showSignin')
def showSignin():
    return render_template('signin.html')

Şimdi, index.html ve signup.html i açın, ve sign-i için iki sayfayada href linkini /showSignin gibi ekleyin. Değişikleri kaydedip, serveri baştan başlatınız.

python app.py

Web browserınızdan http://localhost:5002 adresine gidin ve Sign In linkine tıklayın. sign-in sayfasını görebiliyor olmalısınız.

Sign-In Eklemek

Şimdi, userın giriş yaptığını doğrulayacak bir fonksiyon oluşturmamız gerekir. Sign In e tıklayarak girilen e-mail adresini ve parolayı göndererek doğrulama yapacağız.

Kayıtlı Prosedür Oluşturmak

Kullanıcıyı doğrulamak için, MySQL kayıtlı prosedürüne ihtiyacımız olacaktır. Bunun için MySQL kayıtlı prosedürünü gösterildiği gibi oluşturalım.

DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_validateLogin`(
IN p_username VARCHAR(20)
)
BEGIN
    select * from tbl_user where user_username = p_username;
END$$
DELIMITER ;

Kullanıcı detaylarını username e bağlı olarak MySQL veritabanından sp_validateLogin kullanarak alacağız. Kriptolanmış parolayı elde ettikten sonra, şifreyi kullanıcı tarafından girilen şifreyle doğrulayacağız.

Kullancı Doğrulama Methodu

Kullanıcı form doldurduğunda çağıracağımız, kullanıcıyı doğrulamak için çalışacak bir method oluşturunuz:

@app.route('/validateLogin',methods=['POST'])
def validateLogin():
    try:
        _username = request.form['inputEmail']
        _password = request.form['inputPassword']

    except Exception as e:
        return render_template('error.html',error = str(e))

Yukardaki kodda görüldüğü gibi, gönderilen email adresini ve parolayı _username ve _password den okuduk Şimdi _username parametresiyle sp_validateLogin prosedürünü çağıracağız. Bunun için MySQL bağlantısının içerisinde validateLogin methodunu oluşturalım:

con = mysql.connect()

Bağlantı kurulduktan sonra, con bağlantısı kullanarak cursor oluşturun.

cursor = con.cursor()

cursor kullanarak, MySQL kayıtlı prosedürünü aşağıdaki gibi çağırın:

cursor.callproc('sp_validateLogin',(_username,))

Kayıtları cursor dan gösterildiği gibi alın:

data = cursor.fetchall()

Eğer veride kayıtlar varsa, alınan parolayı, kullanıcın girdiği parolayla eşleştireceğiz.

if len(data) > 0:
    if check_password_hash(str(data[0][3]),_password):
        return redirect('/userHome')
    else:
        return render_template('error.html',error = 'Wrong Email address or Password.')
else:
    return render_template('error.html',error = 'Wrong Email address or Password.')

Yukarıdaki kodda görüldüğü gibi, kullanıcı tarafından girilen parolayla sistemde kayıtlı parolayı eşleştirmek için check_password_hash methodunu kullandık. Herşey tamamsa, kullanıcıyı userHome.html 'e yönlendirelim. Eğer herhangi bir hata olursa, hata mesajı olarak error.html'i göstereceğiz.

validateLogin kodunun tamamı aşağıdadır.

@app.route('/validateLogin',methods=['POST'])
def validateLogin():
    try:
        _username = request.form['inputEmail']
        _password = request.form['inputPassword']



        # connect to mysql

        con = mysql.connect()
        cursor = con.cursor()
        cursor.callproc('sp_validateLogin',(_username,))
        data = cursor.fetchall()




        if len(data) > 0:
            if check_password_hash(str(data[0][3]),_password):
                session['user'] = data[0][0]
                return redirect('/userHome')
            else:
                return render_template('error.html',error = 'Wrong Email address or Password.')
        else:
            return render_template('error.html',error = 'Wrong Email address or Password.')


    except Exception as e:
        return render_template('error.html',error = str(e))
    finally:
        cursor.close()
        con.close()

templates klasörünün içine userHome.hml isminde bir sayfa oluşturalım ve aşağıdaki kodu ekleyelim:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Python Flask Bucket List App</title>


    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
    <link href="../static/css/signup.css" rel="stylesheet">


</head>

<body>

    <div class="container">
        <div class="header">
            <nav>
                <ul class="nav nav-pills pull-right">
                    <li role="presentation" class="active"><a href="/logout">Logout</a>
                    </li>
                </ul>
            </nav>
            <h3 class="text-muted">Python Flask App</h3>
        </div>

        <div class="jumbotron">
            <h1>Welcome Home !!</h1>

        </div>


        <footer class="footer">
            <p>&copy; Company 2015</p>
        </footer>

    </div>
</body>

</html>

Aynı zamanda templates in içine error.html isminde bir sayfa daha oluşturalım ve aşağıdaki kodu ekleyelim:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Unauthorized Access:: Python Flask Bucket List App</title>


    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">


</head>

<body>

    <div class="container">
        <div class="header">
            <nav>
                <ul class="nav nav-pills pull-right">
                    <li role="presentation" class="active"><a href="#">Home</a>
                    </li>
                    <li role="presentation"><a href="/showSignin">Sign In</a>
                    </li>
                    <li role="presentation"><a href="/showSignUp">Sign Up</a>
                    </li>
                </ul>
            </nav>
            <h3 class="text-muted">Python Flask App</h3>
        </div>

        <div class="jumbotron">
            <h1>{{error}}</h1>
        </div>



        <footer class="footer">
            <p>&copy; Company 2015</p>
        </footer>

    </div>
</body>

</html>

error.html in içerisinde gösterildiği gibi bir eleman bulunur:

<h1>{{error}}</h1>

Değişkenin değeri render_template üzerinden geçilebilir ve dinamik olarak değiştirilebilir.

Başarılı girişlerde kullanıcıyı ana sayfaya yönlendiririz, bunun için /userHome olarak gösterildiği gibi bir route oluşturalım:

@app.route('/userHome')
def userHome():
    return render_template('userHome.html')

Bütün değişiklikleri kaydedip, serverı baştan başlatalım. Ana sayfadaki Sign In linkine tıklayalım ve geçerli bir email adresi ve parolayla giriş yapmayı deneyelim. Kullanıcı başarılı bir şekilde doğrulandıysa, aşağıda gösterildiği gibi bir sayfaya sahip olmalıyız:

Hatalı kullanıcı doğrulama esnasında, kullanıcı aşağıda gösterildiği gibi bir hata sayfasına yönlendirilecektir:

Error message on unsuccessful user sign in

Biz burada hatayı göstermek için ayrı bir sayfa kullandık. Eğer hata mesajını aynı sayfada göstermek isterseniz bu da uygundur.

Kullanıcı Ana Sayfasına Yetkisiz Erişimi Önlemek

Başarılı bir kullanıcı doğrulamasında, bir kullanıcı, kullanıcı ana sayfasına yönlendirilir. Ancak şu anda yetkisiz bir kullanıcı bile ana sayfayı URL'ye göz atarak görüntüleyebilir http://localhost:5002/userHome.

Yetkisiz kullanıcı erişimini kısıtlamak için, başarılı kullanıcı girişi üzerine ayarlayacağımız bir oturum değişkenini kontrol edeceğiz. Bunun için session u flaskdan import edelim:

from flask import session

Ayrıca oturum için gizli bir anahtar ayarlamamız gerekir Yani app.py dosyasında, uygulamanın başlatılmasından sonra gizli anahtarı gösterildiği gibi ayarlayın.

app.secret_key = 'why would I tell you my secret key?'

Şimdi, validateLogin methodunda, başarılı oturum açma işleminde kullanıcıyı / userHome'a yönlendirmeden önce session değişkenini gösterildiği gibi ayarlayın:

session['user'] = data[0][0]

Sonra, userHome yönteminde, userHome.html dosyasını oluşturmadan önce session değişkeninin olup olmadığını kontrol edin. Oturum değişkeni bulunamazsa, hata sayfasına yönlendirin.

@app.route('/userHome')
def userHome():
    if session.get('user'):
        return render_template('userHome.html')
    else:
        return render_template('error.html',error = 'Unauthorized Access')

Tüm değişiklikleri kaydedin ve sunucuyu yeniden başlatın. Oturum açmadan, http://localhost:5002/userHome adresine gidin ve giriş yapmadığınızdan hata sayfasına yönlendirilmelisiniz.

Çıkış Yapma

Oturum kapatma işlevinin uygulanması en basit olandır. Tek yapmamız gereken session değişkeni user'ın null olmasına ve kullanıcının ana sayfaya yönlendirilmesidir.

app.py dosyasında, gösterildiği gibi logout için yeni bir route ve method oluşturun:

@app.route('/logout')
def logout():
    session.pop('user',None)
    return redirect('/')

Oturum kapatma düğmesi için href'i zaten /logout olarak ayarladık. Bu nedenle tüm değişiklikleri kaydedin ve sunucuyu yeniden başlatın. Giriş sayfasından Sign In'i tıklayın ve geçerli bir e-posta adresi ve şifre kullanarak giriş yapmayı deneyin. Oturum açtıktan sonra, kullanıcı anasayfasında Logout düğmesine tıklayınca uygulamadan başarıyla çıkış yapmalısınız.

Sonuç

Eğitimin bu bölümünde, kullanıcı oturum açmayı ve oturum kapatma işlevini nasıl uygulayacağımızı gördük. Ayrıca uygulama sayfalarına izinsiz erişimi kısıtlamayı da gördük. Bu eğitimin sonraki bölümünde, oturum açmış bir kullanıcının, uygulamaya bir blog yazısı ekleyip düzenleyeceği işlevselliği uygulayacağız.

Bu eğitimin kaynak kodu GitHub'da mevcuttur.

Aşağıdaki yorumlarda düşüncelerinizi bize bildirin!